# Table

Displays tabular data in rows and columns.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Table.tsx)

## Overview

A table is a native `<table>` with styled parts for tabular data.

Use it for tabular data only, never for layout.

## Examples

### Basic

```tsx
import { style, Surface, Table } from '@tempoxyz/ds'

function Transactions(props: Table.Root.Props) {
  return (
    <Surface>
      <Table.Root {...props}>
        <Table.Head>
          <Table.Row>
            <Table.HeaderCell>ID</Table.HeaderCell>
            <Table.HeaderCell>Amount</Table.HeaderCell>
            <Table.HeaderCell>Status</Table.HeaderCell>
          </Table.Row>
        </Table.Head>
        <Table.Body>
          {[
            ['0x4f2a…91c3', '$1,200.00', 'Settled'],
            ['0x91bd…07e1', '$48.50', 'Settled'],
            ['0xc3e0…5a22', '$310.00', 'Pending'],
            ['0x77a1…c0d9', '$9.99', 'Failed'],
          ].map(([id, amount, status]) => (
            <Table.Row key={id}>
              <Table.Cell mono>{id}</Table.Cell>
              <Table.Cell numeric>{amount}</Table.Cell>
              <Table.Cell
                status={
                  status === 'Settled' ? 'positive' : status === 'Failed' ? 'negative' : 'warning'
                }
              >
                {status}
              </Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table.Root>
    </Surface>
  )
}

export function Demo() {
  return (
    <div {...styles.grid()}>
      <Transactions />
    </div>
  )
}

namespace styles {
  export const grid = style({
    backgroundColor: 'background.primary',
    display: 'grid',
    gap: '6',
    gridTemplateColumns: 'repeat(auto-fill, minmax(24rem, 1fr)) !custom',
    padding: '4',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Table/Basic.tsx)

### Striped

Set `striped` to shade alternate rows. It defaults to `false`.

```tsx
import { style, Surface, Table } from '@tempoxyz/ds'

