Getting Started with React Data Grid

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let’s add the React Data Grid component to the project.

Installing Syncfusion® React packages

To use the Data Grid component, install the @syncfusion/react-grid package:

npm install @syncfusion/react-grid

npm install @syncfusion/react-grid

Adding CSS reference

Import the Data Grid component's required CSS references as follows in src/App.css.

@import "../node_modules/@syncfusion/react-base/styles/material.css"; 
@import "../node_modules/@syncfusion/react-inputs/styles/material.css"; 
@import "../node_modules/@syncfusion/react-buttons/styles/material.css"; 
@import "../node_modules/@syncfusion/react-dropdowns/styles/material.css"; 
@import "../node_modules/@syncfusion/react-calendars/styles/material.css"; 
@import "../node_modules/@syncfusion/react-navigations/styles/material.css"; 
@import "../node_modules/@syncfusion/react-popups/styles/material.css"; 
@import "../node_modules/@syncfusion/react-pager/styles/material.css"; 
@import "../node_modules/@syncfusion/react-grid/styles/material.css";

@import "../node_modules/@syncfusion/react-base/styles/material.css"; 
@import "../node_modules/@syncfusion/react-inputs/styles/material.css"; 
@import "../node_modules/@syncfusion/react-buttons/styles/material.css"; 
@import "../node_modules/@syncfusion/react-dropdowns/styles/material.css"; 
@import "../node_modules/@syncfusion/react-calendars/styles/material.css"; 
@import "../node_modules/@syncfusion/react-navigations/styles/material.css"; 
@import "../node_modules/@syncfusion/react-popups/styles/material.css"; 
@import "../node_modules/@syncfusion/react-pager/styles/material.css"; 
@import "../node_modules/@syncfusion/react-grid/styles/material.css";

Adding Data Grid component

To include the Data Grid component in your application, import the Grid from @syncfusion/react-grid package in App.tsx.

import { Grid } from "@syncfusion/react-grid";

import { Grid } from "@syncfusion/react-grid";

Create an employeeInformation.ts file and define a structured JSON dataset representing employee records. Then, import the employeeInformation module into your component and bind the data to the grid using the dataSource property.

import { employeeInformation } from './employeeInformation';
export default function App() {
    return (
        <Grid dataSource={employeeInformation} />
    );
};

import { employeeInformation } from './employeeInformation';
export default function App() {
    return (
        <Grid dataSource={employeeInformation} />
    );
};

Defining columns

Each column in the Data Grid is defined using the <Column> component. The field property maps column identifiers from the data source and displays their values, while the headerText property sets the user-defined title shown in each column header.

<Grid dataSource={employeeInformation}>
      <Columns>
         <Column field="EmployeeID" headerText="Employee ID" />
         <Column field="Name" headerText="Name" />
         <Column field='Designation' headerText='Designation' />
         <Column field="Department" headerText="Department" />
         <Column field="ReportingPerson" headerText="Reports To" />
         <Column field="Location" headerText="Location" />
      </Columns>
  </Grid>

<Grid dataSource={employeeInformation}>
      <Columns>
         <Column field="EmployeeID" headerText="Employee ID" />
         <Column field="Name" headerText="Name" />
         <Column field='Designation' headerText='Designation' />
         <Column field="Department" headerText="Department" />
         <Column field="ReportingPerson" headerText="Reports To" />
         <Column field="Location" headerText="Location" />
      </Columns>
  </Grid>

Enabling basic features

Add paging, sorting, searching, and filtering features to the grid.

<Grid dataSource={employeeInformation} pageSettings={{ enabled: true }} filterSettings={{ enabled: true }} 
    sortSettings={{ enabled: true }} searchSettings={{ enabled: true }} toolbar={['Search']} />

<Grid dataSource={employeeInformation} pageSettings={{ enabled: true }} filterSettings={{ enabled: true }} 
    sortSettings={{ enabled: true }} searchSettings={{ enabled: true }} toolbar={['Search']} />

Enabling basic events

The Data Grid component raises key events when rendering the grid, loading data, and performing actions like sorting, filtering, searching, paging, row selection, and deselection. These events help track the grid's event flow and indicate when data-related actions are complete.

Event Name	Description
`onGridRenderStart`	Fires an event when the grid begins rendering its rows, columns, and headers.
`onDataLoad`	Fires an event when data is successfully retrieved and notified to DOM initialization.
`onGridRenderComplete`	Fires an event when the grid is fully loaded into the DOM and ready for user interaction.
`onError`	Fires an event when an error occurs during grid rendering or data operations.
`onPageChange`	Fires an event when the user moved to a different page in the grid.
`onSort`	Fires an event when the grid is sorted based on a column.
`onFilter`	Fires an event when a filter is applied to the grid.
`onSearch`	Fires an event when search results are displayed in the grid.
`onRowSelect`	Fires an event when a row is selected.
`onRowDeselect`	Fires an event when a row is deselected.

Run the project

To run the project, use the following command:

npm run dev

npm run dev