Skip to Content
Workday Design
Design SystemBrand Resources
CTRL K

Table

Tables are an efficient way of displaying sets of repeating data with the same structure.

Interaction Modes

Customizing

Reviewing

Selecting

Sources

Github

Storybook

Install

yarn add @workday/canvas-kit-react

Component Type

Container

Platform

Web

Component

Sana Canvas

Delivery Channels

Web, Web Mobile

Version

16.1.7

Experience Surfaces

Page Body Inline

Component Type

Container

Platform

Web

Component

Sana Canvas

Delivery Channels

Web, Web Mobile

Version

16.1.7

Experience Surfaces

Page Body Inline

Anatomy - Tables

Example of the anatomy of a Table.
  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.

Design Annotations for Accessibility

  • Specify the column header for every column
  • Specify the row headers, if applicable
  • Specify the caption of the table

Do’s and Don’ts

An expense items table with Date and Name left-aligned, and a dollar Amount column right-aligned.

Do

Right align numeric data in tables.

An exceptions table with a right-aligned "Suggested Action" column of "Review" links.

Do

Right align actions in tables.

A "Native Trees" table where the Comments column wraps onto 2–3 lines instead of truncating.

Do

Allow cell text to wrap where possible, giving users access to the full contents of the cell by default.

A "Planets" table where "Contents of Atmosphere" for Venus is truncated to "Carbon Dioxide &…", with a Tooltip on hover showing the full text.

Do

We recommend wrapping text where possible, but if needed, cell text may be truncated, showing full text in a tooltip on hover.

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.

Pizza Toppings

ToppingsAmount
Pepperoni2.5 oz
Mozzarella5 oz
Basil10 Leaves
import {useUniqueId} from '@workday/canvas-kit-react/common';
import {Table} from '@workday/canvas-kit-react/table';
import {Heading} from '@workday/canvas-kit-react/text';
import {createStyles} from '@workday/canvas-kit-styling';
import {system} from '@workday/canvas-tokens-web';

const styleOverrides = {
  parentContainerStyles: createStyles({
    marginBlockEnd: system.gap.md,
  }),
  tableHeaderStyles: createStyles({
    backgroundColor: system.color.surface.raised,
  }),
};

export default () => {
  const headingID = useUniqueId();

  return (
    <>
      <Heading as="h3" id={headingID} size="small" cs={styleOverrides.parentContainerStyles}>
        Pizza Toppings
      </Heading>
      <Table aria-labelledby={headingID}>
        <Table.Head>
          <Table.Row>
            <Table.Header scope="col" cs={styleOverrides.tableHeaderStyles}>
              Toppings
            </Table.Header>
            <Table.Header scope="col" cs={styleOverrides.tableHeaderStyles}>
              Amount
            </Table.Header>
          </Table.Row>
        </Table.Head>
        <Table.Body>
          <Table.Row>
            <Table.Cell>Pepperoni</Table.Cell>
            <Table.Cell>2.5 oz</Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell>Mozzarella</Table.Cell>
            <Table.Cell>5 oz</Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell>Basil</Table.Cell>
            <Table.Cell>10 Leaves</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table>
    </>
  );
};

Right to Left

Table supports right-to-left languages when specified in the CanvasProvider theme.

משקאות קפה וגדלים
מַשׁקֶהגודל
אספרסו1 גר
מקיאטו2 גרם אספרסו
גזירה2 גרם אספרסו, 1 גרם חלב מוקצף
import {CanvasProvider} from '@workday/canvas-kit-react/common';
import {Table} from '@workday/canvas-kit-react/table';
import {createStyles} from '@workday/canvas-kit-styling';
import {system} from '@workday/canvas-tokens-web';

const tableHeaderStyles = createStyles({
  backgroundColor: system.color.surface.raised,
});

