Tables

What can we help you with?

See a problem with the code? Need a new component? Have feedback? We'd love to hear it all! The success of the Bluemix Design System relies on great people like yourself. Fill out the form below to submit your issue to our GitHub repo.

A member of the Bluemix Design System's team will be in touch within 48 hours.

Thank you!

Your issue, , is now in the bluemix-components repo. Click the issue number to track the progress or make edits to your issue.

We will get back to you within 48 hours. Feel free to reach out to us on one of our slack channels if you have additional questions:

#bluemix-components

#bluemix-design-system

Tables present raw data sets and lend meaning to the data, while maintaining that the data is readable, scannable, and easily comparable.

First Name

Last Name

House

Hello

Column

Godric

Gryfindor

Origin

Something

Hooray

Salazar

Slytherin

Origin

Something

Hooray

<div class='bx--responsive-table-container' data-responsive-table> <table class='bx--responsive-table' data-table> <thead class='bx--table-head'> <tr class='bx--table-row'> <th class='bx--table-header'></th> <th class='bx--table-header bx--table-select'> <input id='unique-checkbox-1' data-event='select-all' class='bx--checkbox bx--checkbox--svg' type='checkbox' value='green' name='checkbox' data-event='select-all'> <label for='unique-checkbox-1' class='bx--checkbox__label'> <span class='bx--checkbox__appearance'> <svg class='bx--checkbox__checkmark'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#checkmark'></use> </svg> </span> </label> </th> <th class='bx--table-header bx--table-sort' data-event='sort'> <span>First Name</span> <svg class='bx--table-sort__svg'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#caret--down' height='8' width='8' viewBox='0 0 8 8'></use> </svg> </th> <th class='bx--table-header bx--table-sort' data-event='sort'> Last Name <svg class='bx--table-sort__svg'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#caret--down' height='8' width='8' viewBox='0 0 8 8'></use> </svg> </th> <th class='bx--table-header bx--table-sort' data-event='sort'> House <svg class='bx--table-sort__svg'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#caret--down' height='8' width='8' viewBox='0 0 8 8'></use> </svg> </th> <th class='bx--table-header'></th> </tr> </thead> <tbody class='bx--table-body'> <tr class='bx--parent-row' data-parent-row> <td class='bx--table-expand' data-event='expand'> <svg class='bx--table-expand__svg' height='12' width='12' viewbox='0 0 12 12'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#chevron--right'></use> </svg> </td> <td class='bx--table-select'> <input id='unique-checkbox-2' class='bx--checkbox bx--checkbox--svg' type='checkbox' value='green' name='checkbox'> <label for='unique-checkbox-2' class='bx--checkbox__label'> <span class='bx--checkbox__appearance'> <svg class='bx--checkbox__checkmark'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#checkmark'></use> </svg> </span> </label> </td> <td>Harry</td> <td>Potter</td> <td>Gryfindor</td> <td class='bx--table-overflow'> <div data-overflow-menu class='bx--overflow-menu' tabindex='0' aria-label='List of options'> <svg class='bx--overflow-menu__icon'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#overflow-menu'></use> </svg> <ul class='bx--overflow-menu__options'> <li><button type='button' class='bx--overflow-menu__btn'>Stop App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Restart App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Rename App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Edit Routes and Access</button></li> <hr/> <li><button type='button' class='bx--overflow-menu__btn--delete'>Delete App</button></li> </ul> </div> </td> </tr> <tr class='bx--expandable-row bx--expandable-row--hidden'> <td colspan='6'> <h4><strong>Harry Potter</strong></h4> <p>Harry James Potter (b. 31 July, 1980) was a half-blood[47] wizard, the only child and son of the late James and Lily Potter (née Evans), and one of the most famous and powerful wizards of modern times. In what proved to be a vain attempt to circumvent a prophecy that stated that a boy born at the end of July of 1980 could be able to defeat him, Lord Voldemort tried to murder him when he was a year and three months old. Voldemort murdered Harry's parents as they tried to protect him, shortly before attacking Harry</p> </td> </tr> <tr class='bx--parent-row' data-parent-row> <td class='bx--table-expand' data-event='expand'> <svg class='bx--table-expand__svg' height='12' width='12' viewbox='0 0 12 12'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#chevron--right'></use> </svg> </td> <td class='bx--table-select'> <input id='unique-checkbox-3' class='bx--checkbox bx--checkbox--svg' type='checkbox' value='green' name='checkbox'> <label for='unique-checkbox-3' class='bx--checkbox__label'> <span class='bx--checkbox__appearance'> <svg class='bx--checkbox__checkmark'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#checkmark'></use> </svg> </span> </label> </td> <td>Hermoine</td> <td>Granger</td> <td>Gryfindor</td> <td class='bx--table-overflow'> <div data-overflow-menu class='bx--overflow-menu' tabindex='0' aria-label='List of options'> <svg class='bx--overflow-menu__icon'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#overflow-menu'></use> </svg> <ul class='bx--overflow-menu__options'> <li><button type='button' class='bx--overflow-menu__btn'>Stop App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Restart App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Rename App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Edit Routes and Access</button></li> <hr/> <li><button type='button' class='bx--overflow-menu__btn--delete'>Delete App</button></li> </ul> </div> </td> </tr> <tr class='bx--expandable-row bx--expandable-row--hidden'> <td colspan='6'> <table class='bx--responsive-table bx--responsive-table--static-size'> <thead> <tr class='bx--table-row'> <th class='bx--table-header'>First Name</th> <th class='bx--table-header'>Last Name</th> <th class='bx--table-header'>House</th> <th class='bx--table-header'>Hello</th> <th class='bx--table-header'>Column</th> </tr> </thead> <tbody> <tr> <td>Godric</td> <td>Gryfindor</td> <td>Origin</td> <td>Something</td> <td>Hooray</td> </tr> <tr> <td>Salazar</td> <td>Slytherin</td> <td>Origin</td> <td>Something</td> <td>Hooray</td> </tr> </tbody> </table> </td> </tr> <tr class='bx--parent-row' data-parent-row> <td class='bx--table-expand' data-event='expand'> <svg class='bx--table-expand__svg' height='12' width='12' viewbox='0 0 12 12'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#chevron--right'></use> </svg> </td> <td class='bx--table-select'> <input id='unique-checkbox-4' class='bx--checkbox bx--checkbox--svg' type='checkbox' value='green' name='checkbox'> <label for='unique-checkbox-4' class='bx--checkbox__label'> <span class='bx--checkbox__appearance'> <svg class='bx--checkbox__checkmark'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#checkmark'></use> </svg> </span> </label> </td> <td>Ron</td> <td>Weasley</td> <td>Gryfindor</td> <td class='bx--table-overflow'> <div data-overflow-menu class='bx--overflow-menu' tabindex='0' aria-label='List of options'> <svg class='bx--overflow-menu__icon'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#overflow-menu'></use> </svg> <ul class='bx--overflow-menu__options'> <li><button type='button' class='bx--overflow-menu__btn'>Stop App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Restart App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Rename App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Edit Routes and Access</button></li> <hr/> <li><button type='button' class='bx--overflow-menu__btn--delete'>Delete App</button></li> </ul> </div> </td> </tr> <tr class='bx--expandable-row bx--expandable-row--hidden'> <td colspan='6'> <img src='https://upload.wikimedia.org/wikipedia/en/5/5e/Ron_Weasley_poster.jpg' /> </td> </tr> <tr class='bx--parent-row' data-parent-row> <td class='bx--table-expand' data-event='expand'> <svg class='bx--table-expand__svg' height='12' width='12' viewbox='0 0 12 12'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#chevron--right'></use> </svg> </td> <td class='bx--table-select'> <input id='unique-checkbox-5' class='bx--checkbox bx--checkbox--svg' type='checkbox' value='green' name='checkbox'> <label for='unique-checkbox-5' class='bx--checkbox__label'> <span class='bx--checkbox__appearance'> <svg class='bx--checkbox__checkmark'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#checkmark'></use> </svg> </span> </label> </td> <td>Draco</td> <td>Malfoy</td> <td>Slytherin</td> <td class='bx--table-overflow'> <div data-overflow-menu class='bx--overflow-menu' tabindex='0' aria-label='List of options'> <svg class='bx--overflow-menu__icon'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#overflow-menu'></use> </svg> <ul class='bx--overflow-menu__options'> <li><button type='button' class='bx--overflow-menu__btn'>Stop App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Restart App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Rename App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Edit Routes and Access</button></li> <hr/> <li><button type='button' class='bx--overflow-menu__btn--delete'>Delete App</button></li> </ul> </div> </td> </tr> <tr class='bx--expandable-row bx--expandable-row--hidden'> <td colspan='6'> <p>Draco Malfoy is in Gryfindor House. She is in his fifth year</p> </td> </tr> <tr class='bx--parent-row' data-parent-row> <td class='bx--table-expand' data-event='expand'> <svg class='bx--table-expand__svg' height='12' width='12' viewbox='0 0 12 12'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#chevron--right'></use> </svg> </td> <td class='bx--table-select'> <input id='unique-checkbox-9' class='bx--checkbox bx--checkbox--svg' type='checkbox' value='green' name='checkbox'> <label for='unique-checkbox-9' class='bx--checkbox__label'> <span class='bx--checkbox__appearance'> <svg class='bx--checkbox__checkmark'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#checkmark'></use> </svg> </span> </label> </td> <td>Blaise</td> <td>Zabini</td> <td>Slytherin</td> <td class='bx--table-overflow'> <div data-overflow-menu class='bx--overflow-menu' tabindex='0' aria-label='List of options'> <svg class='bx--overflow-menu__icon'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#overflow-menu'></use> </svg> <ul class='bx--overflow-menu__options'> <li><button type='button' class='bx--overflow-menu__btn'>Stop App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Restart App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Rename App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Edit Routes and Access</button></li> <hr/> <li><button type='button' class='bx--overflow-menu__btn--delete'>Delete App</button></li> </ul> </div> </td> </tr> <tr class='bx--expandable-row bx--expandable-row--hidden'> <td colspan='6'> <p>Blaise Zabini is in Gryfindor House. She is in his fifth year</p> </td> </tr> <tr class='bx--parent-row' data-parent-row> <td class='bx--table-expand' data-event='expand'> <svg class='bx--table-expand__svg' height='12' width='12' viewbox='0 0 12 12'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#chevron--right'></use> </svg> </td> <td class='bx--table-select'> <input id='unique-checkbox-6' class='bx--checkbox bx--checkbox--svg' type='checkbox' value='green' name='checkbox'> <label for='unique-checkbox-6' class='bx--checkbox__label'> <span class='bx--checkbox__appearance'> <svg class='bx--checkbox__checkmark'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#checkmark'></use> </svg> </span> </label> </td> <td>Cedric</td> <td>Diggory</td> <td>Hufflepuff</td> <td class='bx--table-overflow'> <div data-overflow-menu class='bx--overflow-menu' tabindex='0' aria-label='List of options'> <svg class='bx--overflow-menu__icon'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#overflow-menu'></use> </svg> <ul class='bx--overflow-menu__options'> <li><button type='button' class='bx--overflow-menu__btn'>Stop App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Restart App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Rename App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Edit Routes and Access</button></li> <hr/> <li><button type='button' class='bx--overflow-menu__btn--delete'>Delete App</button></li> </ul> </div> </td> </tr> <tr class='bx--expandable-row bx--expandable-row--hidden'> <td colspan='6'> <p>Cedric Diggory is in Gryfindor House. She is in his fifth year</p> </td> </tr> <tr class='bx--parent-row' data-parent-row> <td class='bx--table-expand' data-event='expand'> <svg class='bx--table-expand__svg' height='12' width='12' viewbox='0 0 12 12'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#chevron--right'></use> </svg> </td> <td class='bx--table-select'> <input id='unique-checkbox-7' class='bx--checkbox bx--checkbox--svg' type='checkbox' value='green' name='checkbox'> <label for='unique-checkbox-7' class='bx--checkbox__label'> <span class='bx--checkbox__appearance'> <svg class='bx--checkbox__checkmark'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#checkmark'></use> </svg> </span> </label> </td> <td>Luna</td> <td>Lovegood</td> <td>Ravenclaw</td> <td class='bx--table-overflow'> <div data-overflow-menu class='bx--overflow-menu' tabindex='0' aria-label='List of options'> <svg class='bx--overflow-menu__icon'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#overflow-menu'></use> </svg> <ul class='bx--overflow-menu__options'> <li><button type='button' class='bx--overflow-menu__btn'>Stop App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Restart App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Rename App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Edit Routes and Access</button></li> <hr/> <li><button type='button' class='bx--overflow-menu__btn--delete'>Delete App</button></li> </ul> </div> </td> </tr> <tr class='bx--expandable-row bx--expandable-row--hidden'> <td colspan='6'> <p>Luna Lovegood is in Gryfindor House. She is in his fifth year</p> </td> </tr> <tr class='bx--parent-row' data-parent-row> <td class='bx--table-expand' data-event='expand'> <svg class='bx--table-expand__svg' height='12' width='12' viewbox='0 0 12 12'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#chevron--right'></use> </svg> </td> <td class='bx--table-select'> <input id='unique-checkbox-8' class='bx--checkbox bx--checkbox--svg' type='checkbox' value='green' name='checkbox'> <label for='unique-checkbox-8' class='bx--checkbox__label'> <span class='bx--checkbox__appearance'> <svg class='bx--checkbox__checkmark'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#checkmark'></use> </svg> </span> </label> </td> <td>Cho</td> <td>Chang</td> <td>Ravenclaw</td> <td class='bx--table-overflow'> <div data-overflow-menu class='bx--overflow-menu' tabindex='0' aria-label='List of options'> <svg class='bx--overflow-menu__icon'> <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#overflow-menu'></use> </svg> <ul class='bx--overflow-menu__options'> <li><button type='button' class='bx--overflow-menu__btn'>Stop App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Restart App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Rename App</button></li> <li><button type='button' class='bx--overflow-menu__btn'>Edit Routes and Access</button></li> <hr/> <li><button type='button' class='bx--overflow-menu__btn--delete'>Delete App</button></li> </ul> </div> </td> </tr> <tr class='bx--expandable-row bx--expandable-row--hidden'> <td colspan='6'> <p>Cho Chang is in Gryfindor House. She is in his fifth year</p> </td> </tr> </tbody> </table> </div>

