Search results

Getting started

This section explains you the steps required to create a simple Grid and demonstrate the basic usage of the Grid component in React environment.

Dependencies

Following is the list of minimum dependencies required to use the Grid.

|-- @syncfusion/ej2-react-grids
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-grids
        |-- @syncfusion/ej2-excel-export
            |-- @syncfusion/ej2-file-utils
            |-- @syncfusion/ej2-compression
        |-- @syncfusion/ej2-pdf-export
            |-- @syncfusion/ej2-file-utils
            |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-react-base

Setup for Local Development

You can use create-react-app to setup the applications. To install create-react-app run the following command.

npm install -g create-react-app
  • To setup basic React sample use following commands.
create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart

npm install

Adding Syncfusion packages

All the available Essential JS 2 packages are published in npmjs.com public registry. To install Grid component, use the following command

npm install @syncfusion/ej2-react-grids --save

Adding CSS reference

Add components style as given below in src/App.css.

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import "../node_modules/@syncfusion/ej2-react-grids/styles/material.css";

To refer App.css in the application then import it in the src/App.tsx file.

Adding Grid component

Now, you can start adding Grid component in the application. For getting started, add the Grid component in src/App.tsx file using following code.

Place the following grid code in the src/App.tsx.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
import './App.css';
class App extends React.Component<{}, {}>{
    render() {
        return <GridComponent dataSource={data}>
            <ColumnsDirective>
                <ColumnDirective field='OrderID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='CustomerID' width='100'></ColumnDirective>
                <ColumnDirective field='EmployeeID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"></ColumnDirective>
                <ColumnDirective field='ShipCountry' width='100'></ColumnDirective>
            </ColumnsDirective>
        </GridComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('grid'));

Module Injection

Grid component features are segregated into individual feature-wise modules. In order to use a particular feature, you need to inject its feature service in the App. In the current application, we are going to use paging, sorting, filtering and grouping feature of Grid. Please find relevant feature service name and description as follows.

  • Page - Inject this service to use paging feature.
  • Sort - Inject this service to use sorting feature.
  • Filter - Inject this service to use filtering feature.
  • Group - Inject this service to use grouping feature.

These modules should be injected into the grid using the Inject directive.

Additional feature modules are available here.

Enable Paging

The paging feature enables users to view the Grid record in a paged view. It can be enabled by setting allowPaging property to true. Inject the Page module in Inject.services as follows. If the Page service is not injected, the pager will not be rendered in the grid. Pager can be customized using pageSettings property.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Page } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    render() {
        return <GridComponent dataSource={data} allowPaging={true} pageSettings={ { pageSize: 6 } }>
            <ColumnsDirective>
                <ColumnDirective field='OrderID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='CustomerID' width='100'></ColumnDirective>
                <ColumnDirective field='EmployeeID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"></ColumnDirective>
                <ColumnDirective field='ShipCountry' width='100'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[Page]} />
        </GridComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('grid'));

Enable Sorting

The sorting feature enables you to order the records. It can be enabled by setting the allowSorting property as true. Inject the Sort module in the Inject.services as follows. If the Sort module is not injected, you cannot sort when a header is clicked. Sorting feature can be customized using sortSettings property.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Page, Sort } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    render() {
        return <GridComponent dataSource={data} allowPaging={true} pageSettings={ { pageSize: 6 } } allowSorting={true} >
            <ColumnsDirective>
                <ColumnDirective field='OrderID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='CustomerID' width='100'></ColumnDirective>
                <ColumnDirective field='EmployeeID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"></ColumnDirective>
                <ColumnDirective field='ShipCountry' width='100'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[Page, Sort]} />
        </GridComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('grid'));

Enable Filtering

It can be enabled by setting the allowFiltering property as true. Inject the Filter module in the Inject.services as follows. If Filter module is not injected, filter bar will not be rendered in Grid. Filtering feature can be customized using filterSettings property.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Page, Sort, Filter } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    render() {
        return <GridComponent dataSource={data} allowPaging={true} pageSettings={ { pageSize: 6 } } allowSorting={true} allowFiltering={true}>
            <ColumnsDirective>
                <ColumnDirective field='OrderID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='CustomerID' width='100'></ColumnDirective>
                <ColumnDirective field='EmployeeID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"></ColumnDirective>
                <ColumnDirective field='ShipCountry' width='100'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[Page, Sort, Filter]} />
        </GridComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('grid'));

Enable Grouping

The grouping feature enables you to view the grid record in a grouped view. It can be enabled by setting allowGrouping property to true. The Group module has to be injected as follows. If Group module is not injected, the group drop area will not be rendered in Grid. Grouping feature can be customized using groupSettings property.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Page, Sort, Filter, Group } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    render() {
        return <GridComponent dataSource={data} allowPaging={true} pageSettings={ { pageSize: 6 } } allowSorting={true}
        allowFiltering={true} allowGrouping={true} height = {180}>
            <ColumnsDirective>
                <ColumnDirective field='OrderID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='CustomerID' width='100'></ColumnDirective>
                <ColumnDirective field='EmployeeID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"></ColumnDirective>
                <ColumnDirective field='ShipCountry' width='100'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[Page, Sort, Filter, Group]} />
        </GridComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('grid'));

Run the application

The create-react-app will pre-configure the project to compile and run the application in browser. Use the following command to run the application.

npm start

Output will be appears as follows.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Page, Sort, Filter, Group } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    render() {
        return <GridComponent dataSource={data} allowPaging={true} pageSettings={ { pageSize: 6 } } allowSorting={true}
        allowFiltering={true} allowGrouping={true} height= {180}>
            <ColumnsDirective>
                <ColumnDirective field='OrderID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='CustomerID' width='100'></ColumnDirective>
                <ColumnDirective field='EmployeeID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"></ColumnDirective>
                <ColumnDirective field='ShipCountry' width='100'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[Page, Sort, Filter, Group]} />
        </GridComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('grid'));