gridbee

🐝 gridbee — Smart React Data Grid

gridbee 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.

🚀 Installation

npm install gridbee

or with Yarn:

yarn add gridbee

🧪 Example Usage

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 (
    <div style={{ padding: "20px" }}>
      <gridbee config={config} />
    </div>
  );
};

export default App;

🎯 Features

• 🔍 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

🎨 Customization

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.

🧩 Callbacks

Use powerful callbacks like:

onRowClick: (row) => console.log("Clicked row:", row),
onDataLoad: (data) => console.log("Loaded data:", data)

🤝 Contributing

Feel free to fork this project and open pull requests or issues. Suggestions and improvements are always welcome!

📜 License

MIT License © 2025 Biswajeet Mishra