@nitgrid/react

@nitgrid/react

Website · Documentation

Lightweight, high-performance data grid for React. Virtual scrolling to millions of rows, sorting, filtering, selection, pagination, column pinning, inline editing and CSS-variable theming — in a single self-contained package (no peer grid engine to install).

npm install @nitgrid/react

Peer dependencies: react and react-dom (16.8+, 17 or 18).

Quick start

import { NitGrid } from '@nitgrid/react';
import '@nitgrid/react/styles/nitgrid-light.css';

const columnDefs = [
  { field: 'name', headerName: 'Name', sortable: true, filterable: true },
  { field: 'email', headerName: 'Email', width: 240 },
  { field: 'role', headerName: 'Role' }
];

const rowData = [
  { name: 'Ada Lovelace', email: 'ada@example.com', role: 'Engineer' },
  { name: 'Alan Turing', email: 'alan@example.com', role: 'Architect' }
];

export default function App() {
  return (
    <div style={{ height: 480 }}>
      <NitGrid
        columnDefs={columnDefs}
        rowData={rowData}
        theme="nitgrid-light"
        pagination
        pageSize={25}
        rowSelection="multiple"
        onRowClicked={(e) => console.log('row', e)}
      />
    </div>
  );
}

The grid fills its parent, so give the wrapper a height.

Features

• Virtual scrolling — smooth to millions of rows.
• Sorting, filtering — per-column, Excel-style popup filters.
• Selection — single / multiple, checkbox column.
• Pagination — client-side and server-side.
• Column tools — pinning (left/right), resize, reorder, column chooser.
• Inline editing — editable text cells with change events.
• Theming — CSS-variable themes; ships light, dark and alpine.

Theming

Import one of the prebuilt stylesheets and pass the matching theme:

import '@nitgrid/react/styles/nitgrid-dark.css';   // or -light / -alpine

<NitGrid theme="nitgrid-dark" /* ... */ />

Override the CSS variables in @nitgrid/react/styles/_variables.scss to brand it.

Imperative API

import { useRef } from 'react';
import { NitGrid } from '@nitgrid/react';
import type { NitGridApi } from '@nitgrid/react';

const ref = useRef<NitGridApi>(null);
// ref.current.exportToCSV(), updateRow(...), etc.
<NitGrid ref={ref} /* ... */ />

Enterprise

Row grouping, cell/row merge, cell comments, validation suite and Excel/PDF export are available in @nitgrid/react-enterprise. See https://github.com/nitstack/nitgrid.

License

MIT NitStack