@talelk/newui-data 1.0.0 → 1.1.0

package/src/form/form.tsx

@@ -1,5 +1,15 @@
-import { createForm } from '@tanstack/solid-form'
+import {
+  createForm,
+  type StandardSchemaV1,
+  standardSchemaValidators,
+} from '@tanstack/solid-form'
 import { type Accessor, type JSX, splitProps } from 'solid-js'
+import {
+  type FieldConfig,
+  hiddenPaths,
+  isUnderHidden,
+  pruneHiddenValues,
+} from './config'
 
 /**
  * The form surface: the kit's answer to "how does a page submit".
@@ -18,6 +28,25 @@ export interface AppFormOptions<T extends object> {
    * `submitting()`, which is what a submit button's `loading` reads.
    */
   onSubmit: (value: T, api: { reset: () => void }) => void | Promise<void>
+  /**
+   * A Standard Schema (Zod, Valibot, Ark) — the document, validated on change
+   * and on submit, with issues mapped onto fields. The schema must validate
+   * synchronously; an async one belongs in the submit handler.
+   */
+  schema?: StandardSchemaV1<T, T>
+  /**
+   * The field map: how each field renders, keyed by static path (`smtp.host`,
+   * never `items[1]` — a repeater's row fields go under its `fields`). The
+   * engine reads `when` (for pruning and for dropping issues on hidden paths)
+   * and `dependsOn` (for revalidation); the rest is renderer vocabulary that
+   * the `ConfigForm` organism consumes from the same object.
+   */
+  ui?: Record<string, FieldConfig<T>>
+  /**
+   * Drop fields hidden by `when` from the submitted document.
+   * @default true
+   */
+  pruneHidden?: boolean
 }
 
 /** The `error` prop of a field, from TanStack's error list. */
