This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

Table

Use tables to present large amounts of data, and data which has multiple properties attached to it.

Table of contents

How to use Table

  • Make sure Tables span the full width of the container they're in
  • Make sure a table has a header describing the content of its respective columns
  • Ordered columns by relevance from left to right. Images, if present, have a higher priority, and should be placed in the first column. Checkboxes naturally have the highest priority.

Code examples

Content recommendations

  • Keep headers short
  • Headers should be informative and descriptive
  • Content in the table should be concise and scannable

Props

Table

NameRequiredDefaultTypeDescription
layoutinline
"inline"
"embedded"
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdcf-ui-tablestringA [data-test-id] attribute used for testing purposes

Table.Head

NameRequiredDefaultTypeDescription
isStickyfalse
false
true
offsetTop
string
number
childrenrequiredReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdcf-ui-table-headstringA [data-test-id] attribute used for testing purposes

Table.Body

NameRequiredDefaultTypeDescription
childrenrequiredReactElement<any, string | JSXElementConstructor<any>> | ReactElement<any, string | JSXElementConstructor<any>>[]
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdcf-ui-table-bodystringA [data-test-id] attribute used for testing purposes

Table.Row

NameRequiredDefaultTypeDescription
isSelectedfalse
false
true
childrenrequiredReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdcf-ui-table-rowstringA [data-test-id] attribute used for testing purposes

Table.Cell

NameRequiredDefaultTypeDescription
alignleft
"left"
"center"
"right"
sortingfalse as TableCellSortingTableCellSorting
width
string
number
childrenReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdcf-ui-table-cellstringA [data-test-id] attribute used for testing purposes