A component to render tabular data (DEPRECATED).

Usage no npm install needed!

<script type="module">
  import commercetoolsUikitTable from 'https://cdn.skypack.dev/@commercetools-uikit/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


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



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.


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.