function Transactions(props: Table.Root.Props) {
  return (
    <Surface>
      <Table.Root {...props}>
        <Table.Head>
          <Table.Row>
            <Table.HeaderCell>ID</Table.HeaderCell>
            <Table.HeaderCell>Amount</Table.HeaderCell>
            <Table.HeaderCell>Status</Table.HeaderCell>
          </Table.Row>
        </Table.Head>
        <Table.Body>
          {[
            ['0x4f2a…91c3', '$1,200.00', 'Settled'],
            ['0x91bd…07e1', '$48.50', 'Settled'],
            ['0xc3e0…5a22', '$310.00', 'Pending'],
            ['0x77a1…c0d9', '$9.99', 'Failed'],
          ].map(([id, amount, status]) => (
            <Table.Row key={id}>
              <Table.Cell mono>{id}</Table.Cell>
              <Table.Cell numeric>{amount}</Table.Cell>
              <Table.Cell
                status={
                  status === 'Settled' ? 'positive' : status === 'Failed' ? 'negative' : 'warning'
                }
              >
                {status}
              </Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table.Root>
    </Surface>
  )
}

export function Demo() {
  return (
    <div {...styles.grid()}>
      <Transactions striped />
    </div>
  )
}

namespace styles {
  export const grid = style({
    backgroundColor: 'background.primary',
    display: 'grid',
    gap: '6',
    gridTemplateColumns: 'repeat(auto-fill, minmax(24rem, 1fr)) !custom',
    padding: '4',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Table/Striped.tsx)

### Interactive

Set `interactive` to add row hover and focus-visible styles. It defaults to `false`.

```tsx
import { style, Surface, Table } from '@tempoxyz/ds'

function Transactions(props: Table.Root.Props) {
  return (
    <Surface>
      <Table.Root {...props}>
        <Table.Head>
          <Table.Row>
            <Table.HeaderCell>ID</Table.HeaderCell>
            <Table.HeaderCell>Amount</Table.HeaderCell>
            <Table.HeaderCell>Status</Table.HeaderCell>
          </Table.Row>
        </Table.Head>
        <Table.Body>
          {[
            ['0x4f2a…91c3', '$1,200.00', 'Settled'],
            ['0x91bd…07e1', '$48.50', 'Settled'],
            ['0xc3e0…5a22', '$310.00', 'Pending'],
            ['0x77a1…c0d9', '$9.99', 'Failed'],
          ].map(([id, amount, status]) => (
            <Table.Row key={id} tabIndex={0}>
              <Table.Cell mono>{id}</Table.Cell>
              <Table.Cell numeric>{amount}</Table.Cell>
              <Table.Cell
                status={
                  status === 'Settled' ? 'positive' : status === 'Failed' ? 'negative' : 'warning'
                }
              >
                {status}
              </Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table.Root>
    </Surface>
  )
}

export function Demo() {
  return (
    <div {...styles.grid()}>
      <Transactions interactive />
    </div>
  )
}

namespace styles {
  export const grid = style({
    backgroundColor: 'background.primary',
    display: 'grid',
    gap: '6',
    gridTemplateColumns: 'repeat(auto-fill, minmax(24rem, 1fr)) !custom',
    padding: '4',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Table/Interactive.tsx)

### Fade

Set `fade` to fade out the last 4rem of the table. It defaults to `false`.

```tsx
import { style, Surface, Table } from '@tempoxyz/ds'

function Transactions(props: Table.Root.Props) {
  return (
    <Surface>
      <Table.Root {...props}>
        <Table.Head>
          <Table.Row>
            <Table.HeaderCell>ID</Table.HeaderCell>
            <Table.HeaderCell>Amount</Table.HeaderCell>
            <Table.HeaderCell>Status</Table.HeaderCell>
          </Table.Row>
        </Table.Head>
        <Table.Body>
          {[
            ['0x4f2a…91c3', '$1,200.00', 'Settled'],
            ['0x91bd…07e1', '$48.50', 'Settled'],
            ['0xc3e0…5a22', '$310.00', 'Pending'],
            ['0x77a1…c0d9', '$9.99', 'Failed'],
          ].map(([id, amount, status]) => (
            <Table.Row key={id}>
              <Table.Cell mono>{id}</Table.Cell>
              <Table.Cell numeric>{amount}</Table.Cell>
              <Table.Cell
                status={
                  status === 'Settled' ? 'positive' : status === 'Failed' ? 'negative' : 'warning'
                }
              >
                {status}
              </Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table.Root>
    </Surface>
  )
}

export function Demo() {
  return (
    <div {...styles.grid()}>
      <Transactions fade />
    </div>
  )
}

namespace styles {
  export const grid = style({
    backgroundColor: 'background.primary',
    display: 'grid',
    gap: '6',
    gridTemplateColumns: 'repeat(auto-fill, minmax(24rem, 1fr)) !custom',
    padding: '4',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Table/Fade.tsx)

### Dividers

Set `dividers={false}` to remove the lines between rows. It defaults to `true`.

```tsx
import { style, Surface, Table } from '@tempoxyz/ds'

function Transactions(props: Table.Root.Props) {
  return (
    <Surface>
      <Table.Root {...props}>
        <Table.Head>
          <Table.Row>
            <Table.HeaderCell>ID</Table.HeaderCell>
            <Table.HeaderCell>Amount</Table.HeaderCell>
            <Table.HeaderCell>Status</Table.HeaderCell>
          </Table.Row>
        </Table.Head>
        <Table.Body>
          {[
            ['0x4f2a…91c3', '$1,200.00', 'Settled'],
            ['0x91bd…07e1', '$48.50', 'Settled'],
            ['0xc3e0…5a22', '$310.00', 'Pending'],
            ['0x77a1…c0d9', '$9.99', 'Failed'],
          ].map(([id, amount, status]) => (
            <Table.Row key={id}>
              <Table.Cell mono>{id}</Table.Cell>
              <Table.Cell numeric>{amount}</Table.Cell>
              <Table.Cell
                status={
                  status === 'Settled' ? 'positive' : status === 'Failed' ? 'negative' : 'warning'
                }
              >
                {status}
              </Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table.Root>
    </Surface>
  )
}

export function Demo() {
  return (
    <div {...styles.grid()}>
      <Transactions dividers={false} />
    </div>
  )
}

namespace styles {
  export const grid = style({
    backgroundColor: 'background.primary',
    display: 'grid',
    gap: '6',
    gridTemplateColumns: 'repeat(auto-fill, minmax(24rem, 1fr)) !custom',
    padding: '4',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Table/Dividers.tsx)

### Size

Set `size` to `small`, `medium`, or `large`. It defaults to `medium`.

```tsx
import { style, Surface, Table } from '@tempoxyz/ds'

function Transactions(props: Table.Root.Props) {
  return (
    <Surface>
      <Table.Root {...props}>
        <Table.Head>
          <Table.Row>
            <Table.HeaderCell>ID</Table.HeaderCell>
            <Table.HeaderCell>Amount</Table.HeaderCell>
            <Table.HeaderCell>Status</Table.HeaderCell>
          </Table.Row>
        </Table.Head>
        <Table.Body>
          {[
            ['0x4f2a…91c3', '$1,200.00', 'Settled'],
            ['0x91bd…07e1', '$48.50', 'Settled'],
            ['0xc3e0…5a22', '$310.00', 'Pending'],
            ['0x77a1…c0d9', '$9.99', 'Failed'],
          ].map(([id, amount, status]) => (
            <Table.Row key={id}>
              <Table.Cell mono>{id}</Table.Cell>
              <Table.Cell numeric>{amount}</Table.Cell>
              <Table.Cell
                status={
                  status === 'Settled' ? 'positive' : status === 'Failed' ? 'negative' : 'warning'
                }
              >
                {status}
              </Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table.Root>
    </Surface>
  )
}

export function Demo() {
  return (
    <div {...styles.grid()}>
      <Transactions interactive size="small" />
      <Transactions size="large" />
    </div>
  )
}

namespace styles {
  export const grid = style({
    backgroundColor: 'background.primary',
    display: 'grid',
    gap: '6',
    gridTemplateColumns: 'repeat(auto-fill, minmax(24rem, 1fr)) !custom',
    padding: '4',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Table/Size.tsx)

## Guidelines

TODO: Write guidelines for Table.