Configuration properties for the ActiveGrid component.
The ActiveGrid component is the main component that orchestrates header, body, footer, pagination, and toolbar. It accepts a comprehensive set of configuration properties to customize behavior and appearance.
import { ActiveGrid } from '@workspace/active-grid';<ActiveGrid
gridId="users"
mode="client"
data={users}
columns={columns}
/>string<ActiveGrid gridId="orders" {...} />'client' | 'server''client'<ActiveGrid mode="client" data={data} {...} />
<ActiveGrid mode="server" fetchFn={fetchData} {...} />GridColumnDef<TData>[]const columns: GridColumnDef<User>[] = [
{ accessorKey: 'name', header: 'Name' },
{ accessorKey: 'email', header: 'Email' },
];TData[]<ActiveGrid mode="client" data={users} {...} />ServerFetchFunction<TData>GridColumnTypes<TData>GridColumnDefaults<TData>booleanfalsebooleanfalseGridPaginationConfignumberbooleantrue'onChange' | 'onEnd''onChange'booleantruenumberbooleanfalse(row: TData) => booleannumber(row: TData) => stringNew in v5.1
booleanfalse(row: Row<TData>) => ReactNode(row: Row<TData>) => boolean'cell' | 'row'(payload: EditingCommitPayload<TData>) => Promise<void>booleanfalsenumber1000numberbooleanfalse(row: TData, columnId: string) => voidNew in v5.1
GridExportOptionsGridSettings<TData>GridToolbarConfig<TData>GridHeaderMenuConfigGridRowMenuConfig<TData>stringstringstring(row: TData) => voidContextMenuBuilder<TData>any<ActiveGrid
mode="server"
fetchFn={async (params) => {
const response = await api.getUsers(params);
return {
data: response.data,
totalCount: response.total,
};
}}
{...}
/>const columnTypes = {
currency: {
size: 120,
meta: {
cellAlign: 'right',
valueFormatter: (value) => `$${value.toFixed(2)}`,
},
},
};
<ActiveGrid columnTypes={columnTypes} {...} /><ActiveGrid
columnDefaults={{
size: 150,
enableSorting: true,
enableHiding: true,
}}
{...}
/><ActiveGrid enablePersistence gridId="users" {...} /><ActiveGrid enableUrlSync gridId="users" {...} /><ActiveGrid
pagination={{
enabled: true,
position: 'bottom',
pageSizeOptions: [10, 20, 50, 100],
}}
{...}
/><ActiveGrid initialPageSize={25} {...} /><ActiveGrid enableColumnResizing={true} {...} /><ActiveGrid columnResizeMode="onEnd" {...} /><ActiveGrid enableColumnPinning={true} {...} /><ActiveGrid minTableWidth={800} {...} /><ActiveGrid enableRowPinning={true} {...} /><ActiveGrid
isRowPinnable={(row) => row.priority === 'high'}
{...}
/><ActiveGrid maxPinnedRows={5} {...} /><ActiveGrid
getRowId={(row) => row.customId}
{...}
/><ActiveGrid enableExpanding={true} {...} /><ActiveGrid
renderDetailPanel={(row) => (
<OrderDetails order={row.original} />
)}
{...}
/><ActiveGrid
getRowCanExpand={(row) => row.original.hasDetails}
{...}
/><ActiveGrid editMode="cell" {...} /><ActiveGrid
onDataCommit={async (payload) => {
await updateData(payload.newData);
}}
{...}
/><ActiveGrid enableVirtualization={true} {...} /><ActiveGrid virtualizationThreshold={500} {...} /><ActiveGrid virtualContainerHeight={600} {...} /><ActiveGrid enableKeyboardNavigation={true} {...} /><ActiveGrid
onCellActivate={(row, columnId) => {
console.log('Cell activated:', row, columnId);
}}
{...}
/><ActiveGrid
export={{
enabled: true,
formats: ['xlsx', 'csv'],
filename: 'data-export',
}}
{...}
/><ActiveGrid
settings={{
stripedRows: true,
rowHeight: 48,
headerHeight: 52,
footer: { className: 'font-bold' },
}}
{...}
/><ActiveGrid
toolbar={{
search: { placeholder: 'Search...', debounceMs: 300 },
actions: (table) => <ExportButton table={table} />,
}}
{...}
/><ActiveGrid
headerMenu={{
enabled: true,
features: { sort: true, filter: true, hide: true },
}}
{...}
/><ActiveGrid
rowMenu={{
enabled: true,
features: { copy: true, pin: true },
}}
{...}
/><ActiveGrid title="User list table" {...} /><ActiveGrid description="Table showing all registered users" {...} /><ActiveGrid className="custom-grid" {...} /><ActiveGrid
onRowClick={(row) => router.push(`/users/${row.id}`)}
{...}
/><ActiveGrid
contextMenu={(row) => [
{ label: 'Edit', action: () => edit(row), icon: Pencil },
'separator',
{ label: 'Delete', action: () => del(row), variant: 'destructive' },
]}
{...}
/><ActiveGrid
meta={{ userId: currentUser.id }}
{...}
/><ActiveGrid
gridId="orders"
mode="client"
data={orders}
columns={columns}
columnTypes={columnTypes}
columnDefaults={{
size: 150,
enableSorting: true,
}}
enablePersistence
enableUrlSync
enableKeyboardNavigation
enableRowPinning
enableExpanding
renderDetailPanel={(row) => <OrderDetails order={row.original} />}
editMode="cell"
onDataCommit={handleCommit}
export={{
enabled: true,
formats: ['xlsx', 'csv'],
filename: 'orders-export',
}}
settings={{
stripedRows: true,
rowHeight: 48,
footer: { className: 'bg-muted font-bold' },
}}
toolbar={{
search: { placeholder: 'Search...', debounceMs: 300 },
actions: (table) => <ExportButton table={table} />,
}}
rowMenu={{
enabled: true,
features: { copy: true, pin: true },
}}
pagination={{
enabled: true,
position: 'bottom',
pageSizeOptions: [10, 20, 50],
}}
onRowClick={(row) => router.push(`/orders/${row.id}`)}
/>