Server mode against an imitated server

// apps/docs/examples/grid/simulated-orders.tsx'use client';
import '@workspace/active-grid/styles.css';
import {useCallback, useMemo, useState} from 'react';import {generateOrders, queryOrders, type Order} from '@/lib/examples/orders';
import {  composePresentationContext,  toIanaTimeZone,} from '@workspace/active-format';import {  ActiveGrid,  createColumnHelper,  englishGridTranslator,  scalarField,  type GridColumnDef,  type ServerFetchFunction,} from '@workspace/active-grid';import {  Field,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';import {Switch} from '@workspace/active-ui/components/primitives/switch';
const presentation = composePresentationContext(  'en-GB',  null,  toIanaTimeZone('Europe/Amsterdam'),);
const ch = createColumnHelper<Order>();const columns: GridColumnDef<Order>[] = [  ch.accessor('id', {    header: 'Order',    meta: {filterType: 'text'},    server: scalarField(),  }),  ch.accessor('product', {    header: 'Product',    meta: {filterType: 'text'},    server: scalarField(),  }),  ch.accessor('quantity', {    header: 'Qty',    type: 'number',    server: scalarField(),  }),  ch.accessor('total', {    header: 'Total',    type: 'currency',    meta: {currencyCode: 'EUR', filterType: 'number'},    server: scalarField(),  }),];
const wait = (ms: number, signal: AbortSignal) =>  new Promise<void>((resolve, reject) => {    const timer = setTimeout(resolve, ms);    signal.addEventListener('abort', () => {      clearTimeout(timer);      reject(signal.reason);    });  });
/** * Server mode against a server imitated in the browser: a fetchFn with a * delay over rows that are already here, and a switch that makes it fail. * It shows the grid's loading, paging and error states, not a server. */export default function SimulatedOrders() {  const orders = useMemo(() => generateOrders(2000), []);  const [failing, setFailing] = useState(false);  const fetchOrders = useCallback<ServerFetchFunction<Order>>(    async ({signal, ...params}) => {      await wait(600, signal);      if (failing) throw new Error('The simulated server is down');      return queryOrders(orders, params);    },    [orders, failing],  );  return (    <div className="flex flex-col gap-4">      <Field orientation="horizontal">        <Switch          id="simulated-failure"          // Named in the server HTML already, not only after hydration.          aria-labelledby="simulated-failure-label"          checked={failing}          onCheckedChange={setFailing}        />        <FieldLabel id="simulated-failure-label" htmlFor="simulated-failure">          Make the next request fail        </FieldLabel>      </Field>      <ActiveGrid<Order>        key={String(failing)}        gridId="docs-simulated-orders"        mode="server"        fetchFn={fetchOrders}        columns={columns}        height={360}        locale={presentation}        t={englishGridTranslator}        pagination={{enabled: true}}        serverOptions={{blockSize: 25, retryCount: 0}}      />    </div>  );}