YYayaw

Guide

Référence DataTable

Référence des props et usages du composant DataTable unifié

Props

Liste des props disponibles pour configurer DataTable. tableType Type de configuration de table. Utilisé pour résoudre config et actions (getTableConfig("products"), getTableActions("products")). Requis : true

Table Multi-Modèles

Une seule table peut garder un tableId commun tout en séparant la config table et la config formulaire : tableId="cms-entries" tableType="content-index" formType="content-entry"

Données initiales server-first

Pour les pages Next.js App Router, chargez la première page dans un Server Component, puis passez les lignes et la pagination à un petit Client Component qui rend DataTable. // app/products/page.tsx export default async...

Ce que cette page couvre

Plan du guide

La source MDX originale est condensee en cartes CMS natives pour edition et republication depuis le control plane.

Props

Liste des props disponibles pour configurer DataTable. tableType Type de configuration de table. Utilisé pour résoudre config et actions (getTableConfig("products"), getTableActions("products")). Requis : true

Table Multi-Modèles

Une seule table peut garder un tableId commun tout en séparant la config table et la config formulaire : tableId="cms-entries" tableType="content-index" formType="content-entry"

Données initiales server-first

Pour les pages Next.js App Router, chargez la première page dans un Server Component, puis passez les lignes et la pagination à un petit Client Component qui rend DataTable. // app/products/page.tsx export default async...

Usage

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

Notes d'implementation

Continuer dans la documentation Table

Configuration du comportement de la table et valeurs par défaut

$ <DataTable tableType="products" />

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

$ type ToolbarAction = {

$ id: string;

$ label: string;