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.