1

I have a table built on react table v7 with pagination enabled. I'd like to display the indeterminate icon in my header (select all) checkbox when only some of the rows on a page are selected.

enter image description here

In order to achieve this, I can compare the number of selected rows to the number of rows on the page. Is there a way to pass the number of rows on the page into the react table column header definition?

Here is a minimal reproducible example of my column header definition for the header checkbox cell. Irrelevant to the question, but to be complete with my description here, the Checkbox component is from the Material UI library.

        Header: (cell) => {
            return (
                <Checkbox
                    color="default"
                    onClick={(e) => handleAllCheckbox(e, cell?.filteredRows)}
                    checked={checked.allLanes}
                    indeterminate={
                        checked.selectedLane.length > 0 &&
                        checked.selectedLane.length !== rowsOnPage
                    }
                />
            );
        },
GNG
  • 1,341
  • 2
  • 23
  • 50

0 Answers0