export default () => {
  return (
    <CanvasProvider dir="rtl">
      <Table>
        <Table.Caption>משקאות קפה וגדלים</Table.Caption>
        <Table.Head>
          <Table.Row>
            <Table.Header scope="col" cs={tableHeaderStyles}>
              מַשׁקֶה
            </Table.Header>
            <Table.Header scope="col" cs={tableHeaderStyles}>
              גודל
            </Table.Header>
          </Table.Row>
        </Table.Head>
        <Table.Body>
          <Table.Row>
            <Table.Cell>אספרסו</Table.Cell>
            <Table.Cell>1 גר</Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell>מקיאטו</Table.Cell>
            <Table.Cell>2 גרם אספרסו</Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell>גזירה</Table.Cell>
            <Table.Cell>2 גרם אספרסו, 1 גרם חלב מוקצף</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table>
    </CanvasProvider>
  );
};

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.

Coffee Drinks and Sizes
DrinkSize
Espresso1 oz
Macchiato2 oz Espresso
Cortado2 oz Espresso, 1 oz Foamed Milk
Cappuccino2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk
import {Table} from '@workday/canvas-kit-react/table';
import {createStyles} from '@workday/canvas-kit-styling';
import {system} from '@workday/canvas-tokens-web';

const tableHeaderStyles = createStyles({
  backgroundColor: system.color.surface.default,
});

