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

Row Alignment

This is to be used to shift the whole 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
    >
      <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 align="center">
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr align="right">
          <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 TableAlignmentRow

Column Alignment

You can individually align a piece of table data, but a more practical use would be applied to align a column.
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
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th align="center">{'Rating'}</th>
          <th align="right">{'Money'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td align="center">{'3'}</td>
          <td align="right">{'$57.32'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td align="center">{'2'}</td>
          <td align="right">{'$5,657.08'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td align="center">{'4'}</td>
          <td align="right">{'$358.77'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableAlignmentColumn

Shift Row

import React from 'react'

import Table from 'playbook-ui'

const TableAlignmentShiftRow = (props) => {
  return (
    <Table
    >
      <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 1a'}
            <br />
            {'Value 1a'}
            <br />
            {'Value 1a'}
          </td>
          <td>{'Value 2a'}</td>
          <td>{'Value 3a'}</td>
          <td>{'Value 4a'}</td>
          <td>{'Value 5a'}</td>
        </tr>
        <tr shift="middle">
          <td>
            {'Value 1b'}
            <br />
            {'Value 1b'}
            <br />
            {'Value 1b'}
          </td>
          <td>{'Value 2b'}</td>
          <td>{'Value 3b'}</td>
          <td>{'Value 4b'}</td>
          <td>{'Value 5b'}</td>
        </tr>
        <tr shift="down">
          <td>
            {'Value 1c'}
            <br />
            {'Value 1c'}
            <br />
            {'Value 1c'}
          </td>
          <td>{'Value 2c'}</td>
          <td>{'Value 3c'}</td>
          <td>{'Value 4c'}</td>
          <td>{'Value 5c'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableAlignmentShiftRow

Shift Column Data

You can individually shift a piece of table data, or shift an entire column.
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"
      >
        <thead>
          <tr>
            <th>&nbsp;</th>
            <th>{'Price'}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td shift="down">{'Total'}</td>
            <td>
              {'$12'}
              <br />
              {'$46'}
              <br />
              {'$25'}
              <br />
              {'-------'}
              <br />
              {'$83'}
            </td>
          </tr>
        </tbody>
      </Table>
      <Table
      >
        <thead>
          <tr>
            <th>{'Espresso Drinks'}</th>
            <th>{'Ingredients'}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td shift="up">{'Cappuccino'}</td>
            <td>
              {'Espresso'}
              <br />
              {'Steamed Milk'}
              <br />
              {'Milk Foam'}
            </td>
          </tr>
          <tr>
            <td shift="up">{'Macchiato'}</td>
            <td>
              {'Espresso'}
              <br />
              {'Steamed Milk'}
            </td>
          </tr>
          <tr>
            <td shift="up">{'Mocha'}</td>
            <td>
              {'Espresso'}
              <br />
              {'Hot Chocolate'}
              <br />
              {'Steamed Milk'}
            </td>
          </tr>
        </tbody>
      </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 from 'playbook-ui'
import 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 from 'playbook-ui'
import 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 from 'playbook-ui'
import 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 from 'playbook-ui'
import 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 from 'playbook-ui'
import 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 from 'playbook-ui'

import CircleIconButton from 'playbook-ui'
import Flex from 'playbook-ui'
import 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 from 'playbook-ui'
import 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="card_light"
                tag='col'
            />
            <Background
                backgroundColor="warning_subtle"
                tag='col'
            />
          </colgroup>
          <Background
              backgroundColor="card_light"
              tag='thead'
          >
            <tr>
                <th>{'Column 1'}</th>
                <th>{'Column 2'}</th>
                <th>{'Column 3'}</th>
            </tr>
          </Background>
          <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

Table

See this kit in action in our sample UI

Troubleshooting CSS Problems

UI Samples using Table Kit

Conference Statistics

Crm Client List

Music App

Available Props

Contribute to Playbook

Power

Connect