Nuclear Planning Manual

    @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

    Install

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

    DownloadsWeekly Downloads

    505

    Version

    4.8.1

    License

    Apache-2.0

    Unpacked Size

    47.8 kB

    Total Files

    30

    Last publish

    Collaborators

    • workday-canvas-kit
    • justin.pante
    • byed
    • anicholls