Connecter les actions CRUD à la table via des **callbacks du provider**
API des actions
Fournissez les actions par tableType via getTableActions (passé à DataTable). Ces actions connectent la table à votre couche de données. Dans Next.js, vous pouvez passer des Server Actions pour que les opérations de liste, création, mise à jour, suppression et bulk s'exécutent côté serveur. Voir Server-side & Server Actions pour un exemple complet.
Structure
getTableActions: (tableType: string) => ({
list: async (params) => {
// params: { filters, advancedFilters, limit, orderBy, page (1-based), search }
return {
data: [],
meta: { pageCount: 1, totalCount: 0 },
};
},
aggregate: async (params) => {
// params: { filters, advancedFilters, search, calculations, locale }
return {
results: {
price: { raw: 820.64, label: "820,64" },
},
meta: { totalCount: 50 },
};
},
create: async (data) => ({ success: true, data }),
update: async (id, data) => ({ success: true, data }),
delete: async (id) => ({ success: true }),
duplicate: async (id) => ({ success: true }),
bulkDelete: async (ids) => ({ success: true }),
bulkCopy: async (ids) => ({ success: true, data?: string }),
bulkUpdate: async (ids, updateData) => ({ success: true }),
})Réponse de list
La méthode list doit retourner :
{ data: T[]; meta?: { pageCount?: number; totalCount?: number } }Réponse de aggregate (optionnelle)
aggregate est utilisée par les calculs de footer pour calculer sur l'ensemble global filtré (pas uniquement la page courante).
{
results: Record<
string,
{
raw: number | string | null;
label: string;
}
>;
meta?: { totalCount?: number };
}Notes :
calculationsdans les params est une mapcolumnId -> CalculationType.- Si
aggregaten'est pas fournie, la table bascule en fallback sur des appelslistpaginés. - Vous pouvez retourner un libellé custom depuis l'API (
label) tout en gardant la valeur exploitable dansraw.
Actions bulk
DataTable utilise ces actions par défaut si vous ne fournissez pas de callbacks explicites :
onBulkEdit→updateonBulkDelete→deleteonBulkCopy→duplicateonBulkExport→ export CSV interne des lignes sélectionnées (côté client)
Contrat recommandé pour les callbacks bulk
Pour éviter les branches ambiguës, retournez un objet de résultat explicite depuis vos callbacks bulk :
type BulkActionResult = {
success: boolean;
closeMenu: boolean;
clearSelection: boolean;
message?: string;
};Exemple :
onBulkDelete: async (rows) => {
const ids = rows.map((row) => String((row.original as { id: string }).id));
const response = await deleteManyProducts(ids);
return {
success: response.success,
closeMenu: response.success,
clearSelection: response.success,
message: response.success
? `Deleted ${ids.length} products`
: response.error ?? "Delete failed",
};
};Voir aussi :