# TableCard

> Card whose body is a table or grid that scrolls inside its own wrapper.

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

Card whose body is a table or grid that scrolls inside its own wrapper. A `region` named by its title.

## Import

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

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

## Usage

```tsx
export const Default: Story = {
  render: () => (
    <DashboardPage>
      <KpiRow aria-label="Cifras clave">
        <Kpi label="Matrícula" value="1 240" description="+32 este mes" />
        <Kpi label="Recaudación" value="86%" description="Meta 90%" />
        <Kpi label="Morosidad" value="S/ 18 400" description="42 familias" />
        <Kpi label="Asistencia" value="94%" description="Últimos 30 días" />
      </KpiRow>
      <CardGrid columns={2}>
        <ChartCard title="Recaudación" subtitle="Miles de soles por mes" height={260}>
          <Collected />
        </ChartCard>
        <ChartCard title="Recaudación (mes)" aside={<Chip tone="success">+8%</Chip>} height={260}>
          <Collected />
        </ChartCard>
      </CardGrid>
      <TableCard title="Últimos pagos" subtitle="Hoy">
        <Table>
          <TableHead>
            <TableRow>
              <TableHeaderCell>Familia</TableHeaderCell>
              <TableHeaderCell alignRight>Monto</TableHeaderCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell>Quispe</TableCell>
              <TableCell alignRight>S/ 450</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Huamán</TableCell>
              <TableCell alignRight>S/ 380</TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </TableCard>
    </DashboardPage>
  ),
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  |  |
| `subtitle` | `string` |  |  |
| `aside` | `ReactNode` |  | Slot at the end of the header (a chip, a button). |
| `headingLevel` | `2 \| 4 \| 3` | `2` | Heading level of the title; the card is a named `region`. Default 2. |
| `className` | `string` |  |  |
| `children` * | `ReactNode` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/containers-dashboard-blocks--default)
- [Three Columns](/storybook/?path=/story/containers-dashboard-blocks--three-columns)
- [Narrow](/storybook/?path=/story/containers-dashboard-blocks--narrow)

## Source

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