OpenGridX | The Free Enterprise React DataGrid

OpenGridX is a premium, high-performance React DataGrid engine designed to break the "Pay-to-Play" model in the React ecosystem. It provides a pure-custom, zero-dependency alternative to enterprise grids like MUI X DataGrid Pro and AG Grid, offering advanced features for free.

👉 Live Demo & Docs — Interactive showcase with full API documentation

Upgrading from 2.x? 3.0.0 changes formatted text, exported files, callback indices and request ranges. See the v2 → v3 migration guide first: it starts with a table that maps what your app uses to the sections you need.

---

🛠️ Getting Started

Installation

npm install @opencorestack/opengridx

import { DataGrid } from '@opencorestack/opengridx';
import '@opencorestack/opengridx/styles';

Import the styles. The CSS ships as a separate file (dist/opengridx.css) and the JavaScript bundle does not load it. Import @opencorestack/opengridx/styles once, typically in your app's root file (main.tsx, App.tsx or Next.js layout.tsx). Without it the grid is unstyled and, because the viewport's scrolling comes from the stylesheet, it grows to fit every row and virtualization stops working. Development builds log a one-time [OpenGridX] The grid stylesheet is not loaded warning when this happens.

---

⚡ Basic Example

import { DataGrid, type GridColDef } from '@opencorestack/opengridx';
import '@opencorestack/opengridx/styles';

const columns: GridColDef[] = [
  { field: 'id',         headerName: 'ID',         width: 70 },
  { field: 'name',       headerName: 'Name',        width: 180 },
  { field: 'role',       headerName: 'Role',        width: 150 },
  { field: 'salary',     headerName: 'Salary',      width: 120, type: 'number',
    valueFormatter: ({ value }) => `$${(value as number).toLocaleString()}` },
  { field: 'department', headerName: 'Department',  width: 160 },
];

const rows = [
  { id: 1, name: 'Jon Snow',         role: 'Engineer',  salary: 95000,  department: 'Defense' },
  { id: 2, name: 'Cersei Lannister', role: 'Manager',   salary: 140000, department: 'Management' },
  { id: 3, name: 'Arya Stark',       role: 'Analyst',   salary: 65000,  department: 'Special Ops' },
];

export default function App() {
  return (
    <DataGrid
      rows={rows}
      columns={columns}
      checkboxSelection
      pagination
      height={400}
    />
  );
}

Without a height prop the grid fills its container (height: 100%, or the free space as a flex item), so put it in a container with a bounded height: a definite height, and min-height: 0 on every flex or grid item up to that element. In an unbounded container the grid grows to fit and every row is rendered (a development warning says so). See Virtualization.

---

🚀 Key Features

