Table

Note: This component will soon be deprecated in favour of DataTable, and it is encouraged to use it instead of this one.

Shows tabular data

Usage

import Table from '@commercetools-uikit/table';

<Table
  columns={columns}
  rowCount={this.state.rows.length}
  itemRenderer={this.renderItem}
  onRowClick={this.handleRowClick}
  shouldFillRemainingVerticalSpace={true}
  items={this.state.rows}
/>;

Properties

Props	Type	Required	Values	Default	Description
shouldFillRemainingVerticalSpace	boolean	✅	-	false	Sets how the table's height should behave. If set to true, it will make the table fill the remaining space of the page (if the screen is big for example).
itemRenderer	func	✅	-	-	A function that should return each cell's content to be rendered
rowCount	number	✅	-	-	The total number of rows that should displayed in the table
items	object	✅	-	-	Used to force rerender the table in case the data changes (sorting, hovering etc)
defaultHeight	number	✅	-	768	The default height of the table. If the table's contents are taller than this height, a vertical scrollbar will be shown. If the tables contents are smaller than this number, the height will be ignored. If shouldFillRemainingVerticalSpace is set to true, this prop will be ignored.
onRowClick	func	-	-	-	Function that is called when the user clicks a row. Should implement the following interface: (event: object, rowIndex: number): void
onSortChange	func	-	-	-	Function that is called when a sortable column's header is clicked. Required if you set isSortable on at least on column. Should implement the following interface: (columnKey: string, sortDirection: string): void
scrollToRow	number	-	-	-	Number of the row that should be scrolled into view within the table
onScroll	func	-	-	-	Function that is called whenever the user scrolls the list
sortBy	string	-	-	-	The key of the column that the data currently sorted by. Only if this prop is provided you will see the corresponding header show the sort indication and direction
sortDirection	string	-	[ASC, DESC]	-	The direction in which sortBy is applied
registerMeasurementCache	func	-	-	-	Function that will be called before the content is measured. As the first param it gets an object with three methods that can be used to reset the cell measurements cache: resetMeasurements: Use this function to clear cached measurements, which results in all cells being remeasured. resetMeasurementForColumn(index): Use this function to clear cached measurements for specific column. All cells in this column will be remeasured. resetMeasurementForRow(index): Use this function to clear cached measurements for a specific row. All cells in this row will be remeasured. Use this functionality to tell the table if your content has changed it's size, so that the table will not read the cell's dimensions from the internal cache, but remeasure the cell's dimensions. Should implement the following interface: (resetters: object): void
tableClassName	string	-	-	-	custom styles to be passed to the table wrapper
columns	array of object	✅	-	-	To see what object should be provided, look at the table below
registerMultiGrid	func	-	-	-	Function that will be called when the component is mounted. As the first param it gets a reference to the inner MultiGrid. From this reference the function recomputeGridSize() can be called from the parent. Use this function to recalculate the size of the cells on the fly. ⚠️IMPORTANT: The use is not recommended for scrollable tables and/or where the items load is huge, as it would cause performance issues.

Columns

Should be an array of objects describing the table's columns

Props	Type	Required	Values	Default	Description
key	string	✅	-	-	The unique key of the columns that is used to identify your data
align	string	✅	['left', 'center', 'right']	-	The horizontal alignment of the table column content
label	number	-	-	-	The label of the column that will be shown in the column header
isSortable	bool	-	-	-	Will display a sortable header for this column, call the onSortChange callback when the user clicks in this header and respond to sortBy and sortDirection changes.
getLabel	number	-	-	-	Escape-hatch you can use when you have a more sophisticated or custom header that doesn't follow the standard table header styling—like different padding or background color
isFixed	bool	-	-	false	Indicates whether the column should be fixed and stick to the left side so that the other content is scrolled below it.
flexGrow	number	-	-	-	The grow factor relative to other columns. Basically, take any available extra width and distribute it proportionally according to all columns' flexGrow values.
className	string	-	-	-	Custom class that is added to all cell's container of this column
headerClassName	string	-	-	-	Custom class that is added to the header's cell container
classNameGetter	func	-	-	-	Just like className but allows you to add a custom cell class per row. Signature: ({ rowIndex: number, columnKey: string, height: number, width: number }) => string
onClick	func	-	-	-	Function that is called when the user clicks a cell in this column. Only use this if you want to have a column specific behaviour. Most of the times you will probably use onRowClick instead. For styling the cell on :hover or :active use the className prop. Should implement the following interface: ({ args.: number, columnKey: number }): void

Ideas for improvements

• don't render padding inside cells in the table to enable places like the master variant cell to have a custom cell rendering without needing to pass custom classes to the table
• ensure unique column keys
• use the items prop to calculate the rowCount
• rename ASC and DESC to asc and desc to be consistent with the SDK
• validate that sortBy is one of the column keys
• make shouldFillRemainingVerticalSpace the default and replace it with shouldAvoidFillingRemainingSpace
• introduce a declarative way of stretching the table to fit its container width like a shouldFillRemainingHorizontalSpace prop.