React Data Grid Lite

A lightweight and customizable React data grid component designed for high performance and ease of use. The DataGrid component is a highly customizable, feature-rich table component designed to display tabular data in a React application. It is intended for use cases where large datasets need to be presented with advanced features such as pagination, sorting, searching, row interactions, and more.

✅ 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
✏️ Cell & Row Editing – Inline cell editing with keyboard, touch support; callbacks hooks on save/edit/delete
🧩 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

📦 Installation

npm install react-data-grid-lite

or

yarn add react-data-grid-lite

This component has the following peer dependencies that need to be installed as well:

{
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
  }
}

🚀 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 }
];

function App() {
  return (
      <DataGrid columns={columns} data={rows} />
  );
}

export default App;

React Compatibility Table

The react-data-grid-lite library is compatible with the following versions of React:

React Version	Compatibility
React 19+	✅ Fully Compatible
React 18+	✅ Fully Compatible
React 17+	✅ Fully Compatible

🗂️ Documentation

• API Reference

🚀 Try It Out!

Feel free to fork the repository and experiment with the grid's behavior for concatenating columns. Let me know if you'd like any further adjustments or clarification! Happy coding! 🎉

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙋‍♂️ Available for freelance work!

Reach out via LinkedIn or check out my projects on GitHub.