🐝 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

``bash npm install gridbee`

or with Yarn:

`bash yarn add gridbee`

---

`🧪 Example Usage`

`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;`

---

`🎯 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:

`js 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

🐝 gridbee — Smart React Data Grid

---

🧪 Example Usage

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;

---