active-grid

A styled, standalone React data grid with filtering, sorting, paging, virtualization, editing and export, in client and server mode.

@workspace/active-grid 11.0.0Status unknowncontent differs from the recorded release 11.0.0baseline ce081dc3

@workspace/active-grid is a React data grid with its own kernel, its own plain-CSS stylesheet and its own internal controls. It runs on React and React DOM alone: no framework, no design system, no Tailwind and no provider is required. Your application gives it columns, data (or a function that fetches data), a presentation and a translator.

// apps/docs/examples/grid/client-orders.tsx'use client';
import '@workspace/active-grid/styles.css';
import {useMemo} from 'react';import {generateOrders, type Order} from '@/lib/examples/orders';
import {  composePresentationContext,  toIanaTimeZone,} from '@workspace/active-format';import {  ActiveGrid,  createColumnHelper,  englishGridTranslator,  type GridColumnDef,} from '@workspace/active-grid';
// The presentation: language, notation and the time zone the date filter// needs for its relative presets and calendar.const presentation = composePresentationContext(  'en-GB',  null,  toIanaTimeZone('Europe/Amsterdam'),);
const STATUS = [  {label: 'Pending', value: 'pending'},  {label: 'Processing', value: 'processing'},  {label: 'Shipped', value: 'shipped'},  {label: 'Delivered', value: 'delivered'},  {label: 'Cancelled', value: 'cancelled'},];
const ch = createColumnHelper<Order>();const columns: GridColumnDef<Order>[] = [  ch.accessor('id', {header: 'Order', meta: {filterType: 'text'}}),  ch.accessor('customer', {header: 'Customer', meta: {filterType: 'text'}}),  ch.accessor('category', {    header: 'Category',    meta: {filterType: 'select'},  }),  ch.accessor('quantity', {header: 'Qty', type: 'number'}),  ch.accessor('total', {    header: 'Total',    type: 'currency',    meta: {currencyCode: 'EUR', filterType: 'number'},  }),  ch.accessor('orderDate', {header: 'Ordered', type: 'date'}),  ch.accessor('status', {    header: 'Status',    type: 'badge',    meta: {      filterType: 'select',      filterOptions: STATUS,      statusTones: {        pending: 'warning',        processing: 'info',        shipped: 'info',        delivered: 'success',        cancelled: 'danger',      },    },  }),];
/** Client mode: all 500 rows are in the browser; the grid sorts, filters and pages them there. */export default function ClientOrders() {  const data = useMemo(() => generateOrders(500), []);  return (    <ActiveGrid<Order>      gridId="docs-client-orders"      mode="client"      data={data}      columns={columns}      height={420}      locale={presentation}      t={englishGridTranslator}      enableRowSelection      pagination={{enabled: true, pageSizeOptions: [10, 25, 50]}}      toolbar={{search: {enabled: true}, showColumnChooser: true}}    />  );}

What it does#

• Two modes. Client mode sorts, filters and pages rows that are in the browser. Server mode asks your fetchFn for one block of rows at a time, with the sorting, filters and search to apply.
• Columns. Resize, reorder, pin, hide, a column chooser, auto-size; column types for text, numbers, amounts, percentages, dates, badges and booleans.
• Filtering. Text, number, date, select and boolean filters with operator presets, a global search, server-side facets, and an opt-in AND/OR filter builder.
• Rows. Selection (also "select all" in server mode), pinning, expanding with detail panels, grouping with aggregation.
• Editing. Cell, row and batch modes with validation, and undo and redo.
• Export. CSV, JSON, Excel, PDF and the clipboard, as data or as presentation.
• Keyboard and direction. Cell-level keyboard navigation with roving focus; right to left with logical pinning; any language Intl formats.

What it does not do#

• No data access. In server mode the server is yours: the grid sends a request and renders the answer. It has no query language, no database adapter and no authorization.
• No language of its own. Every word goes through the translator you pass (t); englishGridTranslator is the package's English, which you pass on purpose. The presentation (locale) is required.
• No brand. A neutral baseline; your application maps the --grid-* tokens to its own (see Host styling).

What your application provides#

Dependencies#

@workspace/active-format, @workspace/active-virtual and @workspace/active-helpers (owners that come along with it), @base-ui/react, clsx, date-fns, @date-fns/tz, lucide-react and react-day-picker. react and react-dom 19 are peers.

Next#

• Getting started
• Client, server and simulation: the three kinds of examples, with a real server route.