Getting Started with React DataGrid Component in the Next.js

13 Jul 20267 minutes to read

This section provides a step-by-step guide for creating a Next.js application and integrating the Syncfusion® React DataGrid component.

What is Next.js?

Next.js is a React framework that makes it easy to build fast, SEO-friendly, and user-friendly web applications. It provides features such as server-side rendering, automatic code splitting, routing, and API routes, making it an excellent choice for building modern web applications.

Prerequisites

Before starting with Next.js, ensure the following prerequisites are met:

  • Node.js 16.8 or later (verify your installed version using node --version).
  • A compatible operating system: macOS, Windows, or Linux.

Create a Next.js application

Use one of the following commands to create a new Next.js application (select either NPM or Yarn based on your package manager):

npx create-next-app@latest
yarn create next-app

Project configuration

The setup process will prompt for project configuration. Provide the following responses:

Define the project name:
Specify the project name as ej2-nextjs-grid.

√ What is your project named? » ej2-nextjs-grid

Select the required packages:

√ What is your project named? ... ej2-nextjs-grid
√ Would you like to use the recommended Next.js defaults? » No, customize settings
√ Would you like to use TypeScript? ... No / `Yes`
√ Which linter would you like to use? » ESLint
√ Would you like to use React Compiler? ... `No` / Yes
√ Would you like to use Tailwind CSS? ... `No` / Yes
√ Would you like your code inside a `src/` directory? ... No / `Yes`
√ Would you like to use App Router? (recommended) ... No / `Yes`
√ Would you like to customize the import alias (`@/*` by default)? ... `No` / Yes 
Creating a new Next.js app in D:\ej2-nextjs-grid.

Navigate to the project directory:
After completing the above mentioned steps to create ej2-nextjs-grid, navigate to the directory using the below command:

cd ej2-nextjs-grid

Once the setup is complete, the application is ready to be configured with Syncfusion® components.

Adding Syncfusion® React DataGrid packages

Syncfusion® React component packages are available on npmjs.com. To use Syncfusion® React components in the project, install the corresponding npm package.

Here, the React DataGrid component is used as an example. To install the React DataGrid component in the project, use the following command:

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

Adding CSS reference

You can add the CSS files required for the Syncfusion React DataGrid component using one of the following methods.

Option 1: Add CSS references from a theme package

Themes for Syncfusion® DataGrid component can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Tailwind 3 theme package using the following command:

npm install @syncfusion/ej2-tailwind3-theme --save

Then add the following CSS reference to the src/app/globals.css file:

@import "../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/grid/index.css";

Option 2: Add CSS references from component packages

After installing the DataGrid package, the required CSS files are available in the corresponding Syncfusion packages under the node_modules/@syncfusion directory. Add the following CSS references to the src/app/globals.css file:

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

Adding DataGrid component

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

'use client'
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';

// 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 },
]; 

export default function Home() {

    return (
    <>
      <h2>Syncfusion React Grid Component</h2>
      {/* 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='100'/>
            <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>
    </>
  )
}

Run the application

npm run dev
yarn run dev

View the NEXT.js DataGrid sample in the GitHub repository.

See also