Architecture

topgrid is a monorepo composed of 31 packages — Free (MIT) 7 + Commercial (EULA) 24. It is divided into a React core + Vue adapter (multi-framework), Pro features, and a chart family.

Package List

Free (MIT) — 7

Package	Description
@topgrid/grid-core	TanStack Table abstraction wrapper + useGridState·<Grid>·virtualization·pagination·sort/filter wiring
@topgrid/grid-core-headless	Framework-agnostic headless core (based on @tanstack/table-core) — shared by React/Vue
@topgrid/grid-renderers	11 cell renderers (text·number·date·badge·link·button·check·icon·tag·avatar·progress) + registry
@topgrid/grid-features	Filter UI (text/number/date/set·global·floating)·multi-sort
@topgrid/grid-sizing	Column sizing — auto-size·size-to-fit·star (proportional) widths
@topgrid/grid-export	Excel/CSV/PDF export·clipboard·print (xlsx·jspdf peers)
@topgrid/grid-vue	Vue 3 adapter — drives the headless core via useVueTable

Commercial (EULA) — 24

Facade · License (3)

Package	Description
@topgrid/grid	Meta package — facade re-exporting every package
@topgrid/grid-license	Runtime Pro license validation + Watermark
@topgrid/grid-license-core	License validation core (framework-agnostic)

Pro Features (17)

Package	Description
@topgrid/grid-pro-agg	Aggregation/grouping — group sum·average·count, group footer·panel
@topgrid/grid-pro-pivot	Pivoting (React) — multi-axis pivot table·subtotals·transpose·pivot panel (DnD)
@topgrid/grid-pro-pivot-core	Pivot engine core (framework-agnostic) — computePivot·pure transforms. Shared by React/Vue
@topgrid/grid-pro-pivot-vue	Pivoting (Vue 3) — useVuePivot·VuePivotGrid·VuePivotPanel
@topgrid/grid-pro-serverside	Server-side row model (SSRM, React) — block lazy-load·infinite scroll·viewport model·server-side tree
@topgrid/grid-pro-serverside-core	SSRM core (framework-agnostic) — block cache·controllers·viewport·tree. Shared by React/Vue
@topgrid/grid-pro-serverside-vue	Server-side (Vue 3) — useVueServerSideData·useVueViewportRowModel·useVueServerSideTree
@topgrid/grid-pro-master	Master-detail·tree·context menu
@topgrid/grid-pro-merging	Cell merging — rowSpan/colSpan
@topgrid/grid-pro-header	Multi-row header·column groups
@topgrid/grid-pro-datamap	Data mapping — code→label (FK display), async maps
@topgrid/grid-pro-tracking	Change tracking — dirty row/cell state
@topgrid/grid-pro-range	Range selection — drag select·fill handle·clipboard copy/paste
@topgrid/grid-pro-edit-plus	Advanced editing — validation rules·undo/redo·find & replace·cell comments
@topgrid/grid-pro-filter	Multi (AND/OR)·advanced (cross-column expression)·cross-filter
@topgrid/grid-pro-panel	Side bar·tool panel (column visibility/order)·status bar·filters panel
@topgrid/grid-pro-sheet	Spreadsheet engine (PoC) — A1 formulas·dependency-graph recalc·cell format/style/merge

Charts (4) — for details see Charts

Package	Description
@topgrid/grid-chart-core	Chart engine core (framework-agnostic) — 17 chart types
@topgrid/grid-pro-chart	Integrated charts·cell sparklines (zero-dependency SVG engine)
@topgrid/grid-pro-chart-enterprise	Enterprise charts (React) — 17 types·multi-axis·BYO·SSR
@topgrid/grid-pro-chart-enterprise-vue	Enterprise charts (Vue) — same engine·SSR helpers

Dependency Rules

graph TD
  subgraph Open["Free (MIT) — 7"]
    grid-core["@topgrid/grid-core"]
    grid-headless["@topgrid/grid-core-headless"]
    grid-features["@topgrid/grid-features"]
    grid-export["@topgrid/grid-export"]
    grid-renderers["@topgrid/grid-renderers"]
    grid-sizing["@topgrid/grid-sizing"]
    grid-vue["@topgrid/grid-vue"]
  end

  subgraph Commercial["Commercial (EULA) — 24"]
    grid["@topgrid/grid (meta facade)"]
    grid-license["@topgrid/grid-license"]
    proAll["grid-pro-* (17 features, pivot·serverside incl. -core/-vue)"]
    charts["4 charts (core·chart·enterprise·enterprise-vue)"]
  end

  grid --> grid-core
  grid --> grid-features
  grid --> grid-renderers
  grid --> grid-export
  grid -.->|re-export| proAll
  grid -.->|re-export| charts
  grid-core --> react["react ^18 \| ^19"]
  grid-core --> tanstack["@tanstack/react-table ^8"]
  grid-core --> virtual["@tanstack/react-virtual ^3"]
  grid-headless --> tablecore["@tanstack/table-core"]
  grid-vue --> grid-headless
  proAll -->|every Pro| grid-license
  proAll -.->|most| grid-core

• Every Pro package → @topgrid/grid-license (runtime license gate).
• Most Pro → @topgrid/grid-core (built on top of <Grid>).
• Some Pro packages compose other Pro/Open packages: grid-pro-pivot·grid-pro-panel → grid-pro-agg · grid-pro-edit-plus → grid-pro-tracking · grid-pro-filter → grid-features · grid-pro-sheet → grid-pro-range · grid-pro-master → grid-export.
• Multi-framework Pro: the pure engines of grid-pro-pivot·grid-pro-serverside are extracted into grid-pro-{pivot,serverside}-core (framework-agnostic) so React (grid-pro-*) and Vue (grid-pro-*-vue) share the same core (mirroring the chart family's grid-chart-core). Vue Pro packages gate via grid-license-core, so no React dependency leaks in.
• Internal dependencies use workspace:* → exact-version pins on publish (lockstep). The @topgrid/grid facade re-exports every package.

Pro Package License Activation

When using Pro packages, a runtime license check runs via @topgrid/grid-license. Set your license key once at the app entry point.

import { setLicenseKey } from '@topgrid/grid-license';

setLicenseKey('YOUR-LICENSE-KEY');