TypeScript Examples

Basic Example

Below is a very basic example when using TypeScript

1. Let's first create a div element that will hold our grid

For the grid to work, it has to have a defined height OR you could also use the autoHeight grid option

note: be aware that the autoHeight disables the Virtual Scroll which can be a problem with large dataset, you typically want to use this option with small dataset only

 <div id="myGrid" class="slick-container alpine-theme" style="width:100%; height:500px;"></div>

2. Second, let's create and initialize the grid

Create the grid and reference the div (#myGrid in our use case) and again make sure that your grid has a defined height (by either a height on your div OR use the autoHeight grid option)

// example.ts (TypeScript file)
import { Column, GridOption, SlickDataView, SlickGrid } from 'slickgrid';

let data: any[] = [];
let columns: Column[] = [{ id: 'firstName', name: 'First Name', field: 'firstName' }, /* ... */ ];
let options: GridOption = { enableCellNavigation: true, /* ... */ };

let grid = new SlickGrid('#myGrid', data, columns, options);

// or similarly for DataView
let dataView = new SlickDataView({ inlineFilter: true });
let grid = new SlickGrid('#myGrid', dataView, columns, options);

Note since SortableJS is a hard dependency, you will also need to make sure that you import it and you assign it to the global window object (unless you load it through <script>, if so then there's nothing to do). Another way would to be to configure it in your WebPack or Vite config to make it available globally.

npm install sortablejs @types/sortablejs

import Sortable from 'sortablejs';
(window as any).Sortable = Sortable;

Basic Example with data interface

You could also make it better by providing data types via TypeScript Generics on the SlickGrid class, so that any SlickGrid/SlickDataView will now be typed when retrieving any data context, i.e. grid.getDataItem(0) will be inferred as a User type

// example.ts (TypeScript file)
import { Column, GridOption, SlickDataView, SlickGrid } from 'slickgrid';

interface User {
  id: string;
  firstName: string;
  lastName: string;
  age?: number;
}
let data: User[] = [];
let columns: Column[] = [{ id: 'firstName', name: 'First Name', field: 'firstName' }, /* ... */ ];
let options: GridOption = { enableCellNavigation: true, /* ... */ };

let grid = new SlickGrid<User>('#myGrid', data, columns, options);
const item = grid.getDataItem(0); // inferred as a User type

// or similarly when using a DataView
let dataView = new SlickDataView<User>({ inlineFilter: true });
let grid = new SlickGrid<User>('#myGrid', dataView, columns, options);
const item = dataView.getItemByIdx(0); // inferred as a User type

Most exports start with the `Slick` prefix with some exceptions

All core, controls and plugins files are exported with the Slick prefix (i.e. SlickGrid, SlickDataView, SlickColumnPicker, ...) with some exceptions (Aggregators, Editors, Formatters and all enums like ColAutosizeMode, RowSelectionMode, ...)

For example

import {
  // all Grouping stuffs are without the `Slick` prefix
  Aggregators,
  Editors,
  Formatters,

  // all enums/types are also without the `Slick` prefix
  ColAutosizeMode, 
  RowSelectionMode,
  Utils,

  // everything else... that is all core, controls & plugins starts with `Slick` prefix
  SlickGlobalEditorLock,
  SlickRowSelectionModel,
  SlickColumnPicker,
  SlickDataView,
  SlickGridPager,
  SlickGrid,
} from 'slickgrid';

TypeScript Extendable

Since we now use TypeScript, we can also get extra features for free, because we now have Types (interfaces, enums, types, ...), Generics and it's even easily extendable as shown below.

SlickGrid & SlickDataView Generics

We added optional TS Generics to provide item data context interface on the SlickGrid and/or SlickDataView so that you can call any methods from them and automatically get the associated item interface types for them.

import { SlickGrid, SlickDataView } from 'slickgrid';

interface User {
  firstName: string;
  lastName: string;
  age: number;
}
// Generics on SlickGrid
const grid = new SlickGrid<User>('#myGrid', data, columns, options);
const item = grid.getDataItem(0); // item will be User TS type

// or Generics on SlickDataView
const dataView = new SlickDataView<User>();
const grid = new SlickGrid('#myGrid', dataView, columns, options);
const item = dataView.getItemByIdx(0); // item will be User TS type

The SlickGrid class actually has 3 optional Generics, but you will rarely use the last 2. The 1st Generic is the item type (as shown above), the 2nd is if you want to extend the Column interface and finally the 3rd and last Generic is if you want to extend the GridOption interface (these extra Generics were mainly added for Slickgrid-Universal since that library also has extra Column & GridOption properties)

Class `extends`

Since we opted to use protected (instead of private) across all our TypeScript code, it makes it easy to extends any of these TS classes whenever you wish to customize or add extra methods on any of the SlickGrid classes (not just core files but also Controls and Plugins as well).

// for example let's extend Slick DataView
import { SlickDataView } from 'slickgrid';

class CustomSlickDataView  extends SlickDataView {
  // for example let's add a custom event on the destroy method
  onDestroy = new SlickEvent();

  constructor() {
    super();
  }

  destroy() {
    super.destroy();
    this.onDestroy.notify();
  }
}

// use our new extended DataView
const dv = new CustomSlickDataView();
dv.onDestroy.subscribe(() => console.log('DataView was destroyed'));