Local Data Binding in React Data Grid

The Syncfusion® React Data Grid component supports binding local datasets directly to display predefined data without server requests. This method enhances performance and enables offline functionality.

Assigning local JSON data

The Data Grid component supports data binding by assigning a JSON array of objects to the dataSource property. This approach displays predefined data based on column configurations without network requests. It is ideal for static datasets, and offline applications.

import { Grid, Column, Columns } from '@syncfusion/react-grid';
import { employeeDetails } from './employeeDetails'; // JSON array of objects.

export default function App() {
    return (
        <div>
            <Grid dataSource={employeeDetails}></Grid>
        </div>
    );
};

Loading data with useEffect

The Data Grid component supports loading data using the useEffect hook in React, which prepares or fetches data after component mounting. The processed data is then assigned to the dataSource property, ensuring efficient separation of data fetching and rendering logic.

import { useEffect, useState } from 'react';
import { Grid, Column, Columns } from '@syncfusion/react-grid';

export default function App() {
  const [gridData, setGridData] = useState([]);
  useEffect(() => {
    const processedData = [
      { EmployeeID: 10248, Name: 'Paul Henriot' },
      { EmployeeID: 10249, Name: 'Karin Josephs' }
    ];
    setGridData(processedData);
  }, []);
  return (
    <div>
      <Grid dataSource={gridData}></Grid>
    </div>
  );
};

Binding with React state

Binding the grid data source to a React state variable by passing the state directly to the dataSource property. It enables the grid to automatically reflect state changes. This approach is ideal for dynamic applications supporting real-time editing, filtering, or data updates.

import { useState } from 'react';
import { Grid, Column, Columns } from '@syncfusion/react-grid';

export default function App() {

    const [gridData, setGridData] = useState([
        { EmployeeID: 10248, Name: 'Paul Henriot', Department: 'Engineering' },
        { EmployeeID: 10249, Name: 'Karin Josephs', Department: 'Support' }
    ]);

    return (
        <div>
            <Grid dataSource={gridData}></Grid>
        </div>
    );
};

Events

The Data Grid provides event hooks for rendering phases such as initialization, completion, data loading, and error handling. These event helps to track the grid’s lifecycle and enable components to handle state changes during rendering and data updates.