export default () => {
  return (
    <Table>
      <Table.Caption>Coffee Drinks and Sizes</Table.Caption>
      <Table.Head>
        <Table.Row>
          <Table.Header scope="col" cs={tableHeaderStyles}>
            Drink
          </Table.Header>
          <Table.Header scope="col" cs={tableHeaderStyles}>
            Size
          </Table.Header>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Espresso</Table.Cell>
          <Table.Cell>1 oz</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Macchiato</Table.Cell>
          <Table.Cell>2 oz Espresso</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Cortado</Table.Cell>
          <Table.Cell>2 oz Espresso, 1 oz Foamed Milk</Table.Cell>
        </Table.Row>
        <Table.Row></Table.Row>
        <Table.Row>
          <Table.Cell>Cappuccino</Table.Cell>
          <Table.Cell>2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
};

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.

Performance Car Specs

MakeModelYearPriceEngineTransmissionHorsepowerTorqueCurb Weight
Porsche992 911 GT32022Starts at $160,0004.0L Flat 6PDK or 7-Speed Manual502hp346 lb-ft3,164 lbs
BMWM5 Competition2018Starts at $105,000Twin-Turbo 4.4L V8Automatic627hp553 lb-ft4,345 lbs
Alfa Romeo1750 GTV1970$30,000 - $55,0001.75L Inline 4Manual122hp137 lb-ft2,140 lbs
LotusEmira2023Starts at $78,000Supercharged 3.5L V6Automatic or 6-Speed Manual400hp317 lb-ft3520 lbs
ToyotaSupra1998$40,000 - $80,0003.0L Inline 6Automatic or 6-Speed Manual320hp315 lb-ft3,599 lbs
NissanSkyline GT-R1994$45,000 - $90,0002.6L Twin-Turbo Inline 65-Speed Manual276hp260 lb-ft3,153 lbs
import React from 'react';

import {useUniqueId} from '@workday/canvas-kit-react/common';
import {Table} from '@workday/canvas-kit-react/table';
import {Heading} from '@workday/canvas-kit-react/text';
import {createStyles, px2rem} from '@workday/canvas-kit-styling';
import {system} from '@workday/canvas-tokens-web';

const styleOverrides = {
  parentContainerStyles: createStyles({
    marginBlockEnd: system.gap.md,
  }),
  tableStyles: createStyles({
    width: px2rem(690),
  }),
  tableHeaderStyles: createStyles({
    position: 'sticky',
    left: '0',
    backgroundColor: system.color.surface.raised,
    borderInlineEnd: `${px2rem(2)} solid ${system.color.border.default}`,
  }),
};

export default () => {
  const headingID = useUniqueId();
  const exampleData = [
    {
      make: 'Porsche',
      model: '992 911 GT3',
      year: '2022',
      price: 'Starts at $160,000',
      engine: '4.0L Flat 6',
      transmission: 'PDK or 7-Speed Manual',
      horsepower: '502hp',
      torque: '346 lb-ft',
      curbWeight: '3,164 lbs',
    },
    {
      make: 'BMW',
      model: 'M5 Competition',
      year: '2018',
      price: 'Starts at $105,000',
      engine: 'Twin-Turbo 4.4L V8',
      transmission: 'Automatic',
      horsepower: '627hp',
      torque: '553 lb-ft',
      curbWeight: '4,345 lbs',
    },
    {
      make: 'Alfa Romeo',
      model: '1750 GTV',
      year: '1970',
      price: '$30,000 - $55,000',
      engine: '1.75L Inline 4',
      transmission: 'Manual',
      horsepower: '122hp',
      torque: '137 lb-ft',
      curbWeight: '2,140 lbs',
    },
    {
      make: 'Lotus',
      model: 'Emira',
      year: '2023',
      price: 'Starts at $78,000',
      engine: 'Supercharged 3.5L V6',
      transmission: 'Automatic or 6-Speed Manual',
      horsepower: '400hp',
      torque: '317 lb-ft',
      curbWeight: '3520 lbs',
    },
    {
      make: 'Toyota',
      model: 'Supra',
      year: '1998',
      price: '$40,000 - $80,000',
      engine: '3.0L Inline 6',
      transmission: 'Automatic or 6-Speed Manual',
      horsepower: '320hp',
      torque: '315 lb-ft',
      curbWeight: '3,599 lbs',
    },
    {
      make: 'Nissan',
      model: 'Skyline GT-R',
      year: '1994',
      price: '$45,000 - $90,000',
      engine: '2.6L Twin-Turbo Inline 6',
      transmission: '5-Speed Manual',
      horsepower: '276hp',
      torque: '260 lb-ft',
      curbWeight: '3,153 lbs',
    },
  ];
  return (
    <>
      <Heading as="h3" id={headingID} size="small" cs={styleOverrides.parentContainerStyles}>
        Performance Car Specs
      </Heading>
      <Table cs={styleOverrides.tableStyles} aria-labelledby={headingID} tabIndex={0}>
        <Table.Head>
          <Table.Row>
            <Table.Header scope="col" cs={styleOverrides.tableHeaderStyles}>
              Make
            </Table.Header>
            <Table.Header scope="col">Model</Table.Header>
            <Table.Header scope="col">Year</Table.Header>
            <Table.Header scope="col">Price</Table.Header>
            <Table.Header scope="col">Engine</Table.Header>
            <Table.Header scope="col">Transmission</Table.Header>
            <Table.Header scope="col">Horsepower</Table.Header>
            <Table.Header scope="col">Torque</Table.Header>
            <Table.Header scope="col">Curb Weight</Table.Header>
          </Table.Row>
        </Table.Head>
        <Table.Body>
          {exampleData.map((item, index) => (
            <React.Fragment key={index}>
              <Table.Row>
                <Table.Header scope="row" cs={styleOverrides.tableHeaderStyles}>
                  {item.make}
                </Table.Header>
                <Table.Cell>{item.model}</Table.Cell>
                <Table.Cell>{item.year}</Table.Cell>
                <Table.Cell>{item.price}</Table.Cell>
                <Table.Cell>{item.engine}</Table.Cell>
                <Table.Cell>{item.transmission}</Table.Cell>
                <Table.Cell>{item.horsepower}</Table.Cell>
                <Table.Cell>{item.torque}</Table.Cell>
                <Table.Cell>{item.curbWeight}</Table.Cell>
              </Table.Row>
            </React.Fragment>
          ))}
        </Table.Body>
      </Table>
    </>
  );
};

Base Html Table Example

If a user needs a standard HTML table  with no CSS Grid  features, then they can use the BaseTable component.

Coffee Drinks and Sizes
DrinkSize
Espresso1 oz
Macchiato2 oz Espresso
Cortado2 oz Espresso, 1 oz Foamed Milk
Cappuccino2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk
import {BaseTable} from '@workday/canvas-kit-react/table';
import {createStyles} from '@workday/canvas-kit-styling';
import {system} from '@workday/canvas-tokens-web';

const tableHeaderStyles = createStyles({
  backgroundColor: system.color.surface.raised,
});

export default () => {
  return (
    <BaseTable>
      <BaseTable.Caption>Coffee Drinks and Sizes</BaseTable.Caption>
      <BaseTable.Head>
        <BaseTable.Row>
          <BaseTable.Header scope="col" cs={tableHeaderStyles}>
            Drink
          </BaseTable.Header>
          <BaseTable.Header scope="col" cs={tableHeaderStyles}>
            Size
          </BaseTable.Header>
        </BaseTable.Row>
      </BaseTable.Head>
      <BaseTable.Body>
        <BaseTable.Row>
          <BaseTable.Cell>Espresso</BaseTable.Cell>
          <BaseTable.Cell>1 oz</BaseTable.Cell>
        </BaseTable.Row>
        <BaseTable.Row>
          <BaseTable.Cell>Macchiato</BaseTable.Cell>
          <BaseTable.Cell>2 oz Espresso</BaseTable.Cell>
        </BaseTable.Row>
        <BaseTable.Row>
          <BaseTable.Cell>Cortado</BaseTable.Cell>
          <BaseTable.Cell>2 oz Espresso, 1 oz Foamed Milk</BaseTable.Cell>
        </BaseTable.Row>
        <BaseTable.Row></BaseTable.Row>
        <BaseTable.Row>
          <BaseTable.Cell>Cappuccino</BaseTable.Cell>
          <BaseTable.Cell>2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk</BaseTable.Cell>
        </BaseTable.Row>
      </BaseTable.Body>
    </BaseTable>
  );
};

Which Component Should I Use?

If a user wants CSS Grid  features with their Table, then use the Table  component.

If a user does not want CSS Grid  features with their Table, then use the BaseTable  component.

Advanced

You can also find several advanced Table examples in our Guides > Accessibility > Table Patterns section.

Custom Styles

Table and its subcomponents support custom styling via the cs prop. For more information, check our “How To Customize Styles” .

Accessibility

Table is a styled compound wrapper around native HTML table elements (<table>, <caption>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>). Assistive technology can announce column and row headers as users move through cells only when the markup is a real data table with correct headers and an accessible name. Table does not include a model, roving tabindex, or built-in sort, filter, selection, or expand behavior.

Use Table for tabular data with a relationship between rows and columns—not for page layout. Prefer Table (CSS Grid) unless the design needs a standard HTML table layout without Grid; then use BaseTable. The same accessibility requirements apply to both. For interactive table patterns, follow Guides > Accessibility > Table Patterns instead of inventing ARIA. See also Table Pattern | APG | WAI | W3C .

Minimum accessible structure

The following matches the Example with Caption (Basic story): native table markup with Table.Caption as the accessible name and scope="col" on column headers. The Basic Example uses a visible Heading and aria-labelledby instead of a caption; that is an equally valid naming pattern (see Accessibility Requirements).

import {Table} from '@workday/canvas-kit-react/table';
 
<Table>
  <Table.Caption>Coffee Drinks and Sizes</Table.Caption>
  <Table.Head>
    <Table.Row>
      <Table.Header scope="col">Drink</Table.Header>
      <Table.Header scope="col">Size</Table.Header>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Espresso</Table.Cell>
      <Table.Cell>1 oz</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Macchiato</Table.Cell>
      <Table.Cell>2 oz Espresso</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>;

Put Table.Caption first when you use it (HTML requires <caption> as the first child of <table>). Pair every column header with scope="col". Do not render empty Table.Row elements.

Built-in Behaviors

Canvas Kit applies these automatically when you compose Table (or BaseTable) with its subcomponents. Do not duplicate them in consuming code.

Native table semantics (applied by createComponent element mapping):

  • Table: <table>
  • Table.Caption: <caption>
  • Table.Head: <thead>
  • Table.Body: <tbody>
  • Table.Footer: <tfoot>
  • Table.Row: <tr> (Table.Row also sets CSS Grid column tracks from the count of valid child cells; this is layout only)
  • Table.Header: <th>
  • Table.Cell: <td>

Keyboard (standard Table behavior):

Table uses native <table> keyboard behavior. Do not add custom key handlers or grid-widget keys on a data table.

When Table overflows (the root stencil uses overflow: auto), add tabIndex={0} so keyboard users can focus and scroll it, as in the Fixed Column example. Omit tabIndex when the table does not scroll.

Screen reader expectations (when built-in behaviors are used as intended):

  • The table is announced as a table, with its accessible name from Table.Caption or aria-labelledby / aria-label on Table
  • Moving across a row announces the column header (scope="col")
  • Moving down a column announces the row header when body cells use Table.Header with scope="row"
  • Interactive controls inside cells are announced with their own name and role when focused

Accessibility Requirements

Required in application code for an accessible Table. There is no useTableModel. Canvas Kit does not set scope, an accessible name, tabIndex, or id / headers cell associations — supply those in application code when the table below requires them. Rows marked (conditional) apply only when the situation matches—otherwise omit.

If no design spec is provided: generate a simple data table with Table.Caption, Table.Head / Table.Body, scope="col" on column headers, and Table.Cell for body data. Omit Table.Footer, row headers, tabIndex, id / headers associations, aria-sort, aria-expanded, aria-level, selection checkboxes, and filter/sort popups unless the spec calls for those patterns.

Heading instead of caption (conditional):

When the design uses a visible heading (or other text) instead of Table.Caption, give that heading a unique id and set aria-labelledby on Table. Do not also render Table.Caption unless the design needs both a caption and extra labelling. See Basic Example.

<Heading as="h3" id={headingId}>
  Pizza Toppings
</Heading>
<Table aria-labelledby={headingId}>{/* … */}</Table>

Interactive and advanced patterns (conditional):

Do not invent table ARIA. Copy the matching Canvas Kit guide when the spec includes that behavior:

RequirementHow to satisfy
Data table, not layoutCompose Table (or BaseTable) with Head, Body, Row, Header, and Cell. Do not use a table to position non-tabular UI.
Accessible nameTable.Caption with a descriptive title, or aria-labelledby on Table pointing at a visible heading id (see Heading instead of caption). Canvas Kit does not set aria-labelledby.
Column headersSet scope="col" on every Table.Header in Table.Head. Table.Header renders <th> but does not set scope. Do not use Table.Cell (<td>) for column headers.
Row headers (conditional)When the first (or identifying) column names each row, set scope="row" on Table.Header in the body, as in Fixed Column. Do not rely on <th> alone.
Keyboard access to overflow (conditional)If the table scrolls, set tabIndex={0} on Table. Omit it when content does not overflow.
Footer (conditional)Table.Footer only when the design includes summary or footer rows.
Form controls in cells (conditional)Label every control (prefer FormField). See With Form Fields and Form Field.
Sort, filter, select, expand, or nest (conditional)Follow the matching Table Patterns guide. Ask the developer which pattern the spec requires before generating aria-sort, aria-expanded, aria-level, aria-owns, live regions, or selection checkboxes.

Summary for code generation:

  • REQUIRED: semantic Table composition, accessible name (caption or aria-labelledby), scope="col" on column headers
  • CONDITIONAL: heading + aria-labelledby, scope="row", tabIndex={0} for overflow, Table.Footer, form-field labelling in cells, advanced table patterns from the guides

Anti-Patterns

Do not generate code that does the following (see Accessibility Requirements above for what to supply instead):

  • Manually set role="table", role="row", role="columnheader", role="rowheader", or role="cell" on Table subcomponents — they already render native table elements
  • Omit scope on Table.Header, or use Table.Cell for column or row headers
  • Generate id / headers associations on cells for a simple data table — use scope instead (see Accessibility Requirements)
  • Leave the table unnamed (no Table.Caption, aria-labelledby, or aria-label), or set aria-labelledby when Table.Caption already names the table
  • Use a table for page layout
  • Add tabIndex={0} on a table that does not scroll, or omit it on a horizontally/vertically scrollable table
  • Set aria-sort, aria-expanded, aria-level, aria-owns, or selection checkboxes by default — those belong to specific Table Patterns and need a matching design spec
  • Nest a <table> inside a cell to fake hierarchy, or add extra Table.Body elements to fake a tree — see Nested Rows
  • Put a “Select All” checkbox in a column header Table.Header without following Selectable Rows
  • Place unlabeled inputs in cells, or rely on the column header alone without checking With Form Fields
  • Generate role="grid" / grid-widget keyboard behavior on Table — CSS Grid on Table.Row is visual layout, not an ARIA grid

Component API

Table

Table is a simple styled compound component that renders a table element. It is used to present information in a two-dimensional table comprised of rows and columns of cells containing data. Table is built off of BaseTable and is using CSS Grid features.

import {Table} from '@workday/canvas-kit-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>
);
}

