Skip to content
On this page

data table Data Table

Data Table

Usage

Table is used to organize and display information from a data set.

Row Component Type

With Label

label
Text Content
Usage: Default state, a checkbox input includes a selected and unselected state.

Without Label

Text Content
Usage: This data set component used for data set that has header table. This type of data set doesn’t require label because the context of data set component has been represented by table header.

Row Component Function type

Without Label

Text Content
Text Content Caption
Text Content
Label
Caption
Usage: -

Avatar Group

Avatar Image
Avatar Image
Avatar Image
Usage: Data set component that used for displays a number of avatars grouped together.

Button

Usage: Data set component that used for displaying a button.

Tag Label

Label
Usage: Data set component that used for displaying a label.

Checkbox

Usage: Data set component that used for displaying a checkbox.

Radio

Usage: Data set component that used for displaying a radio.

Avatar

Avatar Image
Text Content
Avatar Image
Text Content
Usage: Data set component that used for displays a single avatars.

Text Field

Usage: Data set component that used for displays a text field.

Toggle

Usage: Data set component that used for displays a toggle.

Icon

Usage: Data set component that used for displays a button icon.

Table Style

Flexible Table Style

Label
Avatar Image
Text
Label
Text
Label
Caption
Label
Label
Label
Avatar Image
Text
Label
Text
Label
Caption
Label
Label
Usage: This component table style usually used for a table that require flexible row inside the table. Each a coloum inside the row has it’s own label, so it’s possible to move up / down the row. This type of style also doesn’t require a table header.

Static Table Style

Label
Label
Label
Label
Avatar Image
Samuel
Samuel
Label
Caption
Avatar Image
Jonathan
Jonathan
Label
Caption
Avatar Image
Ranthi
Ranthi
Label
Caption
Usage: This component table style usually used for a table that have a strict layout. This table style require table header, because it’s doesn’t have label on it’s each coloumn.

Draggable Table Style

Label
Label
Label
Label
Avatar Image
Samuel
Samuel
Label
Caption
Avatar Image
Jonathan
Jonathan
Label
Caption
Avatar Image
Ranthi
Ranthi
Label
Caption
Usage: This component is a draggable table, the row is flexible so it’s possible to move up / down the row.

Pattern Rule

Best Practice

  • Show values across multiple categories and measures.
  • Allow for filtering and ordering when comparison is not a priority.
  • Help merchants visualize and scan many values from an entire data set.
  • Help merchants find other values in the data hierarchy through use of links.
  • Minimize clutter by only including values that supports the data’s purpose.
  • Include a summary row to surface the column totals.
  • Not include calculations within the summary row.
  • Wrap instead of truncate content. This is because if row titles start with the same word, they’ll all appear the same when truncated.
  • Not to be used for an actionable list of items that link to details pages. For this functionality

Do

  • Use when you need to display tabular data in a view.
  • Use a table element directly within the component.

Don’t

  • Don’t use to display list data.
  • Don’t use to display basic key and value pairs, consider a description list instead.
  • Don’t use tables for layout.
  • Don't use a primary button in every row of a table.

Released under the MIT License.