🚀 react-data-grid-lite: Build Feature-Rich React Tables in Minutes, Not Days

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!

---

Comments

[Nikoloz Turazashvili (@axrisi)]

• Overview: A lightweight, plug-and-play React data grid designed for efficiency and quick setup.

• Key Features:

  • Lightweight: Small bundle size for fast loads.
  • API-Driven: Pass your JSON API without requiring a schema.
  • Dynamic Columns: Automatically adapts to the API structure.
  • Custom Search: Supports alias column names for flexible searching.
  • CSV Export: Enables one-click data export.
  • Edit/Delete Hooks: Simple integration of row actions with backend.
  • Analytics Events: Track custom events for insights and debugging.
  • Concatenated Columns: Merge multiple fields into one column.
  • Custom Styling: Full control over styles using various methods.

• Installation & Quick Start:

  • Install via npm: npm install react-data-grid-lite.
  • Example usage:

  import DataGrid from 'react-data-grid-lite';
  const columns = [{ name: 'id' }, { name: 'name', alias: 'Full Name' }];
  const data = [{ id: 1, name: 'Jane' }, { id: 2, name: 'John' }];
  <DataGrid columns={columns} data={data} />;
  

• Advanced Capabilities:

  • Support for custom column rendering and row-level styling.
  • Includes conditional logic for buttons and field visibility formatting.

• Theming & Styling:

  • Supports custom class names and theme overrides.
  • Provides controlled layout options for columns.

• Built for Stability:

  • Fully tested with Jest and achieves over 80% code coverage.
  • Continuous refactoring for code quality and compatibility with React versions.

• API Documentation:

  • Comprehensive reference for configuration via props for diverse functionalities.

• Contribution:

  • Open-source project on GitHub: ricky-sharma/react-data-grid-lite, welcoming PRs, ideas, and bug reports.

made with love by axrisi