Playbook Design System

Small

Use table size "sm" when data density is a priority. Smaller row height enables the user to view more data without the need for scrolling.

Table can leverage the max-width property. Learn more in our visual guidelines.

import React from 'react'

import { Table } from 'playbook-ui'

const TableSm = (props) => {
  return (
    <Table
        size="sm"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{'Column 5'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableSm

Medium

Use table size "md" to add padding around each row to increase reading comfortability.

import React from 'react'

import { Table } from 'playbook-ui'

const TableMd = (props) => {
  return (
    <Table
        size="md"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{'Column 5'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableMd

Large

Use table size "lg" to add padding around each row to maximize reading comfortability.

import React from 'react'

import { Table } from 'playbook-ui'

const TableLg = (props) => {
  return (
    <Table
        size="lg"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{'Column 5'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableLg

Sticky Header

React: Use sticky on a table to allow the table header to be fixed in place when the user scrolls up and down on the page.

Rails: Pass sticky: true to props.

If the table header is not sticking in the right place you will need to pass a inline top style to the thead.
React Example: <thead style={{ top: "-16px" }}>
Rails Example: <thead style="top: -16px">

Troubleshooting CSS Problems

Sticky may not work if any parent/ancestor of the sticky element has any of the overflow properties set. Additionally, specifying a height on the overflowing container provides measurement for this feature to work properly. In some cases, it may be necessary to set the same parent/ancestor container to position: static as well.

import React from "react"

import { Table } from 'playbook-ui'

const TableSticky = (props) => (
  <Table
      sticky
  >
    <thead>
      <tr>
        <th>{'Column 1'}</th>
        <th>{'Column 2'}</th>
        <th>{'Column 3'}</th>
        <th>{'Column 4'}</th>
        <th>{'Column 5'}</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
    </tbody>
  </Table>
)

export default TableSticky

Sticky Left Column

The stickyLeftColumn prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the <th> and <td>.

If you are using the sub-component variant, then you will pass the id to <Table.Header> and <Table.Cell>

Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using stickyLeftColumn prop.

import React from 'react'

import { Table } from 'playbook-ui'

const TableStickyLeftColumns = () => {
    return (
        <Table
            responsive="scroll"
            size="md"
            stickyLeftColumn={["1", "2", "3"]}
        >
            <thead>
                <tr>
                    <th id="1">{'Column 1'}</th>
                    <th id="2">{'Column 2'}</th>
                    <th id="3">{'Column 3'}</th>
                    <th>{'Column 4'}</th>
                    <th>{'Column 5'}</th>
                    <th>{'Column 6'}</th>
                    <th>{'Column 7'}</th>
                    <th>{'Column 8'}</th>
                    <th>{'Column 9'}</th>
                    <th>{'Column 10'}</th>
                    <th>{'Column 11'}</th>
                    <th>{'Column 12'}</th>
                    <th>{'Column 13'}</th>
                    <th>{'Column 14'}</th>
                    <th>{'Column 15'}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td id="1">{'Value 1'}</td>
                    <td id="2">{'Value 2'}</td>
                    <td id="3">{'Value 3'}</td>
                    <td>{'Value 4'}</td>
                    <td>{'Value 5'}</td>
                    <td>{'Value 6'}</td>
                    <td>{'Value 7'}</td>
                    <td>{'Value 8'}</td>
                    <td>{'Value 9'}</td>
                    <td>{'Value 10'}</td>
                    <td>{'Value 11'}</td>
                    <td>{'Value 12'}</td>
                    <td>{'Value 13'}</td>
                    <td>{'Value 14'}</td>
                    <td>{'Value 15'}</td>
                </tr>
                <tr>
                    <td id="1">{'Value 1'}</td>
                    <td id="2">{'Value 2'}</td>
                    <td id="3">{'Value 3'}</td>
                    <td>{'Value 4'}</td>
                    <td>{'Value 5'}</td>
                    <td>{'Value 6'}</td>
                    <td>{'Value 7'}</td>
                    <td>{'Value 8'}</td>
                    <td>{'Value 9'}</td>
                    <td>{'Value 10'}</td>
                    <td>{'Value 11'}</td>
                    <td>{'Value 12'}</td>
                    <td>{'Value 13'}</td>
                    <td>{'Value 14'}</td>
                    <td>{'Value 15'}</td>
                </tr>
                <tr>
                    <td id="1">{'Value 1'}</td>
                    <td id="2">{'Value 2'}</td>
                    <td id="3">{'Value 3'}</td>
                    <td>{'Value 4'}</td>
                    <td>{'Value 5'}</td>
                    <td>{'Value 6'}</td>
                    <td>{'Value 7'}</td>
                    <td>{'Value 8'}</td>
                    <td>{'Value 9'}</td>
                    <td>{'Value 10'}</td>
                    <td>{'Value 11'}</td>
                    <td>{'Value 12'}</td>
                    <td>{'Value 13'}</td>
                    <td>{'Value 14'}</td>
                    <td>{'Value 15'}</td>
                </tr>
            </tbody>
        </Table>
    )
}

export default TableStickyLeftColumns

Sticky Right Column

The stickyRightColumn prop works in the same way as the above stickyLeftColumn prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the <th> and <td>.

If you are using the sub-component variant, then you will pass the id to <Table.Header> and <Table.Cell>

Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the stickyRightColumn prop.

import React from 'react'

import { Table } from 'playbook-ui'

const TableStickyRightColumns = () => {
    return (
        <Table
            responsive="scroll"
            size="md"
            stickyRightColumn={["13", "14", "15"]}
        >
            <thead>
                <tr>
                    <th>{'Column 1'}</th>
                    <th>{'Column 2'}</th>
                    <th>{'Column 3'}</th>
                    <th>{'Column 4'}</th>
                    <th>{'Column 5'}</th>
                    <th>{'Column 6'}</th>
                    <th>{'Column 7'}</th>
                    <th>{'Column 8'}</th>
                    <th>{'Column 9'}</th>
                    <th>{'Column 10'}</th>
                    <th>{'Column 11'}</th>
                    <th>{'Column 12'}</th>
                    <th id="13">{'Column 13'}</th>
                    <th id="14">{'Column 14'}</th>
                    <th id="15">{'Column 15'}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{'Value 1'}</td>
                    <td>{'Value 2'}</td>
                    <td>{'Value 3'}</td>
                    <td>{'Value 4'}</td>
                    <td>{'Value 5'}</td>
                    <td>{'Value 6'}</td>
                    <td>{'Value 7'}</td>
                    <td>{'Value 8'}</td>
                    <td>{'Value 9'}</td>
                    <td>{'Value 10'}</td>
                    <td>{'Value 11'}</td>
                    <td>{'Value 12'}</td>
                    <td id="13">{'Value 13'}</td>
                    <td id="14">{'Value 14'}</td>
                    <td id="15">{'Value 15'}</td>
                </tr>
                <tr>
                    <td>{'Value 1'}</td>
                    <td>{'Value 2'}</td>
                    <td>{'Value 3'}</td>
                    <td>{'Value 4'}</td>
                    <td>{'Value 5'}</td>
                    <td>{'Value 6'}</td>
                    <td>{'Value 7'}</td>
                    <td>{'Value 8'}</td>
                    <td>{'Value 9'}</td>
                    <td>{'Value 10'}</td>
                    <td>{'Value 11'}</td>
                    <td>{'Value 12'}</td>
                    <td id="13">{'Value 13'}</td>
                    <td id="14">{'Value 14'}</td>
                    <td id="15">{'Value 15'}</td>
                </tr>
                <tr>
                    <td>{'Value 1'}</td>
                    <td>{'Value 2'}</td>
                    <td>{'Value 3'}</td>
                    <td>{'Value 4'}</td>
                    <td>{'Value 5'}</td>
                    <td>{'Value 6'}</td>
                    <td>{'Value 7'}</td>
                    <td>{'Value 8'}</td>
                    <td>{'Value 9'}</td>
                    <td>{'Value 10'}</td>
                    <td>{'Value 11'}</td>
                    <td>{'Value 12'}</td>
                    <td id="13">{'Value 13'}</td>
                    <td id="14">{'Value 14'}</td>
                    <td id="15">{'Value 15'}</td>
                </tr>
            </tbody>
        </Table>
    )
}

export default TableStickyRightColumns

Sticky Left and Right Columns

The stickyLeftColumn and stickyRightColumn props can be used together on the same table as needed.

Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.

import React from 'react'

import { Table } from 'playbook-ui'

const TableStickyColumns = () => {
    return (
        <Table
            responsive="scroll"
            size="md"
            stickyLeftColumn={["a"]}
            stickyRightColumn={["b"]}
        >
            <thead>
                <tr>
                    <th id="a">{'Column 1'}</th>
                    <th>{'Column 2'}</th>
                    <th>{'Column 3'}</th>
                    <th>{'Column 4'}</th>
                    <th>{'Column 5'}</th>
                    <th>{'Column 6'}</th>
                    <th>{'Column 7'}</th>
                    <th>{'Column 8'}</th>
                    <th>{'Column 9'}</th>
                    <th>{'Column 10'}</th>
                    <th>{'Column 11'}</th>
                    <th>{'Column 12'}</th>
                    <th>{'Column 13'}</th>
                    <th>{'Column 14'}</th>
                    <th id="b">{'Column 15'}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td id="a">{'Value 1'}</td>
                    <td>{'Value 2'}</td>
                    <td>{'Value 3'}</td>
                    <td>{'Value 4'}</td>
                    <td>{'Value 5'}</td>
                    <td>{'Value 6'}</td>
                    <td>{'Value 7'}</td>
                    <td>{'Value 8'}</td>
                    <td>{'Value 9'}</td>
                    <td>{'Value 10'}</td>
                    <td>{'Value 11'}</td>
                    <td>{'Value 12'}</td>
                    <td>{'Value 13'}</td>
                    <td>{'Value 14'}</td>
                    <td id="b">{'Value 15'}</td>
                </tr>
                <tr>
                    <td id="a">{'Value 1'}</td>
                    <td>{'Value 2'}</td>
                    <td>{'Value 3'}</td>
                    <td>{'Value 4'}</td>
                    <td>{'Value 5'}</td>
                    <td>{'Value 6'}</td>
                    <td>{'Value 7'}</td>
                    <td>{'Value 8'}</td>
                    <td>{'Value 9'}</td>
                    <td>{'Value 10'}</td>
                    <td>{'Value 11'}</td>
                    <td>{'Value 12'}</td>
                    <td>{'Value 13'}</td>
                    <td>{'Value 14'}</td>
                    <td id="b">{'Value 15'}</td>
                </tr>
                <tr>
                    <td id="a">{'Value 1'}</td>
                    <td>{'Value 2'}</td>
                    <td>{'Value 3'}</td>
                    <td>{'Value 4'}</td>
                    <td>{'Value 5'}</td>
                    <td>{'Value 6'}</td>
                    <td>{'Value 7'}</td>
                    <td>{'Value 8'}</td>
                    <td>{'Value 9'}</td>
                    <td>{'Value 10'}</td>
                    <td>{'Value 11'}</td>
                    <td>{'Value 12'}</td>
                    <td>{'Value 13'}</td>
                    <td>{'Value 14'}</td>
                    <td id="b">{'Value 15'}</td>
                </tr>
            </tbody>
        </Table>
    )
}

export default TableStickyColumns

Row Alignment

Pass our textAlign global prop to any table.row subcomponent to change the text alignment of all cells within that row.
The header/ first row is the default, followed by the second row being centered, and then the last row shifted to the right.

import React from 'react'

import { Table } from 'playbook-ui'

const TableAlignmentRow = (props) => {
  return (
    <Table
    >
    <Table.Head>
      <Table.Row>
        <Table.Header>{'Column 1'}</Table.Header>
        <Table.Header>{'Column 2'}</Table.Header>
        <Table.Header>{'Column 3'}</Table.Header>
        <Table.Header>{'Column 4'}</Table.Header>
        <Table.Header>{'Column 5'}</Table.Header>
      </Table.Row>
    </Table.Head>
    <Table.Body>
      <Table.Row>
        <Table.Cell>{'Value 1'}</Table.Cell>
        <Table.Cell>{'Value 2'}</Table.Cell>
        <Table.Cell>{'Value 3'}</Table.Cell>
        <Table.Cell>{'Value 4'}</Table.Cell>
        <Table.Cell>{'Value 5'}</Table.Cell>
      </Table.Row>
      <Table.Row textAlign="center">
        <Table.Cell>{'Value 1'}</Table.Cell>
        <Table.Cell>{'Value 2'}</Table.Cell>
        <Table.Cell>{'Value 3'}</Table.Cell>
        <Table.Cell>{'Value 4'}</Table.Cell>
        <Table.Cell>{'Value 5'}</Table.Cell>
      </Table.Row>
      <Table.Row textAlign="right">
        <Table.Cell>{'Value 1'}</Table.Cell>
        <Table.Cell>{'Value 2'}</Table.Cell>
        <Table.Cell>{'Value 3'}</Table.Cell>
        <Table.Cell>{'Value 4'}</Table.Cell>
        <Table.Cell>{'Value 5'}</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>
  )
}

export default TableAlignmentRow

Cell Alignment

Pass our textAlign global prop to any table.cell subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.

import React from 'react'

import { Table } from 'playbook-ui'

const TableAlignmentColumn = (props) => {
  return (
    <Table
    >
        <Table.Head>
            <Table.Row>
                <Table.Header>{'Column 1'}</Table.Header>
                <Table.Header>{'Column 2'}</Table.Header>
                <Table.Header>{'Column 3'}</Table.Header>
                <Table.Header textAlign="center">{'Rating'}</Table.Header>
                <Table.Header textAlign="right">{'Money'}</Table.Header>
            </Table.Row>
        </Table.Head>
        <Table.Body>
            <Table.Row>
                <Table.Cell>{'Value 1'}</Table.Cell>
                <Table.Cell>{'Value 2'}</Table.Cell>
                <Table.Cell>{'Value 3'}</Table.Cell>
                <Table.Cell textAlign="center">{'3'}</Table.Cell>
                <Table.Cell textAlign="right">{'$57.32'}</Table.Cell>
            </Table.Row>
            <Table.Row>
                <Table.Cell>{'Value 1'}</Table.Cell>
                <Table.Cell>{'Value 2'}</Table.Cell>
                <Table.Cell>{'Value 3'}</Table.Cell>
                <Table.Cell textAlign="center">{'2'}</Table.Cell>
                <Table.Cell textAlign="right">{'$5,657.08'}</Table.Cell>
            </Table.Row>
            <Table.Row>
                <Table.Cell>{'Value 1'}</Table.Cell>
                <Table.Cell>{'Value 2'}</Table.Cell>
                <Table.Cell>{'Value 3'}</Table.Cell>
                <Table.Cell textAlign="center">{'4'}</Table.Cell>
                <Table.Cell textAlign="right">{'$358.77'}</Table.Cell>
            </Table.Row>
        </Table.Body>
    </Table>

  )
}

export default TableAlignmentColumn

Row Shift

Pass our verticalAlign global prop to any table.row subcomponent to change the vertical alignment of all cells within that row.

import React from 'react'

import { Table } from 'playbook-ui'

const TableAlignmentShiftRow = (props) => {
  return (
    <Table>
      <Table.Head>
        <Table.Row>
          <Table.Header>{'Column 1'}</Table.Header>
          <Table.Header>{'Column 2'}</Table.Header>
          <Table.Header>{'Column 3'}</Table.Header>
          <Table.Header>{'Column 4'}</Table.Header>
          <Table.Header>{'Column 5'}</Table.Header>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell>
            {'Value 1a'}
            <br />
            {'Value 1a'}
            <br />
            {'Value 1a'}
          </Table.Cell>
          <Table.Cell>{'Value 2a'}</Table.Cell>
          <Table.Cell>{'Value 3a'}</Table.Cell>
          <Table.Cell>{'Value 4a'}</Table.Cell>
          <Table.Cell>{'Value 5a'}</Table.Cell>
        </Table.Row>
        <Table.Row verticalAlign="middle">
          <Table.Cell>
            {'Value 1b'}
            <br />
            {'Value 1b'}
            <br />
            {'Value 1b'}
          </Table.Cell>
          <Table.Cell>{'Value 2b'}</Table.Cell>
          <Table.Cell>{'Value 3b'}</Table.Cell>
          <Table.Cell>{'Value 4b'}</Table.Cell>
          <Table.Cell>{'Value 5b'}</Table.Cell>
        </Table.Row>
        <Table.Row verticalAlign="bottom">
          <Table.Cell>
            {'Value 1c'}
            <br />
            {'Value 1c'}
            <br />
            {'Value 1c'}
          </Table.Cell>
          <Table.Cell>{'Value 2c'}</Table.Cell>
          <Table.Cell>{'Value 3c'}</Table.Cell>
          <Table.Cell>{'Value 4c'}</Table.Cell>
          <Table.Cell>{'Value 5c'}</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>

  )
}

export default TableAlignmentShiftRow

Cell Shift

Pass our verticalAlign global prop to any table.cell subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up.

import React from 'react'

import { Table } from 'playbook-ui'

const TableAlignmentShiftData = (props) => {
  return (
    <div>
      <Table
          marginBottom="md"
      >
        <Table.Head>
          <Table.Row>
            <Table.Header>&nbsp;</Table.Header>
            <Table.Header>{'Price'}</Table.Header>
          </Table.Row>
        </Table.Head>
        <Table.Body>
          <Table.Row>
            <Table.Cell verticalAlign="bottom">{'Total'}</Table.Cell>
            <Table.Cell>
              {'$12'}
              <br />
              {'$46'}
              <br />
              {'$25'}
              <br />
              {'-------'}
              <br />
              {'$83'}
            </Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table>

      <Table
      >
      <Table.Head>
        <Table.Row>
          <Table.Header>{'Espresso Drinks'}</Table.Header>
          <Table.Header>{'Ingredients'}</Table.Header>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell verticalAlign="top">{'Cappuccino'} </Table.Cell>
          <Table.Cell>
          {'Steamed Milk'}
          <br />
          {'Milk Foam'}
          </Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell verticalAlign="top">
            {'Macchiato'}
            </Table.Cell>
            <Table.Cell verticalAlign="top">
            {'Espresso'}
            <br />
            {'Steamed Milk'}
          </Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>
            {'Mocha'}
            </Table.Cell>
          <Table.Cell>
            {'Hot Chocolate'}
            <br />
            {'Steamed Milk'}
          </Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
    </div>
  )
}

export default TableAlignmentShiftData

Side Highlight

Side highlight can take product, status, and category colors. To view full list of colors, visit token colors.

Note: Only use category colors for categories. Do not mix it with product or status colors.

import React from 'react'

import { Table } from 'playbook-ui'

const TableSideHighlight = (props) => {
  return (
    <div>
      <Table
          size="sm"
      >
        <thead>
          <tr>
            <th>{'Product colors'}</th>
            <th>{'Column 2'}</th>
            <th>{'Column 3'}</th>
            <th>{'Column 4'}</th>
            <th>{'Column 5'}</th>
          </tr>
        </thead>
        <tbody>
          <Table.Row
              sideHighlightColor="product_1_highlight"
          >
            <td>{'Product 1'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
          <Table.Row
              sideHighlightColor="product_2_highlight"
          >
            <td>{'Product 2'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
          <Table.Row
              sideHighlightColor="product_3_highlight"
          >
            <td>{'Product 3'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
          <Table.Row
              sideHighlightColor="none"
          >
            <td>{'None'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
        </tbody>
      </Table>

      <br />

      <Table
          size="sm"
      >
        <thead>
          <tr>
            <th>{'Status colors'}</th>
            <th>{'Column 2'}</th>
            <th>{'Column 3'}</th>
            <th>{'Column 4'}</th>
            <th>{'Column 5'}</th>
          </tr>
        </thead>
        <tbody>
          <Table.Row
              sideHighlightColor="success"
          >
            <td>{'Success'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
          <Table.Row
              sideHighlightColor="warning"
          >
            <td>{'Warning'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
          <Table.Row
              sideHighlightColor="error"
          >
            <td>{'Error'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
          <Table.Row
              sideHighlightColor="none"
          >
            <td>{'None'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
        </tbody>
      </Table>

      <br />

      <Table
          size="sm"
      >
        <thead>
          <tr>
            <th>{'Category Colors'}</th>
            <th>{'Column 2'}</th>
            <th>{'Column 3'}</th>
            <th>{'Column 4'}</th>
            <th>{'Column 5'}</th>
          </tr>
        </thead>
        <tbody>
          <Table.Row
              sideHighlightColor="category_1"
          >
            <td>{'Category Color 1'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
          <Table.Row
              sideHighlightColor="category_2"
          >
            <td>{'Category Color 2'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
          <Table.Row
              sideHighlightColor="category_3"
          >
            <td>{'Category Color 3'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
          <Table.Row
              sideHighlightColor="none"
          >
            <td>{'None'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
        </tbody>
      </Table>
    </div>
  )
}

export default TableSideHighlight

Table Container Off

import React from 'react'

import { Table } from 'playbook-ui'

const TableContainer = (props) => {
  return (
    <Table
        container={false}
        size="md"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{'Column 5'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableContainer

Disable Hover

import React from 'react'

import { Table } from 'playbook-ui'

const TableDisableHover = (props) => {
  return (
    <Table
        disableHover
        size="md"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{'Column 5'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableDisableHover

Multi-line

import React from 'react'

import { Table } from 'playbook-ui'

const TableMultiline = (props) => {
  return (
    <Table
        size="sm"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{'Column 5'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            {'Value 1'}
            <br />
            {'Value 1'}
            <br />
            {'Value 1'}
          </td>
          <td>{'Value 2'}</td>
          <td>
            {'Value 3'}
            <br />
            {'Value 3'}
          </td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>
            {'Value 1'}
            <br />
            {'Value 1'}
            <br />
            {'Value 1'}
          </td>
          <td>{'Value 2'}</td>
          <td>
            {'Value 3'}
            <br />
            {'Value 3'}
          </td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>
            {'Value 1'}
            <br />
            {'Value 1'}
            <br />
            {'Value 1'}
          </td>
          <td>{'Value 2'}</td>
          <td>
            {'Value 3'}
            <br />
            {'Value 3'}
          </td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableMultiline

Force Single Line

import React from 'react'

import { Table } from 'playbook-ui'

const TableSingleLine = (props) => {
  return (
    <Table
        singleLine
        size="sm"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{'Column 5'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            {'Value 1'}
            <br />
            {'Value 1'}
            <br />
            {'Value 1'}
          </td>
          <td>{'Value 2'}</td>
          <td>
            {'Value 3'}
            <br />
            {'Value 3'}
          </td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>
            {'Value 1'}
            <br />
            {'Value 1'}
            <br />
            {'Value 1'}
          </td>
          <td>{'Value 2'}</td>
          <td>
            {'Value 3'}
            <br />
            {'Value 3'}
          </td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>
            {'Value 1'}
            <br />
            {'Value 1'}
            <br />
            {'Value 1'}
          </td>
          <td>{'Value 2'}</td>
          <td>
            {'Value 3'}
            <br />
            {'Value 3'}
          </td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableSingleLine

Data Table

Tighter spacing in first- and last-child cells of each row for data-heavy tables.

import React from 'react'

import { Table } from 'playbook-ui'

const TableDataTable = (props) => {
  return (
    <Table
        dataTable
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{'Column 5'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableDataTable

Responsive Tables

import React from 'react'

import { Table, Title } from 'playbook-ui'

const TableResponsiveTable = (props) => {
  return (
    <div>
      <Title
          size={4}
          text="Not Responsive"
      />
      <Table
          responsive="none"
      >
        <thead>
          <tr>
            <th>{'Column 1'}</th>
            <th>{'Column 2'}</th>
            <th>{'Column 3'}</th>
            <th>{'Column 4'}</th>
            <th>{'Column 5'}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{'Value 1'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </tr>
        </tbody>
      </Table>
      <br />
      <br />
      <Title
          size={4}
          text="Collapse Mobile"
      />
      <Table
          collapse="sm"
      >
        <thead>
          <tr>
            <th>{'Column 1'}</th>
            <th>{'Column 2'}</th>
            <th>{'Column 3'}</th>
            <th>{'Column 4'}</th>
            <th>{'Column 5'}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{'Value 1'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </tr>
        </tbody>
      </Table>
      <br />
      <br />
      <Title
          size={4}
          text="Collapse Tablet"
      />
      <Table
          collapse="md"
      >
        <thead>
          <tr>
            <th>{'Column 1'}</th>
            <th>{'Column 2'}</th>
            <th>{'Column 3'}</th>
            <th>{'Column 4'}</th>
            <th>{'Column 5'}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{'Value 1'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </tr>
        </tbody>
      </Table>
      <br />
      <br />
      <Title
          size={4}
          text="Collapse Desktop"
      />
      <Table
          collapse="lg"
      >
        <thead>
          <tr>
            <th>{'Column 1'}</th>
            <th>{'Column 2'}</th>
            <th>{'Column 3'}</th>
            <th>{'Column 4'}</th>
            <th>{'Column 5'}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{'Value 1'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </tr>
        </tbody>
      </Table>
    </div>
  )
}

export default TableResponsiveTable

Table with 1 Action

If there is one button on each row of the table, ideally, it should use the secondary variant and be placed at the end of the row

import React from 'react'

import { Table, Button } from 'playbook-ui'

const TableOneAction = (props) => {
  return (
    <Table
        size="sm"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{''}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            {' '}
            <Button
                onClick={() => alert('button clicked!')}
                text="Action"
                variant="secondary"
            />
            {' '}
          </td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            {' '}
            <Button
                onClick={() => alert('button clicked!')}
                text="Action"
                variant="secondary"
            />
            {' '}
          </td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            {' '}
            <Button
                onClick={() => alert('button clicked!')}
                text="Action"
                variant="secondary"
            />
            {' '}
          </td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableOneAction

Table with 2 Actions

If there are two actions on each of the row, one should ideally one should use the secondary variant and the other use the link variant. The button using the secondary variant should be placed at the end.

import React from 'react'

import { Table, Button } from 'playbook-ui'

const TableOneAction = (props) => {
  return (
    <Table
        size="sm"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{''}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            <Button
                onClick={() => alert('button clicked!')}
                paddingLeft="none"
                text="Tertiary Action"
                variant="link"
            />
            <Button
                onClick={() => alert('button clicked!')}
                text="Secondary Action"
                variant="secondary"
            />
          </td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            <Button
                onClick={() => alert('button clicked!')}
                paddingLeft="none"
                text="Tertiary Action"
                variant="link"
            />
            <Button
                onClick={() => alert('button clicked!')}
                text="Secondary Action"
                variant="secondary"
            />
          </td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            <Button
                onClick={() => alert('button clicked!')}
                paddingLeft="none"
                text="Tertiary Action"
                variant="link"
            />
            <Button
                onClick={() => alert('button clicked!')}
                text="Secondary Action"
                variant="secondary"
            />
          </td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableOneAction

Table with 2+ Actions

If there are more than two actions on each row, then they should be contained in secondary circle icon button with the ellipsis-h icon (horizontal ellipsis) at the end of the row

import React from 'react'

import { Table, CircleIconButton } from 'playbook-ui'

const TableTwoPlusActions = (props) => {
  return (
    <Table
        size="sm"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{''}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            {' '}
            <CircleIconButton
                icon="ellipsis-h"
                variant="secondary"
            />
          </td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            {' '}
            <CircleIconButton
                icon="ellipsis-h"
                variant="secondary"
            />
          </td>

        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            {' '}
            <CircleIconButton
                icon="ellipsis-h"
                variant="secondary"
            />
          </td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableTwoPlusActions

Table with Actions in the Middle

If the button is towards the middle of the table, it should likely use button variant link

import React from 'react'

import { Table, Button } from 'playbook-ui'

const TableActionMiddle = (props) => {
  return (
    <Table
        size="sm"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{'Column 5'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>
            {' '}
            <Button
                onClick={() => alert('button clicked!')}
                paddingLeft="none"
                text="Action"
                variant="link"
            />
          </td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>
            {' '}
            <Button
                onClick={() => alert('button clicked!')}
                paddingLeft="none"
                text="Action"
                variant="link"
            />
          </td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>
            {' '}
            <Button
                onClick={() => alert('button clicked!')}
                paddingLeft="none"
                text="Action"
                variant="link"
            />
          </td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableActionMiddle

Table with Icon Buttons

Icon buttons are great to use if space is limited. If the icon isn’t VERY self explanatory (for example pencil/pen for edit, trashcan for delete) then it should use a tooltip explaining what the action does. The tooltip shouldn’t be longer than a few words and essentially serves as a replacement for what the button would say if it weren’t an icon

import React from 'react'

import { Table, CircleIconButton, Flex, FlexItem } from 'playbook-ui'

const TableIconButtons = (props) => {
  return (
    <Table
        size="sm"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{''}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            <Flex
                justifyContent="end"
                orientation="row"
            >
              <FlexItem>
                <CircleIconButton
                    icon="trash-alt"
                    variant="link"
                />
              </FlexItem>
              <FlexItem>
                <CircleIconButton
                    icon="pencil"
                    variant="secondary"
                />
              </FlexItem>
            </Flex>
          </td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            <Flex 
                justifyContent="end"
                orientation="row"
            >
              <FlexItem>
                <CircleIconButton
                    icon="trash-alt"
                    variant="link"
                />
              </FlexItem>
              <FlexItem>
                <CircleIconButton
                    icon="pencil"
                    variant="secondary"
                />
              </FlexItem>
            </Flex>
          </td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value lk'}</td>
          <td align="right">
            <Flex 
                justifyContent="end"
                orientation="row"
            >
              <FlexItem>
                <CircleIconButton
                    icon="trash-alt"
                    variant="link"
                />
              </FlexItem>
              <FlexItem>
                <CircleIconButton
                    icon="pencil"
                    variant="secondary"
                />
              </FlexItem>
            </Flex>
          </td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableIconButtons

Table With Background Kit

import React from 'react'

import { Table, Background } from 'playbook-ui'

const TableWithBackgroundKit = (props) => {
  return (
    <div>
      <div>
        <Table
        >
          <thead>
            <tr>
                <th>{'Column 1'}</th>
                <th>{'Column 2'}</th>
                <th>{'Column 3'}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </tr>
            <Background
                backgroundColor="error_subtle"
                tag='tr'
            >
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </Background>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </tr>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </tr>
            <Background
                backgroundColor="warning_subtle"
                tag='tr'
            >
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </Background>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </tr>
          </tbody>
        </Table>
      </div>
      <div>
        <Table
            paddingTop="sm"
        >
          <colgroup>
            <Background
                backgroundColor="error_subtle"
                tag='col'
            />
            <Background
                backgroundColor="info_subtle"
                tag='col'
            />
            <Background
                backgroundColor="warning_subtle"
                tag='col'
            />
          </colgroup>
          <thead>
            <tr>
              <th>{'Column 1'}</th>
              <th>{'Column 2'}</th>
              <th>{'Column 3'}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </tr>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </tr>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </tr>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </tr>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </tr>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </tr>
          </tbody>
        </Table>
        </div>
    </div>
  )
}

export default TableWithBackgroundKit

Vertical Borders

import React from 'react'

import { Table } from 'playbook-ui'

const TableVerticalBorder = (props) => {
  return (
    <Table
        size="sm"
        verticalBorder
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{'Column 5'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableVerticalBorder

Striped Table

Optionally pass the striped (boolean, defaults to false) prop to set odd rows to a contrasting background color. This helps with readability on larger tables with lots of data.

import React from "react"

import { Table } from 'playbook-ui'

const TableStriped = (props) => (
  <Table
      striped
  >
    <thead>
      <tr>
        <th>{'Column 1'}</th>
        <th>{'Column 2'}</th>
        <th>{'Column 3'}</th>
        <th>{'Column 4'}</th>
        <th>{'Column 5'}</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
    </tbody>
  </Table>
)

export default TableStriped

Table with Sub Components (Table Elements)

You can optionally build your table using our sub-components, which map to their respective html table elements:

Table.Head = thead
Table.Body = tbody
Table.Row = tr
Table.Header = th
Table.Cell = td

import React from 'react'

import { Table } from 'playbook-ui'

const TableWithSubcomponents = (props) => {
  return (
    <Table
        size="sm"
    >
      <Table.Head>
        <Table.Row>
          <Table.Header>{'Column 1'}</Table.Header>
          <Table.Header>{'Column 2'}</Table.Header>
          <Table.Header>{'Column 3'}</Table.Header>
          <Table.Header>{'Column 4'}</Table.Header>
          <Table.Header>{'Column 5'}</Table.Header>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  )
}

export default TableWithSubcomponents

Table with Sub Components (Divs)

Optionally build your table with divs by passing div to the tag prop of all* your sub-components.

*NOTE: The tag prop defaults to table, which returns html elements. If divs are desired, sub-components must be used and all table elements, including the initial kit call, must use div as their tag in order for the table to render properly.

import React from 'react'

import { Table } from 'playbook-ui'

const TableWithSubcomponentsAsDivs = (props) => {
  return (
    <Table
        size="sm"
        tag="div"
    >
      <Table.Head tag="div">
        <Table.Row tag="div">
          <Table.Header tag="div">{'Column 1'}</Table.Header>
          <Table.Header tag="div">{'Column 2'}</Table.Header>
          <Table.Header tag="div">{'Column 3'}</Table.Header>
          <Table.Header tag="div">{'Column 4'}</Table.Header>
          <Table.Header tag="div">{'Column 5'}</Table.Header>
        </Table.Row>
      </Table.Head>
      <Table.Body tag="div">
        <Table.Row tag="div">
          <Table.Cell tag="div">{'Value 1'}</Table.Cell>
          <Table.Cell tag="div">{'Value 2'}</Table.Cell>
          <Table.Cell tag="div">{'Value 3'}</Table.Cell>
          <Table.Cell tag="div">{'Value 4'}</Table.Cell>
          <Table.Cell tag="div">{'Value 5'}</Table.Cell>
        </Table.Row>
        <Table.Row tag="div">
          <Table.Cell tag="div">{'Value 1'}</Table.Cell>
          <Table.Cell tag="div">{'Value 2'}</Table.Cell>
          <Table.Cell tag="div">{'Value 3'}</Table.Cell>
          <Table.Cell tag="div">{'Value 4'}</Table.Cell>
          <Table.Cell tag="div">{'Value 5'}</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell tag="div">{'Value 1'}</Table.Cell>
          <Table.Cell tag="div">{'Value 2'}</Table.Cell>
          <Table.Cell tag="div">{'Value 3'}</Table.Cell>
          <Table.Cell tag="div">{'Value 4'}</Table.Cell>
          <Table.Cell tag="div">{'Value 5'}</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  )
}

export default TableWithSubcomponentsAsDivs

Outer Padding

Pass any of our spacing tokens to the outerPadding / outer_padding prop to customize a table's outer padding (both the left padding of the first column and the right padding of the last column).

import React from 'react'

import { Table, Button } from 'playbook-ui'

const TableOuterPadding = (props) => {
  return (
    <Table
        outerPadding="sm"
        size="sm"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{''}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            {' '}
            <Button
                onClick={() => alert('button clicked!')}
                text="Action"
                variant="secondary"
            />
            {' '}
          </td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            {' '}
            <Button
                onClick={() => alert('button clicked!')}
                text="Action"
                variant="secondary"
            />
            {' '}
          </td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            {' '}
            <Button
                onClick={() => alert('button clicked!')}
                text="Action"
                variant="secondary"
            />
            {' '}
          </td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableOuterPadding

Table with Collapsible

The collapsible prop can be used on any Table Row to add a collapsible area. Use the additional collapsibleContent prop to add any content to the collapsible Row.

import React from 'react'

import { Table, Icon, Card, Body } from 'playbook-ui'

const TableWithCollapsible = (props) => {

  const Content = () => {
    return (
      <Card 
          borderNone
          borderRadius="none"
          padding="md"
      >
        <Body>Nested content inside a Table Row</Body>
      </Card>
    );
  };

  return (
      <Table
          size="sm"
      >
        <Table.Head>
          <Table.Row>
            <Table.Header>{'Column 1'}</Table.Header>
            <Table.Header>{'Column 2'}</Table.Header>
            <Table.Header>{'Column 3'}</Table.Header>
            <Table.Header>{'Column 4'}</Table.Header>
            <Table.Header>{'Column 5'}</Table.Header>
            <Table.Header>{''}</Table.Header>
          </Table.Row>

        </Table.Head>
        <Table.Body>
          <Table.Row collapsible 
              collapsibleContent={<Content/>}
          >
            <Table.Cell>{'Value 1'}</Table.Cell>
            <Table.Cell>{'Value 2'}</Table.Cell>
            <Table.Cell>{'Value 3'}</Table.Cell>
            <Table.Cell>{'Value 4'}</Table.Cell>
            <Table.Cell>{'Value 5'}</Table.Cell>
            <Table.Cell textAlign="right">{ 
              <Icon
                  color="primary"
                  fixedWidth
                  icon="chevron-down"
              />}
            </Table.Cell>

          </Table.Row>
          <Table.Row>
            <Table.Cell>{'Value 1'}</Table.Cell>
            <Table.Cell>{'Value 2'}</Table.Cell>
            <Table.Cell>{'Value 3'}</Table.Cell>
            <Table.Cell>{'Value 4'}</Table.Cell>
            <Table.Cell>{'Value 5'}</Table.Cell>
            <Table.Cell>{''}</Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell>{'Value 1'}</Table.Cell>
            <Table.Cell>{'Value 2'}</Table.Cell>
            <Table.Cell>{'Value 3'}</Table.Cell>
            <Table.Cell>{'Value 4'}</Table.Cell>
            <Table.Cell>{'Value 5'}</Table.Cell>
            <Table.Cell>{''}</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table>
  )
}

export default TableWithCollapsible

Table with Collapsible with Custom Click

When using the collapsible prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the toggleCellId prop to pass in the id of the Cell you want to use as the trigger.
NOTE: toggleCellId and the id on the Cell you want to use as the trigger MUST be the same.

import React from 'react'

import { Table, Icon, Card, Body } from 'playbook-ui'

const TableWithCollapsibleWithCustomClick = (props) => {

  const Content = () => {
    return (
      <Card
          borderNone
          borderRadius="none"
          padding="md"
      >
        <Body>Nested content inside a Table Row</Body>
      </Card>
    );
  };

return (
      <Table
          size="sm"
      >
        <Table.Head>
          <Table.Row>
            <Table.Header>{'Column 1'}</Table.Header>
            <Table.Header>{'Column 2'}</Table.Header>
            <Table.Header>{'Column 3'}</Table.Header>
            <Table.Header>{'Column 4'}</Table.Header>
            <Table.Header>{'Column 5'}</Table.Header>
            <Table.Header>{''}</Table.Header>
          </Table.Row>

        </Table.Head>
        <Table.Body>
          <Table.Row collapsible
              collapsibleContent={<Content/>}
              toggleCellId="cell-1"
          >
            <Table.Cell>{'Value 1'}</Table.Cell>
            <Table.Cell>{'Value 2'}</Table.Cell>
            <Table.Cell>{'Value 3'}</Table.Cell>
            <Table.Cell>{'Value 4'}</Table.Cell>
            <Table.Cell>{'Value 5'}</Table.Cell>
            <Table.Cell cursor="pointer"
                id="cell-1"
                textAlign="right"
            >
              <Icon
                  color="primary"
                  fixedWidth
                  icon="chevron-down"
              />
            </Table.Cell>

          </Table.Row>
          <Table.Row collapsible
              collapsibleContent={<Content/>}
              toggleCellId="cell-2"
          >
            <Table.Cell>{'Value 1'}</Table.Cell>
            <Table.Cell>{'Value 2'}</Table.Cell>
            <Table.Cell>{'Value 3'}</Table.Cell>
            <Table.Cell>{'Value 4'}</Table.Cell>
            <Table.Cell>{'Value 5'}</Table.Cell>
            <Table.Cell cursor="pointer"
                id="cell-2"
                textAlign="right"
            >
              <Icon
                  color="primary"
                  fixedWidth
                  icon="chevron-down"
              />
            </Table.Cell>

          </Table.Row>
          <Table.Row collapsible
              collapsibleContent={<Content/>}
              toggleCellId="cell-3"
          >
            <Table.Cell>{'Value 1'}</Table.Cell>
            <Table.Cell>{'Value 2'}</Table.Cell>
            <Table.Cell>{'Value 3'}</Table.Cell>
            <Table.Cell>{'Value 4'}</Table.Cell>
            <Table.Cell>{'Value 5'}</Table.Cell>
            <Table.Cell cursor="pointer"
                id="cell-3"
                textAlign="right"
            >
              <Icon
                  color="primary"
                  fixedWidth
                  icon="chevron-down"
              />
            </Table.Cell>

          </Table.Row>
        </Table.Body>
      </Table>
  )
}

export default TableWithCollapsibleWithCustomClick

Table with Collapsible with Custom Content

import React from 'react'

import { Table, Icon, Card, Body, Image, Flex } from 'playbook-ui'

const TableWithCollapsibleWithCustomContent = (props) => {

  const Content = () => {
    return (
      <Card 
          borderNone
          borderRadius="none"
          color="light"
          paddingX="xl"
          paddingY="md"
      >
         <Body paddingBottom="sm"
             text="Expanded Custom Layout"
         />
         <Flex justify="between">
           <Image
               size="sm"
               url="https://unsplash.it/500/400/?image=634"
           />
           <Image
               size="sm"
               url="https://unsplash.it/500/400/?image=634"
           />
           <Image
               size="sm"
               url="https://unsplash.it/500/400/?image=634"
           />
           <Image
               size="sm"
               url="https://unsplash.it/500/400/?image=634"
           />
          </Flex>
      </Card>
    );
  };

    return (
    <Table
        size="sm"
    >
      <Table.Head>
        <Table.Row>
          <Table.Header>{'Column 1'}</Table.Header>
          <Table.Header>{'Column 2'}</Table.Header>
          <Table.Header>{'Column 3'}</Table.Header>
          <Table.Header>{'Column 4'}</Table.Header>
          <Table.Header>{'Column 5'}</Table.Header>
          <Table.Header>{''}</Table.Header>
        </Table.Row>

      </Table.Head>
      <Table.Body>
        <Table.Row collapsible
            collapsibleContent={<Content/>}
        >
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
          <Table.Cell textAlign="right">{
            <Icon
                color="primary"
                fixedWidth
                icon="chevron-down"
            />}
          </Table.Cell>

        </Table.Row>
        <Table.Row>
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
          <Table.Cell>{''}</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
          <Table.Cell>{''}</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  )
}

export default TableWithCollapsibleWithCustomContent

Table with Collapsible with Nested Rows

The collapsibleContent can display any content, including nested Table Rows.

Additionally, the collapsibleSideHighlight can also be removed by setting it to false if needed. This prop is set to true by default.

NOTE: We advise against using the disableHover Table prop when nesting Table Rows within a Table.

import React from 'react'

import { Table, Icon, Background } from 'playbook-ui'

const TableWithCollapsibleWithNestedRows = (props) => {

  const Content = () => {
    return (
      <Table 
          borderRadius="none"
          container={false}
          size="sm"
      >
      <Background tag="tr"
      >
        <Table.Cell>Expanded</Table.Cell>
        <Table.Cell>Expanded</Table.Cell>
        <Table.Cell>Expanded</Table.Cell>
        <Table.Cell>Expanded</Table.Cell>
        <Table.Cell>Expanded</Table.Cell>
      </Background>
      </Table>
    );
  };

    return (
    <Table
        size="sm"
    >
      <Table.Head>
        <Table.Row>
          <Table.Header>{'Column 1'}</Table.Header>
          <Table.Header>{'Column 2'}</Table.Header>
          <Table.Header>{'Column 3'}</Table.Header>
          <Table.Header>{'Column 4'}</Table.Header>
          <Table.Header>{'Column 5'}</Table.Header>
          <Table.Header>{''}</Table.Header>
        </Table.Row>

      </Table.Head>
      <Table.Body>
        <Table.Row collapsible 
            collapsibleContent={<Content/>}
            collapsibleSideHighlight={false}
        >
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
          <Table.Cell textAlign="right">{ 
            <Icon
                color="primary"
                fixedWidth
                icon="chevron-down"
            />}
          </Table.Cell>

        </Table.Row>
        <Table.Row>
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
          <Table.Cell>{''}</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
          <Table.Cell>{''}</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  )
}

export default TableWithCollapsibleWithNestedRows

Table with Collapsible with Nested Table

The collapsibleContent can also be used to display nested Tables within each Row.

NOTE: We advise against using the disableHover Table prop when nesting Tables within a Table.

import React from 'react'

import { Pill, Background, Table, Icon } from 'playbook-ui'

const TableWithCollapsibleWithNestedTable = (props) => {

  const Content = () => {
    return (
        <Table 
            borderRadius="none"
            container={false} 
            size="sm"
        >
          <Table.Head>
            <Background
                tag="tr"
            >
              <Table.Header>{"Alt Header"}</Table.Header>
              <Table.Header>{"Alt Header"}</Table.Header>
              <Table.Header>{"Alt Header"}</Table.Header>
              <Table.Header>{"Alt Header"}</Table.Header>
            </Background>
          </Table.Head>
          <Table.Body>
            <Table.Row>
              <Table.Cell>{"Expanded"}</Table.Cell>
              <Table.Cell>{"Expanded"}</Table.Cell>
              <Table.Cell>{"Expanded"}</Table.Cell>
              <Table.Cell>
                  <Pill text="Pill" 
                      variant="primary"
                  />
              </Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>{"Expanded"}</Table.Cell>
              <Table.Cell>{"Expanded"}</Table.Cell>
              <Table.Cell>{"Expanded"}</Table.Cell>
              <Table.Cell>
                  <Pill text="Pill" 
                      variant="primary"
                  />
              </Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>{"Expanded"}</Table.Cell>
              <Table.Cell>{"Expanded"}</Table.Cell>
              <Table.Cell>{"Expanded"}</Table.Cell>
              <Table.Cell>
                  <Pill text="Pill" 
                      variant="primary"
                  />
              </Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table>
    );
  };

    return (
    <Table
        size="sm"
    >
      <Table.Head>
        <Table.Row>
          <Table.Header>{'Column 1'}</Table.Header>
          <Table.Header>{'Column 2'}</Table.Header>
          <Table.Header>{'Column 3'}</Table.Header>
          <Table.Header>{'Column 4'}</Table.Header>
          <Table.Header>{'Column 5'}</Table.Header>
          <Table.Header>{''}</Table.Header>
        </Table.Row>

      </Table.Head>
      <Table.Body>
        <Table.Row collapsible 
            collapsibleContent={<Content/>}
            collapsibleSideHighlight={false}
        >
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
          <Table.Cell textAlign="right">{ 
            <Icon
                color="primary"
                fixedWidth
                icon="chevron-down"
            />}
          </Table.Cell>

        </Table.Row>
        <Table.Row>
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
          <Table.Cell>{''}</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
          <Table.Cell>{''}</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  )
}

export default TableWithCollapsibleWithNestedTable

Table with Clickable Rows

Clickable table rows do not require any additional props. This doc example showcases how to set them up using html_options/htmlOptions and click events. Using the global prop for cursor to set it to "pointer" is also recommended for better UX.

import React from 'react'

import { Table, Icon } from 'playbook-ui'

const TableWithClickableRows = (props) => {

  return (
      <Table 
          size="sm"
      >
          <Table.Head>
              <Table.Row>
                  <Table.Header>{"Column 1"}</Table.Header>
                  <Table.Header>{"Column 2"}</Table.Header>
                  <Table.Header>{"Column 3"}</Table.Header>
                  <Table.Header>{"Column 4"}</Table.Header>
                  <Table.Header>{"Column 5"}</Table.Header>
                  <Table.Header>{""}</Table.Header>
              </Table.Row>
          </Table.Head>
          <Table.Body>
              <Table.Row
                  cursor="pointer"
                  htmlOptions={{ onClick: () => alert("Row 1 clicked") }}
              >
                <Table.Cell>{"Value 1"}</Table.Cell>
                <Table.Cell>{"Value 2"}</Table.Cell>
                <Table.Cell>{"Value 3"}</Table.Cell>
                <Table.Cell>{"Value 4"}</Table.Cell>
                <Table.Cell>{"Value 5"}</Table.Cell>
                <Table.Cell textAlign="right">
                    <Icon 
                        color="primary_action"
                        fixedWidth
                        icon="chevron-right" 
                        size="xs"
                    />
                </Table.Cell>
              </Table.Row>
              <Table.Row
                  cursor="pointer"
                  htmlOptions={{ onClick: () => alert("Row 2 clicked") }}
              >
                  <Table.Cell>{"Value 1"}</Table.Cell>
                  <Table.Cell>{"Value 2"}</Table.Cell>
                  <Table.Cell>{"Value 3"}</Table.Cell>
                  <Table.Cell>{"Value 4"}</Table.Cell>
                  <Table.Cell>{"Value 5"}</Table.Cell>
                  <Table.Cell textAlign="right">
                      <Icon 
                          color="primary_action"
                          fixedWidth
                          icon="chevron-right" 
                          size="xs"
                      />                
                  </Table.Cell>
              </Table.Row>
              <Table.Row
                  cursor="pointer"
                  htmlOptions={{ onClick: () => alert("Row 3 clicked") }}
              >
                  <Table.Cell>{"Value 1"}</Table.Cell>
                  <Table.Cell>{"Value 2"}</Table.Cell>
                  <Table.Cell>{"Value 3"}</Table.Cell>
                  <Table.Cell>{"Value 4"}</Table.Cell>
                  <Table.Cell>{"Value 5"}</Table.Cell>
                  <Table.Cell textAlign="right">
                      <Icon 
                          color="primary_action"
                          fixedWidth
                          icon="chevron-right" 
                          size="xs"
                      />
                  </Table.Cell>
              </Table.Row>
          </Table.Body>
      </Table>
  )
}

export default TableWithClickableRows

Table with Selectable Rows

Use the Checkbox kit with the Table to achieve the selectable row functionality seen here.

import React, { useState } from 'react'

import { Table, Image, Flex, Checkbox, Button } from 'playbook-ui'

const TableWithSelectableRows = (props) => {
    const [checkboxes, setCheckboxes] = useState([
        { name: "Coffee", checked: false },
        { name: "Ice Cream", checked: false },
        { name: "Chocolate", checked: true },
    ]);

    const isAllChecked = !checkboxes.find((checkbox) => !checkbox.checked);
    const isNoneChecked = !checkboxes.find((checkbox) => checkbox.checked);

    const processCheckboxes = (checked) =>
        checkboxes.slice(0).map((checkbox) => {
            checkbox.checked = checked;
            return checkbox;
        });

    const onToggleAll = () => {
        setCheckboxes(
            isNoneChecked ? processCheckboxes(true) : processCheckboxes(false)
        );
    };

    const updateCheckboxes = (checkbox, index) => {
        const newCheckboxes = checkboxes.slice(0);
        newCheckboxes[index].checked = !checkbox.checked;
        setCheckboxes(newCheckboxes);
    };

    return (
        <>
            <Flex
                justify="end"
                marginBottom="sm"
            >
                {!isNoneChecked && (
                    <Flex
                        justify="end"
                        marginBottom="sm"
                    >
                        <Button>Delete</Button>
                    </Flex>
                )}
            </Flex>
            <Table
                size="sm"
            >
                <Table.Head>
                    <Table.Row>
                        <Table.Header>
                            <Checkbox
                                checked={isAllChecked}
                                indeterminate={!isAllChecked && !isNoneChecked}
                                name="checkbox-name"
                                onChange={onToggleAll}
                                value="check-box value"
                            />
                        </Table.Header>
                        <Table.Header>{"Column 1"}</Table.Header>
                        <Table.Header>{"Column 2"}</Table.Header>
                        <Table.Header>{"Column 3"}</Table.Header>
                        <Table.Header>{"Column 4"}</Table.Header>
                        <Table.Header>{"Column 5"}</Table.Header>
                    </Table.Row>
                </Table.Head>
                <Table.Body>
                    {checkboxes.map((checkbox, index) => (
                        <Table.Row key={index}>
                            <Table.Cell>
                                <Checkbox
                                    checked={checkbox.checked}
                                    name={checkbox.name}
                                    onChange={() => {
                                        updateCheckboxes(checkbox, index);
                                    }}
                                    value="check-box value"
                                />
                            </Table.Cell>
                            <Table.Cell>
                                <Image
                                    alt="picture of a misty forest"
                                    size="xs"
                                    url="https://unsplash.it/500/400/?image=634"
                                />
                            </Table.Cell>
                            <Table.Cell>{"Value 2"}</Table.Cell>
                            <Table.Cell>{"Value 3"}</Table.Cell>
                            <Table.Cell>{"Value 4"}</Table.Cell>
                            <Table.Cell>{"Value 5"}</Table.Cell>
                        </Table.Row>
                    ))}
                </Table.Body>
            </Table>
        </>
    )
}

export default TableWithSelectableRows

Header Style Borderless

Customize your header by removing the header borders with the headerStyle="borderless" prop.

import React from 'react'

import { Table } from 'playbook-ui'

const TableWithHeaderStyleBorderless = (props) => {
  return (
    <>
        <Table
            headerStyle="borderless"
            size="sm"
        >
          <thead>
              <tr>
                  <th>{'Column 1'}</th>
                  <th>{'Column 2'}</th>
                  <th>{'Column 3'}</th>
                  <th>{'Column 4'}</th>
                  <th>{'Column 5'}</th>
              </tr>
          </thead>
          <tbody>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
              <td>{'Value 4'}</td>
              <td>{'Value 5'}</td>
            </tr>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
              <td>{'Value 4'}</td>
              <td>{'Value 5'}</td>
            </tr>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
              <td>{'Value 4'}</td>
              <td>{'Value 5'}</td>
            </tr>
          </tbody>
        </Table>
    </>
  )
}

export default TableWithHeaderStyleBorderless

Header Style Floating

Further customize your header by using the table with background kit logic to give your table header a custom background color. Use the headerStyle="floating" prop to visually nest the borderless table within a card or collapsible with a matching background color (the backgroundColor passed to Background kit should match the background or backgroundColor for the element in which it is nested).

import React from 'react'

import { Background, Card, Table } from 'playbook-ui'

const TableWithHeaderStyleFloating = (props) => {
  return (
    <>
        <Card background="light"
        >
            <Table
                headerStyle="floating"
                size="sm"
            >
              <Table.Head>
                  <Background backgroundColor="light" 
                      tag="tr"
                  >
                      <Table.Header>{'Column 1'}</Table.Header>
                      <Table.Header>{'Column 2'}</Table.Header>
                      <Table.Header>{'Column 3'}</Table.Header>
                      <Table.Header>{'Column 4'}</Table.Header>
                      <Table.Header>{'Column 5'}</Table.Header>
                  </Background>
              </Table.Head>
              <Table.Body>
                <Table.Row>
                  <Table.Cell>{'Value 1'}</Table.Cell>
                  <Table.Cell>{'Value 2'}</Table.Cell>
                  <Table.Cell>{'Value 3'}</Table.Cell>
                  <Table.Cell>{'Value 4'}</Table.Cell>
                  <Table.Cell>{'Value 5'}</Table.Cell>
                </Table.Row>
                <Table.Row>
                  <Table.Cell>{'Value 1'}</Table.Cell>
                  <Table.Cell>{'Value 2'}</Table.Cell>
                  <Table.Cell>{'Value 3'}</Table.Cell>
                  <Table.Cell>{'Value 4'}</Table.Cell>
                  <Table.Cell>{'Value 5'}</Table.Cell>
                </Table.Row>
                <Table.Row>
                  <Table.Cell>{'Value 1'}</Table.Cell>
                  <Table.Cell>{'Value 2'}</Table.Cell>
                  <Table.Cell>{'Value 3'}</Table.Cell>
                  <Table.Cell>{'Value 4'}</Table.Cell>
                  <Table.Cell>{'Value 5'}</Table.Cell>
                </Table.Row>
              </Table.Body>
            </Table>
        </Card>
    </>
  )
}

export default TableWithHeaderStyleFloating

Table

Troubleshooting CSS Problems

Available Props

Contribute to Playbook

Power

Connect