How to hide backgrid column? - backgrid

Question

Hi friends. I'm using backgrid in my project. I want to hide Id column from backgrid. Here is my code.
var columns = [
{ name: "id", label: "Id", cell: "integer", editable: false },
{ name: "payment_date", label: "Payment Date", cell: "date" ,editable: false },
{ name: "number_of_task", label: "Total Task", cell: "integer" ,editable: false },
{ name: "amount", label: "Amount", cell: "integer" ,editable: false }
];

Answer 1

add a renderable: false attribute. See renderable here http://wyuenho.github.io/backgrid/api/index.html#!/api/Backgrid.Column

Answer 2

Simply remove the column definition. You don't need a column definition for each addribute in your data; you only need the column definition of attributes you want visible in the table.
var columns = [
{ name: "payment_date", label: "Payment Date", cell: "date" ,editable: false },
{ name: "number_of_task", label: "Total Task", cell: "integer" ,editable: false },
{ name: "amount", label: "Amount", cell: "integer" ,editable: false }];

Answer 3

The attribute renderable:false didn't work for me hence used below as workaround
var HideCell = Backgrid.HideCell = Backgrid.Cell.extend({
/** #property */
className: "hide-cell",
initialize: function () {
Backgrid.Cell.prototype.initialize.apply(this, arguments);
},
render: function () {
this.$el.hide();
return this;
}
});
use in column as cell "hide"
var columns = [
{ name: "id", label: "Id", cell: HideCell, editable: false }
];