Adding a DataView

A plain array works well for static data. For sorting, filtering, paging, or grouping, use a SlickDataView. It sits between your data and the grid.

Wire up a DataView

import { SlickGrid, SlickDataView } from 'slickgrid';

const dataView = new SlickDataView();
dataView.setItems(data); // each item needs a unique id

const grid = new SlickGrid('#myGrid', dataView, columns, options);

// keep the grid in sync with the data
dataView.onRowCountChanged.subscribe(() => {
  grid.updateRowCount();
  grid.render();
});
dataView.onRowsChanged.subscribe((e, args) => {
  grid.invalidateRows(args.rows);
  grid.render();
});

The grid reads rows from the DataView. When the DataView changes, it tells the grid to update.

Filter and sort through the DataView

dataView.setFilter((item) => item.percentComplete > 50);

The grid shows only the rows that pass the filter. Sorting and paging work the same way, through DataView methods.

Learn more

• Full guide: DataView
• Reference: DataView methods, options, and events