# Table

> Table inside its own horizontal scroll wrapper.

Source: https://ui.jcsoftdev.com/docs/components/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

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

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

## Usage

```tsx
<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](/storybook/?path=/story/containers-table--default)
- [Link Rows](/storybook/?path=/story/containers-table--link-rows)
- [Empty](/storybook/?path=/story/containers-table--empty)
- [PinnedColumns](/storybook/?path=/story/containers-table--pinned-left-and-right)
- [User Pinning](/storybook/?path=/story/containers-table--user-pinning)
- [Controlled Pinning](/storybook/?path=/story/containers-table--controlled-pinning)
- [Narrow](/storybook/?path=/story/containers-table--narrow)

## Source

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