Layout Component

Table supports all props from thelayout component.

Props

Props extend from table. Changing the as prop will change the element interface.

NameTypeDescriptionDefault
cs

The cs prop takes in a single value or an array of values. You can pass the CSS class name returned by , or the result of and . If you're extending a component already using cs, you can merge that prop in as well. Any style that is passed to the cs prop will override style props. If you wish to have styles that are overridden by the css prop, or styles added via the styled API, use wherever elemProps is used. If your component needs to also handle style props, use instead.

import {handleCsProp} from '@workday/canvas-kit-styling';
import {mergeStyles} from '@workday/canvas-kit-react/layout';

// ...

// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same
// function signature, but adds support for style props.

return (
 <Element
   {...handleCsProp(elemProps, [
     myStyles,
     myModifiers({ size: 'medium' }),
     myVars({ backgroundColor: 'red' })
   ])}
 >
   {children}
 </Element>
)
childrenReactNode
asReact.ElementType

Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using React.forwardRefand spread extra props to a root element.

Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.

table
refReact.Ref<R = table>

Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If as is set to an element, it will be that element. If as is a component, the reference will be to that component (or element if the component uses React.forwardRef).

Table.Caption

Table.Caption renders a caption element.

import {Table} from '@workday/canvas-kit-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>
 );
}

