Table

Data table is a component with a high rate of usage within the applications. It allows to show the user a big amount of information in a simple and simplified way. All the information contained in the table has a grid structure, defining columns and rows to place the data and allow the users to scan, analyze, compare and filter that information.

States

Some other components defined in the Design System are used in the table component as the checkbox, button or select. For concrete specifications about states, please, consider to see the documentation of each component.

Anatomy

1.
Header
2.
Header title
3.
Sorting action
4.
Body
5.
Cell
6.
Cell value
7.
Paginator

Design tokens

Color

Component token	Element	Core token	Value
`dataBackgroundColor`	Cell	`color-white`	#ffffff
`dataFontColor`	Cell value	`color-black`	#000000
`headerBackgroundColor`	Header	`color-purple-700`	#5f249f
`headerFontColor`	Header title	`color-white`	#ffffff
`scrollBarThumbColor`	Scroll bar	`color-grey-700`	#666666
`scrollBarTrackColor`	Scroll bar	`color-grey-300`	#cccccc
`sortIconColor`	Sort	`color-white`	#ffffff
`rowSeparatorColor`	Divider	`color-grey-300`	#cccccc

Typography

Component token	Element	Core token	Value
`dataFontFamily`	Cell value	`font-family-sans`	'Open Sans', sans-serif
`dataFontSize`	Cell value	`font-scale-02`	0.875rem / 14px
`dataFontStyle`	Cell value	`font-style-normal`	normal
`dataFontWeight`	Cell value	`font-weight-regular`	400
`dataFontTextTransform`	Cell value	-	none
`dataTextLineHeight`	Cell value	-	normal
`dataTextAlign`	Cell value	-	left
`headerFontFamily`	Header title	`font-family-sans`	'Open Sans', sans-serif
`headerFontSize`	Header title	`font-scale-02`	0.875rem / 14px
`headerFontStyle`	Header title	`font-style-normal`	normal
`headerFontWeight`	Header title	`font-weight-regular`	400
`headerFontTextTransform`	Header title	-	none
`headerTextLineHeight`	Header title	-	normal
`headerTextAlign`	Header title	-	left

Border

Component token	Element	Core token	Value
`rowSeparatorThickness`	Divider	`border-width-1`	1px
`rowSeparatorStyle`	Divider	`border-style-solid`	solid
`headerBorderRadius`	Header	`border-radius-medium`	0.25rem / 4px

Spacing

Component token	Element	Core token	Value
`dataPaddingTop`	Cell value	`spacing-16`	1rem / 16px
`dataPaddingBottom`	Cell value	`spacing-16`	1rem / 16px
`dataPaddingRight`	Cell value	-	20px
`dataPaddingLeft`	Cell value	-	20px
`dataPaddingTopReduced`	Cell value	`spacing-8`	0.5rem / 8px
`dataPaddingBottomReduced`	Cell value	`spacing-8`	0.5rem / 8px
`dataPaddingRightReduced`	Cell value	`spacing-16`	1rem / 16px
`dataPaddingLeftReduced`	Cell value	`spacing-16`	1rem / 16px
`firstChildPaddingLeft`	Cell value	`spacing-24`	1.5rem / 24px
`lastChildPaddingRight`	Cell value	`spacing-24`	1.5rem / 24px
`firstChildPaddingLeftReduced`	Cell value	-	20px
`lastChildPaddingRightReduced`	Cell value	-	20px
`dataPaddingBottomReduced`	Cell value	`spacing-8`	0.5rem / 8px
`dataPaddingRightReduced`	Cell value	`spacing-16`	1rem / 16px
`headerPaddingTop`	Header title	`spacing-16`	1rem / 16px
`headerPaddingBottom`	Header title	`spacing-16`	1rem / 16px
`headerPaddingRight`	Header title	-	20px
`headerPaddingLeft`	Header title	`spacing-40`	2.5rem / 40px
`headerPaddingTopReduced`	Header title	`spacing-8`	0.5rem / 8px
`headerPaddingBottomReduced`	Header title	`spacing-8`	0.5rem / 8px
`headerPaddingRightReduced`	Header title	`spacing-16`	1rem / 16px
`headerPaddingLeftReduced`	Header title	`spacing-16`	1rem / 16px