# TableSelectCell

> Cell with the checkbox that selects its row.

Source: https://ui.jcsoftdev.com/docs/components/table-select-cell

Cell with the checkbox that selects its row. Needs a `Table` with selection props.

## Import

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

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

## Usage

```tsx
<TableSelectCell 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>
        </>
</TableSelectCell>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `rowKey` * | `string` |  | Key of the row, the same as the row's `rowKey`. |
| `label` | `string` |  | Names the checkbox: "Select {label}". Defaults to the key. |

`*` 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)
- [Flush](/storybook/?path=/story/containers-table--flush)
- [Sticky Header](/storybook/?path=/story/containers-table--sticky-header)
- [Selection](/storybook/?path=/story/containers-table--selection)
- [Actions Wide](/storybook/?path=/story/containers-table--actions-wide)
- [Actions Narrow Menu](/storybook/?path=/story/containers-table--actions-narrow-menu)
- [Actions Narrow Wrap](/storybook/?path=/story/containers-table--actions-narrow-wrap)
- [Sortable](/storybook/?path=/story/containers-table--sortable)
- [Loading And Empty](/storybook/?path=/story/containers-table--loading-and-empty)
- [Column Visibility](/storybook/?path=/story/containers-table--column-visibility)
- [Density](/storybook/?path=/story/containers-table--density)
- [Sticky Actions](/storybook/?path=/story/containers-table--sticky-actions)

## Source

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