Skip to main content

Getting Started

topgrid is a headless React grid library built on TanStack Table v8. It is organized as a monorepo of 13 packages, supporting both open-source (MIT) and Pro features.

Installation​

# Open packages (headless core)
pnpm add @topgrid/grid @topgrid/grid-core @topgrid/grid-features @topgrid/grid-renderers

# Pro packages (license required)
pnpm add @topgrid/grid-pro-agg @topgrid/grid-pro-datamap @topgrid/grid-pro-header \
         @topgrid/grid-pro-master @topgrid/grid-pro-merging @topgrid/grid-pro-range \
         @topgrid/grid-pro-tracking

# peer dependencies
pnpm add react react-dom @tanstack/react-table @tanstack/react-virtual

Basic Usage​

import { Grid } from '@topgrid/grid';
import { useGridState } from '@topgrid/grid-core';

const columns = [
  { accessorKey: 'id', header: 'ID' },
  { accessorKey: 'name', header: 'Name' },
];

const data = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

export function BasicGrid() {
  const gridState = useGridState({ columns, data });
  return <Grid state={gridState} />;
}

Next Steps​

  • Architecture — 13-package structure and dependency diagram
  • Pro features — available after license activation via @topgrid/grid-license