Table

Table inside its own horizontal scroll wrapper. Give columns a columnId (header and cells) and mark header cells pinnable to let the user pin them to the left or right edge: pinned columns stay sticky while the rest scrolls.

Import

import { Table } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/table.

Usage

<Table aria-label="Inventario de productos">
  <>
          <TableHead>
            <tr>
              <TableHeaderCell>Producto</TableHeaderCell>
              <TableHeaderCell>SKU</TableHeaderCell>
              <TableHeaderCell alignRight>Stock</TableHeaderCell>
              <TableHeaderCell alignRight>Precio</TableHeaderCell>
            </tr>
          </TableHead>
          <TableBody>
            {inventory.map((item) => (
              <TableRow key={item.sku}>
                <TableCell>
                  {item.name} {item.low ? <Chip tone="danger">Stock bajo</Chip> : null}
                </TableCell>
                <TableCell>{item.sku}</TableCell>
                <TableCell alignRight>{item.stock}</TableCell>
                <TableCell alignRight>{item.price}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </>
</Table>

Props

Prop	Type	Default	Description
pinnedColumns	PinnedColumns		Controlled pinned columns (ids of columnId). Pair it with onPinnedColumnsChange.
defaultPinnedColumns	PinnedColumns		Initial pins when uncontrolled.
onPinnedColumnsChange	((pinned: { left: string[]; right: string[]; }) => void)
pinStorageKey	string		localStorage key that remembers the user’s pins (uncontrolled only).
labels	Partial<TableLabels>		Texts of the pin buttons (Spanish by default).
wrapperClassName	string		Classes of the scroll wrapper.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Link Rows
• Empty
• PinnedColumns
• User Pinning
• Controlled Pinning
• Narrow

Source

packages/ui/src/containers/table/table.tsx