How to use backgrid - 10 common examples

onShow: function () {
    var gridView = new Backgrid.Grid({
      columns: columns,
      collection: this.collection,
      className: 'backgrid backgrid-striped'
    });
    var paginatorView = new Backgrid.Extension.Paginator({
      collection: this.collection
    });
    // TODO attach filter state to collection, and restore filter values
    // in the interface on creating the view
    var filterView = new FilterView();

    this.listenTo(filterView, 'search', function (filter) {
      this.collection.state.currentPage = 1;
      _.extend(this.collection.queryParams, filter);
      this.collection.fetch();
    });

constructor(viewOptions?: Backbone.ViewOptions) {
	super(viewOptions);
	this.testCollection = new TestCollection();
	this.gridView = new Backgrid.Grid({
            columns: [new Backgrid.Column({name: "FirstName", cell: "string", label: "First Name"}), 
		      new Backgrid.Column({name: "LastName", cell: "string", label: "Last Name"}),
		      new Backgrid.Column({name: "EMail", cell: "string", label: "E-Mail"})],
		      collection:this.testCollection,
		     });
					  
	
    }

initialize: function() {
    this.grid = new Backgrid.Grid({
      row: ClickableRow,
      columns: this.options.columns,
      collection: this.options.collection
    });
    $(this.$el).append(this.grid.render().$el);
    this.paginator = new Backgrid.Extension.Paginator({
  		columns: this.options.columns,
  		collection: this.options.collection
	  });
	  $(this.$el).append(this.paginator.render().$el);
    this.createContextPanel();
    this.contextMenu.reset(this.panel);
  },
  afterRender: function() {

initialize: function() {
    $('#' + this.icon).addClass('active');
    this.grid = new Backgrid.Grid({
      row: PersonRow,
      columns: this.options.columns,
      collection: this.options.collection
    });
    $(this.$el).append(this.grid.render().$el);
    this.paginator = new Backgrid.Extension.Paginator({
      columns: this.options.columns,
      collection: this.options.collection
    });
    $(this.$el).append(this.paginator.render().$el);
  },
  filters: function() {

initialize: function() {
    $('#' + this.icon).addClass('active');
    this.grid = new Backgrid.Grid({
      row: DefinitionRow,
      columns: this.options.columns,
      collection: this.options.collection
    });
    $(this.$el).append(this.grid.render().$el);
    this.paginator = new Backgrid.Extension.Paginator({
      columns: this.options.columns,
      collection: this.options.collection
    });
    $(this.$el).append(this.paginator.render().$el);
  },
  filters: function() {

initialize: function() {
    this.grid = new Backgrid.Grid({
      row: ClickableRow,
      columns: this.options.columns,
      collection: this.options.collection
    });
    $(this.$el).append(this.grid.render().$el);
    this.paginator = new Backgrid.Extension.Paginator({
  		columns: this.options.columns,
  		collection: this.options.collection
	  });
	  $(this.$el).append(this.paginator.render().$el);
    this.createContextPanel();
    this.contextMenu.reset(this.panel);
  },
  afterRender: function() {

initialize: function() {
    $('#' + this.icon).addClass('active');
    this.grid = new Backgrid.Grid({
      row: LocationRow,
      columns: this.options.columns,
      collection: this.options.collection
    });
    $(this.$el).append(this.grid.render().$el);
    this.paginator = new Backgrid.Extension.Paginator({
      columns: this.options.columns,
      collection: this.options.collection
    });
    $(this.$el).append(this.paginator.render().$el);
  },
  filters: function() {

_showTable : function(collection) {

        this.history.show(new Backgrid.Grid({
            columns    : this.columns,
            collection : collection,
            className  : 'table table-hover'
        }));

        this.pager.show(new GridPager({
            columns    : this.columns,
            collection : collection
        }));
    },

_showTasks : function() {
        this.tasks.show(new Backgrid.Grid({
            columns    : this.columns,
            collection : this.taskCollection,
            className  : 'table table-hover'
        }));
    }
});

_showTable : function() {
        if (this.collection.any()) {
            this.historyTable.show(new Backgrid.Grid({
                collection : this.collection,
                columns    : this.columns,
                className  : 'table table-hover table-condensed'
            }));
        }

        else {
            this.historyTable.show(new NoHistoryView());
        }
    }
});