Orders in client mode

// 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}}    />  );}