From 6308f9818e9ed3fd3caadf5f005ba42cc2a2b4df Mon Sep 17 00:00:00 2001 From: Robb Hamilton Date: Tue, 5 May 2026 11:05:17 -0400 Subject: [PATCH 1/2] feat(Table): add indeterminate checkbox state support for select-all header Add support for indeterminate state to the Table component's select-all checkbox, following PatternFly's bulk selection design guidelines. The select-all checkbox now supports three states: - Unchecked: no items selected - Indeterminate: some items selected (shows dash/minus icon) - Checked: all items selected ## Changes - Add `isIndeterminate?: boolean` property to `ThSelectType` interface - Add `isIndeterminate?: boolean` to `IColumn` extraParams type - Update `Th` component to pass `isIndeterminate` to the selectable decorator - Update `selectable` decorator to pass indeterminate state to `SelectColumn` - Update `SelectColumn` to use PatternFly Checkbox's native indeterminate support (isChecked: null) - Add new `TableSelectableIndeterminate` example showcasing the feature ## Implementation The indeterminate state is implemented using the PatternFly Checkbox component's native support by setting `isChecked: null` when `isIndeterminate` is true. ## Usage ```typescript const areSomeReposSelected = selectedRepoNames.length > 0 && selectedRepoNames.length < selectableRepos.length; selectAllRepos(isSelecting), isSelected: areAllReposSelected, isIndeterminate: areSomeReposSelected }} aria-label="Row select" /> ``` Fixes #12404 Co-Authored-By: Claude Sonnet 4.5 --- .../src/components/Table/SelectColumn.tsx | 14 +- .../src/components/Table/TableTypes.tsx | 1 + .../react-table/src/components/Table/Th.tsx | 3 +- .../src/components/Table/base/types.tsx | 2 + .../src/components/Table/examples/Table.md | 8 ++ .../examples/TableSelectableIndeterminate.tsx | 128 ++++++++++++++++++ .../Table/utils/decorators/selectable.tsx | 3 +- 7 files changed, 156 insertions(+), 3 deletions(-) create mode 100644 packages/react-table/src/components/Table/examples/TableSelectableIndeterminate.tsx diff --git a/packages/react-table/src/components/Table/SelectColumn.tsx b/packages/react-table/src/components/Table/SelectColumn.tsx index 18f20efef34..08c5e835f8c 100644 --- a/packages/react-table/src/components/Table/SelectColumn.tsx +++ b/packages/react-table/src/components/Table/SelectColumn.tsx @@ -21,6 +21,8 @@ export interface SelectColumnProps { id?: string; /** name for the input element - required by Radio component */ name?: string; + /** Whether the checkbox should be in an indeterminate state */ + isIndeterminate?: boolean; } export const SelectColumn: React.FunctionComponent = ({ @@ -33,6 +35,7 @@ export const SelectColumn: React.FunctionComponent = ({ tooltipProps, id, name, + isIndeterminate, ...props }: SelectColumnProps) => { const inputRef = createRef(); @@ -41,6 +44,15 @@ export const SelectColumn: React.FunctionComponent = ({ onSelect && onSelect(event); }; + // PatternFly Checkbox supports indeterminate via isChecked: null + const checkboxProps = { + ...props, + id, + ref: inputRef, + onChange: handleChange, + ...(isIndeterminate && { isChecked: null }) + }; + const commonProps = { ...props, id, @@ -51,7 +63,7 @@ export const SelectColumn: React.FunctionComponent = ({ const content = ( {selectVariant === RowSelectVariant.checkbox ? ( - + ) : ( )} diff --git a/packages/react-table/src/components/Table/TableTypes.tsx b/packages/react-table/src/components/Table/TableTypes.tsx index 1704c795c69..994576f7040 100644 --- a/packages/react-table/src/components/Table/TableTypes.tsx +++ b/packages/react-table/src/components/Table/TableTypes.tsx @@ -107,6 +107,7 @@ export interface IColumn { allRowsSelected?: boolean; allRowsExpanded?: boolean; isHeaderSelectDisabled?: boolean; + isIndeterminate?: boolean; onFavorite?: OnFavorite; favoriteButtonProps?: ButtonProps; variant?: 'compact'; diff --git a/packages/react-table/src/components/Table/Th.tsx b/packages/react-table/src/components/Table/Th.tsx index af6431e59c9..8bbfb788117 100644 --- a/packages/react-table/src/components/Table/Th.tsx +++ b/packages/react-table/src/components/Table/Th.tsx @@ -158,7 +158,8 @@ const ThBase: React.FunctionComponent = ({ onSelect: select?.onSelect, selectVariant: 'checkbox', allRowsSelected: select.isSelected, - isHeaderSelectDisabled: !!select.isHeaderSelectDisabled + isHeaderSelectDisabled: !!select.isHeaderSelectDisabled, + isIndeterminate: select?.isIndeterminate } }, tooltip: tooltip as string, diff --git a/packages/react-table/src/components/Table/base/types.tsx b/packages/react-table/src/components/Table/base/types.tsx index bee426566f5..d60d430f823 100644 --- a/packages/react-table/src/components/Table/base/types.tsx +++ b/packages/react-table/src/components/Table/base/types.tsx @@ -180,6 +180,8 @@ export interface ThSelectType { onSelect?: OnSelect; /** Whether the cell is selected */ isSelected: boolean; + /** Whether the select checkbox should be in an indeterminate state (some items selected) */ + isIndeterminate?: boolean; /** Flag indicating the select checkbox in the th is disabled */ isHeaderSelectDisabled?: boolean; /** Whether to disable the selection */ diff --git a/packages/react-table/src/components/Table/examples/Table.md b/packages/react-table/src/components/Table/examples/Table.md index cc232178e2a..f0c8cbb18e3 100644 --- a/packages/react-table/src/components/Table/examples/Table.md +++ b/packages/react-table/src/components/Table/examples/Table.md @@ -158,6 +158,14 @@ checking checkboxes will check intermediate rows' checkboxes. ``` +### Selectable with indeterminate state + +This example demonstrates the indeterminate state support for the select-all checkbox. When some (but not all) rows are selected, the header checkbox displays a dash/minus icon to indicate partial selection. + +```ts file="TableSelectableIndeterminate.tsx" + +``` + ### Selectable radio input Similarly to the selectable example above, the radio buttons use the first column. The first header cell is empty, and each body row's first cell has radio button props. diff --git a/packages/react-table/src/components/Table/examples/TableSelectableIndeterminate.tsx b/packages/react-table/src/components/Table/examples/TableSelectableIndeterminate.tsx new file mode 100644 index 00000000000..8f31146b94a --- /dev/null +++ b/packages/react-table/src/components/Table/examples/TableSelectableIndeterminate.tsx @@ -0,0 +1,128 @@ +import { useEffect, useState } from 'react'; +import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; + +interface Repository { + name: string; + branches: string; + prs: string; + workspaces: string; + lastCommit: string; +} + +export const TableSelectableIndeterminate: React.FunctionComponent = () => { + // In real usage, this data would come from some external source like an API via props. + const repositories: Repository[] = [ + { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five' }, + { name: 'a', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' }, + { name: 'b', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' }, + { name: 'c', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' }, + { name: 'd', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' }, + { name: 'e', branches: 'two', prs: 'b', workspaces: 'four', lastCommit: 'five' } + ]; + + const columnNames = { + name: 'Repositories', + branches: 'Branches', + prs: 'Pull requests', + workspaces: 'Workspaces', + lastCommit: 'Last commit' + }; + + const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example + const selectableRepos = repositories.filter(isRepoSelectable); + + // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier. + // This is to prevent state from being based on row order index in case we later add sorting. + const [selectedRepoNames, setSelectedRepoNames] = useState([]); + const setRepoSelected = (repo: Repository, isSelecting = true) => + setSelectedRepoNames((prevSelected) => { + const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name); + return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames; + }); + const selectAllRepos = (isSelecting = true) => + setSelectedRepoNames(isSelecting ? selectableRepos.map((r) => r.name) : []); + const areAllReposSelected = selectedRepoNames.length === selectableRepos.length; + const areSomeReposSelected = selectedRepoNames.length > 0 && selectedRepoNames.length < selectableRepos.length; + const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name); + + // To allow shift+click to select/deselect multiple rows + const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState(null); + const [shifting, setShifting] = useState(false); + + const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => { + // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected + if (shifting && recentSelectedRowIndex !== null) { + const numberSelected = rowIndex - recentSelectedRowIndex; + const intermediateIndexes = + numberSelected > 0 + ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex) + : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex); + intermediateIndexes.forEach((index) => setRepoSelected(repositories[index], isSelecting)); + } else { + setRepoSelected(repo, isSelecting); + } + setRecentSelectedRowIndex(rowIndex); + }; + + useEffect(() => { + const onKeyDown = (e: KeyboardEvent) => { + if (e.key === 'Shift') { + setShifting(true); + } + }; + const onKeyUp = (e: KeyboardEvent) => { + if (e.key === 'Shift') { + setShifting(false); + } + }; + + document.addEventListener('keydown', onKeyDown); + document.addEventListener('keyup', onKeyUp); + + return () => { + document.removeEventListener('keydown', onKeyDown); + document.removeEventListener('keyup', onKeyUp); + }; + }, []); + + return ( + + + + + + + + + + + + {repositories.map((repo, rowIndex) => ( + + + + + + + + ))} + +
selectAllRepos(isSelecting), + isSelected: areAllReposSelected, + isIndeterminate: areSomeReposSelected + }} + aria-label="Row select" + /> + {columnNames.name}{columnNames.branches}{columnNames.prs}{columnNames.workspaces}{columnNames.lastCommit}
onSelectRepo(repo, rowIndex, isSelecting), + isSelected: isRepoSelected(repo), + isDisabled: !isRepoSelectable(repo) + }} + /> + {repo.name}{repo.branches}{repo.prs}{repo.workspaces}{repo.lastCommit}
+ ); +}; diff --git a/packages/react-table/src/components/Table/utils/decorators/selectable.tsx b/packages/react-table/src/components/Table/utils/decorators/selectable.tsx index 1b4137316bb..80f851bbc5e 100644 --- a/packages/react-table/src/components/Table/utils/decorators/selectable.tsx +++ b/packages/react-table/src/components/Table/utils/decorators/selectable.tsx @@ -9,7 +9,7 @@ export const selectable: ITransform = ( { rowIndex, columnIndex, rowData, column, property, tooltip }: IExtra ) => { const { - extraParams: { onSelect, selectVariant, allRowsSelected, isHeaderSelectDisabled } + extraParams: { onSelect, selectVariant, allRowsSelected, isHeaderSelectDisabled, isIndeterminate } } = column; const extraData = { rowIndex, @@ -70,6 +70,7 @@ export const selectable: ITransform = ( onSelect={selectClick} name={selectName} tooltip={tooltip} + isIndeterminate={rowId === -1 ? isIndeterminate : undefined} > {label as React.ReactNode} From a03fbd11b12245c12102eafba48c19abac719c4d Mon Sep 17 00:00:00 2001 From: Robb Hamilton Date: Fri, 8 May 2026 11:56:07 -0400 Subject: [PATCH 2/2] refactor(Table): address PR feedback for indeterminate checkbox - Refactor SelectColumn to reduce duplication by building checkboxProps from commonProps - Update example description to match PatternFly tone and emphasize accessibility - Add comprehensive unit tests for isIndeterminate prop in Th component Co-Authored-By: Claude Sonnet 4.5 --- .../src/components/Table/SelectColumn.tsx | 14 ++++------- .../components/Table/__tests__/Th.test.tsx | 23 +++++++++++++++++++ .../src/components/Table/examples/Table.md | 2 +- 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/packages/react-table/src/components/Table/SelectColumn.tsx b/packages/react-table/src/components/Table/SelectColumn.tsx index 08c5e835f8c..ee76dd7fa0d 100644 --- a/packages/react-table/src/components/Table/SelectColumn.tsx +++ b/packages/react-table/src/components/Table/SelectColumn.tsx @@ -44,15 +44,6 @@ export const SelectColumn: React.FunctionComponent = ({ onSelect && onSelect(event); }; - // PatternFly Checkbox supports indeterminate via isChecked: null - const checkboxProps = { - ...props, - id, - ref: inputRef, - onChange: handleChange, - ...(isIndeterminate && { isChecked: null }) - }; - const commonProps = { ...props, id, @@ -60,6 +51,11 @@ export const SelectColumn: React.FunctionComponent = ({ onChange: handleChange }; + const checkboxProps = { + ...commonProps, + ...(isIndeterminate && { isChecked: null }) + }; + const content = ( {selectVariant === RowSelectVariant.checkbox ? ( diff --git a/packages/react-table/src/components/Table/__tests__/Th.test.tsx b/packages/react-table/src/components/Table/__tests__/Th.test.tsx index 9e24f7f239e..01276ce909d 100644 --- a/packages/react-table/src/components/Table/__tests__/Th.test.tsx +++ b/packages/react-table/src/components/Table/__tests__/Th.test.tsx @@ -54,3 +54,26 @@ test('Additional content renders after children when additionalContent is passed expect(thChildren.item(0)?.textContent).toEqual('Test'); expect(thChildren.item(1)?.textContent).toEqual('Extra'); }); + +test('Renders checkbox without indeterminate state by default', () => { + render(); + + const checkbox = screen.getByRole('checkbox') as HTMLInputElement; + expect(checkbox).not.toBeChecked(); + expect(checkbox.indeterminate).toBe(false); +}); + +test('Renders checkbox with indeterminate state when isIndeterminate is true', () => { + render(); + + const checkbox = screen.getByRole('checkbox') as HTMLInputElement; + expect(checkbox.indeterminate).toBe(true); +}); + +test('Renders checked checkbox when isSelected is true and isIndeterminate is false', () => { + render(); + + const checkbox = screen.getByRole('checkbox') as HTMLInputElement; + expect(checkbox).toBeChecked(); + expect(checkbox.indeterminate).toBe(false); +}); diff --git a/packages/react-table/src/components/Table/examples/Table.md b/packages/react-table/src/components/Table/examples/Table.md index f0c8cbb18e3..ffecbe6d1d4 100644 --- a/packages/react-table/src/components/Table/examples/Table.md +++ b/packages/react-table/src/components/Table/examples/Table.md @@ -160,7 +160,7 @@ checking checkboxes will check intermediate rows' checkboxes. ### Selectable with indeterminate state -This example demonstrates the indeterminate state support for the select-all checkbox. When some (but not all) rows are selected, the header checkbox displays a dash/minus icon to indicate partial selection. +To indicate partial selection, use `isIndeterminate` on the header's `select` prop. When some (but not all) selectable rows are selected, the header checkbox will convey this information to assistive technologies and also display a dash instead of a checkmark. ```ts file="TableSelectableIndeterminate.tsx"