Data Grid

warning

There are known styling issues with sortable columns when used in a NextJS app.

A data grid is a component designed to display large volumes in a structured and organized manner. It structures data into rows and columns, making it easy for users to visualize, analyze, and interact with the information. The data grid also improves user experience by providing features like sorting, filtering, and editing.

Code

Usage

Specifications

Design tokens

Color

Component token	Element	Core token	Value
`rowSeparatorColor`	Separator	`color-grey-300`	#cccccc
`dataBackgroundColor`	Data grid	`color-white`	#ffffff
`dataFontColor`	Data grid	`color-black`	#000000
`headerBackgroundColor`	Header	`color-black`	#000000
`headerBackgroundColor`	Header	`color-purple-700`	#5f249f
`headerFontColor`	Header	`color-white`	#ffffff
`headerCheckboxBackgroundColorChecked`	Header checkbox	`color-white`	#ffffff
`headerCheckboxHoverBackgroundColorChecked`	Header checkbox:hover	`color-grey-200`	#e6e6e6
`headerCheckboxBorderColor`	Header checkbox	`color-white`	#ffffff
`headerCheckboxHoverBorderColor`	Header checkbox:hover	`color-white`	#ffffff
`headerCheckboxCheckColor`	Header checkbox	`color-purple-700`	#5f249f
`focusColor`	Data grid	`color-blue-600`	#0095ff
`scrollBarThumbColor`	Scroll bar	`color-grey-700`	#666666
`scrollBarTrackColor`	Scroll bar	`color-grey-300`	#cccccc
`actionIconColor`	Actions cell	`color-purple-700`	#5f249f
`disabledActionIconColor`	Actions cell	`color-grey-500`	#999999
`hoverActionIconColor`	Actions cell	`color-purple-700`	#5f249f
`focusActionIconColor`	Actions cell	`color-purple-700`	#5f249f
`activeActionIconColor`	Actions cell	`color-purple-700`	#5f249f
`actionBackgroundColor`	Actions cell	`color-transparent`	transparent
`disabledActionBackgroundColor`	Actions cell	`color-transparent`	transparent
`hoverActionBackgroundColor`	Actions cell	`color-grey-100`	#f2f2f2
`focusActionBorderColor`	Actions cell	`color-blue-600`	#0095ff
`activeActionBackgroundColor`	Actions cell	`color-grey-300`	#cccccc

Typography

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

Separator

Component token	Element	Core token	Value
`rowSeparatorThickness`	Separator	-	1px
`rowSeparatorStyle`	Separator	`border-style-solid`	solid

Spacing

Component token	Element	Core token	Value
`dataPaddingRight`	Data grid	`spacing-8`	0.5rem / 8px
`dataPaddingLeft`	Data grid	`spacing-8`	0.5rem / 8px
`headerPaddingRight`	Header	`spacing-8`	0.5rem / 8px
`headerPaddingLeft`	Header	`spacing-8`	0.5rem / 8px