Layout Component

Table.Caption supports all props from thelayout component.

Props

Props extend from caption. Changing the as prop will change the element interface.

NameTypeDescriptionDefault
cs

The cs prop takes in a single value or an array of values. You can pass the CSS class name returned by , or the result of and . If you're extending a component already using cs, you can merge that prop in as well. Any style that is passed to the cs prop will override style props. If you wish to have styles that are overridden by the css prop, or styles added via the styled API, use wherever elemProps is used. If your component needs to also handle style props, use instead.

import {handleCsProp} from '@workday/canvas-kit-styling';
import {mergeStyles} from '@workday/canvas-kit-react/layout';

// ...

// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same
// function signature, but adds support for style props.

return (
 <Element
   {...handleCsProp(elemProps, [
     myStyles,
     myModifiers({ size: 'medium' }),
     myVars({ backgroundColor: 'red' })
   ])}
 >
   {children}
 </Element>
)
childrenReactNode
asReact.ElementType

Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using React.forwardRefand spread extra props to a root element.

Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.

caption
refReact.Ref<R = caption>

Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If as is set to an element, it will be that element. If as is a component, the reference will be to that component (or element if the component uses React.forwardRef).

Table.Head

Table.Head renders a thead element.

import {Table} from '@workday/canvas-kit-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>
);
}

