react-data-grid-lite
Version:
A fast React Data Grid with AI search, sorting, pagination, and customization.
137 lines (102 loc) • 5.07 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** – Small bundle, fast loading
📦 **API-ready** – Works with any JSON API
🛠️ **Dynamic columns** – Auto-adapts to schema
🔍 **Search & aliases** – Fast filtering, custom labels
🤖 **AI-powered search** – Use OpenAI or custom LLMs to semantically interpret and match user queries to grid data
📌 **Fixed columns** – Lock columns during scroll
📏 **Resizable columns** – User can resize
📱 **Responsive** – Adapts to all screen sizes
🧾 **CSV export** – Download full data grid
✏️ **Cell & Row Editing** – Inline cell editing with keyboard, touch support; callbacks hooks on save/edit/delete
🧩 **Merged columns** – Combine multiple fields
🎨 **Custom rendering** – Tailored cell views with `render` prop
📊 **Analytics** – Track user interactions
🎨 **Theming** – Pre-built themes, easy customization
🧩 **Align actions** – Fix columns left/right
🔄 **Drag-and-drop** – Reorder columns with drag
🔢 **Column order** – User-defined via `order` prop
🧪 **Fully tested** – Robust unit tests
<br><br>
<p align="center">
<img src="https://github.com/user-attachments/assets/4516b8d8-130e-45ff-a76c-1b5d013f5bf1" alt="React Data Grid Lite Image" 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>
```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).