DataTableHeader

Overview

DataTableHeader is deliberately not part of DataTable's own props: title, description, infographics (e.g. stat tiles), and the export/create actions are page-chrome concerns, not grid behavior, so they live in their own composable component you place above <DataTable>:

<DataTableHeader
  title="Invoices"
  description="View and pay your invoices"
  createActions={[{ label: 'Create invoice', onClick: handleCreate }]}
/>
<DataTable columns={columns} rows={rows} showToolbar />

Import

import { DataTableHeader } from '@unflowio/ui/components/DataTableHeader';

Basic

title and description are both optional and independent of one another.

Infographics

infographics is a generic ReactNode slot — render whatever stat tiles/markup you want; DataTableHeader only provides the flex layout aligning it with the title/description row.

Export & create actions

exportActions and createActions share the same one-or-many rule: pass one action and it renders as a plain Button; pass two or more and it renders as a SplitButton (the first action is the primary click target, the rest become dropdown items). createActions is always the rightmost element; exportActions renders immediately to its left.

<DataTableHeader
  title="Products & Services"
  description="Subtitle text here"
  exportActions={[
    { label: 'Export CSV', icon: <DownloadIcon />, onClick: exportCsv },
    { label: 'Export PDF', onClick: exportPdf },
  ]}
  createActions={[{ label: 'Create a product', icon: <PlusIcon />, onClick: handleCreate }]}
/>

With DataTable

The intended pairing in practice — DataTableHeader above a DataTable, sharing no state or props with it directly.

Full page example

A complete real-world composition: DataTableHeader (title, infographics, export/create actions), DataTable with inlineFilters (Status/Amount/Date, each a real QuickFilterField) and checkboxSelection, and BulkActionsBar appearing once rows are selected. All three components remain independent — they only share the plain selectionModel: Set<RowId> state you already own.

Props

DataTableHeaderAction: { label: string, onClick?: () => void, icon?: ReactNode, disabled?: boolean }.

Known scope boundaries

• No built-in stat-tile component — infographics is intentionally a plain slot, not a new visual primitive to design/maintain.
• exportActions is UI-only — DataTableHeader never touches your data; you own what "export" actually does in each action's onClick.