YYayaw

Guide

DataTable Reference

Props and usage reference for the unified DataTable component

Props

List of available props for configuring DataTable. tableType The type of table configuration to use. Used to resolve config and actions (e.g. getTableConfig("products"), getTableActions("products")). Required: true

Multi-Model Table

A single table can keep one tableId while resolving table config and form config separately: tableId="cms-entries" tableType="content-index" formType="content-entry"

Server-first initial data

For Next.js App Router pages, load the first page in a Server Component, then pass the rows and pagination metadata into a small Client Component that renders DataTable. // app/products/page.tsx export default async fun...

What this page covers

Guide outline

The original MDX source has been condensed into CMS-native cards so the page can be edited and republished from the control plane.

Props

List of available props for configuring DataTable. tableType The type of table configuration to use. Used to resolve config and actions (e.g. getTableConfig("products"), getTableActions("products")). Required: true

Multi-Model Table

A single table can keep one tableId while resolving table config and form config separately: tableId="cms-entries" tableType="content-index" formType="content-entry"

Server-first initial data

For Next.js App Router pages, load the first page in a Server Component, then pass the rows and pagination metadata into a small Client Component that renders DataTable. // app/products/page.tsx export default async fun...

Usage

tableType="products" loadingOverlay= onRowSelectionChange=(rows) = console.log(rows) onBulkDelete=(rows) = console.log("delete", rows.length)

Implementation notes

Keep moving through the Table docs

Table behavior configuration and defaults

$ <DataTable tableType="products" />

$ <DataTable tableType="products" loadingOverlay={<MySpinner />} />

$ type BulkActionContext<TData> = {

$ selectedRows: Row<TData>[];

$ selectedOriginalRows: TData[];