import {SymbolDoc} from '@workday/canvas-kit-docs';

import {Table, TableRow} from '@workday/canvas-kit-react/table';

import Basic from './examples/Basic';
import RowHeader from './examples/RowHeader';
import RowStates from './examples/RowStates';


# Canvas Kit Table

Tables are an efficient way of displaying sets of repeating data with the same structure.

[> Workday Design Reference](https://design.workday.com/components/containers/tables)

## Installation

```sh
yarn add @workday/canvas-kit-react
```

## Usage

### Basic Example

Table includes a container `Table` component and a `TableRow` component. `Table` is a simple wrapper
of the `<table>` element with Canvas styles. `TableRow` wraps `<tr>` and supports additional props
to customize the style of the row.

Use `Table` and `TableRow` in conjunction with the standard `<thead>` and `<tbody>` elements to
create your Table.

<ExampleCodeBlock code={Basic} />

## Component API

### Table

`Table` is a simple wrapper of the `<table>` element with Canvas styles. Use it as you would a
standard `<table>` element.

```tsx
<Table>
  <thead>
    <TableRow header={true}>
      <th>ID</th>
      <th>Name</th>
      ...
    </TableRow>
  </thead>
  <tbody>
    <TableRow>
      <td>1</td>
      <td>Aidan Brown</td>
      ...
    </TableRow>
    ...
  </tbody>
</Table>
```

#### Props

`Table` does not have any documented props. Undocumented props are spread to its underlying
`<table>` element.

### TableRow

`TableRow` wraps `<tr>` and supports additional props to customize the style of the row. Use it as
you would a standard `<tr>` element.

Set the `header` prop of the `TableRow` to designate whether or not it contains header elements.

<ExampleCodeBlock code={RowHeader} />

Set the `state` prop of the `TableRow` to display it using one of several different visual states.
`state` accepts the following values:

- `TableRow.State.Selected`
- `TableRow.State.Alert`
- `TableRow.State.InputAlert`
- `TableRow.State.Error`
- `TableRow.State.InputError`

| State                       | Purpose                                                                |
| --------------------------- | ---------------------------------------------------------------------- |
| `TableRow.State.Alert`      | When there is an issue with the entire row as a whole.                 |
| `TableRow.State.InputAlert` | When there are issues with one or more (but not all) cells in the row. |
| `TableRow.State.Error`      | When there is an error with the entire row as a whole.                 |
| `TableRow.State.InputError` | When there are errors with one or more (but not all) cells in the row. |
| `TableRow.State.Selected`   | Indicates the selected row to the user.                                |

<ExampleCodeBlock code={RowStates} />

`InputAlert` and `InputError` are identical to the `Alert` and `Error` states, respectively, except
they lack a darkened border around the row.

<SymbolDoc name="TableRow" fileName="/react/" />