Awesome Data Grid Component

Awesome Data Grid is a feature-rich, themeable React data grid/table with client-side sorting, filtering, grouping, column visibility, drag-and-drop ordering, resizable columns, CSV export, and optional virtualization for large datasets. It also supports personalization stored in IndexedDB.

Features

• Client-side sorting, filtering, and grouping [Hierarchy View]
• Column visibility + Drag-and-Drop ordering [Using - Pane/Drawer on right hand side]
• Resizable columns with persistence
• CSV export
• Theme switcher (light/dark/purple)
• Virtualized rendering for large datasets (All rows mode)
• Date filtering with HTML5 date input
• Personalization stored in IndexedDB

Watch the demo here

Install

npm install awesome-data-grid

Usage

import { AwesomeDataGrid } from "awesome-data-grid";
import "awesome-data-grid/style.css";

export default function App() {
  return (
    <AwesomeDataGrid
      apiEndpoint="/api/orders"
      storageKey="orders-grid"
      rowKey="id"
      theme="light"
      currency="USD"
      currencyColumns={["total", "tax", "grandTotal"]}
      pageSizeOptions={[50, 100, 200, 500, 0]} // 0 = All
      defaultPageSize={100}
      rowsPerPage={25}
      dateFormat={{
        locale: "en-US",
        options: { year: "numeric", month: "2-digit", day: "2-digit" },
      }}
      dateSeparator="/"
      computedColumns={[
        {
          key: "totalWithTax",
          label: "Total + Tax",
          formula: (row) => Number(row.total || 0) * 1.18,
        },
      ]}
    />
  );
}

API Contract (Expected Response Shape)

The component expects a JSON response with data and columns.

Example response:

{
  "columns": [
    {
      "key": "CustomerId",
      "label": "Customer Id",
      "format": null,
      "type": "Int32"
    },
    {
      "key": "ContactName",
      "label": "Contact Name",
      "format": null,
      "type": "String"
    },
    {
      "key": "City",
      "label": "Living City",
      "format": null,
      "type": "String"
    }
  ],
  "data": [
    {
      "CustomerId": 1,
      "ContactName": "Kiran Shah",
      "City": "Patna",
      "State": "Bihar",
      "Country": "India",
      "ZipCode": "800001",
      "Approved": false,
      "JoiningDate": "2024-07-01T14:33:39.8623856+05:30"
    },
    {
      "CustomerId": 2,
      "ContactName": "Rohan Kulkarni",
      "City": "Ahmedabad",
      "State": "Gujarat",
      "Country": "India",
      "ZipCode": "380001",
      "Approved": false,
      "JoiningDate": "2022-06-06T14:33:39.8623899+05:30"
    },
    {
      "CustomerId": 3,
      "ContactName": "Amit Mehta",
      "City": "Jaipur",
      "State": "Rajasthan",
      "Country": "India",
      "ZipCode": "302001",
      "Approved": true,
      "JoiningDate": "2021-07-24T14:33:39.8623901+05:30"
    }
  ],
  "totalCount": 200
}

Notes

• columns can be an array of strings or objects.
  • String format: ["id", "customer_name", "order_date", "total"]
  • Object format: { key: "order_date", label: "Order Date" }
• data is an array of objects; keys are normalized to camelCase.
• Date detection is automatic when values can be parsed as valid dates.

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | apiEndpoint | string | required | API URL that returns data + columns. | | rowKey | string | required | Unique key field for each row (e.g., id). | | theme | "light" \| "dark" \| "purple" | "light" | Theme for the table UI. | | storageKey | string | "awesome-data-grid" | Override the IndexedDB key used for persisting preferences. Use a unique value per grid instance to avoid collisions. | | currency | "INR" \| "USD" | "INR" | Currency used for numeric cell formatting. | | currencyColumns | string[] | [] | Columns (by key) to format as currency. Keys are normalized to camelCase. | | computedColumns | Array<{ key, label, formula }> | [] | Add computed columns from row data. | | pageSizeOptions | number[] | [50, 100, 500, 1000, 0] | Page size choices; 0 means "All". | | defaultPageSize | number | first option | Initial page size. Must exist in pageSizeOptions. | | rowsPerPage | number | 50 | Rows shown per page in the UI when paginating. | | dateFormat | { locale, options } | en-US, {year,month,day} | Intl date formatting options. | | dateSeparator | "/" \| "-" | "/" | Separator between date parts. |

dateFormat.options.month values

• numeric -> 1
• 2-digit -> 01
• short -> Jan
• long -> January
• narrow -> J

Export

import { AwesomeDataGrid } from "awesome-data-grid";

Build Output

When building the library (npm run build:lib), the package artifacts are generated in the dist/ folder.

Styling

AwesomeDataGrid ships with a bundled stylesheet. Import it once in your app:

import "awesome-data-grid/style.css";

Personalization Persistence (IndexedDB)

AwesomeDataGrid stores personalization in IndexedDB (not LocalStorage) so settings survive refreshes:

• Theme
• Sort order
• Column order + visibility
• Grouping selections
• Column widths
• Page size + rows-per-page

Use a unique storageKey per grid instance if you render multiple grids on the same page:

<AwesomeDataGrid apiEndpoint="/api/orders" rowKey="id" storageKey="orders-grid" />
<AwesomeDataGrid apiEndpoint="/api/customers" rowKey="id" storageKey="customers-grid" />

📊 Mock Data

If you need sample data to test your integration, you can use our pre-configured JSON mock file.

Direct Download

Click the button below to view or save the mock data file:

Download the Document

Note: If the file opens in your browser, just right-click and select "Save As..."

License

MIT