Modules in TypeScript Grid control

22 May 202610 minutes to read

Syncfusion TypeScript Grid modules help optimize your application’s bundle size by including only the features you need. To enable a specific Grid feature, import and inject the corresponding Feature Module into your Grid configuration.

The available Grid modules are:

Feature Module Description
Page Page Inject this module to use paging feature.
Sort Sort Inject this module to use sorting feature.
Filter Filter Inject this module to use filtering feature.
Group Group Inject this module to use grouping feature.
LazyLoadGroup LazyLoadGroup Inject this module to use lazy load grouping feature.
Edit Edit Inject this module to use editing feature.
Aggregate Aggregate Inject this module to use aggregate feature.
ColumnChooser ColumnChooser Inject this module to use column chooser feature.
ColumnMenu ColumnMenu Inject this module to use column menu feature.
CommandColumn CommandColumn Inject this module to use command column feature.
ContextMenu ContextMenu Inject this module to use context menu feature.
DetailRow DetailRow Inject this module to use detail template feature.
ForeignKey ForeignKey Inject this module to use foreign key feature.
Freeze Freeze Inject this module to use frozen rows and columns feature.
Resize Resize Inject this module to use resize feature.
Reorder Reorder Inject this module to use reorder feature.
RowDD RowDD Inject this module to use row drag and drop feature.
Search Search Inject this module to use search feature and this is a default injected module.
Selection Selection Inject this module to use selection feature and this is a default injected module.
VirtualScroll VirtualScroll Inject this module to use virtual scrolling feature.
InfiniteScroll InfiniteScroll Inject this module to use infinite scrolling feature.
Toolbar Toolbar Inject this module to use toolbar feature.
ExcelExport ExcelExport Inject this module to use excel export feature.
PdfExport PdfExport Inject this module to use PDF export feature.

Enabling basic features

The following example demonstrates how to enable basic features such as Paging, Sorting, Filtering, Toolbar and Editing by importing required modules from @syncfusion/ej2-grids and injecting them into the grid component.

import { Grid, Page, Sort, Filter, Toolbar, Edit } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';

Grid.Inject(Page, Sort, Filter, Toolbar, Edit);

let grid: Grid = new Grid({
    dataSource: data,
    allowPaging: true,
    pageSettings: { pageSize: 6 },
    allowSorting: true,
    allowFiltering: true,
    filterSettings: { type: 'Checkbox' },
    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
    editSettings:{ allowEditing: true, allowAdding: true, allowDeleting: true },
    columns: [
        { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right', type: 'number', isPrimaryKey: true },
        { field: 'CustomerName', headerText: 'Customer Name', width: 140, type: 'string' },
        { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' },
        { field: 'ShipCountry', headerText: 'Ship Country', width: 140, type: 'string' },
        { field: 'Freight', headerText: 'Freight', width: 120, textAlign: 'Right', format: 'C' },
    ]
});

grid.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <!-- Essential JS 2 fluent2 theme -->
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/fluent2.css" rel="stylesheet" type="text/css" />
    <!-- Essential JS 2 all script -->
    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Grid'></div>
    </div>
</body>
</html>
export let data: Object[] = [
    { OrderID: 10248, CustomerName: 'Ana Trujillo', OrderDate: new Date(2025, 0, 12), ShipCountry: 'France', Freight: 32.38 },
    { OrderID: 10249, CustomerName: 'Martin Sommer', OrderDate: new Date(2025, 0, 15), ShipCountry: 'Germany', Freight: 11.61 },
    { OrderID: 10250, CustomerName: 'Thomas Hardy', OrderDate: new Date(2025, 1, 5), ShipCountry: 'Brazil', Freight: 65.83 },
    { OrderID: 10251, CustomerName: 'Elizabeth Lincoln', OrderDate: new Date(2025, 1, 18), ShipCountry: 'France', Freight: 41.34 },
    { OrderID: 10252, CustomerName: 'Victoria Ashworth', OrderDate: new Date(2025, 2, 10), ShipCountry: 'Belgium', Freight: 51.30 },
    { OrderID: 10253, CustomerName: 'Martine Rance', OrderDate: new Date(2025, 2, 22), ShipCountry: 'Brazil', Freight: 58.17 },
    { OrderID: 10254, CustomerName: 'John Smith', OrderDate: new Date(2025, 3, 3), ShipCountry: 'USA', Freight: 23.45 },
    { OrderID: 10255, CustomerName: 'Emily Johnson', OrderDate: new Date(2025, 3, 15), ShipCountry: 'Canada', Freight: 45.67 },
    { OrderID: 10256, CustomerName: 'Michael Brown', OrderDate: new Date(2025, 4, 7), ShipCountry: 'UK', Freight: 33.90 },
    { OrderID: 10257, CustomerName: 'Sophia Davis', OrderDate: new Date(2025, 4, 19), ShipCountry: 'Australia', Freight: 29.75 },
    { OrderID: 10258, CustomerName: 'David Wilson', OrderDate: new Date(2025, 5, 2), ShipCountry: 'Germany', Freight: 62.10 },
    { OrderID: 10259, CustomerName: 'Olivia Martinez', OrderDate: new Date(2025, 5, 18), ShipCountry: 'Spain', Freight: 37.50 },
    { OrderID: 10260, CustomerName: 'James Anderson', OrderDate: new Date(2025, 6, 5), ShipCountry: 'Italy', Freight: 48.25 },
    { OrderID: 10261, CustomerName: 'Ava Thomas', OrderDate: new Date(2025, 6, 21), ShipCountry: 'Netherlands', Freight: 27.80 },
    { OrderID: 10262, CustomerName: 'William Taylor', OrderDate: new Date(2025, 7, 9), ShipCountry: 'Sweden', Freight: 55.60 },
    { OrderID: 10263, CustomerName: 'Mia Harris', OrderDate: new Date(2025, 7, 25), ShipCountry: 'Norway', Freight: 21.40 },
    { OrderID: 10264, CustomerName: 'Daniel Clark', OrderDate: new Date(2025, 8, 6), ShipCountry: 'Switzerland', Freight: 49.90 },
    { OrderID: 10265, CustomerName: 'Charlotte Lewis', OrderDate: new Date(2025, 8, 17), ShipCountry: 'Austria', Freight: 34.20 },
    { OrderID: 10266, CustomerName: 'Matthew Hall', OrderDate: new Date(2025, 9, 4), ShipCountry: 'Belgium', Freight: 44.75 },
    { OrderID: 10267, CustomerName: 'Amelia Allen', OrderDate: new Date(2025, 9, 20), ShipCountry: 'Denmark', Freight: 28.60 },
    { OrderID: 10268, CustomerName: 'Christopher Young', OrderDate: new Date(2025, 10, 3), ShipCountry: 'Finland', Freight: 39.85 },
    { OrderID: 10269, CustomerName: 'Harper King', OrderDate: new Date(2025, 10, 14), ShipCountry: 'Ireland', Freight: 36.40 },
    { OrderID: 10270, CustomerName: 'Joshua Wright', OrderDate: new Date(2025, 10, 26), ShipCountry: 'New Zealand', Freight: 52.90 },
    { OrderID: 10271, CustomerName: 'Evelyn Scott', OrderDate: new Date(2025, 11, 5), ShipCountry: 'Japan', Freight: 61.75 },
];