angularjs ui grid columns and menu options issue

Question

I am using angularjs ui grid in my application with menu options. The Total column is not appearing in the grid and also in the menu options under columns none of the grid columns are visible. Can any one point out where I am going wrong? plunker

The following are my column defs and data :

 "columnDefs": [
    {
      "width": 530,
      "field": "Date",
      "enableHiding": false,
      "name": "Date",
      "type": "string"
    },
    {
      "width": 530,
      "field": "Total",
      "enableHiding": false,
      "name": "Total",
      "type": "string"
    }
  ]

and I have data :

"data": [
    {
      "Date": "2016-06-07",
      "Total": "2"
    },
    {
      "Date": "2016-06-08",
      "Total": "11"
    },
    {
      "Date": "2016-06-09",
      "Total": "14"
    },
    {
      "Date": "2016-06-10",
      "Total": "9"
    },
    {
      "Date": "2016-06-11",
      "Total": "4"
    },
    {
      "Date": "2016-06-13",
      "Total": "3"
    },
    {
      "Date": "2016-06-14",
      "Total": "2"
    },
    {
      "Date": "2016-06-15",
      "Total": "3"
    },
    {
      "Date": "2016-06-16",
      "Total": "4"
    }
  ]

Answer 1

I think your column is just too wide. Can you try:

"columnDefs": [
 {
   "width": 100,
   "field": "Date",
   "enableHiding": false,
   "name": "Date",
   "type": "string"
 },
 {
   "width": 100,
   "field": "Total",
   "enableHiding": false,
   "name": "Total",
   "type": "string"
 }
]

if you want to be able to hide the columns you should specify: "enableHiding": true

Plunker: http://plnkr.co/edit/mpIdk8qButiAckBeLatF?p=preview