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

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

PrivyID

Text Content

Name

Text Content Caption

Is Active

Text Content

Label

Caption

Usage: -

Avatar Group

label

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

Button

label

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

Tag Label

label

Label

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

Checkbox

label

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

Radio

label

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

Avatar

label

Text Content

Text Content

Usage: Data set component that used for displays a single avatars.

Text Field

label

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

Toggle

label

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

Icon

label

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

Table Style

Flexible Table Style

Label

Text

Label

Text

Label

Caption

Label

Label

Label

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

Samuel

Samuel

Label

Caption

Jonathan

Jonathan

Label

Caption

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

Samuel

Samuel

Label

Caption

Jonathan

Jonathan

Label

Caption

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.