[Components](https://oods-foundry.com/components) / primitive

# Table

Displays labelled columns and rows of tabular data.

Generated from @oods/foundry 0.10.1

- Categories

  primitive

- Contexts

  detail, list

- Readiness

  `react-and-vue`

## Playground

Documented example `table-selectable-row` : press Enter on Acme row action, sub-1 emitted once.

The render follows the page's theme switch: light, dark or high contrast. Both frameworks render the same example.

The real Table, live

React

Subscriptions

| Name | Status |
| - | - |
| | Active |

Vue

Subscriptions

| Name | Status |
| - | - |
| | Active |

Events it emits: rowActivate. Use either render above, and each event shows here with the framework that sent it.



## Code

The documented example. HTML is the markup the React component renders for it, which @oods/component-styles styles.

**React**

```
import { Table } from '@oods/components-react';
import '@oods/component-styles/css';

const columns = [
  {
    "key": "name",
    "label": "Name"
  },
  {
    "key": "status",
    "label": "Status"
  }
];

const rows = [
  {
    "id": "sub-1",
    "name": "Acme",
    "status": "Active"
  }
];

export function Example() {
  return (
    <Table
      caption="Subscriptions"
      columns={columns}
      rows={rows}
      density="compact"
      selectable={true}
    />
  );
}
```

## Props, slots and events

Contract version 1.1.0. Types are from the React declarations in @oods/components-react.

Props

| Prop | Type | Required | Documented example |
| - | - | - | - |
| `caption` | `ReactNode` | no | `Subscriptions` |
| `showCaption` | `boolean \| undefined` | no | |
| `columns` | `readonly TableColumn<TableRowData>[] \| undefined` | no | `[{"key":"name","label":"Name"},{"key":"status","label":"Status"}]` |
| `rows` | `readonly TableRowData[] \| undefined` | no | `[{"id":"sub-1","name":"Acme","status":"Active"}]` |
| `density` | `FieldDensity \| undefined` | no | `compact` |
| `selectable` | `boolean \| undefined` | no | `true` |

### Slots

caption, head, body, row, headerCell, cell

### Events

rowActivate

## States

default, compact, selectable

## Accessibility

- Role

  `button`

- How it gets its name

  `label` on `tbody button`

### Keyboard

Keyboard

| Key | What it does |
| - | - |
| `Tab` | Move focus to the named native control |
| `Enter` | Activate the control |

### Obligations in the contract

- Native table/head/body/row/header/data-cell semantics
- Caption names the table
- Selectable rows expose a real focus target

Named subparts are exports of one compound family and do not inflate the census.

## Tokens

The token roles this component reads.

- `table.background`
- `table.border`
- `table.text`
- `table.rowHover`
- `table.focus`

## Readiness

The evidence recorded for this component, with its label.

`react-and-vue`: catalog_list gives this label when the React and Vue components have complete readiness evidence, but the sweep's generated apps don't use the component in both.

Readiness evidence

| Evidence | React | Vue |
| - | - | - |
| state | implemented-evidence-complete | implemented-evidence-complete |
| versioned contract | passed | passed |
| target implementation | passed | passed |
| package export | passed | passed |
| public declaration | passed | passed |
| dependency closure | passed | passed |
| framework scenario | passed | passed |
| accessibility | verified | verified |
| interaction | verified | verified |
| visual themes | verified | verified |

## Use your own

You can replace this component with your own React or Vue component. Map it, and generated code imports yours at the exact version you name. A contract report, run in a real browser, lists what your component met, what it didn't, and what wasn't checked.

The `component_map` call, with the parts in angle brackets yours to fill:

```
{
  "action": "create",
  "apply": true,
  "externalSystem": "<your design system>",
  "externalComponent": "<YourTable>",
  "oodsTraits": [
    "<trait names>"
  ],
  "substitution": {
    "component": "Table",
    "react": {
      "package": "<your-package>/react",
      "version": "<exact version>",
      "export": "<YourTable>"
    },
    "vue": {
      "package": "<your-package>/vue",
      "version": "<exact version>",
      "export": "<YourTable>"
    }
  }
}
```

## How this page was made

Generated at build from the published data, each source with the hash of what was read. [The page's manifest](https://oods-foundry.com/components/table/manifest.json).

- **Contract**: `@oods/component-contracts@0.10.1 componentContracts.Table` `sha256:3e38613fb065…`
- **Documented example**: `@oods/component-contracts@0.10.1 sharedScenarios table-selectable-row` `sha256:076ac1e599f9…`
- **Catalog entry (catalog_list)**: `generated/0.10.1/system/catalog.json Table` `sha256:b5df48915e70…`
- **React readiness**: `@oods/components-react@0.10.1 readiness Table` `sha256:d95bff0373ff…`
- **Vue readiness**: `@oods/components-vue@0.10.1 readiness Table` `sha256:8bd465071d5c…`
- **Prop types**: `generated/0.10.1/components/prop-types.json Table` `sha256:2ab5b576a79c…`