• High-Performance Virtualization: Row and column virtualization for 100,000+ rows. (Browsers cap an element's height, so a single scrolling grid reaches about 645,000 rows at the default 52 px row height; page or stream larger datasets.)
• Advanced Layouts: Native support for Row & Column Spanning, Grouping, and Tree Data.
• Data Orchestration: 19 filter operators across string, number, date, boolean and select columns, AND/OR filter groups, multi-column sorting, and client or server pagination.
• Zero UI Dependencies: 100% vanilla CSS (BEM) and pure React/TypeScript logic.
• Skeleton Loader: Built-in animated skeleton rows that follow the current columns.
• Fully Customizable: Slots system for replacing any component (pagination, overlays, toolbar).
• Export Functionality: Built-in CSV, Excel (HTML .xls, or real .xlsx with the optional ExcelJS peer), JSON, PDF (optional jsPDF peer) and Print export.
• Clipboard: Ctrl+C / Cmd+C copies the selected rows' visible columns as TSV for Excel/Sheets.
• Accessibility: WCAG 2.1 AA — full ARIA roles and keyboard navigation.
• Theming: CSS variable API, DataGridThemeProvider with 5 built-in themes (darkTheme, roseTheme, emeraldTheme, amberTheme, compactTheme) and custom themes.
• Column & Row Reordering: Drag-and-drop column reordering and row reordering.
• Inline Cell Editing: Full inline editing with processRowUpdate validation.
• State Persistence: Save and restore grid state (sort, filter, pagination, columns, density) via useGridStateStorage.
• AI-Native Integration: Shipped with raw lib/ source and docs/ inside the npm package, allowing AI agents (Cursor, Copilot, Windsurf) to flawlessly implement features by "seeing" the internal logic.

---

🤖 AI-Powered Implementation

OpenGridX is built for the era of AI-native development. When you install @opencorestack/opengridx, we include the full raw source code and markdown documentation in your node_modules.

This means that Cursor, GitHub Copilot, Windsurf, and other AI agents can read the actual implementation patterns and docs to accurately help you build complex features like server-side tree data or pivot tables without guessing.

Tip for Cursor/Copilot users: If your AI is struggling, tell it to "Read the docs and source in ./node_modules/@opencorestack/opengridx/docs" for instant context.

---

📐 API Reference

Core Props

Column Definitions (GridColDef)

Selection

Sorting & Filtering

Columns

Events

Server-Side

Pinning

Inline Editing

Row Reordering

Advanced Features

Master-Detail

Customization

Per-cell styling uses GridColDef.cellClassName / headerClassName; themes are applied with <DataGridThemeProvider theme={…}> (see Theming below).

apiRef — Imperative API

const apiRef = useGridApiRef();
<DataGrid apiRef={apiRef} ... />

// Rows
apiRef.current.getRow(id)              // → GridRowModel | null
apiRef.current.getAllRows()            // → GridRowModel[]
apiRef.current.getVisibleRows()        // → GridRowModel[] (rows on screen: current page + pinned rows)
apiRef.current.getAllFilteredRows()    // → GridRowModel[] (every filtered + sorted row, all pages)
apiRef.current.getGroupedExportRows()  // → GridGroupedExportRow[] | null (row grouping only)

// Columns
apiRef.current.getColumn(field)        // → GridColDef | null
apiRef.current.getAllColumns()         // → GridColDef[]
apiRef.current.getVisibleColumns()     // → GridColDef[] (visible columns, display order)

// Selection
apiRef.current.selectRow(id, true)
apiRef.current.selectRows([id1, id2], true)
apiRef.current.getSelectedRows()       // → GridRowId[]

// Sorting
apiRef.current.sortColumn('name', 'asc')   // null removes the column's sort
apiRef.current.getSortModel()          // → GridSortItem[]

// Filtering
apiRef.current.setFilterModel(model)
apiRef.current.getFilterModel()        // → GridFilterModel

// Pagination
apiRef.current.setPage(2)
apiRef.current.setPageSize(50)

// Scroll
apiRef.current.scrollToIndexes({ rowIndex: 100, colIndex: 3 })
apiRef.current.autosizeColumn('name')   // fit to content (v3.1.0+)

// Clipboard
apiRef.current.copySelectedRows()      // → Promise<void>, rejects if the clipboard write fails

// Aggregation
apiRef.current.getAggregationResult()  // → Record<string, unknown> | null
apiRef.current.getAggregationModel()   // → GridAggregationModel | null

---

🎨 Customization & Extensibility

Slots System

Replace any built-in component with your own:

<DataGrid
  rows={rows}
  columns={columns}
  slots={{
    toolbar: CustomToolbar,
    pagination: CustomPaginationComponent,
    noRowsOverlay: CustomEmptyState,
    loadingOverlay: CustomLoader,
    footer: CustomFooter
  }}
  slotProps={{
    toolbar: { /* custom props */ },
    pagination: { /* custom props */ }
  }}
/>

Built-in Toolbar

import { DataGrid, GridToolbar } from '@opencorestack/opengridx';

<DataGrid
  rows={rows}
  columns={columns}
  filterModel={filterModel}
  onFilterModelChange={setFilterModel}
  columnVisibilityModel={columnVisibilityModel}
  onColumnVisibilityModelChange={setColumnVisibilityModel}
  slots={{ toolbar: GridToolbar }}
/>

GridToolbar provides global search, column visibility management, advanced filters, and aggregation (Summaries) controls, plus a Pivot button when pivot mode is configured. Mounted through slots.toolbar, every control works without any filter or visibility props: the grid keeps that state itself, and the props above only make it controlled. Rendered on its own, outside a grid, GridToolbar hides each button whose callback prop (onFilterModelChange, onColumnVisibilityModelChange, onAggregationModelChange, onPivotModelChange) is not passed.

Customizing individual toolbar controls

Replace any single control using render props — the panels remain fully functional:

import { GridToolbar, exportToCsv, useGridApiRef,
         type ToolbarButtonRenderProps, type ToolbarQuickFilterRenderProps } from '@opencorestack/opengridx';

const apiRef = useGridApiRef();

<DataGrid
  rows={rows}
  columns={columns}
  apiRef={apiRef}
  slots={{ toolbar: GridToolbar }}
  slotProps={{
    toolbar: {
      className: 'my-branded-toolbar',
      renderQuickFilter: ({ value, onChange }: ToolbarQuickFilterRenderProps) => (
        <input className="my-search" value={value} onChange={e => onChange(e.target.value)} />
      ),
      renderFilterButton: ({ onClick, isOpen, activeCount }: ToolbarButtonRenderProps) => (
        <button className={isOpen ? 'active' : ''} onClick={onClick}>
          Filters {activeCount > 0 && <span>{activeCount}</span>}
        </button>
      ),
      renderExportButton: () => (
        <button onClick={() => exportToCsv(apiRef.current.getAllFilteredRows(), apiRef.current.getVisibleColumns())}>
          Export CSV
        </button>
      ),
    },
  }}
/>

Export Functionality

OpenGridX has two tiers of Excel export:

import {
    exportToCsv,
    exportToExcel,          // ✅ built-in, zero deps
    exportToExcelAdvanced,  // ✅ rich .xlsx — requires: npm install exceljs
    exportToJson,
    exportToPdf,            // ✅ PDF — requires: npm install jspdf jspdf-autotable
    printGrid
} from '@opencorestack/opengridx';

exportToCsv(rows, columns, { fileName: 'data.csv' });
exportToExcel(rows, columns, { fileName: 'data.xls' });  // HTML table, opened by Excel as .xls
exportToExcelAdvanced(rows, columns, {
    fileName: 'data.xlsx',
    columnStyles: { avatar: { embedImage: true, imageWidth: 40, imageHeight: 40 } }
});
exportToJson(rows, columns, { fileName: 'data.json' });
await exportToPdf(rows, columns, { fileName: 'data', title: 'Report Title' });
printGrid(rows, columns, 'Report Title');

Optional peer dependencies: exportToExcelAdvanced requires ExcelJS (npm install exceljs); exportToPdf requires npm install jspdf jspdf-autotable.

Large exports: PDF size and time grow fast (75–120 MB and several seconds for 50,000 grouped rows). Since v3.2 exportToPdf yields between slices so the page stays responsive, reports onProgress and accepts an abort signal; above maxRows (default 20,000) it warns in development. For more than a few thousand rows export CSV or .xlsx. PDF's built-in font only covers Latin-1: pass the font option (a Unicode .ttf) for characters such as ₹, otherwise they print as ?. See PDF Export.

CSV and HTML-Excel exports neutralise spreadsheet formulas (text starting with =, +, -, @, a tab or a carriage return gets a leading '; opt out with escapeFormulas: false), and CSV starts with a UTF-8 BOM (bom: false omits it). exportToExcel writes an HTML table, so a .xlsx file name is saved as .xls. To export what the grid shows, pass apiRef.current.getAllFilteredRows() and apiRef.current.getVisibleColumns(); with a custom getRowId, also pass getRowId in the options so selectedRows match. See the Export Guide.

State Persistence

import { useGridStateStorage } from '@opencorestack/opengridx';

const { initialState, onStateChange, clearState } = useGridStateStorage('my-grid-key');

<DataGrid
  rows={rows}
  columns={columns}
  initialState={initialState}
  onStateChange={onStateChange}
/>

Theming

import { DataGridThemeProvider, darkTheme } from '@opencorestack/opengridx';

<DataGridThemeProvider theme={darkTheme}>
  <DataGrid rows={rows} columns={columns} />
</DataGridThemeProvider>

Built-in themes: darkTheme, roseTheme, emeraldTheme, amberTheme, compactTheme. The provider pins a complete light or dark palette (theme.mode), whatever the operating system's colour scheme.

---

⚡ Performance & Bundle Size

• Tree-shaking Ready: ES Module build — bundlers (Vite, Webpack) only include what you use.
• Zero UI Dependencies: No MUI, Ant Design, or Radix. Pure React + vanilla CSS.
• Lazy Advanced Export: ExcelJS and jsPDF are optional peer deps — not bundled, loaded only when you call exportToExcelAdvanced / exportToPdf.
• Efficient Rendering: Row and column virtualization keeps the DOM small for 100k+ rows (needs a bounded grid height).

---

📚 Documentation

Full documentation at 👉 opencorestack.github.io/OpenGridX · 📖 Wiki

🏛️ Components

• DataGrid — Main component props and slots
• Toolbar & Pagination — Supplemental UI components
• Filter Panel — Advanced filter panel component
• Column Visibility — Column show/hide panel

🚀 Features

• Virtualization — 60fps rendering for 100k+ rows
• Filtering & Search — Quick filters and advanced operators
• Sorting & Pagination — Multi-column sorting
• Editing & Reordering — Inline edits and DnD
• Row Selection — Checkbox and multi-row interaction
• Pinning — Sticky columns and rows
• State Persistence — Save/Restore grid state
• Infinite Scroll — Seamless lazy-loading
• Export Guide — Excel, CSV, JSON, and Print
• PDF Export — Branded PDF reports
• Clipboard — Copy rows as TSV
• Keyboard & Accessibility — Keys, focus and ARIA
• Data Source — Server-side integration
• Loading States — Skeleton and shimmer overlays

📊 Advanced Data

• Aggregation & Pivot — Summary totals
• Tree Data & Grouping — Hierarchical rows
• Cell Spanning — Colspan and Rowspan
• Master-Detail — Expandable detail panels

🎨 Customization

• Theming Guide — CSS variables and custom themes
• Slots API — Component replacement system

---

🚀 Why OpenGridX?

Most React grids gatekeep essential features like Row Grouping, Excel Export, and Master-Detail behind expensive annual licenses. OpenGridX provides these premium capabilities out-of-the-box, with full source-code control and no external UI dependencies.

---

🤝 Contributing

See CONTRIBUTING.md and the Code of Conduct. Bugs and feature requests: open an issue.

🧪 Testing

npm test                # unit tests (jsdom)
npm run test:browser    # real Chromium, Firefox and WebKit
npm run test:smoke      # pack the library, install it into React 18/19 apps, run Playwright

Which layer to use, and how the package smoke suite works: docs/contributing/testing.md.

---

📝 License

MIT © 2026 Open Core Stack