Table

Tables provide structure and hierarchy for large sets of tabular data.

This is a Beta version of a Table component. It generates a table with selectable rows and has an option of bulk select of all rows.

This “table” is not a <table> element but a series of <div>’s styled in a way to give flexibility for future responsive and the ‘Bulk Select’ nature.

Attached to the Table component are a few components used to construct the widget:

  • Table.Header: A row of headers for the table.
  • Table.HeaderItem: A cell in the header row.
  • Table.Body: The body container for the main table data.
  • Table.Row: A row in the body of the table.
  • Table.RowItem: A cell in the body row.

Example

Alignment static

React API docs
Example

Alignment with children

React API docs
Example

Width with children

Width can be auto, flex-1, flex-2, flex-3 or use any unit eg: 150px, 2em, 25%. Without a width prop, flex-1 will be applied, making the cell equal in width.

Example

API

Table

Name Type Default Description
data array< object > [ ] Data to fill in the table. Items must have id property.
columns array< object{ key, description, align, valign } > Ordered list of columns with key, description and align properties.
selectedData array< string, number > [ ] Array of data item ids that are selected.
onRowSelect func(id, isSelected) - Called whenever a row is selected.
canSelectMultiple bool false Allows to select multiple rows and bulk select.
children array< TableHeader, TableBody > Use children to render Table directly instead of using data and columns.

Table.Header

Name Type Default Description
data array< object > [ ] Data to fill in the table. Items must have id property.
columns array< object{ key, description, align, valign } > [ ] Ordered list of columns with key, description and align properties.
selectedData array< string, number > [ ] Array of data item ids that are selected.
onRowSelect func(id, isSelected) - Called whenever a row is selected.
children array< TableHeaderItem > Use children to render TableHeader directly instead of using data and columns.

Table.HeaderItem

Name Type Default Description
item string The header text for this column. Using this will ignore children.
align ‘left’, ‘center’, ‘right’ ‘left’ The text alignment of the header text.
valign ‘top’, ‘middle’, ‘bottom’ ‘middle’ The vertical alignment of the header text.
children node Use children to render TableHeaderItem with custom content.
width ‘auto’, ‘flex-1’, ‘flex-2’, ‘flex-3 ‘flex-1’ The width for the cell, this effectively sets the column width.

Table.Body

Name Type Default Description
data array< object > [ ] Data to fill in the table. Items must have id property.
columns array< object{ key, description, align, valign } > [ ] Ordered list of columns with key, description and align properties.
selectedData array< string, number > [ ] Array of data item ids that are selected.
onRowSelect func(id, isSelected) - Called whenever a row is selected.
children array< TableRow > Use children to render TableBody directly instead of using data and columns.

Table.Row

Name Type Default Description
rowData object {} Data to fill in the table. Items must have id property.
columns array< object{ key, description, align, valign } > [ ] Ordered list of columns with key, description and align properties.
onRowSelect func(id, isSelected) - Called whenever a row is selected.
isSelected boolean false If true, will render this row as ‘selected’.
children array< TableRowItem > Use children to render TableRow directly instead of using rowData and columns.

Table.RowItem

Name Type Default Description
item string, number The value for this cell of data. Using this will ignore children.
align ‘left’, ‘center’, ‘right’ ‘left’ The text alignment of the value.
valign ‘top’, ‘middle’, ‘bottom’ ‘middle’ The vertical alignment of the value. text.
children node Use children to render TableRowItem with custom content.
width ‘auto’, ‘flex-1’, ‘flex-2’, ‘flex-3 ‘flex-1’ The width for the cell, this effectively sets the column width.

Used by

Team
Genesis