TableGroupMenu

TableGroupMenu is the toolbar that takes the place of the table header while rows are selected, with a select-all checkbox and the actions that apply to the selection.

The Table README describes it in full.

Props

Property	Type	Description
isChecked	boolean	Ticks the select-all checkbox.
isIndeterminate	boolean	Draws the select-all checkbox partly ticked, for a selection that covers some rows but not all.
headerMenu	TGroupMenuItem[]	The action buttons, in order; an entry whose disabled is set is left out.
checkboxOptions?	ReactElement<{ children?: ReactNode; }, string | JSXElementConstructor<any>> | undefined	Element whose children become the options of the menu the arrow after the checkbox opens.
onClick?	(() => void) | undefined	Called on a click anywhere in the toolbar.
onChange	(isChecked: boolean) => void	Called with the new state when the select-all checkbox is clicked.
checkboxMargin?	stringundefined	Space before the checkbox or the label as a CSS length, such as 12px; tablets and phones always use 24px. Default: 28px.
withoutInfoPanelToggler	boolean	Leaves out the info panel button at the end.
isInfoPanelVisible?	booleanundefined	Draws the info panel button in the accent colour on a round background. Default: false.
isMobileView?	booleanundefined	Opens the selection menu and the action menus in their phone form. Default: false.
isBlocked?	booleanundefined	Greys every action button out and ignores clicks on them. Default: false.
toggleInfoPanel?	(() => void) | undefined	Called when the info panel button is clicked.
withComboBox?	booleanundefined	Shows the arrow after the checkbox that opens checkboxOptions. Default: true.
headerLabel?	stringundefined	Text shown in place of the select-all checkbox.
isCloseable?	booleanundefined	Adds a cross before the info panel button; it comes together with onCloseClick. Default: false.
onCloseClick?	(() => void) | undefined	Called when the cross is clicked.

Stories

Default

The toolbar a user sees after selecting rows, with the actions that apply to them; change any other prop live in the Controls panel below.

Checked

Every row is selected, so the checkbox is ticked and a click on it clears the selection (isChecked).

Indeterminate

Some rows but not all are selected, so the checkbox is partly ticked and a click on it selects the rest (isIndeterminate).

With Header Label

A text in place of the checkbox, for a toolbar that acts on something other than a list of rows the user can select all of (headerLabel).

Closeable

A cross before the info panel button, for a toolbar the user can dismiss without clearing the selection by hand (isCloseable, onCloseClick).

Blocked

Every action greyed out and ignoring clicks while an operation on the selection is still running (isBlocked); the checkbox stays usable.

Info Panel Open

While the info panel is open, its button at the end is drawn in the accent colour on a round background, so the user sees that a click closes the panel (isInfoPanelVisible).

Right To Left

In a right-to-left interface the checkbox moves to the right edge, the actions follow it leftwards and the info panel button sits at the left edge with its icon mirrored.

Css Customization

The variable set on a wrapper -- it is listed under CSS variables in the Table README.