Layout Component

Table.Head supports all props from thelayout component.

Props

Props extend from thead. Changing the as prop will change the element interface.

NameTypeDescriptionDefault
cs

The cs prop takes in a single value or an array of values. You can pass the CSS class name returned by , or the result of and . If you're extending a component already using cs, you can merge that prop in as well. Any style that is passed to the cs prop will override style props. If you wish to have styles that are overridden by the css prop, or styles added via the styled API, use wherever elemProps is used. If your component needs to also handle style props, use instead.

import {handleCsProp} from '@workday/canvas-kit-styling';
import {mergeStyles} from '@workday/canvas-kit-react/layout';

// ...

// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same
// function signature, but adds support for style props.

return (
 <Element
   {...handleCsProp(elemProps, [
     myStyles,
     myModifiers({ size: 'medium' }),
     myVars({ backgroundColor: 'red' })
   ])}
 >
   {children}
 </Element>
)
childrenReactNode
asReact.ElementType

Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using React.forwardRefand spread extra props to a root element.

Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.

thead
refReact.Ref<R = thead>

Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If as is set to an element, it will be that element. If as is a component, the reference will be to that component (or element if the component uses React.forwardRef).

Table.Body

Table.Body renders a tbody element.

import {Table} from '@workday/canvas-kit-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>
);
}

