As a freelancer juggling fast-paced projects, I found myself constantly needing a lightweight, plug-and-play, and easily hookable React data grid that didn’t require hours of setup. Most grids were either too heavy, too rigid, or required extensive configuration.

So I built react-data-grid-lite — a modern, flexible, and minimal data grid that does the job quickly, without getting in your way.

✅ Key Features

• ⚡ Lightweight: Small bundle size for fast loads.
• 📡 API-Driven: Just pass your JSON API — no schema needed.
• 🧠 Dynamic Columns: Adapts automatically to your API structure.
• 🔍 Search & Aliases: Custom search with support for alias column names.
• 📥 CSV Export: One-click data export.
• ✏️ Edit/Delete Hooks: Easily tie row actions to your backend.
• 📊 Analytics Events: Track custom events for insights and debugging.
• 🔗 Concatenated Columns: Join multiple fields into a single column.
• 🎨 Custom Styling: Full control using custom class names, inline styles, or scoped overrides.

💻 Installation & Quick Start

npm install react-data-grid-lite

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

// Define columns & rows
const columns = [{ name: 'id' }, { name: 'name', alias: 'Full Name' }];
const data = [{ id: 1, name: 'Jane' }, { id: 2, name: 'John' }];

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

Want to try more? Explore examples here »

🔧 Advanced Capabilities

From nested props to on-demand data formatting, the grid handles advanced use cases like:

• Custom column rendering
• Row-level styling
• Conditional logic for rendering buttons, formatting, and field visibility

Learn more in the advanced usage guide »

🎨 Theming & Styling

react-data-grid-lite supports:

• Custom class names via rowClass, headerClass
• Theme overrides using inline or scoped styles
• Controlled layout with column widths, min/max settings

Check out the styling guide »

🧪 Built for Stability

• 📦 Fully tested with Jest
• ✅ Over 80% code coverage
• 🔄 Continuous refactoring based on test outcomes

Whether you're using React 17, 18, or planning for future versions, react-data-grid-lite is built to stay compatible and dependable.

📘 Full API Documentation

Each column and option is configurable via props, from search behavior to export toggles.
Check the full API reference here »

🤝 Contribute & Connect

This project is open-source and actively maintained. PRs, ideas, and bug reports are always welcome.

GitHub: ricky-sharma/react-data-grid-lite

💬 Why I Built This

“While working on freelancing projects, I felt that no existing grid was light, easy to hook into, or fast enough to get the job done in minutes — not days.”

react-data-grid-lite is the result of that need — a grid that gives you just what you need, without the bloat.

Try it out today and let me know what you think!