Build Feature-Rich React Tables in Minutes, Not Days

Vinay SharmaVinay Sharma
3 min read

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!


0
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