TableCell

TableCell is one cell of a TableRow: a fixed-height box that sits in the column the table's grid gives it.

The Table README describes it in full.

Props

Property	Type	Description
className?	stringundefined	Class applied to the cell after the component's own.
hasAccess?	booleanundefined	Shows the child marked table-container_row-checkbox in place of the child marked table-container_element while the pointer is over the cell. Default: false.
checked?	booleanundefined	Shows the child marked table-container_row-checkbox in place of the child marked table-container_element all the time. Default: false.
forwardedRef?	ForwardedRef<HTMLDivElement> | undefined	Ref of the cell element.
style?	CSSPropertiesundefined	Inline styles applied to the cell.
children?	ReactNode	Content of the cell: text or elements.
value?	stringundefined	Written onto the cell as a value attribute, which drag and drop reads to identify the item.
dataTestId?	stringundefined	Value of the cell's data-testid attribute. Default: table-cell.
documentTitle?	stringundefined	Written onto the cell as a data-document-title attribute.

Stories

Default

A cell holding plain text, the most common case; change any other prop live in the Controls panel below.

With Element

An avatar that turns into a checkbox when the pointer is over the cell, so a row can be picked without a separate checkbox column (hasAccess). Hover the cell to see the swap.

With Element Checked

Once the row is selected the checkbox stays in place of the avatar even without the pointer over it (checked).

With Element No Access

Without hasAccess the cell keeps the avatar on hover and never shows the checkbox, for a row the user may not select.