@workday/canvas-kit-react-table
TypeScript icon, indicating that this package has built-in type declarations

4.8.1 • Public • Published

Canvas Kit Table

A component for applying Canvas styling to table elements.

> Workday Design Reference

Installation

yarn add @workday/canvas-kit-react

or

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: TableRowState

<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: TableRowState

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

Package Sidebar

Install

npm i @workday/canvas-kit-react-table

Weekly Downloads

4,734

Version

4.8.1

License

Apache-2.0

Unpacked Size

47.8 kB

Total Files

30

Last publish

Collaborators

  • jaclynjessup
  • nicholasboll
  • alanbsmith
  • workday-canvas-kit
  • justin.pante
  • anicholls