📘 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.

📦 API-ready

The grid works seamlessly with any REST or GraphQL JSON API. Simply fetch data and pass it to the data prop — no additional formatting required. This makes integration with existing backend systems quick and painless.

fetch('/api/users')
  .then(res => res.json())
  .then(data => setGridData(data));

🛠️ 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 }));

🎨 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>
  )
}

🔍 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.

📏 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.

<DataGrid 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" />

🧾 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.

🧩 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" />

🧩 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.

📦 Installation

npm install react-data-grid-lite

or

yarn add react-data-grid-lite

🚀 Usage

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

const columns = [
  { name: 'id', width:'50px' },
  { name: 'name', alias:'Full Name' },
  { name: 'age' }
];

const rows = [
  { id: 1, name: 'John Doe', age: 28 },
  { id: 2, name: 'Jane Smith', age: 34 }
];

function App() {
  return (
    <DataGrid columns={columns} data={rows} />
  );
}

export default App;

React Compatibility Table

The react-data-grid-lite library is compatible with the following versions of React:

🚀 Try It Out!

Feel free to fork the repository and experiment with the grid's behavior for concatenating columns. Let me know if you'd like any further adjustments or clarification! Happy coding! 🎉

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙋‍♂️ Available for freelance work!

Reach out via LinkedIn or check out my projects on GitHub.