feat(Table): add indeterminate checkbox state support for select-all header

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<SelectColumnProps> = ({
@@ -33,6 +35,7 @@ export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
   tooltipProps,
   id,
   name,
+  isIndeterminate,
   ...props
 }: SelectColumnProps) => {
   const inputRef = createRef<any>();
@@ -41,6 +44,15 @@ export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
     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<SelectColumnProps> = ({
   const content = (
     <Fragment>
       {selectVariant === RowSelectVariant.checkbox ? (
-        <Checkbox {...commonProps} />
+        <Checkbox {...checkboxProps} />
       ) : (
         <Radio {...commonProps} name={name} />
       )}

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';

packages/react-table/src/components/Table/Th.tsx

@@ -158,7 +158,8 @@ const ThBase: React.FunctionComponent<ThProps> = ({
             onSelect: select?.onSelect,
             selectVariant: 'checkbox',
             allRowsSelected: select.isSelected,
-            isHeaderSelectDisabled: !!select.isHeaderSelectDisabled
+            isHeaderSelectDisabled: !!select.isHeaderSelectDisabled,
+            isIndeterminate: select?.isIndeterminate
           }
         },
         tooltip: tooltip as string,

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 */

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.

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<string[]>([]);
+  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<number | null>(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 (
+    <Table aria-label="Selectable table with indeterminate state">
+      <Thead>
+        <Tr>
+          <Th
+            select={{
+              onSelect: (_event, isSelecting) => selectAllRepos(isSelecting),
+              isSelected: areAllReposSelected,
+              isIndeterminate: areSomeReposSelected
+            }}
+            aria-label="Row select"
+          />
+          <Th>{columnNames.name}</Th>
+          <Th>{columnNames.branches}</Th>
+          <Th>{columnNames.prs}</Th>
+          <Th>{columnNames.workspaces}</Th>
+          <Th>{columnNames.lastCommit}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {repositories.map((repo, rowIndex) => (
+          <Tr key={repo.name}>
+            <Td
+              select={{
+                rowIndex,
+                onSelect: (_event, isSelecting) => onSelectRepo(repo, rowIndex, isSelecting),
+                isSelected: isRepoSelected(repo),
+                isDisabled: !isRepoSelectable(repo)
+              }}
+            />
+            <Td dataLabel={columnNames.name}>{repo.name}</Td>
+            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>
+            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>
+            <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>
+            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  );
+};

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}
       </SelectColumn>