A lightweight, customizable data grid for React โ like MUI DataGrid
npm install gridbeegridbee is a lightweight, highly customizable and feature-rich data grid component built for modern React applications. Designed with flexibility and performance in mind, gridbee supports powerful data display capabilities like sorting, filtering, exporting, editing, pagination, and virtual scrolling.
---
``bash`
npm install gridbee
or with Yarn:
`bash`
yarn add gridbee
---
`jsx
import React from "react";
import gridbee from "gridbee";
const config = {
header: {
title: "Consumer Prepayment History",
search: "http://abc.5120....",
showRefresh: true,
filter: {
date: ["last day", "last week", "last month", "last year", "custom"],
type: {
Name: "KUNNUMAL",
"Account No": "1166011019605",
},
},
export: {
pdf: "http://abcde/pdf",
excel: "http://abcde/excel",
csv: "http://abcde/csv",
json: "http://abcde/json",
},
},
columns: [
{ label: "Account No", name: "accountNo", level: 1 },
{ label: "Meter No", name: "meterSerialNumber", level: 1 },
{ label: "Name", name: "name", level: 1 },
{ label: "Mobile", name: "mobile", level: 1 },
{ label: "Balance", name: "balance", level: 1 },
],
rows: {
data: [
{
accountNo: "1166011019605",
meterSerialNumber: "Z00042050",
name: "KUNNUMAL DTR",
mobile: "9200490904",
balance: "โน240.00",
},
{
accountNo: "1166011019611",
meterSerialNumber: "Z00042051",
name: "THIRUVAMBADY",
mobile: "9876543210",
balance: "โน110.00",
},
],
api: {
endpoint: "/api/prepayment/history",
method: "GET",
},
},
pagination: {
enabled: true,
pageSizeOptions: [10, 25, 50, 500, 1000],
defaultPageSize: 25,
clientSide: true,
},
options: {
wrapperStyle: {
borderRadius: "8px",
backgroundColor: "#ffffffff",
boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
padding: "10px",
},
headerStyle: {
backgroundColor: "teal",
color: "yellow",
padding: "10px",
borderRadius: "8px",
},
columnStyle: {
backgroundColor: "#b3ffecff",
fontWeight: "bold",
padding: "10px",
},
rowStyle: {
backgroundColor: "#ffffff",
},
footerStyle: {
backgroundColor: "teal",
textAlign: "right",
padding: "2px",
paddingInline: "10px",
},
},
features: {
sortable: true,
filterable: true,
editable: true,
selectable: true,
virtualScroll: true,
},
callbacks: {
onRowClick: (row) => console.log('Clicked row:', row),
onDataLoad: (data) => console.log('Loaded data:', data)
},
};
const App = () => {
return (
export default App;
`
---
- ๐ Sorting, Filtering & Searching
- โ๏ธ Inline Editing & Selection
- ๐ค Export to PDF, Excel, CSV, JSON
- ๐ Refresh & Dynamic Search
- ๐ Customizable Columns and Rows
- โก Virtual Scrolling for Large Data
- ๐ง API Integration for Remote Data
---
Change colors, borders, spacing, and behavior using the options field in the config object. Style each sectionโheader, columns, rows, footerโto match your theme.
---
Use powerful callbacks like:
`js``
onRowClick: (row) => console.log("Clicked row:", row),
onDataLoad: (data) => console.log("Loaded data:", data)
---
Feel free to fork this project and open pull requests or issues. Suggestions and improvements are always welcome!
---
MIT License ยฉ 2025 Biswajeet Mishra