Build Feature-Rich React Tables in Minutes, Not Days

Less config, more coding β get back to building features.
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!
Subscribe to my newsletter
Read articles from Vinay Sharma directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by

Vinay Sharma
Vinay Sharma
Iβm a full-stack software engineer with 19+ years of hands-on experience in building scalable enterprise web applications. My primary expertise lies in .NET Core (C#) for backend development and React.js for crafting modern, performant frontends. I follow clean architecture principles and enjoy writing testable, maintainable code across the stack. π§ Tech Stack Languages: C#, JavaScript (ES6+), TypeScript, SQL Backend: .NET 6/7, ASP.NET Core Web API, Entity Framework Core, LINQ, Dapper Frontend: React.js, Redux, React Router, Tailwind CSS, Material UI Database: SQL Server, PostgreSQL, SQLite (for test harnessing), MongoDB (familiar) Testing: xUnit, MSTest, Moq, Fluent Assertions, React Testing Library, Jest DevOps & Tools: Git, GitHub Actions, Azure DevOps Pipelines, Docker (basic), Swagger, Postman Architecture: REST APIs, Clean Architecture, Repository Pattern, SOLID, CI/CD IDE/Editors: Visual Studio, VS Code CMS: Sitecore v6.5-10.3