Syncfusion AI Assistant

How can I help you?

Module in JavaScript Grid control

22 May 202611 minutes to read

The available Grid modules are:

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

Enabling basic features

The following example demonstrates how to enable basic features such as Paging, Sorting, Filtering, Toolbar and Editing in the grid component.

let grid= new ej.grids.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 bootstrap5.3 theme -->
        <link href="https://cdn.syncfusion.com/ej2/33.2.3/bootstrap5.3.css" rel="stylesheet" type="text/css" />
        <!-- Essential JS 2 all script -->
        <script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="container">
            <div id="Grid"></div>        
        </div>

        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>
var data = [
    { 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 },
];