Backgridjs

Backgrid comes with a default header section, a header row and a header cell implementation that renders a sorter if the column is sortable. The text inside the header cells comes from the column definitions. If a label is not defined in a column definition, its name is used as the label instead.

The default header cell implementation supports sorting in ascending or descending order, using the column's natural ordering. The sorter will also allow cycling back to the table's default sorting order, which is sorting by the model client IDs.

Customizing the Header

If you want to change the default sort behavior to only toggle between sorting in ascending or descending order, you do this by passing sortType: "toggle" as part of your column definition.

          var grid = new Backgrid.Grid({
            columns: [{
              name: "id",
              label: "ID"
            },{
              name: "name",
              label: "Name"
            },{
              name: "age",
              label: "Age",
              sortType: "toggle"
            }]
          });

Advanced Usage

You are allow to use a different header cell class on columns. There is no restriction on what a header cell must do. In fact, any Backbone.View class can be used. However, if you wish to modify how the sorter behaves, you must implement the sorting protocol. See the JSDoc for details.

          var SelectAllHeaderCell = Backgrid.HeaderCell.extend({
            // Implement your "select all" logic here
          });

          var grid = new Backgrid.Grid({

            columns: [{
              name: "selected",
              label: "",
              sortable: false,
              cell: "boolean",
              headerCell: SelectAllHeaderCell
            }],

            collection: col
          });

Header

Events

Understanding the Default Header

Customizing the Header