Persona

Appearance

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.

Copyright © 2022 Privy Identitas Digital