# BoxStatsTable

> Hidden data table with the summary of every box, violin or cloud.

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

Hidden data table with the summary of every box, violin or cloud.

## Import

```ts
import { BoxStatsTable } from "@jcsoftdev/ui/charts";
```

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

## Usage

```tsx
<BoxStatsTable
  caption="Duración del servicio por barbero"
  labels={labels}
  rows={[
      { name: "Kevin", stats: boxStats(kevin), format: minutes },
      { name: "Diego", stats: boxStats(diego), format: minutes },
      { name: "Andrea", stats: boxStats(andrea), format: minutes },
      { name: "Renzo", stats: null, format: minutes },
    ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `caption` * | `string` |  |  |
| `labels` * | `DistributionLabels` |  |  |
| `rows` * | `readonly { name: string; stats: BoxStats \| null; format: ValueFormatter; }[]` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-primitives-boxstatstable--default)
- [Single Row](/storybook/?path=/story/charts-primitives-boxstatstable--single-row)

## Source

`packages/ui/src/charts/core/distribution/marks.tsx`