SlickGrid

Appearance

Your first grid ​

Follow four steps. The result is a working grid with 500 rows.

1. Add a container ​

Give the container a width and height. SlickGrid fills it.

html
<div id="myGrid" style="width:600px;height:500px;"></div>

2. Define columns ​

Each column needs an id and a field. The field names the data property to show.

ts
const columns = [
  { id: 'title', name: 'Title', field: 'title' },
  { id: 'duration', name: 'Duration', field: 'duration' },
  { id: 'pct', name: '% Complete', field: 'percentComplete', width: 90 },
];

3. Provide data ​

Data is an array of plain objects.

ts
const data = [];
for (let i = 0; i < 500; i++) {
  data.push({
    title: `Task ${i}`,
    duration: '5 days',
    percentComplete: Math.round(Math.random() * 100),
  });
}

4. Create the grid ​

Set a few options, then create the grid. The first argument is a CSS selector or an element.

ts
import { SlickGrid } from 'slickgrid';
import 'slickgrid/dist/styles/css/slick-alpine-theme.css';

const options = { enableCellNavigation: true, enableColumnReorder: false };
const grid = new SlickGrid('#myGrid', data, columns, options);

That is a working grid.

Typing your rows (TypeScript) ​

Pass your row type as a generic. The grid then checks your columns and data.

ts
interface Task { title: string; duration: string; percentComplete: number; }
const grid = new SlickGrid<Task>('#myGrid', data, columns, options);

See TypeScript usage.

See also ​