Backgrid.js

As described in the examples, a basic grid needs only a collection and a list of column definitions.

To display the grid, you will need to render the grid and insert the grid's root element to the DOM in order to display it.

          var idGrid = new Backgrid.Grid({
            columns: [{
              name: "id",
              label: "ID"
              editable: false
            }],
            collection: myIds
          });

          $(".backgrid-container").append(idGrid.render().el);

Manipulating Columns and Rows

It is very easy to insert or remove a row in a grid, you just have to pass a model reference to Grid#insertRow or Grid#removeRow.

          // Inserting rows
          grid.insertRow([{
            // model 1
          }, {
            // model 2 ... etc
          }]);

          // Remove rows
          var musketeers = grid.collection.where({ job: "Musketeer" });
          grid.removeRow(musketeers);

Inserting and remove columns is similarly easy. You just need to pass some definitions to Grid#insertColumn or Grid#removeColumn.

          // Insert a few new columns. Make sure your model has these attributes though.
          grid.insertColumn([{
            name: "lastUpdated",
            label: "Last Updated",
            cell: "datetime",
            editable: false
          }, {
            name: "lastModifiedBy",
            label: "Last Modified By",
            cell: "string"
          }]);

          // Remove a column
          var idCol = grid.columns.where({ name: "id" });
          grid.removeColumn(idCol);

          // Since 0.3.0, you can listen to the `backgrid:next` to see if a cell
          // movement was out of bound, if yes, you can insert a new row.

          // A movement is only out of bound when the user was trying to go beyond
          // the last row.
          grid.collection.listenTo("backgrid:next", function (i, j, outOfBound) {
            // this will add a row using the collection's model too
            if (outOfBound) grid.collection.add({});
          });

Sorting Programmatically

Sometimes, you might want to set the grid to a sorted state before displaying it, you can do that by calling Grid#sort() with a column name and a direction:

          // You must render first to have the grid construct all the DOM elements
          // before you can set the sorting state
          grid.render().sort("lastUpdated", "descending");

          // now you can display it
          $("#grid-container").append(grid.el);

Sometime you may want to render a grid in a sorted state, probably based on a previously saved sorting state. You can supply a direction to a column definition and a sorted collection to a grid's constructor before you render it:

          territories.comparator = "name";
          territories.sort();

          var grid = new Backgrid.Grid({

            columns: [{
              name: "name",
              cell: "string",
              direction: "ascending"
            }],

            collection: territories
          );

          // The grid will be rendered in a sorted state as soon as you call render
          $(".backgrid-container").append(grid.render().el);

Empty Message

If you want to display a message when the grid is empty. You can pass anemptyText string to the options object to the Grid's constructor.

          var grid = new Backgrid.Grid({
            columns: myColumns,
            collection: myCollection,
            emptyText: "No Data"
          });

Grid

Events

How to Use the Grid

Manipulating Columns and Rows

Sorting Programmatically

Empty Message