Introducing react-data-grid-lite: A Lightweight & Customizable Data Grid for React #160337

ricky-sharma · 2025-05-27T00:42:35Z

ricky-sharma
May 27, 2025

Select Topic Area

Show & Tell

Body

🚀 Introducing `react-data-grid-lite`: A Lightweight, Customizable Data Grid for React

Hi everyone 👋

I’m excited to share a project I’ve been working on: react-data-grid-lite – a lightweight and customizable data grid component built for React.

🔗 GitHub: ricky-sharma/react-data-grid-lite
📦 npm: react-data-grid-lite

✨ Features

📊 Lightweight: Built to be minimal and performant.
🧩 Highly customizable: Supports custom cell rendering, headers, and styles.
🔄 Dynamic column definitions: Pass flexible configurations to match your data model.
💅 Minimal dependencies: No heavy frameworks—just plain React with clear, readable logic.

📦 Installation

npm install react-data-grid-lite

or

yarn add react-data-grid-lite

🔧 Basic Usage

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 },
  { id: 3, name: 'Sam Johnson', age: 22 }
];

function App() {
  return (
    <div>
      <h1>Data Grid Example</h1>
      <DataGrid
          columns={columns}
          data={rows}
          pageSize={10}
      />
    </div>
  );
}

export default App;

📚 Docs & Customization

You can find full documentation with examples here:
📖 GitHub README

Some of the key features include:

📦 Remote API support: Plug in any JSON API.
🛠️ Flexible column logic: Auto-adapts to the API schema.
🔍 Searchable and alias columns: Improves UX and readability.
🧾 CSV export: Download the entire grid.
✏️ Edit/Delete buttons: Easily hook into row-level actions.

🙌 I'd Love Your Feedback!

I’d really appreciate it if you could check it out and let me know:

What features you'd like to see added?
Any edge cases or bugs you run into?
How it compares with your current grid solutions?

Feel free to open an Issue or star the project if you find it useful ⭐

Thanks for reading and happy coding!

— sharma.ricky

ebndev · 2025-05-28T21:26:23Z

ebndev
May 28, 2025
Maintainer

Hi @ricky-sharma, thanks for sharing with the community!

Unfortunately, we currently do not allow self-promotion or advertising on the Community Discussions. We want to make sure there is space for users to ask questions without overwhelming them with other conversations. Thank you for helping us maintain a productive and tidy community for all our members.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

Introducing react-data-grid-lite: A Lightweight & Customizable Data Grid for React #160337

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

GitHub Community

Introducing react-data-grid-lite: A Lightweight & Customizable Data Grid for React #160337

Uh oh!

ricky-sharma May 27, 2025

Select Topic Area

Body

🚀 Introducing react-data-grid-lite: A Lightweight, Customizable Data Grid for React

✨ Features

📦 Installation

🔧 Basic Usage

📚 Docs & Customization

🙌 I'd Love Your Feedback!

Replies: 1 comment

Uh oh!

ebndev May 28, 2025 Maintainer

ricky-sharma
May 27, 2025

🚀 Introducing `react-data-grid-lite`: A Lightweight, Customizable Data Grid for React

ebndev
May 28, 2025
Maintainer