🧩 Introducing react-data-grid-lite – A Lightweight Grid with a Live Demo

If you're looking for a minimal yet powerful React data grid without the overhead of large libraries, react-data-grid-lite might be exactly what you need.

We've now launched a live demo and documentation site to explore its capabilities interactively:
🔗 https://ricky-sharma.github.io/react-data-grid-lite/

📦 What Is react-data-grid-lite?

react-data-grid-lite is a zero-dependency, functional-component-based data grid built with React. It’s designed for developers who want:

• A clean, customizable UI
• Core grid functionality (sorting, filtering, pagination)
• Full control over data rendering
• No external CSS frameworks or bloated dependencies

It’s written in modern React (with hooks and functional components) and follows a composable architecture to allow flexibility without compromising performance.

✅ Key Features
⚡ Lightweight – Small bundle, fast loading
📦 API-ready – Works with any JSON API
🛠️ Dynamic columns – Auto-adapts to schema
🔍 Search & aliases – Fast filtering, custom labels
📌 Fixed columns – Lock columns during scroll
📏 Resizable columns – User can resize
📱 Responsive – Adapts to all screen sizes
🧾 CSV export – Download full data grid
✏️ Row actions – Edit/delete hooks
🧩 Merged columns – Combine multiple fields
🎨 Custom rendering – Tailored cell views with render prop
📊 Analytics – Track user interactions
🎨 Theming – Pre-built themes, easy customization
🧩 Align actions – Fix columns left/right
🔄 Drag-and-drop – Reorder columns with drag
🔢 Column order – User-defined via order prop
🧪 Fully tested – Robust unit tests

🛠️ Try It Out – Live Demo

The live site offers:

• Interactive grid with real data
• Toggle-able features to test configurations
• Editable examples with code previews
• API documentation & usage patterns

👉 Launch the demo

🚀 Quick Start

npm install react-data-grid-lite 

Example usage:

import DataGrid from 'react-data-grid-lite'; const columns = [ { name: 'ID', resizable: true, draggable: true }, { name: 'Name', resizable: true, enableSearch: true }, ]; const rows = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, ]; <DataGrid columns={columns} data={rows} pageSize={10} /> 

📘 Documentation & Source

• 📖 Docs & Examples: ricky-sharma.github.io/react-data-grid-lite
• 🛠 GitHub: github.com/ricky-sharma/react-data-grid-lite

🤝 Contribute or Give Feedback

This project is open-source and growing. If you have feature ideas, bug reports, or just want to help improve the documentation—PRs are welcome!