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);

Basic Example with data interface

or even better by providing an interface and add types to your data

// 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 grouped stuff are without `Slick` prefix
  Aggregators,
  Editors,
  Formatters,

  // all enums and types are also without `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 now provide extra features for free, we now have Types (interfaces, enums, types, ...), Generics and it's also 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 type 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'));