SeizenTablePlugins

const SeizenTablePlugins: object

Defined in: SeizenTablePlugins.tsx:358

SeizenTablePlugins - Compound components for plugin-provided UI slots.

These components render content provided by SeizenTable plugins. Use them to compose custom layouts with plugin integration.

Type Declaration

Cell()

Cell: <TData>(__namedParameters) => Element

Renders cell content using plugin cell slots, or falls back to children.

Use this component to wrap cell content when you want plugins to be able to customize cell rendering.

Type Parameters

TData

TData

Parameters

__namedParameters

CellProps<TData>

Returns

Element

Example

<SeizenTable.Cell cell={cell} row={row}>
  <SeizenTablePlugins.Cell cell={cell} column={cell.column} row={row}>
    {flexRender(cell.column.columnDef.cell, cell.getContext())}
  </SeizenTablePlugins.Cell>
</SeizenTable.Cell>

Footer()

Footer: () => Element | null

Renders all plugin footer slots.

Place this component below the table to render plugin-provided footer content.

Returns

Element | null

Example

<SeizenTable.Content>
  <SeizenTable.Table>...</SeizenTable.Table>
  <SeizenTablePlugins.Footer />
  <SeizenTable.Paginator />
</SeizenTable.Content>

Header()

Header: () => Element | null

Renders all plugin header slots.

Place this component above the table to render plugin-provided header content (e.g., filter bars, toolbars).

Returns

Element | null

Example

<SeizenTable.Content>
  <SeizenTablePlugins.Header />
  <SeizenTable.Table>...</SeizenTable.Table>
</SeizenTable.Content>

InlineRow()

InlineRow: <TData>(__namedParameters) => Element | null

Renders inline row content for a specific row when a plugin is active.

Use this component after <SeizenTable.Row> to render expandable content provided by plugins (e.g., row details panel).

Type Parameters

TData

TData

Parameters

__namedParameters

InlineRowProps<TData>

Returns

Element | null

Example

<SeizenTable.Body>
  {(row) => (
    <>
      <SeizenTable.Row row={row} />
      <SeizenTablePlugins.InlineRow row={row} colSpan={row.getVisibleCells().length} />
    </>
  )}
</SeizenTable.Body>

SidePanel()

SidePanel: (__namedParameters) => Element | null

Renders plugin side panels for the specified position.

Place this component outside of SeizenTable.Content to position side panels to the left or right of the main table content.

Parameters

__namedParameters

SidePanelProps

Returns

Element | null

Example

<SeizenTable.Root table={table}>
  <SeizenTablePlugins.SidePanel position="left" />
  <SeizenTable.Content>
    <SeizenTable.Table>...</SeizenTable.Table>
  </SeizenTable.Content>
  <SeizenTablePlugins.SidePanel position="right" />
</SeizenTable.Root>