Layout Component

Table.Body supports all props from thelayout component.

Props

Props extend from tbody. Changing the as prop will change the element interface.

NameTypeDescriptionDefault
cs

The cs prop takes in a single value or an array of values. You can pass the CSS class name returned by , or the result of and . If you're extending a component already using cs, you can merge that prop in as well. Any style that is passed to the cs prop will override style props. If you wish to have styles that are overridden by the css prop, or styles added via the styled API, use wherever elemProps is used. If your component needs to also handle style props, use instead.

import {handleCsProp} from '@workday/canvas-kit-styling';
import {mergeStyles} from '@workday/canvas-kit-react/layout';

// ...

// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same
// function signature, but adds support for style props.

return (
 <Element
   {...handleCsProp(elemProps, [
     myStyles,
     myModifiers({ size: 'medium' }),
     myVars({ backgroundColor: 'red' })
   ])}
 >
   {children}
 </Element>
)
childrenReactNode
asReact.ElementType

Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using React.forwardRefand spread extra props to a root element.

Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.

tbody
refReact.Ref<R = tbody>

Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If as is set to an element, it will be that element. If as is a component, the reference will be to that component (or element if the component uses React.forwardRef).

Table.Row

Table.Row renders a tr element.

Note: Table.Row is built on Grid. It will look for how many children are there and if those children are valid React Elements. This will adjust the amount of columns automatically using the gridTemplateColumns style prop and the width of the columns is also set using a minmax function in the gridTemplateColumns style prop. If a user would like to adjust this, it can be overwritten on Table.Row. See the example below for how to overwrite gridTemplateColumns.

import {Table} from '@workday/canvas-kit-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>
);
}

Layout Component

Table.Row supports all props from thelayout component.

Props

Props extend from tr. Changing the as prop will change the element interface.

NameTypeDescriptionDefault
cs

The cs prop takes in a single value or an array of values. You can pass the CSS class name returned by , or the result of and . If you're extending a component already using cs, you can merge that prop in as well. Any style that is passed to the cs prop will override style props. If you wish to have styles that are overridden by the css prop, or styles added via the styled API, use wherever elemProps is used. If your component needs to also handle style props, use instead.

import {handleCsProp} from '@workday/canvas-kit-styling';
import {mergeStyles} from '@workday/canvas-kit-react/layout';

// ...

// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same
// function signature, but adds support for style props.

return (
 <Element
   {...handleCsProp(elemProps, [
     myStyles,
     myModifiers({ size: 'medium' }),
     myVars({ backgroundColor: 'red' })
   ])}
 >
   {children}
 </Element>
)
childrenReactNode
asReact.ElementType

Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using React.forwardRefand spread extra props to a root element.

Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.

tr
refReact.Ref<R = tr>

Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If as is set to an element, it will be that element. If as is a component, the reference will be to that component (or element if the component uses React.forwardRef).

