gridex

The definitive React data grid -- all features, fully customizable, zero paywalls.

Built on TanStack Table v8, React 18+, TypeScript, and CSS Modules.

Website | Documentation & Live Demos | GitHub | Issues

Features

| Category | Features | | ----------------- | ---------------------------------------------------------------------------------------------------- | | Core | Sorting (single/multi), filtering (text/number/date/select/boolean/set), pagination, global search | | Selection | Single/multi row, cell range selection, checkbox column, cross-page persistence | | Columns | Resize, reorder (drag-and-drop), pin left/right, visibility toggle, grouped headers, auto-generation | | Performance | Virtual scrolling (100k+ rows at 60fps), viewport-based lazy loading | | Editing | Cell/row/batch editing, type-specific editors, validation, clipboard paste, fill handle, undo | | Advanced | Pivot tables, formulas (SUM/AVG/IF...), sparklines, cell comments, find & replace | | Data | Server-side sorting/filtering/pagination, row grouping, tree data, live streaming updates | | Export | CSV, Excel (styled), PDF, clipboard copy | | UI | Light/dark/auto themes, density modes, sidebar panels, status bar, tooltips, overlays | | Accessibility | WAI-ARIA grid, full keyboard navigation, screen reader, RTL, touch-optimized |

Every feature AG Grid charges $999+/dev for -- free and MIT-licensed.

Install

npm install gridex

Peer dependencies: react >= 18, react-dom >= 18.

Quick Start

import { Gridex, createColumns } from "gridex";
import "gridex/dist/index.css";

type Person = { name: string; age: number; email: string };

const data: Person[] = [
  { name: "Alice", age: 32, email: "[email protected]" },
  { name: "Bob", age: 28, email: "[email protected]" },
];

const columns = createColumns<Person>((col) => [
  col.accessor("name", { header: "Name" }),
  col.accessor("age", { header: "Age", type: "number" }),
  col.accessor("email", { header: "Email" }),
]);

function App() {
  return <Gridex data={data} columns={columns} />;
}

Examples

All features at a glance

<Gridex
  data={data}
  columns={columns}
  sorting={{ defaultSort: [{ id: "name", desc: false }] }}
  filtering={{ showFilterRow: true, globalFilter: true }}
  pagination={{ pageSize: 10 }}
  selection={{ mode: "multiple" }}
  columnConfig={{
    enableResizing: true,
    enableReordering: true,
    enablePinning: true,
  }}
  virtualization={{ height: 600 }}
  editing={{ enabled: true, trigger: "doubleClick" }}
  expansion={{ enabled: true, renderDetail: (row) => <Detail row={row} /> }}
  theme="dark"
  density="compact"
  striped
  sidebar
  statusBar
  enableCellTooltips
  enableFind
/>

Server-side data

<Gridex
  columns={columns}
  dataSource={{
    fetchData: async ({ sorting, filters, pageIndex, pageSize }) => {
      const res = await fetch(`/api/data?page=${pageIndex}&size=${pageSize}`);
      const { data, totalRows } = await res.json();
      return { data, totalRows };
    },
    pageSize: 25,
    showFilterRow: true,
  }}
/>

Zero-config (auto-generate columns)

<Gridex data={data} autoGenerateColumns />

Documentation

Visit gridex.irbano.com to learn why teams choose gridex and see the full feature overview.

For interactive documentation with live examples for every feature:

docs.gridex.irbano.com

The documentation includes:

• Interactive demos for all 29 enterprise features
• Code examples for every prop and configuration
• API reference with TypeScript types
• Getting started guide

API Reference

Props

| Prop | Type | Description | | ------------------------- | ------------------------------------------ | ---------------------------------------- | | data | TData[] | Data array to display | | columns | ColumnDef[] | Column definitions (use createColumns) | | autoGenerateColumns | boolean \| config | Auto-infer columns from data | | dataSource | GridexDataSource | Server-side data fetching | | sorting | GridexSortingConfig | Sorting configuration | | filtering | GridexFilteringConfig | Filtering configuration | | pagination | GridexPaginationConfig | Pagination configuration | | selection | GridexSelectionConfig | Row/cell selection | | columnConfig | GridexColumnConfig | Column resize/reorder/pin/visibility | | virtualization | GridexVirtualizationConfig | Virtual scrolling | | editing | GridexEditingConfig | Cell/row/batch editing | | expansion | GridexExpansionConfig | Row expansion/detail panels | | grouping | GridexGroupingConfig | Row grouping | | summary | GridexSummaryConfig | Summary/aggregation row | | tree | GridexTreeConfig | Tree/hierarchical data | | pivoting | GridexPivotConfig | Pivot table | | charts | GridexChartConfig | Integrated charts | | theme | "light" \| "dark" \| "auto" | Color theme | | density | "comfortable" \| "compact" \| "spacious" | Row density | | sidebar | boolean \| GridexSidebarConfig | Tool panels | | statusBar | boolean \| GridexStatusBarConfig | Status bar | | enableCellTooltips | boolean | Overflow tooltips | | enableFind | boolean | Ctrl+F find bar | | enableRowAnimation | boolean | Row transitions | | enableTouchOptimization | boolean | Mobile support | | slots | GridexSlots | Component overrides | | locale | GridexTranslations | i18n (13 built-in locales) |

Context API

Access grid APIs from inside slot components:

import { useGridex } from "gridex";

function Toolbar() {
  const { exportAPI, filterAPI } = useGridex();
  return (
    <div>
      <button onClick={() => exportAPI?.downloadCSV()}>CSV</button>
      <button onClick={() => exportAPI?.downloadPDF({ title: "Report" })}>
        PDF
      </button>
      <button onClick={() => filterAPI?.clearFilters()}>Clear Filters</button>
    </div>
  );
}

Mantine Integration

Use Gridex with Mantine v8 components for seamless visual integration:

npm install gridex-mantine

import { MantineProvider } from "@mantine/core";
import { MantineGridex } from "gridex-mantine";
import { createColumns } from "gridex";

<MantineProvider>
  <MantineGridex data={data} columns={columns} />
</MantineProvider>;

All slots (pagination, filters, toolbar, etc.) and cell editors automatically use Mantine components. Dark mode is detected from <MantineProvider>.

See the gridex-mantine documentation for details.

AI-Assisted Development

Using an AI coding agent? Install the Gridex skill so your agent knows the full API:

npx skills add irbano-tech/gridex-skills

Works with Claude Code, Cursor, Windsurf, Cline, and any agent that supports skills. Your agent gets complete knowledge of all props, column types, editing modes, server-side patterns, export, theming, and more.

License

MIT -- free for commercial and personal use.