# TableGlyph

> An SVG table with its chairs placed from `seats` and `shape`: radial for round, one per side (then spread) for square, ends plus long sides for rect, a row of stools for bar.

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

An SVG table with its chairs placed from `seats` and `shape`: radial for round, one per side
(then spread) for square, ends plus long sides for rect, a row of stools for bar. It draws with
`currentColor` and the surface token, so it follows the text colour and the theme. Decorative
(`aria-hidden`) unless an `aria-label` is given.

## Import

```ts
import { TableGlyph } from "@jcsoftdev/ui/atoms";
```

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

## Usage

```tsx
<TableGlyph shape="round" seats={4} occupied={0} size="md" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `shape` * | `"rect" \| "square" \| "round" \| "bar"` |  |  |
| `seats` * | `number` |  | Chairs drawn around the table. |
| `occupied` | `number` | `0` | How many chairs are filled, in drawing order. Clamped to `seats`. |
| `size` | `"sm" \| "md" \| "lg" \| "fill"` | `"md"` | Height of a one-unit box from the control-height tokens, so it follows density; wider shapes grow from it. `fill` takes the size of the parent instead. |
| `width` | `number` |  | Box in grid units (1 unit is one square cell). Defaults to 1x1, rect 2x1 and bar 3x1. |
| `height` | `number` |  |  |
| `pattern` | `"strong" \| "solid" \| "dashed" \| "soft"` | `"solid"` | Table surface: `dashed` outline, `solid` outline on the surface, `soft` or `strong` tint. Defaults to `solid`. |
| `classNames` | `Partial<Record<TableGlyphPart, string>>` |  | Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. |

`*` 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/atoms-tableglyph--default)
- [Labelled](/storybook/?path=/story/atoms-tableglyph--labelled)
- [Shapes](/storybook/?path=/story/atoms-tableglyph--shapes)
- [Occupied](/storybook/?path=/story/atoms-tableglyph--occupied)
- [Patterns](/storybook/?path=/story/atoms-tableglyph--patterns)
- [Sizes](/storybook/?path=/story/atoms-tableglyph--sizes)
- [Many Seats](/storybook/?path=/story/atoms-tableglyph--many-seats)
- [Dark](/storybook/?path=/story/atoms-tableglyph--dark)

## Source

`packages/ui/src/atoms/table-glyph/table-glyph.tsx`