Loading...
Interactive playground with feature toggles and a production-style products table.
Show toolbar
Show search and toolbar actions (Add, Export, Options).
Enable pagination
Enable page navigation and page-size selector.
Show actions as icons
Render toolbar action buttons as icon-only with tooltips.
Show title and description
Show the toolbar title and description block.
Density mode
Choose row spacing for table headers and cells.
Layout preset
Apply reusable defaults for common admin, catalog, or preview table surfaces.
Row interaction
Choose the default behavior for clicks on non-interactive row areas.
Enable row selection
Enable row checkboxes and bulk selection behaviors.
Show selection column (code)
Control the selection column through config (`columns.visible`), not from the options menu.
Show actions column (code)
Control the actions column through config (`columns.visible`), not from the options menu.
Enable row click edit drawer
Open the edit drawer when a non-interactive row area is clicked. Enabling this disables inline edit in this demo.
Enable column filters
Enable search and filter controls in toolbar and menus.
Enable footer calculations
Show the calculations footer and the related toggle in the options menu.
Enable sorting
Enable sorting from headers and the options menu.
Enable grouping
Enable row grouping controls.
Enable saved views
Show the saved views manager above the table.
Enable column drag and drop
Enable drag and drop controls in headers and menus.
Enable toolbar export
Show the CSV export button in the toolbar.
Enable bulk export
Show the CSV export action in the bulk menu.
Allow create
Show and enable the Add item action.
Allow row edit action (menu)
Show and enable the Edit action in the row actions menu.
Allow row duplicate
Show and enable the row duplicate action.
Allow row delete
Show and enable the row delete action.
Allow bulk edit
Show and enable the bulk edit action.
Allow bulk delete
Show and enable the bulk delete action.
Allow direct cell editing
Allow direct cell editing inside table rows. Enabling this disables row click edit in this demo.
Allow saving views
Allow users to create, update, and delete saved table views.
Allow team-shared views
Allow users to save views as shared team views.
// 1. Configuration via provider
const getTableConfig = (tableType: string) => {
if (tableType === "products") {
return {
table: {
allowCreate: true,
allowEdit: true,
allowDuplicate: true,
allowDelete: true,
allowBulkEdit: true,
allowBulkDelete: true,
allowInlineEdit: true,
allowViewSave: true,
allowViewSharing: false,
enableRowSelection: true,
enableColumnFilters: true,
enableCalculations: false,
enableColumnDnd: true,
enableSorting: true,
enableGrouping: true,
enablePagination: true,
enableRowClickEdit: false,
export: true,
bulkExport: true,
showToolbar: true,
showToolbarHeader: true,
density: "medium",
layoutPreset: "catalog",
displayModes: ["table", "kanban", "gallery"],
defaultDisplayMode: "table",
kanban: {
groupBy: "status",
titleColumn: "name",
cardColumnIds: ["brand", "category", "price", "isActive"],
groups: [
{ value: "In Stock" },
{ value: "Low Stock" },
{ value: "Out of Stock" }
],
allowDragUpdate: true
},
gallery: {
imageColumn: "imageUrl",
titleColumn: "name",
cardColumnIds: ["brand", "category", "price", "status"],
aspectRatio: "square",
imageFit: "contain",
cardSize: "medium"
},
emptyState: {
title: "No products found",
description: "Try changing your search or filters.",
},
rowClickMode: "activate",
actionsAsIcons: false
},
columns: {
definitions: [
{ id: "imageUrl", type: "image", header: "Image" },
{ id: "name", type: "text", header: "Product Name" },
{ id: "brand", type: "text", header: "Brand" },
{
id: "category",
type: "select",
displayVariant: "tag",
header: "Category",
tagColorMap: {
Electronics: "bg-blue-500/80 text-white dark:bg-blue-600/90",
Furniture: "bg-amber-500/80 text-white dark:bg-amber-600/90"
}
},
{
id: "price",
type: "number",
header: "Price",
numberFormat: {
thousandsSeparator: " ",
decimals: 0,
suffix: " €",
},
},
{
id: "status",
type: "select",
displayVariant: "tag",
header: "Status",
tagColorMap: {
"In Stock": "bg-green-500/80 text-white dark:bg-green-600/90",
"Low Stock": "bg-orange-500/80 text-white dark:bg-orange-600/90",
"Out of Stock": "bg-red-500/80 text-white dark:bg-red-600/90"
}
},
{ id: "createdAt", type: "date", header: "Created" },
{ id: "isActive", type: "boolean", header: "Active" },
{ id: "actions", type: "actions", header: "Actions" }
],
visible: [
"select",
"imageUrl",
"name",
"brand",
"category",
"price",
"status",
"createdAt",
"isActive",
"actions"
]
}
}
}
}
// 2. Production Table with Real API
const [activeRowId, setActiveRowId] = useState<string>();
<DataTable
activeRowId={activeRowId}
tableType="products"
enableAdvancedFilters={true}
getRowId={(row) => String(row.id)}
onRowActivate={(row) => setActiveRowId(String(row.id))}
columnTypeMapping={{
name: 'text',
imageUrl: 'text',
brand: 'text',
category: 'select', // select with tag display variant
price: 'number',
status: 'select', // select with tag display variant
website: 'text',
createdAt: 'date',
isActive: 'select' // boolean -> select for true/false
}}
/>
// Local data API with pagination, filtering, and sorting.
// Edits persist in localStorage and can be reset from the settings panel.Manage your product catalog with filters, sorting, and bulk actions.
No products found Try changing your search or filters. | ||||||||||