Structure

Tables are a configurable and customizable component. Designers can pick and choose certain elements and interactions. Table widths can vary based on the layout, amount of data and content.

Basics

The basic table style is the required base from which tables can be developed. Basic tables are composed of a header row followed by rows of data below. At a minimum, tables require 3 or more columns. Table row heights can be set to narrow or wide or be toggled between the two. Column widths can vary by content and only requires a minimum spacing between columns.

32px row height | units in px / rem

44px row height | units in px / rem

32px row height | units in px / rem

44px row height | units in px / rem

Narrow row height

Wide row height

2.75

Header row height

2.5

Total width

can vary

Min space between columns

1.5

Background

#394b54

$color__navy-gray-4

Border

#2d3f49

$color__navy-gray-3

Header divider line

#5aaafa

$color__blue-30

Row hover stroke

#5aaafa

$color__blue-30

Alternating row

#42535c

$color__navy-gray-5

Background

#ffffff

$color__white

Border

#dfe3e6

$color__gray-1

Header divider line

#5aaafa

$color__blue-30

Row hover stroke

#5aaafa

$color__blue-30

Alternating row

#f0f3f6

$color__gray-2

Enhanced tables

After the basic structure, tables can be enhanced by adding any of the following: selectable rows, expanding rows, nested tables, row menus, table batch actions, overall table menu, and/or table filter. The following example is what a table would look like with all of the enhancements.

