Skip to main content

​
Overview

The useHeaderRowSelection hook is used within custom header cell renderers to implement custom “select all” functionality. It provides access to the selection state across all rows and a callback to change the selection.

​
Signature

function useHeaderRowSelection(): {
  isIndeterminate: boolean;
  isRowSelected: boolean;
  onRowSelectionChange: (event: SelectHeaderRowEvent) => void;
}

​
Return Value

​
isIndeterminate
boolean
Whether some (but not all) rows are selected. Use this for the indeterminate state of a checkbox.
​
isRowSelected
boolean
Whether all rows are selected.
​
onRowSelectionChange
(event: SelectHeaderRowEvent) => void
Callback function to change the selection state of all rows.

​
SelectHeaderRowEvent Type

interface SelectHeaderRowEvent {
  checked: boolean;
}
​
checked
boolean
required
Whether all rows should be selected (true) or deselected (false).

​
Usage

This hook must be called within a custom header cell renderer. It’s commonly used with useLayoutEffect to handle the indeterminate state of checkboxes. 
import { useLayoutEffect, useRef } from 'react';
import { useHeaderRowSelection } from 'react-data-grid';

function CustomHeaderCell() {
  const { isIndeterminate, isRowSelected, onRowSelectionChange } = useHeaderRowSelection();
  const checkboxRef = useRef<HTMLInputElement>(null);

  useLayoutEffect(() => {
    if (checkboxRef.current) {
      checkboxRef.current.indeterminate = isIndeterminate && !isRowSelected;
    }
  }, [isIndeterminate, isRowSelected]);

  return (
    <input
      ref={checkboxRef}
      type="checkbox"
      checked={isRowSelected}
      onChange={(event) => onRowSelectionChange({ checked: event.target.checked })}
    />
  );
}

​
Error Handling

The hook will throw an error if used outside of a header cell renderer: 
Error: useHeaderRowSelection must be used within renderHeaderCell

Build docs developers (and LLMs) love

Get started for freeTalk to us