React Data Grid Lite - 📘 Introduction

The React Data Grid Lite is a high-performance, customizable UI component designed to display large sets of structured data in a tabular format. Built for modern applications, this grid focuses on speed, flexibility, and ease of integration, making it ideal for both simple lists and complex enterprise-grade data views.

🎯 Key Features

⚡ Lightweight

A small bundle footprint ensures your application loads fast, even on slower connections. The grid is optimized to avoid unnecessary re-renders, includes zero dependencies, and only loads what it needs. Ideal for SPAs and mobile-first experiences. By not including external dependencies, the grid remains lightweight and performs well across different use cases. Whether you're building small apps or large enterprise dashboards, this grid won't slow down your performance with unnecessary bloat.

React Data Grid Lite Image

🤖 AI-Powered Semantic Search

Take your data grid to the next level with AI-powered semantic search using the OpenAI API—or any custom LLM endpoint. This feature interprets natural language queries and matches them intelligently to your grid data, opening up smarter filtering experiences.

✅ Benefits

Enables intuitive search: Users can search using phrases like “users aged above 30 and with role admin” instead of relying on exact keyword matches.
Smooth integration with built-in search and pagination.
Automatic fallback to local filtering if AI search errors or is disabled.

🧪 Example Usage

<DataGrid
  id="react-data-grid-lite"
  data={myData}
  columns={myColumns}
  options={{
    aiSearch: {
      enabled: true,
      apiKey: 'your-openai-api-key', // Optional if using custom endpoint or logic
      model: 'gpt-4',
      endpoint: 'https://api.openai.com/v1/chat/completions',
      headers: {
        'Custom-Header': 'value'
      },
      systemPrompt: 'You are a helpful assistant for searching table data.'
    }
  }}
/>

📖 Where to Learn More

Visit the AI Search documentation to explore configuration details—including custom headers, system prompt options, and behavior overrides.

📦 API-ready

react-data-grid-lite is designed to work seamlessly with any JSON-based API. Whether your data is coming from a REST API, GraphQL endpoint, or any other JSON API, the grid can easily ingest and display the data without needing any heavy lifting on your part.

import React, { useEffect, useState } from 'react';
import DataGrid from 'react-data-grid-lite';

const MyGrid = () => {
    const [rows, setRows] = useState([]);
    const [columns, setColumns] = useState([]);

    useEffect(() => {
        fetch('/api/data') // Example API endpoint
            .then(res => res.json())
            .then(data => {
                setColumns(data.columns);
                setRows(data.rows);
            });
    }, []);

    return <DataGrid data={rows} columns={columns} />;
};

Why it matters: With the rise of APIs in modern web applications, being able to plug in data sources without complex transformations is a huge time-saver for developers.

🛠️ Dynamic Columns

Support for schema-flexible data means you can generate column definitions on the fly. This is especially useful for dashboards or CMS systems where data models can vary.

const columns = Object.keys(data[0]).map(key => ({
    name: key
}));

<DataGrid data={data} columns={columns} />;

Here, columns are dynamically created based on the keys of the data object.

🎨 Custom Cell Rendering

To customize how a specific cell is displayed, the columns definition can include a render function per column. This function receives the formatted row data, and the orignal row data, allowing full control over the rendering logic.

✅ Add Icons or Badges

{
  name: 'role',
  alias: 'Role',
  render: (row) => (
    <span>
      {row.role === 'Admin' && '🛡️ '}
      {row.role}
    </span>
  )
}

✏️ Cell & Row Editing

The grid supports inline cell editing with keyboard and touch support. It also provides callbacks and hooks for save, edit, and delete actions, allowing for customized editing workflows.

const options = {enableCellEdit: true}

<DataGrid
  data={rows}
  columns={columns}
  options={options}
  onCellUpdate={(cellUpdate) => {
    console.log(`Updated ${cellUpdate.editedColumns[0].colName} to ${cellUpdate.editedColumns[0].value}`);
  }}
/>

🔍 Search & Aliases

Enable powerful global and column-level search with support for aliases and custom labels. Searchable columns can be marked with enableSearch: true, and you can use user-friendly names (alias) without affecting the actual data structure.