@@ -39,11 +68,95 @@ export function fieldError(field: {
   return [...new Set(messages)].join(' ')
 }
 
+/**
+ * Throws on a field-map key that names an array position (`items[1]`). Keys
+ * are static paths; positions only arise when a repeater expands its rows.
+ */
+function assertStaticPaths(
+  ui: Record<string, { fields?: Record<string, unknown> }>,
+): void {
+  for (const [key, config] of Object.entries(ui)) {
+    if (key.includes('['))
+      throw new Error(
+        `newui form: field-map key "${key}" must be a static path — declare row fields under a repeater's \`fields\` instead of indexing.`,
+      )
+    if (config.fields)
+      assertStaticPaths(
+        config.fields as Record<string, { fields?: Record<string, unknown> }>,
+      )
+  }
+}
+
 export function createAppForm<T extends object>(options: AppFormOptions<T>) {
+  const ui = options.ui ?? {}
+  assertStaticPaths(ui)
+  const prune = options.pruneHidden !== false
+  const hasDeps = Object.values(ui).some((config) => config.dependsOn?.length)
+
+  /** The document the backend should see: hidden fields are not part of it. */
+  const submitted = (values: T): T =>
+    prune ? pruneHiddenValues(values, ui) : values
+
+  /**
+   * The schema validates the document that would be submitted, and issues on
+   * hidden paths are dropped: a field the user cannot see must not block the
+   * submit, and a hidden setting is not required of the document.
+   */
+  const schema = options.schema
+  const schemaValidator = schema
+    ? ({ value }: { value: unknown }) => {
+        const values = value as T
+        const issues = standardSchemaValidators.validate(
+          { value: submitted(values), validationSource: 'form' },
+          schema,
+        )
+        if (!issues?.fields) return issues
+        const hidden = hiddenPaths(values, ui)
+        if (hidden.length === 0) return issues
+        // The adapter reports every issue twice — per field and form-wide —
+        // so both maps are filtered, or a hidden issue still blocks submit.
+        const visible = (map: Record<string, unknown>) =>
+          Object.fromEntries(
+            Object.entries(map).filter(
+              ([path]) => !isUnderHidden(path, hidden),
+            ),
+          )
+        const fields = visible(issues.fields)
+        if (Object.keys(fields).length === 0) return undefined
+        return {
+          ...issues,
+          form:
+            issues.form && typeof issues.form === 'object'
+              ? visible(issues.form as Record<string, unknown>)
+              : issues.form,
+          fields,
+        }
+      }
+    : undefined
+
   const form = createForm(() => ({
     defaultValues: options.defaultValues,
+    validators: schemaValidator
+      ? { onChange: schemaValidator, onSubmit: schemaValidator }
+      : undefined,
+    // `dependsOn` compiles onto TanStack's listeners: a dependency's change
+    // revalidates the dependent field with the `dynamic` cause. Visibility
+    // itself needs no wiring — `when` reads the form's reactive values.
+    listeners: hasDeps
+      ? {
+          onChange: ({ formApi, fieldApi }) => {
+            for (const [path, config] of Object.entries(ui)) {
+              if (config.dependsOn?.includes(String(fieldApi.name))) {
+                void formApi.validateField(path, 'dynamic')
+              }
+            }
+          },
+        }
+      : undefined,
     onSubmit: async ({ value, formApi }) => {
-      await options.onSubmit(value as T, { reset: () => formApi.reset() })
+      await options.onSubmit(submitted(value as T), {
+        reset: () => formApi.reset(),
+      })
     },
   }))
   const submitting = form.useSelector((state) => state.isSubmitting)
@@ -51,6 +164,13 @@ export function createAppForm<T extends object>(options: AppFormOptions<T>) {
     form,
     /** True while the submit handler's promise is pending. */
     submitting: submitting as Accessor<boolean>,
+    /** The field map, resolved. Pass it to `ConfigForm`'s `fields`. */
+    ui,
+    /**
+     * The document the backend sees for these values: hidden fields pruned
+     * unless `pruneHidden` is off. Submit sends it; so does `createAutoSave`.
+     */
+    document: submitted,
   }
 }
 

package/src/form/index.ts

@@ -1 +1,3 @@
+export * from './autosave'
+export * from './config'
 export * from './form'

package/src/index.ts

@@ -1,4 +1,10 @@
+export * from './aggregate'
+export * from './config-store'
+export * from './csv-export'
+export * from './dashboard'
 export * from './download'
 export * from './format'
 export * from './select'
+export * from './table-persist'
 export * from './undo'
+export * from './url-state'

package/src/query/collection.test.tsx

@@ -1,8 +1,13 @@
 import { render, screen, waitFor } from '@solidjs/testing-library'
-import { For, type JSX, untrack } from 'solid-js'
+import type { QueryKey } from '@tanstack/solid-query'
+import { createSignal, For, type JSX, untrack } from 'solid-js'
 import { describe, expect, it, vi } from 'vitest'
 import { DataProvider } from './client'
-import { type Collection, createCollection } from './collection'
+import {
+  type Collection,
+  createCollection,
+  createListQuery,
+} from './collection'
 import type { Repository } from './repository'
 
 interface Row {
@@ -50,11 +55,15 @@ function makeRepository(initial: Row[]) {
 function Harness(props: {
   repository: Repository<Row, { title: string }>
   ready: (collection: Collection<Row, { title: string }>) => void
+  interval?: number | false
 }): JSX.Element {
   const collection = createCollection(() => ({
     key: ['rows'],
     repository: props.repository,
     retry: false,
+    ...(props.interval !== undefined
+      ? { refetchInterval: props.interval }
+      : {}),
   }))
   untrack(() => props.ready(collection))
   return (
@@ -64,12 +73,16 @@ function Harness(props: {
   )
 }
 
-function mount(repository: Repository<Row, { title: string }>) {
+function mount(
+  repository: Repository<Row, { title: string }>,
+  interval?: number | false,
+) {
   let collection!: Collection<Row, { title: string }>
   render(() => (
     <DataProvider>
       <Harness
         repository={repository}
+        interval={interval}
         ready={(value) => (collection = value)}
       />
     </DataProvider>
@@ -148,4 +161,118 @@ describe('createCollection', () => {
     await collection().remove.mutateAsync({ ids: ['1', '2'] })
     await waitFor(() => expect(screen.queryByText('Done')).toBeNull())
   })
+
+  it('polls the list on the interval it is given', async () => {
+    const { repository } = makeRepository([{ id: '1', title: 'One' }])
+    const list = vi.fn(repository.list)
+    const polled: Repository<Row, { title: string }> = { ...repository, list }
+    mount(polled, 30)
+    await waitFor(() => expect(list).toHaveBeenCalledTimes(1))
+
+    // The explicit dial: focus-refetch stays off, the interval does the work.
+    await waitFor(
+      () => expect(list.mock.calls.length).toBeGreaterThanOrEqual(3),
+      {
+        timeout: 2000,
+      },
+    )
+  })
+
+  it('never polls when refetchInterval is false', async () => {
+    const { repository } = makeRepository([{ id: '1', title: 'One' }])
+    const list = vi.fn(repository.list)
+    const quiet: Repository<Row, { title: string }> = { ...repository, list }
+    mount(quiet, false)
+    await waitFor(() => expect(list).toHaveBeenCalledTimes(1))
+
+    await new Promise((resolve) => setTimeout(resolve, 120))
+    expect(list).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe('createListQuery keepPreviousData', () => {
+  /** One deferred response per key tag, so a key change gates on demand. */
+  function keyedRepository(tag: () => string) {
+    const pending = new Map<string, Deferred<Row[]>>()
+    const repository: Repository<Row, never> = {
+      list: () => {
+        const gate = deferred<Row[]>()
+        pending.set(tag(), gate)
+        return gate.promise
+      },
+      create: async () => {
+        throw new Error('not used')
+      },
+      update: async () => {
+        throw new Error('not used')
+      },
+      remove: async () => {},
+    }
+    return { repository, pending }
+  }
+
+  function ListHarness(props: {
+    queryKey: () => QueryKey
+    repository: Repository<Row, never>
+    keepPreviousData?: boolean
+  }): JSX.Element {
+    const list = createListQuery(() => ({
+      key: props.queryKey(),
+      repository: props.repository,
+      retry: false,
+      ...(props.keepPreviousData ? { keepPreviousData: true } : {}),
+    }))
+    return (
+      <ul>
+        <For each={list.rows()}>{(row) => <li>{row.title}</li>}</For>
+      </ul>
+    )
+  }
+
+  function mountList(keepPreviousData?: boolean) {
+    const [key, setKey] = createSignal<QueryKey>(['list', 'a'])
+    const { repository, pending } = keyedRepository(() =>
+      String(untrack(key)[1]),
+    )
+    render(() => (
+      <DataProvider>
+        <ListHarness
+          queryKey={key}
+          repository={repository}
+          keepPreviousData={keepPreviousData}
+        />
+      </DataProvider>
+    ))
+    return {
+      setKey: (tag: string) => setKey(['list', tag]),
+      pending,
+    }
+  }
+
+  it('holds the old page while the new key is in flight', async () => {
+    const { setKey, pending } = mountList(true)
+    await waitFor(() => {
+      pending.get('a')?.resolve([{ id: '1', title: 'One' }])
+      expect(screen.getByText('One')).toBeTruthy()
+    })
+
+    setKey('b')
+    // The request is in flight; the table must not blank.
+    await waitFor(() => expect(screen.getByText('One')).toBeTruthy())
+    pending.get('b')?.resolve([{ id: '2', title: 'Two' }])
+    await waitFor(() => expect(screen.getByText('Two')).toBeTruthy())
+    expect(screen.queryByText('One')).toBeNull()
+  })
+
+  it('without it the rows clear while the new key loads', async () => {
+    const { setKey, pending } = mountList(false)
+    await waitFor(() => {
+      pending.get('a')?.resolve([{ id: '1', title: 'One' }])
+      expect(screen.getByText('One')).toBeTruthy()
+    })
+    setKey('b')
+    await waitFor(() => expect(screen.queryByText('One')).toBeNull())
+    pending.get('b')?.resolve([{ id: '2', title: 'Two' }])
+    await waitFor(() => expect(screen.getByText('Two')).toBeTruthy())
+  })
 })

package/src/query/collection.ts

@@ -1,6 +1,7 @@
 import {
   createMutation,
   createQuery,
+  keepPreviousData,
   type QueryKey,
   useQueryClient,
 } from '@tanstack/solid-query'
@@ -62,6 +63,18 @@ export interface CollectionOptions<
   staleTime?: number
   /** Retries after the first failure. Defaults to the client's. */
   retry?: number | false
+  /**
+   * Poll the list on an interval. Off (`false`) by default — the client's
+   * `refetchOnWindowFocus: false` says returning to the tab is not a refresh;
+   * this is the explicit dial for data that genuinely changes on its own.
+   */
+  refetchInterval?: number | false
+  /**
+   * Keep the previous response on screen while the next one is in flight, so
+   * a server-mode page change never blanks the table. The rows are stale for
+   * one round trip; an empty table is not the alternative anyone asked for.
+   */
+  keepPreviousData?: boolean
   /** Every mutation reports here first, so a page can word one notice. */
   onError?: (error: Error) => void
 }
@@ -79,6 +92,8 @@ export function createListQuery<T extends { id: string }>(
     queryFn: ({ signal }) => options().repository.list({ signal }),
     staleTime: options().staleTime,
     retry: options().retry,
+    refetchInterval: options().refetchInterval,
+    placeholderData: options().keepPreviousData ? keepPreviousData : undefined,
     throwOnError: false,
   }))
   return {

package/src/query/index.ts

@@ -1,3 +1,4 @@
 export * from './client'
 export * from './collection'
 export * from './repository'
+export * from './server-table'

package/src/query/server-table.test.ts

@@ -0,0 +1,136 @@
+import { createRoot } from 'solid-js'
+import { describe, expect, it, vi } from 'vitest'
+import type { UrlStateAdapter } from '../url-state'
+import { createServerTableState, type ServerTableState } from './server-table'
+
+function setup(...args: Parameters<typeof createServerTableState>): {
+  state: ServerTableState
+  dispose: () => void
+} {
+  let dispose!: () => void
+  let state!: ServerTableState
+  createRoot((d) => {
+    dispose = d
+    state = createServerTableState(...args)
+  })
+  return { state, dispose }
+}
+
+interface FakeAdapter extends UrlStateAdapter {
+  last(): URLSearchParams
+}
+
+function adapter(search = ''): FakeAdapter {
+  let last = new URLSearchParams(search)
+  const replace = vi.fn((params: URLSearchParams) => {
+    last = params
+  })
+  return {
+    search: () => search,
+    replace,
+    last: () => last,
+  }
+}
+
+describe('createServerTableState', () => {
+  it('starts from the defaults or the initial slices', () => {
+    const { state, dispose } = setup({
+      initial: {
+        sorting: [{ id: 'name', desc: false }],
+        pagination: { pageSize: 25 },
+      },
+    })
+    expect(state.sorting()).toEqual([{ id: 'name', desc: false }])
+    expect(state.columnFilters()).toEqual([])
+    expect(state.globalFilter()).toBe('')
+    expect(state.pagination()).toEqual({ pageIndex: 0, pageSize: 25 })
+    dispose()
+  })
+
+  it('a sort change returns the result to page 0', () => {
+    const { state, dispose } = setup()
+    state.setPageIndex(4)
+    expect(state.pagination().pageIndex).toBe(4)
+    state.setSorting([{ id: 'amount', desc: true }])
+    expect(state.sorting()).toEqual([{ id: 'amount', desc: true }])
+    expect(state.pagination().pageIndex).toBe(0)
+    dispose()
+  })
+
+  it('a filter change returns the result to page 0', () => {
+    const { state, dispose } = setup()
+    state.setPageIndex(2)
+    state.setColumnFilters([{ id: 'status', value: 'open' }])
+    expect(state.columnFilters()).toEqual([{ id: 'status', value: 'open' }])
+    expect(state.pagination().pageIndex).toBe(0)
+    state.setGlobalFilter('beta')
+    state.setPageIndex(7)
+    state.setGlobalFilter('gamma')
+    expect(state.pagination().pageIndex).toBe(0)
+    dispose()
+  })
+
+  it('paging moves without touching the other slices', () => {
+    const { state, dispose } = setup()
+    state.setSorting([{ id: 'name', desc: true }])
+    state.setPageIndex(3)
+    expect(state.pagination()).toEqual({ pageIndex: 3, pageSize: 10 })
+    expect(state.sorting()).toEqual([{ id: 'name', desc: true }])
+    dispose()
+  })
+
+  it('resizing the page keeps the top row', () => {
+    const { state, dispose } = setup()
+    state.setPageIndex(2) // rows 20..29 at pageSize 10
+    state.setPageSize(20)
+    expect(state.pagination()).toEqual({ pageIndex: 1, pageSize: 20 })
+    dispose()
+  })
+
+  it('the query key carries every slice over the base', () => {
+    const { state, dispose } = setup()
+    state.setSorting([{ id: 'name', desc: false }])
+    state.setGlobalFilter('acme')
+    state.setPageIndex(2)
+    expect(state.key(['tasks'])).toEqual([
+      'tasks',
+      {
+        sorting: [{ id: 'name', desc: false }],
+        columnFilters: [],
+        globalFilter: 'acme',
+        pagination: { pageIndex: 2, pageSize: 10 },
+      },
+    ])
+    dispose()
+  })
+
+  it('writes the slices to the URL under the namespace', async () => {
+    const url = adapter()
+    const { state, dispose } = setup({
+      sync: { adapter: url, namespace: 'tasks' },
+    })
+    state.setSorting([{ id: 'name', desc: true }])
+    // One coalesced `replace` per tick, so the write lands on the next microtask.
+    await Promise.resolve()
+    const written = url.last().get('tasks.sorting')
+    expect(JSON.parse(written ?? '')).toEqual([{ id: 'name', desc: true }])
+    expect(url.last().get('tasks.pagination')).toContain('"pageIndex":0')
+    dispose()
+  })
+
+  it('the URL seeds the store on creation', () => {
+    const url = adapter(
+      `?tasks.sorting=${encodeURIComponent(
+        JSON.stringify([{ id: 'amount', desc: true }]),
+      )}&tasks.pagination=${encodeURIComponent(
+        JSON.stringify({ pageIndex: 3, pageSize: 10 }),
+      )}`,
+    )
+    const { state, dispose } = setup({
+      sync: { adapter: url, namespace: 'tasks' },
+    })
+    expect(state.sorting()).toEqual([{ id: 'amount', desc: true }])
+    expect(state.pagination()).toEqual({ pageIndex: 3, pageSize: 10 })
+    dispose()
+  })
+})

package/src/query/server-table.ts

@@ -0,0 +1,181 @@
+import type { QueryKey } from '@tanstack/solid-query'
+import type { Accessor } from 'solid-js'
+import {
+  createUrlState,
+  type UrlStateAdapter,
+  type UrlStateValue,
+} from '../url-state'
+
+/**
+ * The query state of a server-mode table.
+ *
+ * `createServerTableState` owns the slices a server-mode `DataTable` mirrors:
+ * sorting, column filters, the global filter and pagination. It is a store,
+ * not a hook — the page creates it once and wires its accessors and setters
+ * into the table's controlled props, so the same state drives the request, the
+ * query key and (with a router adapter) the URL.
+ *
+ * The reset rule lives here as it does in the table: a sort or filter change
+ * returns the result to page 0, because page 3 of a result set that just
+ * changed shape is not a page anyone asked for.
+ *
+ * The slices are structural copies of TanStack Table's state shapes — this
+ * package never imports the table engine, so the app is the only place the
+ * two meet.
+ */
+
+// Type aliases, not interfaces: the slices serialize through `createUrlState`,
+// whose value contract needs the implicit index signature a type alias carries.
+
+/** One sort entry: a column id and its direction. */
+export type ServerTableSort = {
+  id: string
+  desc: boolean
+}
+
+/** One column filter: a column id and its value. */
+export type ServerTableColumnFilter = {
+  id: string
+  value: unknown
+}
+
+/** Where the user is in the result set. */
+export type ServerTablePagination = {
+  pageIndex: number
+  pageSize: number
+}
+
+export interface ServerTableStateOptions {
+  /** What the page renders before the URL or the user has said anything. */
+  initial?: {
+    sorting?: ServerTableSort[]
+    columnFilters?: ServerTableColumnFilter[]
+    globalFilter?: string
+    pagination?: Partial<ServerTablePagination>
+  }
+  /**
+   * Pipe the slices through `createUrlState` so they serialize to query
+   * parameters. Keys are namespaced (`table.sorting` by default) so one URL
+   * can host several surfaces. Without an adapter the store is plain signals.
+   */
+  sync?: {
+    adapter?: UrlStateAdapter
+    /** Query-key namespace for the slices. Defaults to `table`. */
+    namespace?: string
+  }
+}
+
+export interface ServerTableState {
+  sorting: Accessor<ServerTableSort[]>
+  columnFilters: Accessor<ServerTableColumnFilter[]>
+  globalFilter: Accessor<string>
+  pagination: Accessor<ServerTablePagination>
+  /** Replaces the sort entries and returns to page 0. */
+  setSorting: (next: ServerTableSort[]) => void
+  /** Replaces the column filters and returns to page 0. */
+  setColumnFilters: (next: ServerTableColumnFilter[]) => void
+  /** Replaces the search term and returns to page 0. */
+  setGlobalFilter: (next: string) => void
+  /** Moves within the result set. */
+  setPageIndex: (pageIndex: number) => void
+  /** Resizes the page, preserving the top row. */
+  setPageSize: (pageSize: number) => void
+  /** The whole pagination slice at once. */
+  setPagination: (next: ServerTablePagination) => void
+  /**
+   * The slices as one query key, so two pages with the same table state share
+   * one request. Pass the collection's own key as `base`.
+   */
+  key: (base?: QueryKey) => QueryKey
+}
+
+const DEFAULT_NAMESPACE = 'table'
+
+/**
+ * A server-mode table's sorting, filtering and pagination as one store,
+ * optionally serialized to the URL.
+ */
+export function createServerTableState(
+  options: ServerTableStateOptions = {},
+): ServerTableState {
+  const ns = options.sync?.namespace ?? DEFAULT_NAMESPACE
+  const initialPagination: ServerTablePagination = {
+    pageIndex: 0,
+    pageSize: 10,
+    ...options.initial?.pagination,
+  }
+  // The slices are typed by TanStack's shapes, not by `UrlStateValue`; the
+  // URL layer only ever JSON-round-trips them, so the boundary is a cast.
+  const initial: Record<string, UrlStateValue> = {
+    [`${ns}.sorting`]: options.initial?.sorting ?? [],
+    [`${ns}.columnFilters`]: (options.initial?.columnFilters ??
+      []) as UrlStateValue,
+    [`${ns}.globalFilter`]: options.initial?.globalFilter ?? '',
+    [`${ns}.pagination`]: initialPagination,
+  }
+  const url = createUrlState(initial, { adapter: options.sync?.adapter })
+
+  // `createUrlState` types every key as `UrlStateValue`; the store re-types
+  // them back. Values round-trip through JSON, so the casts are the whole
+  // story — the URL never sees a value this file did not write.
+  const signals = url as unknown as Record<string, Accessor<UrlStateValue>>
+  const read = <T>(key: string): Accessor<T> => {
+    const accessor = signals[key]
+    if (!accessor) throw new Error(`createUrlState is missing key "${key}"`)
+    return () => accessor() as T
+  }
+  const sorting = read<ServerTableSort[]>(`${ns}.sorting`)
+  const columnFilters = read<ServerTableColumnFilter[]>(`${ns}.columnFilters`)
+  const globalFilter = read<string>(`${ns}.globalFilter`)
+  const pagination = read<ServerTablePagination>(`${ns}.pagination`)
+
+  const setPagination = (next: ServerTablePagination) => {
+    url.set(`${ns}.pagination`, next)
+  }
+  /** The reset rule: a changed query starts at page 0. */
+  const resetPageIndex = () => {
+    const current = pagination()
+    if (current.pageIndex !== 0) setPagination({ ...current, pageIndex: 0 })
+  }
+
+  return {
+    sorting,
+    columnFilters,
+    globalFilter,
+    pagination,
+    setSorting: (next) => {
+      url.set(`${ns}.sorting`, next)
+      resetPageIndex()
+    },
+    setColumnFilters: (next) => {
+      url.set(`${ns}.columnFilters`, next as UrlStateValue)
+      resetPageIndex()
+    },
+    setGlobalFilter: (next) => {
+      url.set(`${ns}.globalFilter`, next)
+      resetPageIndex()
+    },
+    setPageIndex: (pageIndex) => {
+      setPagination({ ...pagination(), pageIndex })
+    },
+    setPageSize: (pageSize) => {
+      const current = pagination()
+      const size = Math.max(1, pageSize)
+      const topRow = current.pageIndex * current.pageSize
+      setPagination({
+        pageIndex: Math.floor(topRow / size),
+        pageSize: size,
+      })
+    },
+    setPagination,
+    key: (base = []) => [
+      ...base,
+      {
+        sorting: sorting(),
+        columnFilters: columnFilters(),
+        globalFilter: globalFilter(),
+        pagination: pagination(),
+      },
+    ],
+  }
+}