react-datatable

Use this page when you want a contract-faithful in-memory helper for demos, fixtures, tests, or local examples. For a real production backend, implement the same wire contract against your database.

What it exports

import {
  runInMemoryDatatableQuery,
  type OnlineQueryInput,
  type OnlineQueryResponse,
  type OnlineTableRow,
  type OnlineGroupingSummary,
  type OnlineQueryStateInput,
  type OnlineNavigationMode,
} from "./react-datatable-server"

The package is intentionally small.

Its main job is to expose the online request/response contract plus one in-memory query implementation.

Main helper

`runInMemoryDatatableQuery`

runInMemoryDatatableQuery<TData>({
  data,
  columns,
  input,
  getRowId,
}): Promise<OnlineQueryResponse<TData>>

This helper simulates an online data adapter against an in-memory array. Most apps do not need it in production. It is useful for demos, fixtures, tests, or edge cases where a separate in-browser query engine should drive online mode.

It applies:

global search
column filters
sorting
grouping
page or offset slicing

against an in-memory array.

Call shape

const response = await runInMemoryDatatableQuery({
  data: customers,
  columns,
  input,
  getRowId: (row) => row.id,
})

`data`

Full in-memory dataset to query.

`columns`

DatatableColumn<TData>[] definitions used to interpret accessors, sorting functions, filter types, grouping specs, and static option domains.

`input`

OnlineQueryInput contract from the online table surface.

See Online API.

`getRowId`

Stable row ID resolver.

What the helper is good for

Use it for:

local demos
repository examples
fixtures
integration tests
contract validation while designing a real backend
small internal tools where an in-memory dataset is genuinely enough

This is exactly why the examples can show online pagination and infinite loading without requiring a hosted service.

Helper scope

The helper demonstrates the online request and response contract for demos, tests, contract validation, and small in-memory tools.

For production datasets, keep the same request/response contract but replace the helper with SQL, ORM, or service-layer queries that enforce your own tenant, permission, and audit rules.

Type surface

react-datatable-server re-exports a backend-friendly version of the online types.

type OnlineQueryStateInput = {
  limit: number
  filters: unknown[]
  sorting: Array<{ id: string; desc: boolean }>
  globalFilter: string
  grouping?: {
    columns: string[]
    showEmptyGroups?: boolean
  }
}

Important detail: the server helper keeps filters looser (unknown[]) than the client package.

That is deliberate. Treat incoming request bodies as untrusted input and validate them at your API boundary before mapping them into SQL or ORM logic.

Behavior notes

Grouping support

The helper supports grouped online output by building structural group-header rows and, when needed, a full grouping summary.

Empty groups

When grouping is active and showEmptyGroups is true, the helper can emit empty groups if the grouped column has a static option domain in filterOptions.options.

That makes it useful for reproducing the expected grouped-online contract in demos and tests.

Infinite mode

In infinite mode, the helper still treats offset as a data-row offset.

For grouped infinite output, it returns:

the grouped slice for the requested data window
totalDataRows
full totalRenderedRows
a full grouping summary

That mirrors the real online contract closely enough for UI development.

When to replace it

Replace the helper when:

the dataset is too large to load into memory
tenant or permission scope must be enforced in the database
counts and facets must come from indexed backend truth
the table must reflect live writes or streaming updates
you need database-native performance for sorting, grouping, or filtering

Minimal API-route pattern

export async function POST(request: Request) {
  const input = await request.json()

  // validate input here

  const result = await runInMemoryDatatableQuery({
    data: seededRows,
    columns,
    input,
    getRowId: (row) => row.id,
  })

  return Response.json(result)
}

Use this as a contract model. In production, swap seededRows and the helper call for your real query layer.

Relationship to the examples

The repository examples use this helper so you can inspect the online protocol without extra infrastructure.

See:

Practical reminders

Keep getRowId stable.
Keep authorization, tenant scope, and audit rules in your production query layer.
Validate incoming input before trusting it in a real API route.
Preserve the same OnlineQueryInput → OnlineQueryResponse contract when you replace the helper.

Server helper API