Use a grid when the table has become a tool
A read-only list does not need a data grid. Ace Grid becomes useful when people edit values, select records, filter repeatedly, pin columns, or navigate by keyboard. If the screen only displays a few rows, use a semantic table and keep the implementation smaller.
Start with rows, columns, and stable IDs
The example below has two inputs: rows that represent customer records and columns that describe how each field behaves. Keep row IDs stable through sorting, filtering, and updates. Use explicit column keys and value types. Those two choices prevent most selection, editing, and virtualization bugs before they start.
Keep saved data in your application
Ace Grid can edit a cell and report the change, but your application still owns the record. In a typical save flow, update local state, send the change to the API, and show a cell-level error if the server rejects it. Add conflict handling only when the backend actually supports record versions; a basic editable grid does not need an elaborate transaction system.
Prototype the difficult row, not the easy one
Use real column widths, the densest custom cell, one editor, one validation error, and enough rows to exercise scrolling. Then test keyboard navigation, dark mode, loading, empty results, and a failed save. This small fixture reveals more than a polished demo filled with simple text cells.
Measure the workflow users will perform
Test initial render, fast scrolling, edit start, filtering, and resizing on the devices your users have. Row count is only one cost: wide grids and expensive custom renderers can matter more. Ace Grid supports row and column virtualization; turn on cell-content virtualization only when profiling shows that inner cell content is the bottleneck.
Choose the smallest tier that covers the job
Core is MIT licensed and covers editing, selection, sorting, filtering, pagination, pinning, resizing, virtualization, CSV workflows, and theming. Move to Pro for spreadsheet features such as formulas, advanced validation, Excel I/O, grouping, or tree data. Enterprise is for server row model, charts, pivoting, and master-detail. Do not choose a paid tier until the prototype proves you need it.
Product evidence
Core feature boundary
@ace-grid/core includes editing, selection, sorting, filtering, pagination, search, pinning, resizing, virtualization, CSV I/O, theming, and schema-aware grid state helpers under the MIT license.
Framework-specific packages
React uses @ace-grid/core directly. Ace Grid also publishes Web Component, Angular, Vue, and Svelte wrappers for applications that do not render the React component directly.
Live Ace Grid example
Core product grid
A real Ace Grid Core surface with editable customer rows, segment pills, status, ARR, health, and structured payload data.
Production-shaped Core example
import { Grid, type CellValue, type GridColumn, type GridRow } from "@ace-grid/core";
const cell = (value: unknown, type: CellValue["type"] = "text"): CellValue => ({ value, type });
const rows: GridRow[] = [
{ id: "1", data: { company: cell("HelioBank"), owner: cell("Maya"), segment: cell("Enterprise"), status: cell("Live") } },
{ id: "2", data: { company: cell("Northstar AI"), owner: cell("Theo"), segment: cell("Strategic"), status: cell("Live") } },
];
const columns: GridColumn[] = [
{ key: "company", title: "Company", editable: true, sortable: true, filterable: true, width: 240 },
{ key: "owner", title: "Owner", editable: true, width: 160 },
{ key: "segment", title: "Segment", type: "select", options: ["Enterprise", "Strategic", "Market"], filterable: true, width: 180 },
{ key: "status", title: "Status", editable: true, filterable: true, width: 140 },
];
export function ProductGrid() {
return (
<Grid
data={{ rows, columns }}
columns={{ columnWidths: Object.fromEntries(columns.map((column) => [column.key, column.width ?? 160])), fillWidth: true }}
layout={{ width: 1200, height: 520 }}
virtual={{ enableVirtualization: true, enableHorizontalVirtualization: true }}
/>
);
}Choose the right React table abstraction
Limitations and tradeoffs
- Use a semantic table or headless table for small, mostly read-only views that need custom markup more than grid interaction.
- Use a workbook component when sheets, arbitrary ranges, macros, or document fidelity are the product.
Common questions
Is Ace Grid Core free to use?
@ace-grid/core is MIT licensed. Pro and Enterprise are commercial packages for spreadsheet and server-backed capabilities.