react-data-grid-lite
Version:
A fast React Data Grid with AI search, sorting, pagination, and customization.
147 lines (108 loc) • 5.23 kB
Markdown
[](https://www.npmjs.com/package/react-data-grid-lite)
[](https://github.com/ricky-sharma/react-data-grid-lite/archive/refs/heads/master.zip)
<a href="https://codesandbox.io/s/github/ricky-sharma/react-data-grid-lite/tree/master/example" target="_blank" rel="noopener noreferrer">
<img
src="https://codesandbox.io/static/img/play-codesandbox.svg"
alt="Open in CodeSandbox"
height="28"
style="vertical-align: middle;"
/>
</a>
[](https://ricky-sharma.github.io/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
🧪 **Fully tested** – Robust unit tests
🌍 **RTL support** – Right-to-left layout support
🚀 **Virtualization** – Handles 1,000s of rows and columns efficiently
<br><br>
<p align="center">
<img src="https://github.com/user-attachments/assets/ce1ac4d4-3258-4bbf-a3c9-ecb49ff14af0" alt="React Data Grid Lite Image with menu" width="100%" />
</p>
<br><br>
```bash
npm install react-data-grid-lite
```
or
```bash
yarn add react-data-grid-lite
```
<br><br>
This component has the following peer dependencies that need to be installed as well:
```json
{
"peerDependencies": {
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
}
}
```
<br><br>
<p align="center">
<img src="https://github.com/user-attachments/assets/4516b8d8-130e-45ff-a76c-1b5d013f5bf1" alt="React Data Grid Lite Image - keyboard edit" width="100%" />
</p>
<br><br>
```jsx
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;
```
<br><br>
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 |
<br><br>
- [API Reference](https://github.com/ricky-sharma/react-data-grid-lite/blob/master/docs/api.md)
<br><br>
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! 🎉
<br><br>
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
<br><br>
Reach out via [LinkedIn](https://www.linkedin.com/in/vinay-sharma-2022354) or check out my projects on [GitHub](https://github.com/ricky-sharma).