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

🛠️ Getting Started

Installation

npm install @opencorestack/opengridx

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

Styles: The CSS is bundled as a separate file (opengridx.css) alongside the JS. It is imported automatically via the package barrel in most setups. However, if your grid appears unstyled (Vite, Next.js App Router, or SSR environments sometimes skip side-effect CSS auto-detection), add this explicit import once — typically in your app's root file (main.tsx / layout.tsx):

import '@opencorestack/opengridx/styles';

⚡ Basic Example

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

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.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}
    />
  );
}

🚀 Key Features

• High-Performance Virtualization: Custom-built engine handling 100,000+ rows at 60fps.
• Advanced Layouts: Native support for Row & Column Spanning, Grouping, and Tree Data.
• Data Orchestration: 11+ filter operators, multi-column sorting, and robust pagination.
• Zero UI Dependencies: 100% vanilla CSS (BEM) and pure React/TypeScript logic.
• Skeleton Loader: Built-in animated loading states with smart column detection.
• Fully Customizable: Slots system for replacing any component (pagination, overlays, toolbar).
• Export Functionality: Built-in CSV, Excel, JSON, and Print export.
• Clipboard: Ctrl+C / Cmd+C copies selected rows as TSV for Excel/Sheets.
• Accessibility: WCAG 2.1 AA — full ARIA roles and keyboard navigation.
• Theming: CSS variable API with 5 built-in themes + custom theme support.
• 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

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | rows | GridRowModel[] | — | Required. Array of data rows. | | columns | GridColDef[] | — | Required. Column definitions. | | height | number | 500 | Grid height in pixels. | | loading | boolean | false | Shows skeleton loader when true. | | checkboxSelection | boolean | false | Enables checkbox column for row selection. | | pagination | boolean | false | Enables client-side pagination. | | pageSize | number | 25 | Rows per page. | | getRowId | (row) => GridRowId | row.id | Custom row ID accessor. | | rowHeight | number | 52 | Row height in pixels. | | headerHeight | number | 56 | Header height in pixels. |

Selection

| Prop | Type | Description | | :--- | :--- | :--- | | rowSelectionModel | GridRowId[] | Controlled selected row IDs. | | onRowSelectionModelChange | (model: GridRowId[]) => void | Fires on selection change. | | disableRowSelectionOnClick | boolean | Prevent row click from toggling selection. |

Sorting & Filtering

| Prop | Type | Description | | :--- | :--- | :--- | | sortModel | GridSortItem[] | Controlled sort model. | | onSortModelChange | (model) => void | Fires on sort change. | | filterModel | GridFilterModel | Controlled filter model. | | onFilterModelChange | (model) => void | Fires on filter change. | | disableColumnFilter | boolean | Disables column-level filtering. |

Server-Side

| Prop | Type | Description | | :--- | :--- | :--- | | paginationMode | 'client' \| 'server' \| 'infinite' | Data fetching mode. | | sortingMode | 'client' \| 'server' | Where sorting is applied. | | filterMode | 'client' \| 'server' | Where filtering is applied. | | dataSource | GridDataSource | Server-side data adapter. | | rowCount | number | Total rows for server-side pagination. |

Customization

| Prop | Type | Description | | :--- | :--- | :--- | | slots | GridSlots | Replace built-in components (toolbar, pagination, overlays). | | slotProps | GridSlotProps | Pass custom props to slot components. | | getRowClassName | (params) => string | Add custom CSS class to rows. | | getCellClassName | (params) => string | Add custom CSS class to cells. | | theme | GridTheme | Apply a custom theme object. |

apiRef — Imperative API

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

// Usage
apiRef.current.getSelectedRows()       // → GridRowId[]
apiRef.current.copySelectedRows()      // → Promise<void>
apiRef.current.selectRow(id, true)     // select a row
apiRef.current.setFilterModel(model)   // programmatic filter
apiRef.current.sortColumn('name', 'asc')
apiRef.current.setPage(2)
apiRef.current.getVisibleRows()        // → GridRowModel[]

🎨 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 */ }
  }}
/>

Export Functionality

OpenGridX has two tiers of Excel export:

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

exportToCsv(rows, columns, { fileName: 'data.csv' });
exportToExcel(rows, columns, { fileName: 'data.xlsx' });
exportToExcelAdvanced(rows, columns, {
    fileName: 'data.xlsx',
    columnStyles: { avatar: { embedImage: true, imageWidth: 40, imageHeight: 40 } }
});
exportToJson(rows, columns, { fileName: 'data.json' });
printGrid(rows, columns, 'Report Title');

Optional peer dependency: exportToExcelAdvanced requires ExcelJS:

npm install exceljs

Theming

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

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

Built-in themes: darkTheme, roseTheme, emeraldTheme, amberTheme, compactTheme

⚡ Performance & Bundle Size

| Artifact | Minified | Gzipped | Notes | | :--- | :--- | :--- | :--- | | Core ES Module (opengridx.es.js) | 220 KB | 52 KB | Use this — tree-shakeable | | Core UMD (opengridx.umd.js) | 146 KB | 44 KB | CommonJS / CDN compat | | Styles (opengridx.css) | 57 KB | 9 KB | Auto-included | | ExcelJS (optional peer dep) | — | — | npm install exceljs | | npm package download | — | 400 KB | Total compressed tarball |

• 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 is an optional peer dep — not bundled, only used if you install it.
• Efficient Rendering: Custom virtualization handles 100k+ rows with zero DOM churn.

📚 Documentation

Full documentation at 👉 opencorestack.github.io/OpenGridX

🏛️ Components

• DataGrid — Main component props and slots
• Toolbar & Pagination — Supplemental UI components

🚀 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, and Print
• Data Source — Server-side integration

📊 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.

| Feature | MUI Free | MUI Pro ($$$) | AG Grid Community | OpenGridX | | :--- | :---: | :---: | :---: | :---: | | Virtualization | ✅ | ✅ | ✅ | ✅ | | Column Pinning | ❌ | ✅ | ✅ | ✅ | | Row Grouping | ❌ | ✅ | ✅ | ✅ | | Tree Data | ❌ | ✅ | ✅ | ✅ | | Master-Detail | ❌ | ✅ | ✅ | ✅ | | Excel Export | ❌ | ✅ | ❌ | ✅ | | Advanced Filtering | ❌ | ✅ | ❌ | ✅ | | Aggregation | ❌ | ✅ | ❌ | ✅ | | Pivot Mode | ❌ | ✅ | ❌ | ✅ | | Price | Free | $$$ | Free (limited) | Free |

📝 License

MIT © 2026 Open Core Stack