Expandable and selectable table | units in px / rem

Checkboxes

Overflow menu

Small button

Chevron

Arrow

Background

#394b54

$color__navy-gray-4

Border

#2d3f49

$color__navy-gray-3

Header divider line

#5aaafa

$color__blue-30

Row hover stroke

#5aaafa

$color__blue-30

Alternating row

#42535c

$color__navy-gray-5

Expanded row highlight

#5aaafa

$color__blue-30

Icons

#dfe6eb

$color__navy-gray-8

Background

#ffffff

$color__white

Border

#dfe3e6

$color__gray-1

Header divider line

#5aaafa

$color__blue-30

Row hover stroke

#5aaafa

$color__blue-30

Alternating row

#f0f3f6

$color__gray-2

Expanded row highlight

#5aaafa

$color__blue-30

Icons

#5a6872

$color__navy-gray-6

Padding

Basic table padding | units in px / rem

Internal edges

1.5

Between label and arrow

0.5

Min space between columns

1.5

Enhanced table padding | units in px / rem

Internal edges

Between label and arrow

0.5

Min space between columns

1.5

Left and right of chevron

Left and right of checkboxes

Typography

Column label should be in all caps. All other table text should be sentenced case. Column labels and table text should both follow the Typography font stack for sans-serif.

Table title

1.4375

Column label

0.75

Row text

0.875

Table title

Light

300

Column label

Bold

700

Row text

Normal

400

Table title

#dfe6eb

$color__navy-gray-8

Column label

#dfe6eb

$color__navy-gray-8

Row text

#ffffff

$color__white

Table title

#152935

$color__blue-90

Column label

#152935

$color__blue-90

Row text

#152935

$color__blue-90

What can we help you with?

Thank you!

Foundation

Enhanced Table

Harry Potter

Structure

Header row

Number of columns

Zebra stripes

Interactions

Search

Sorting

Batch actions

Inline actions

Expandable rows

Additional content

Pagination

Lazy load

Example

Structure

Basics

Enhanced tables

Padding

Typography