Getting Started with React DataGrid

11 Jun 20269 minutes to read

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

Ready to streamline your Syncfusion^® React development? Discover the full potential of Syncfusion^® React components with Syncfusion^® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion^® CodeStudio and more. Explore Syncfusion^® AI Coding Assistant.

To get started quickly with React DataGrid, you can watch this video:

Setup for local development

Easily set up a React application using create-vite-app, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app. For detailed steps, refer to the Vite installation instructions. Vite sets up your environment using JavaScript and optimizes your application for production.

Note: To create a React application using create-react-app, refer to this documentation for more details.

To create a new React application, run the following command.

npm create vite@latest my-app

This command will prompt you for a few settings for the new project, such as selecting a framework and a variant.

Terminate the application, then run the following command:

cd my-app

Adding React Data Grid packages

To install the Grids package, use the following command:

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

Before including Syncfusion styles, make sure to remove the default styles defined in index.css. This helps prevent unintended style overrides and ensures that Syncfusion components render correctly.

Adding CSS reference

The following CSS files are available in the ../node_modules/@syncfusion package folder. Add these as references in src/App.css.

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

Adding DataGrid component

The DataGrid code should be added to the src/App.tsx file.

App.jsx

import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import './App.css';

// Defines the data to be displayed in the Grid.
const 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 },
]

function App() {
    return <div>
        {/* Assigns the dataset to the Grid component */}
        <GridComponent dataSource={data}>
            {/* Define the columns to be displayed */}
            <ColumnsDirective>
                <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign='Right'/>
                <ColumnDirective field='CustomerName' headerText='Customer Name' width='120'/>
                <ColumnDirective field='OrderDate' headerText='Order Date' width='100' format='yMd' textAlign='Right'/>
                <ColumnDirective field='Freight' width='100' format='C2' textAlign='Right'/>
                <ColumnDirective field='ShipCountry' headerText='Ship Country' width='100'/>
            </ColumnsDirective>
        </GridComponent>
    </div>
}
export default App;

App.tsx

import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import './App.css';

// Defines the data to be displayed in the Grid.
const 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 },
]

function App() {
    return <div>
        {/* Assigns the dataset to the Grid component */}
        <GridComponent dataSource={data}>
            {/* Define the columns to be displayed */}
            <ColumnsDirective>
                <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign='Right'/>
                <ColumnDirective field='CustomerName' headerText='Customer Name' width='120'/>
                <ColumnDirective field='OrderDate' headerText='Order Date' width='100' format='yMd' textAlign='Right'/>
                <ColumnDirective field='Freight' width='100' format='C2' textAlign='Right'/>
                <ColumnDirective field='ShipCountry' headerText='Ship Country' width='100'/>
            </ColumnsDirective>
        </GridComponent>
    </div>
}
export default App;

App.css

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

Run the application

npm run dev

NOTE

Looking for the full React Data Grid component overview, features, pricing, and documentation? Visit the React Data Grid page.

See also

• DataGrid Feature Modules
• Top 5 Features of React Data DataGrid
• How to render React DataGrid with bootstrap theme
• Getting Started with Next.js
• Getting Started with SharePoint
• Getting Started with Preact