{ name: 'emailAddress', alias: 'Email', enableSearch: true }

📌 Fixed Columns

Pin columns to the left side of the grid using a prop like fixed: true. This is great for keeping key identifiers (like names or IDs) visible while horizontally scrolling through wide datasets.

const columns = [
    { name: 'ID', fixed: true },
    { name: 'Name' },
    { name: 'Email' },
];

<DataGrid data={rows} columns={columns} />;

📏 Resizable Columns

Users can drag column borders to adjust widths, making it easier to view large or wrapped content. This is enabled via built-in support in v1.1.0+ and fires an onColumnResized callback.

const columns = [
    { name: 'Name', resizable: true },
    { name: 'Email', resizable: true },
];

<DataGrid data={rows} columns={columns} onColumnResized={(e, newWidth, columnName) => console.log(columnName, newWidth)} />

📱 Responsive Layout

The grid layout adjusts to different screen sizes using width, maxWidth, height, and inherit props. It plays nicely with flexbox or grid-based layouts, ensuring content looks good on mobile, tablet, or desktop.

<DataGrid width="100%" height="60vh" />

🔄 Drag-and-drop

react-data-grid-lite supports column reordering via drag-and-drop. This feature allows users to rearrange columns dynamically for a more personalized data grid experience. The grid provides the onColumnDragEnd callback function to save the new column order to the database as a user preference.

import DataGrid from 'react-data-grid-lite';

const columns = [
    { name: 'Name', draggable: true },
    { name: 'Email', draggable: true },
];

const MyGrid = () => {

    const handleDragEnd = (columnName, newColumnOrder) => {    
        // Save the new column order to the database as a user preference
        saveColumnOrderToDB(newColumnOrder)
           .then(() => {
              console.log('Column order saved successfully');
        })
    };
    return (
        <DataGrid
            data={rows}
            columns={columns}
            onColumnDragEnd={handleDragEnd}
        />
    );
};

Why it matters: Allowing users to reorder columns helps them tailor the grid to their needs, improving usability and efficiency.

🔢 Column order

Set the order of columns using the order property on the column configuration.

const columns = [
    { name: 'Name', order: 2 },
    { name: 'Email', order: 1 },
];

<DataGrid data={rows} columns={columns} />;

The order property allows you to set the initial order of columns.

🧩 Merged Columns

Display composite values by merging multiple fields into a single cell. For example, show firstName + lastName in one column.

{ 
    name: 'firstname',
    alias: 'Name',
    concatColumns: { 
        columns: ['firstname', 'lastname'] 
    }
}

📊 Analytics Events

Track interactions such as row clicks, sort changes, and searches using event callbacks. Useful for product analytics (e.g., Mixpanel, GA) or auditing user behavior.

onRowClick={(e, row) => logEvent('row_clicked', row)}

🎨 Theming

Apply visual consistency with predefined themes like blue-core, dark-stack, and medi-glow. You can also pass in custom CSS classes or override default styles for headers, rows, hover states, etc.

<DataGrid theme="dark-stack" />

🧾 CSV Export

Allow users to download the currently viewed data as a .csv file. Ideal for admin panels, reporting dashboards, or finance tools. Supports exporting filtered or paginated data.

✏️ Row Actions

Built-in hooks for common actions like edit, delete allow you to bind behavior directly to row-level operations.

🧩 Actions Align

Use props like actionColumnAlign: 'right' or actionColumnAlign: 'left' to pin action column to one side, keeping UI controls consistent regardless of scroll position.

🧪 Fully Tested

The component comes with strong unit and integration test coverage, ensuring high reliability. Common scenarios — like rendering, sorting, searching, and resizing — are validated against regressions using tools like Jest and React Testing Library.

✅ Pagination Built-in page handling with control over pageSize, currentPage, and callbacks like onPageChange.

✅ Search & Filtering Global or per-column search capabilities for fast data filtering.

✅ Event Hooks Callback props such as onRowClick, onSearchComplete, onSortComplete, and onColumnResized provide full lifecycle control.