React Data Grid Lite

A lightweight and customizable React data grid component designed for high performance and ease of use.

The DataGrid component is a highly customizable, feature-rich table built with React, designed to display tabular data and easily integrate into any application. It is intended for use cases where large datasets need to be presented with advanced features such as pagination, sorting, searching, row interactions, AI-powered search, and more.

With built-in support for OpenAI (or other LLMs via configurable endpoints), the grid can semantically interpret user queries and return intelligent, filtered results—ideal for enhancing user experience in modern data-driven applications.

✅ Key Features

⚡ Lightweight – Fast, small bundle
📦 API-ready – Plug into any JSON API
🛠️ Smart columns – Auto schema detection
🔍 Fast search – Filter with custom labels & aliases
🤖 AI search – Semantic query support (OpenAI/LLM)
📌 Fixed & resizable columns
📱 Responsive – Mobile-friendly layout
🧾 CSV export – One-click data download
✏️ Inline editing – Keyboard & touch support
🎨 Custom cells – Render anything
🧩 Merged columns – Combine multiple fields
📊 Analytics-ready – Track user actions
🎨 Theming – Easy styling & prebuilt themes
🔄 Drag & reorder columns
🧩 Align actions – Left/right
📂 Column menu – Per-column sort, hide, and edit options
🧰 Toolbar menu – Compact 3-dot menu for export, reset, and more
🔀 Transpose – Instantly pivot rows into columns for dynamic data views
🧪 Fully tested – Robust unit tests
🌍 RTL support – Right-to-left layout support
🚀 Virtualization – Handles 1,000s of rows and columns efficiently

📦 Installation

npm install react-data-grid-lite

or

yarn add react-data-grid-lite

This component has the following peer dependencies that need to be installed as well:

{
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
  }
}

🚀 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:

| React Version | Compatibility | | ----------------- | ------------------ | | React 19+ | ✅ Fully Compatible | | React 18+ | ✅ Fully Compatible | | React 17+ | ✅ Fully Compatible |

🗂️ Documentation

• API Reference

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