table

Styled compound table components built on @fluixi/table-core.

The presentational layer of the Fluixi table system. Wraps @fluixi/table-core with accessible, styled compound components and a flexRender helper for column templates.

Installation

pnpm add @fluixi/table @fluixi/table-core

Usage

import {
  Table, TableHeader, TableBody, TableRow, TableHead, TableCell, flexRender,
  TableColumnMenu, TableViewMenu,
} from '@fluixi/table';
import { createTable, columnHelper } from '@fluixi/table-core';

const col = columnHelper<Person>();
const table = createTable({
  columns: [
    col.accessor('name', { header: 'Name' }),
    col.accessor('age', { header: 'Age' }),
  ],
  data: () => people(),
  _features: [SortingFeature, FilteringFeature, PaginationFeature],
});

<TableViewMenu table={table}>
  <Table table={table}>
    <TableHeader>
      <For each={table.getHeaderGroups()}>
        {group => (
          <TableRow>
            <For each={group.headers}>
              {header => (
                <TableHead header={header}>
                  <TableColumnMenu header={header} table={table} />
                  {flexRender(header.column.columnDef.header, header.getContext())}
                </TableHead>
              )}
            </For>
          </TableRow>
        )}
      </For>
    </TableHeader>
    <TableBody>
      <For each={table.getRowModel().rows}>
        {row => (
          <TableRow row={row}>
            <For each={row.getVisibleCells()}>
              {cell => <TableCell cell={cell}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>}
            </For>
          </TableRow>
        )}
      </For>
    </TableBody>
  </Table>
</TableViewMenu>

Parts

Part	Description
`Table`	Root `<table>`; accepts the `table` instance from `createTable`.
`TableHeader` / `TableBody` / `TableFooter`	Section wrappers.
`TableRow`	A `<tr>`; accepts a `row` model for `data-selected` / `aria-selected`.
`TableHead`	A `<th>`; accepts a `header` model. Renders a sort button when the column is sortable.
`TableCell`	A `<td>`; accepts a `cell` model. Renders `children` for spanning cells.
`flexRender`	Renders a column template: string header, or `(ctx) => JSX`.
`TableColumnMenu`	Right-click context menu on a header: sort asc/desc/clear, hide, extra `children`.
`TableViewMenu`	Context menu on the table body: toggle column visibility, show all, reset.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.