datacomb

🐝 datacomb — Smart React Data Grid

datacomb is a lightweight, highly customizable and feature-rich data grid component built for modern React applications. Designed with flexibility and performance in mind, datacomb supports powerful data display capabilities like sorting, filtering, exporting, editing, pagination, and virtual scrolling.

🚀 Installation

npm install datacomb

or with Yarn:

yarn add datacomb

🧪 Example Usage

import React from "react";
import datacomb from "datacomb";

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" }}>
      <datacomb 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