BenixBenix DSv1.1.0

ManagedDataTable

Full-featured table built on @tanstack/react-table — sort, filter, search, row selection, bulk actions, pagination and toolbar buttons. The same table used in benix-manager and benix-frontend.

Examples

Customers — selection, filters, bulk delete

Click rows to inspect, select via checkbox column, bulk delete via toolbar. Filters drop down from the column labels.

Customers

Customer
Email
Status
Plan
MRR
Acme Incbilling@acme.comActiveProR$ 49.00
Globexfinance@globex.comActiveEnterpriseR$ 149.00
Initechcfo@initech.comInactiveFree—
Hooliteam@hooli.comActiveProR$ 99.00
Pied Piperrichard@piedpiper.comArchivedFree—
Vehement Capitalfund@vehement.comActiveEnterpriseR$ 299.00
Linhas:
Página 1 de 1
const columns: ColumnDef<Customer>[] = [
  createSelectionColumn<Customer>(),
  { accessorKey: 'name', header: 'Customer' },
  { accessorKey: 'email', header: 'Email' },
  { accessorKey: 'status', header: 'Status', cell: ({ getValue }) => statusToBadge(getValue()) },
  { accessorKey: 'mrr', header: 'MRR' },
];


<ManagedDataTable
  data={rows}
  columns={columns}
  title="Customers"
  searchPlaceholder="Search customers..."
  columnFilters={[
    { columnId: 'status', label: 'Status', options: [...] },
    { columnId: 'plan', label: 'Plan', options: [...] },
  ]}
  bulkActions={[
    {
      label: 'Delete selected',
      icon: <Trash2 size={14} />,
      onClick: (selected) => deleteRows(selected),
      variant: 'solid',
      color: 'red',
    },
  ]}
  toolbarButtons={[
    { label: 'New customer', icon: <Plus size={14} />, onClick: openCreate },
  ]}
/>

Empty / loading

Pass loading to show a skeleton state.

<ManagedDataTable
  data={[]}
  columns={columns}
  loading
/>

Why bundled in the DS?

@tanstack/react-table is an optional peer dependency. The table is the most-used data primitive across the Benix products, so shipping a consistent, themeable implementation in the DS pays off.

// Optional peer — install only if you use ManagedDataTable:
// npm install @tanstack/react-table


import { ManagedDataTable, createSelectionColumn } from '@kactostecnologia/benix-ds';

API Reference

Props of the ManagedDataTable component.

PropTypeDefaultDescription
data*T[]——
columns*ColumnDef<T>[]—@tanstack/react-table column defs.
titlestring—Optional title above the toolbar.
searchPlaceholderstring——
columnFiltersColumnFilter[]—Multi-select filters bound to specific columns.
customFiltersReactNode—Free-form extra filters next to columnFilters.
bulkActionsBulkAction<T>[]—Visible when rows are selected.
toolbarButtonsToolbarButton[]—Right-aligned primary actions.
onRowClick(row: T) => void——
loadingbooleanfalse—