Package Exports

@workday/canvas-kit-css-table
@workday/canvas-kit-css-table/dist/canvas-kit-css-table.min.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@workday/canvas-kit-css-table) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Canvas Kit Table

Data table styling for Canvas Kit.

> Workday Design Reference

Installation

yarn add @workday/canvas-kit-css

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

Add your node_modules directory to your SASS includePaths. You will then be able to import index.scss.

@import '~@workday/canvas-kit-css-table/index.scss';

Usage

Use .wdc-table on a <table> element.

Use table group elements (<thead>, <tbody>) as some styles are specific to the groups.

<table class="wdc-table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Aidan Brown</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Betty Chen</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Helen Gonzalez</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Timothy May</td>
    </tr>
  </tbody>
</table>

Table Meta

If you would like to add meta information above a table (name, count and/or actions), you can place the .wdc-table-meta container before the .wdc-table.

<div class="wdc-table-meta">
  <div class="wdc-table-info">
    <span class="wdc-table-name">Data Grid Name</span>
    <span class="wdc-table-row-count">4 Items</span>
  </div>

  <div class="wdc-icon-list">
    <div class="wdc-icon-list-icon">
      <!-- wd-icon-filter.svg -->
    </div>
    <div class="wdc-icon-list-icon">
      <!-- wd-icon-chart-config.svg -->
    </div>
  </div>
</div>
<table class="wdc-table">
  ...
</table>

Alignment

Center align a cell's contents with .wdc-table-cell-center.

Right align a cell's contents with .wdc-table-cell-right.

<table class="wdc-table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="wdc-table-cell-center">1</td>
      <td class="wdc-table-cell-right">Aidan Brown</td>
    </tr>
  </tbody>
</table>

Selects

Tables are compatible with checkbox selects.

Use .wdc-table-cell-center on the <td> element containing the checkbox to center the checkbox.

<table class="wdc-table">
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="wdc-table-cell-center"><input type="checkbox" class="wdc-form-checkbox" /></td>
      <td>Aidan Brown</td>
    </tr>
  </tbody>
</table>

Hover State

Explicitly apply hover styling to a table row by using .wdc-table-row-hover.

<table class="wdc-table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">Position</th>
      <th scope="col">Location</th>
    </tr>
  </thead>
  <tbody>
    <tr class="wdc-table-row-hover">
      <td>1</td>
      <td>Aidan Brown</td>
      <td>Product Manager</td>
      <td>San Francisco, CA</td>
    </tr>
  </tbody>
</table>

Selected State

Apply selected styling to a table row by using .wdc-table-row-selected.

<table class="wdc-table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">Position</th>
      <th scope="col">Location</th>
    </tr>
  </thead>
  <tbody>
    <tr class="wdc-table-row-selected">
      <td>1</td>
      <td>Aidan Brown</td>
      <td>Product Manager</td>
      <td>San Francisco, CA</td>
    </tr>
  </tbody>
</table>

Error State

Apply selected styling to a table row by using .wdc-table-row-error.

<table class="wdc-table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col" id="name-heading">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="wdc-table-row-error">
      <td>1</td>
      <td>
        <input
          type="text"
          class="wdc-form-textinput"
          value="Alex Black"
          aria-labelledby="name-heading"
        />
      </td>
    </tr>
  </tbody>
</table>

Alert State

Apply selected styling to a table row by using .wdc-table-row-alert.

<table class="wdc-table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col" id="name-heading">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="wdc-table-row-alert">
      <td>1</td>
      <td>
        <input
          type="text"
          class="wdc-form-textinput"
          value="Alex Black"
          aria-labelledby="name-heading"
        />
      </td>
    </tr>
  </tbody>
</table>

Input Errors and Alerts

Signal errors and alerts for input fields by using .wdc-table-row-error-borderless/.wdc-table-row-alert-borderless on the row and .wdc-form-error/.wdc-form-alert on the input field.

Refer to canvas-kit-css-forms for more information regarding input field errors.

<table class="wdc-table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col" id="name-heading">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="wdc-table-row-alert-borderless">
      <td>1</td>
      <td>
        <input
          type="text"
          class="wdc-form-textinput wdc-form-alert"
          value="Alex Black"
          aria-labelledby="name-heading"
        />
      </td>
    </tr>
    <tr class="wdc-table-row-error-borderless">
      <td>1</td>
      <td>
        <input
          type="text"
          class="wdc-form-textinput wdc-form-error"
          value="Aidan Brown"
          aria-labelledby="name-heading"
        />
      </td>
    </tr>
  </tbody>
</table>