@workday/canvas-kit-react-table NPM

Canvas Kit Table

A component for applying Canvas styling to table elements.

Installation

yarn add @workday/canvas-kit-react

yarn add @workday/canvas-kit-react-table

Usage

Extends <table> with Canvas data table styling. Use with native <thead> and <tbody> elements for respective styling.

Use <TableRow> component instead of <tr> to define rows.

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

<Table>
  <thead>
    <TableRow header={true}>
      <th>ID</th>
      <th>Name</th>
    </TableRow>
  </thead>
  <tbody>
    <TableRow>
      <td>1</td>
      <td>Aidan Brown</td>
    </TableRow>
    <TableRow>
      <td>2</td>
      <td>Betty Chen</td>
    </TableRow>
  </tbody>
</Table>;

Static Properties

None

Component Props

Required

None

Optional

None

TableRow

Usage

Extends <tr> with row states and styling. Use with <th> and <td> elements.

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

<Table>
  <thead>
    <TableRow header={true}>
      <th>ID</th>
      <th>Name</th>
    </TableRow>
  </thead>
  <tbody>
    <TableRow state={TableRow.State.Error}>
      <td>1</td>
      <td>Aidan Brown</td>
    </TableRow>
    <TableRow state={TableRow.State.Alert}>
      <td>2</td>
      <td>Betty Chen</td>
    </TableRow>
  </tbody>
</Table>;

Static Properties

`State: TableRowStates`

<TableRow state={TableRow.State.Error}>

Theme	Description
`Error`	Red border, light red background
`InputError`	Regular borders, light red background
`Alert`	Orange border, light orange background
`InputAlert`	Regular borders, light orange background
`Hover`	Grey background
`Selected`	Blue border, light blue background

InputError and InputAlert are used for cases when the error is on the input-level rather than the entire row. This style produces a colored row without a darkened border.

Component Props

Optional

`state: TableRowStates`

The state of the row

Default: null

`header: boolean`

Whether or not the row contains header elements. If true, special styling will be applied for header elements.

Default: false

canvas canvas-kit react components workday table

polished @emotion/core @emotion/styled @workday/canvas-kit-react-core

@infinitebrahmanuniverse/nolb-_wor @everything-registry/sub-chunk-1021

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

4.0.0-prerelease.f29f26b.3

5 years ago

4.0.0-beta.4

5 years ago

4.0.0-prerelease.25ebd14.2

5 years ago

4.0.0-prerelease.370c732.1

5 years ago

4.0.0-prerelease.9bee8d0.0

6 years ago

3.7.1-next.2

6 years ago

3.7.1-next.0

6 years ago

4.0.0-prerelease.2df320f.3

6 years ago

4.0.0-beta.3

6 years ago

4.0.0-prerelease.42c1aef.2

6 years ago

4.0.0-prerelease.bf33fae.0

6 years ago

4.0.0-prerelease.839d919.25

6 years ago

4.0.0-prerelease.0ec7791.1

6 years ago

4.0.0-beta.2

6 years ago

4.0.0-prerelease.0c47b9c.26

6 years ago

4.0.0-prerelease.22c6ff1.24

6 years ago

4.0.0-prerelease.9daf370.23

6 years ago

4.0.0-prerelease.e668828.22

6 years ago

4.0.0-prerelease.5f48600.20

6 years ago

3.6.1-next.14

6 years ago

4.0.0-prerelease.da2d967.21

6 years ago

3.7.0

6 years ago

4.0.0-prerelease.baf5748.18

6 years ago

4.0.0-prerelease.c1d3fa5.19

6 years ago

4.0.0-prerelease.ba8e51e.17

6 years ago

3.6.1-next.13

6 years ago

4.0.0-prerelease.f1e1a93.16

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago