# TableEmpty

> Single row that holds an `EmptyState` across every column.

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

Single row that holds an `EmptyState` across every column. Put it in `TableBody` when there are no rows.

## Import

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

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

## Usage

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `colSpan` * | `number` |  | Number of columns to span: the count of header cells. |
| `title` | `ReactNode` |  | Defaults to the localized "No rows to show". |
| `description` | `ReactNode` |  |  |
| `icon` | `ReactNode` |  |  |
| `action` | `ReactNode` |  | Call to action, e.g. a button that clears the filters. |
| `className` | `string` |  |  |

`*` marks a required prop.

## 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-parts.tsx`