# Table

> Quiet data table: uppercase captions, hairline rows, right-aligned tabular numbers.

Component · Data · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/Table/)

Quiet data table: uppercase captions, hairline rows, right-aligned tabular numbers.

Props: `columns` ({key, label, align, render}), `rows`. Place inside a `surface` Panel; numbers right-aligned; status as Badges.

## Example

```tsx
import { Avatar, Badge, Table } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      style={{
        background: "var(--surface)",
        borderRadius: "var(--radius-lg)",
        padding: 8,
      }}
    >
      <Table
        columns={[
          {
            key: "name",
            label: "Customer",
            render: (r) => (
              <span className="tf-row">
                <Avatar name={r.name} size={26} />
                {r.name}
              </span>
            ),
          },
          {
            key: "plan",
            label: "Plan",
          },
          {
            key: "status",
            label: "Status",
            render: (r) => <Badge tone={r.tone}>{r.status}</Badge>,
          },
          {
            key: "mrr",
            label: "MRR",
            align: "right",
          },
        ]}
        rows={[
          {
            name: "Northwind",
            plan: "Team",
            status: "Active",
            tone: "success",
            mrr: "€1,240",
          },
          {
            name: "Blue Fern",
            plan: "Starter",
            status: "Trial",
            tone: "info",
            mrr: "€0",
          },
          {
            name: "Copperline",
            plan: "Business",
            status: "Past due",
            tone: "warning",
            mrr: "€3,900",
          },
        ]}
      />
    </div>
  );
}
```

## Props

### Avatar

| Prop | Type | Notes |
| --- | --- | --- |
| `name` | `string` | Required |
| `src?` | `string` |  |
| `size?` | `number` |  |
| `tint?` | `Tint \| "surface-sunken"` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Badge

| Prop | Type | Notes |
| --- | --- | --- |
| `tone?` | `Tone` |  |
| `dot?` | `boolean` |  |
| `live?` | `boolean` |  |
| `children?` | `ReactNode` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Table

| Prop | Type | Notes |
| --- | --- | --- |
| `columns` | `TableColumn[]` | Required |
| `rows` | `Record<string, any>[]` | Required |
| `animate?` | `boolean` |  |
| `stack?` | `boolean` | Cards instead of columns when the table's box is narrow (up to 600px): every row stacks its cells, each with its column label. Without it narrow tables scroll sideways. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |