Table

Anatomy - Tables

1. Table Header (Optional): May consist of a header, result count, optional subheading, or any custom configuration of text.
2. Table Outline (Optional): A border is used by default, but may be omitted for a full page table or in cases where a table is the sole element on a page.
3. Column Header: Include just column labels by default, but icon actions for actions such as sort and filter may be added. Note that this functionality will be a custom add for developers.
4. Cell: May consist of text, icons, status indicators, buttons, data types, or other custom content. Text overflows by default, but teams may elect to apply truncation with a tooltip.

Usage Guidance

Data Tables are intended to display data that can be easily scanned and compared.

• Conceptually, each row in a Table represents an item, and each cell of that row is an attribute of that item.
• This means that all the cells in a particular column will be the same data type such as dates, numerals, text, etc.
• Ideally, there should be one value per cell. Field sets are discouraged.
• Nested Tables are highly discouraged.

When to Use

Use tables to allow users to:

• Easily scan and compare data
• View and edit data
• Manipulate and navigate through a large amount of data
• Preview data

When to Use Something Else

Consider another component when:

• You only have a small data set.
• A more detailed amount of information needs to be displayed by default.
• There is more than one piece of information within a cell.

Dos and Don'ts

Examples

Basic Example

Users may not want to use a caption so they can import Heading or Text instead. This will give the user more flexibility around the customization of the title/heading of their table.

Example with Caption

Users are free to use a caption instead of a heading. A caption is not required but it is good for accessibility purposes.

Fixed Column

Users may add styles to the Table.Header to render a fixed column. The example below assigns a width to the Table to guarantee the fixed column is triggered, but you are free to omit the width if you would only like the fixed column to be triggered if necessary.

Component API

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

export default function App() {
return (
 <Table>
   <Table.Caption>Table Caption</Table.Caption>
   <Table.Head>
     <Table.Row>
       <Table.Header>Table Header</Table.Header>
       <Table.Header>Table Header</Table.Header>
     </Table.Row>
   </Table.Head>
   <Table.Body>
     <Table.Row>
       <Table.Header>Table Header</Table.Header>
       <Table.Header>Table Header</Table.Header>
     </Table.Row>
     <Table.Row>
       <Table.Header>Table Header</Table.Header>
       <Table.Cell>Table Data Cell</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Header>Table Header</Table.Header>
       <Table.Cell>Table Data Cell</Table.Cell>
     </Table.Row>
   </Table.Body>
   <Table.Footer>
     <Table.Row>
       <Table.Header>Table Header</Table.Header>
       <Table.Cell>Table Data Cell</Table.Cell>
     </Table.Row>
   </Table.Footer>
 </Table>
);
}

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

export default function App() {
 return (
   <Table>
     <Table.Caption>Table Caption</Table.Caption>
     <Table.Body>
       <Table.Row>
         <Table.Header>Table Header</Table.Header>
         <Table.Cell>Table Cell</Table.Cell>
       </Table.Row>
     </Table.Body>
   </Table>
 );
}

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

export default function App() {
return (
  <Table>
    <Table.Head>
      <Table.Row>
        <Table.Header>Table Header</Table.Header>
        <Table.Cell>Table Cell</Table.Cell>
      </Table.Row>
    </Table.Head>
  </Table>
);
}

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

export default function App() {
return (
 <Table>
   <Table.Body>
     <Table.Row>
       <Table.Header>Table Header</Table.Header>
       <Table.Cell>Table Cell</Table.Cell>
     </Table.Row>
   </Table.Body>
 </Table>
);
}

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

export default function App() {
return (
 <Table>
   <Table.Head>
     <Table.Row gridTemplateColumns="repeat(4, minmax(100px, 1fr))">
       <Table.Header>Table Header</Table.Header>
       <Table.Cell>Table Cell</Table.Cell>
     </Table.Row>
   </Table.Head>
 </Table>
);
}

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

export default function App() {
return (
  <Table>
    <Table.Head>
      <Table.Row>
        <Table.Header>Table Header</Table.Header>
        <Table.Cell>Table Cell</Table.Cell>
      </Table.Row>
    </Table.Head>
  </Table>
);
}

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

export default function App() {
return (
  <Table>
    <Table.Body>
      <Table.Row>
        <Table.Header>Table Header</Table.Header>
        <Table.Cell>Table Cell</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>
);
}

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

export default function App() {
return (
  <Table>
    <Table.Footer>
      <Table.Row>
        <Table.Header>Table Header</Table.Header>
        <Table.Cell>Table Cell</Table.Cell>
      </Table.Row>
    </Table.Footer>
  </Table>
);
}

Accessibility Guidelines

• Table Header should be an HTML heading element, with a configurable heading level, based on the page structure context.
• No column header cells should be blank.
• Column headers must use <th> elements with scope="col" attributes.
• When possible, each cell should only have one piece of data.
• Avoid placing multiple inactive controls into a single cell.
• If using custom functionality in column headers, meet with a11y team to create an accessible experience. Custom functionality may include filtering, sorting, or row selection with checkboxes.

Content Guidelines

• When writing titles, column headers, and other text for Tables, refer to the Tables section of the Content Style Guide.

Mobile

Guidelines

• Due to screen size limitations, the display of Tables on mobile is different from the desktop display. Rather than displaying inline on the page, there is a tile preview which the user can tap to display a full-page view-only Table. To edit the data in this Table, the user taps the row they wish to edit and an editable form of that row is shown.

  Please note: Tables 2.0 is not currently available for Mobile applications.