Table.Header

Table.Header renders a th element.

import {Table} from '@workday/canvas-kit-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>
);
}

Layout Component

Table.Header supports all props from thelayout component.

Props

Props extend from th. Changing the as prop will change the element interface.

NameTypeDescriptionDefault
cs

The cs prop takes in a single value or an array of values. You can pass the CSS class name returned by , or the result of and . If you're extending a component already using cs, you can merge that prop in as well. Any style that is passed to the cs prop will override style props. If you wish to have styles that are overridden by the css prop, or styles added via the styled API, use wherever elemProps is used. If your component needs to also handle style props, use instead.

import {handleCsProp} from '@workday/canvas-kit-styling';
import {mergeStyles} from '@workday/canvas-kit-react/layout';

// ...

// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same
// function signature, but adds support for style props.

return (
 <Element
   {...handleCsProp(elemProps, [
     myStyles,
     myModifiers({ size: 'medium' }),
     myVars({ backgroundColor: 'red' })
   ])}
 >
   {children}
 </Element>
)
childrenReactNode
asReact.ElementType

Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using React.forwardRefand spread extra props to a root element.

Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.

th
refReact.Ref<R = th>

Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If as is set to an element, it will be that element. If as is a component, the reference will be to that component (or element if the component uses React.forwardRef).

Table.Cell

Table.Cell renders a td element.

import {Table} from '@workday/canvas-kit-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>
);
}

Layout Component

Table.Cell supports all props from thelayout component.

Props

Props extend from td. Changing the as prop will change the element interface.

NameTypeDescriptionDefault
cs

The cs prop takes in a single value or an array of values. You can pass the CSS class name returned by , or the result of and . If you're extending a component already using cs, you can merge that prop in as well. Any style that is passed to the cs prop will override style props. If you wish to have styles that are overridden by the css prop, or styles added via the styled API, use wherever elemProps is used. If your component needs to also handle style props, use instead.

import {handleCsProp} from '@workday/canvas-kit-styling';
import {mergeStyles} from '@workday/canvas-kit-react/layout';

// ...

// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same
// function signature, but adds support for style props.

return (
 <Element
   {...handleCsProp(elemProps, [
     myStyles,
     myModifiers({ size: 'medium' }),
     myVars({ backgroundColor: 'red' })
   ])}
 >
   {children}
 </Element>
)
childrenReactNode
asReact.ElementType

Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using React.forwardRefand spread extra props to a root element.

Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.

td
refReact.Ref<R = td>

Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If as is set to an element, it will be that element. If as is a component, the reference will be to that component (or element if the component uses React.forwardRef).

Table.Footer

Table.Footer renders a tfoot element.

import {Table} from '@workday/canvas-kit-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>
);
}

Layout Component

Table.Footer supports all props from thelayout component.

Props

Props extend from tfoot. Changing the as prop will change the element interface.

NameTypeDescriptionDefault
cs

The cs prop takes in a single value or an array of values. You can pass the CSS class name returned by , or the result of and . If you're extending a component already using cs, you can merge that prop in as well. Any style that is passed to the cs prop will override style props. If you wish to have styles that are overridden by the css prop, or styles added via the styled API, use wherever elemProps is used. If your component needs to also handle style props, use instead.

import {handleCsProp} from '@workday/canvas-kit-styling';
import {mergeStyles} from '@workday/canvas-kit-react/layout';

// ...

// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same
// function signature, but adds support for style props.

return (
 <Element
   {...handleCsProp(elemProps, [
     myStyles,
     myModifiers({ size: 'medium' }),
     myVars({ backgroundColor: 'red' })
   ])}
 >
   {children}
 </Element>
)
childrenReactNode
asReact.ElementType

Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using React.forwardRefand spread extra props to a root element.

Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.

tfoot
refReact.Ref<R = tfoot>

Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If as is set to an element, it will be that element. If as is a component, the reference will be to that component (or element if the component uses React.forwardRef).