Syncfusion AI Assistant

How can I help you?

Modules in React Grid component

18 May 202621 minutes to read

Syncfusion React 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 Feature Modules include:

Feature Module Description
Paging Page Inject this module to use paging feature.
Sorting Sort Inject this module to use sorting feature.
Filtering Filter Inject this module to use filtering feature.
Grouping Group Inject this module to use grouping feature.
Lazy Load Grouping LazyLoadGroup Inject this module to use lazy load grouping feature.
Editing Edit Inject this module to use editing feature.
Aggregates Aggregate Inject this module to use aggregate feature.
Column Chooser ColumnChooser Inject this module to use column chooser feature.
Column Menu ColumnMenu Inject this module to use column menu feature.
Command Column CommandColumn Inject this module to use command column feature.
Context Menu ContextMenu Inject this module to use context menu feature.
Detail Row DetailRow Inject this module to use detail template feature.
Foreign Key ForeignKey Inject this module to use foreign key feature.
Resize Resize Inject this module to use resize feature.
Reordering Reorder Inject this module to use reorder feature.
Row Drag and Drop RowDD Inject this module to use row drag and drop feature.
Virtual Scrolling VirtualScroll Inject this module to use virtual scrolling feature.
Infinite Scrolling InfiniteScroll Inject this module to use infinite scrolling feature.
Toolbar Toolbar Inject this module to use toolbar feature.
Excel Export ExcelExport Inject this module to use excel export feature.
PDF Export 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-react-grids and injecting them into the grid component.

// Import the required grid modules from the grid package.
import { ColumnDirective, ColumnsDirective, Filter, GridComponent, Inject, Page, Sort, Edit, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
// Import Grid data from external file.
import { data } from './datasource';

function App() {
    const pageSettings = { pageSize: 6 };
    const filterSettings = { type: 'CheckBox' };
    const editOptions = { allowEditing: true, allowAdding: true, allowDeleting: true };
    const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    const orderIDRules = { required: true, number: true };
    const customerNameRules = { required: true };
    return <div>
        <GridComponent dataSource={data} allowPaging={true} pageSettings={pageSettings} allowFiltering={true} filterSettings={filterSettings} allowSorting={true} editSettings={editOptions} toolbar={toolbarOptions}>
            <ColumnsDirective>
                <ColumnDirective field='OrderID' headerText='Order ID' width='100' validationRules={orderIDRules} isPrimaryKey={true} textAlign='Right'/>
                <ColumnDirective field='CustomerName' headerText='Customer Name' validationRules={customerNameRules} width='120'/>
                <ColumnDirective field='OrderDate' headerText='Order Date' width='100' format='yMd' editType='datepickeredit' textAlign='Right'/>
                <ColumnDirective field='Freight' width='100' format='C2' editType='numericedit' textAlign='Right'/>
                <ColumnDirective field='ShipCountry' headerText='Ship Country' editType='dropdownedit' width='100'/>
            </ColumnsDirective>
            {/* Inject required Grid features */}
            <Inject services={[Page, Sort, Filter, Edit, Toolbar]} />
        </GridComponent>
    </div>
}
export default App;
// Import the required grid modules from the grid package.
import { ColumnDirective, ColumnsDirective, Filter, type FilterSettingsModel, Toolbar, Edit, type EditSettingsModel, type ToolbarItems, GridComponent, Inject, Page, Sort, type PageSettingsModel} from '@syncfusion/ej2-react-grids';
import * as React from 'react';
// Import Grid data from external file.
import { data } from './datasource';

function App() {
    const pageSettings: PageSettingsModel = { pageSize: 6 }
    const filterSettings: FilterSettingsModel = { type: 'CheckBox' };
    const editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true };
    const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    const orderIDRules: Object = { required: true, number: true };
    const customerNameRules: Object = { required: true };
    return <div>
        <GridComponent dataSource={data} allowPaging={true} pageSettings={pageSettings} allowFiltering={true} filterSettings={filterSettings} allowSorting={true} editSettings={editOptions} toolbar={toolbarOptions}>
            <ColumnsDirective>
                <ColumnDirective field='OrderID' headerText='Order ID' width='100' validationRules={orderIDRules} isPrimaryKey={true} textAlign='Right'/>
                <ColumnDirective field='CustomerName' headerText='Customer Name' validationRules={customerNameRules} width='120'/>
                <ColumnDirective field='OrderDate' headerText='Order Date' width='100' format='yMd' editType='datepickeredit' textAlign='Right'/>
                <ColumnDirective field='Freight' width='100' format='C2' editType='numericedit' textAlign='Right'/>
                <ColumnDirective field='ShipCountry' headerText='Ship Country' editType='dropdownedit' width='100'/>
            </ColumnsDirective>
            {/* Inject required Grid features */}
            <Inject services={[Page, Sort, Filter, Edit, Toolbar]} />
        </GridComponent>
    </div>
}
export default App;
export let 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 },
];
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 },
];