diff --git a/examples/react/row-selection/src/main.tsx b/examples/react/row-selection/src/main.tsx index 05a22ca29e..8ba07ec6ff 100644 --- a/examples/react/row-selection/src/main.tsx +++ b/examples/react/row-selection/src/main.tsx @@ -30,7 +30,7 @@ function App() { @@ -110,8 +110,8 @@ function App() { state: { rowSelection, }, - enableRowSelection: true, //enable row selection for all rows - // enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row + // enableRowSelection: true, //enable row selection for all rows + enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row onRowSelectionChange: setRowSelection, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), @@ -180,7 +180,7 @@ function App() { @@ -344,9 +344,9 @@ function IndeterminateCheckbox({ React.useEffect(() => { if (typeof indeterminate === 'boolean') { - ref.current.indeterminate = !rest.checked && indeterminate + ref.current.indeterminate = indeterminate } - }, [ref, indeterminate]) + }, [ref, indeterminate, rest.checked]) return ( @@ -118,7 +118,7 @@ export interface RowSelectionInstance { * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#getisallpagerowsselected) * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-selection) */ - getIsAllPageRowsSelected: () => boolean + getIsAllPageRowsSelected: (ignoreCanSelect?: boolean) => boolean /** * Returns whether or not all rows in the table are selected. * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#getisallrowsselected) @@ -130,7 +130,7 @@ export interface RowSelectionInstance { * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#getissomepagerowsselected) * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-selection) */ - getIsSomePageRowsSelected: () => boolean + getIsSomePageRowsSelected: (ignoreCanSelect?: boolean) => boolean /** * Returns whether or not any rows in the table are selected. * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#getissomerowsselected) @@ -178,7 +178,10 @@ export interface RowSelectionInstance { * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#toggleallpagerowsselected) * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-selection) */ - toggleAllPageRowsSelected: (value?: boolean) => void + toggleAllPageRowsSelected: ( + value?: boolean, + ignoreCanSelect?: boolean + ) => void /** * Selects/deselects all rows in the table. * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#toggleallrowsselected) @@ -238,6 +241,9 @@ export const RowSelection: TableFeature = { }) } else { preGroupedFlatRows.forEach(row => { + if (!row.getCanSelect()) { + return + } delete rowSelection[row.id] }) } @@ -245,15 +251,14 @@ export const RowSelection: TableFeature = { return rowSelection }) } - table.toggleAllPageRowsSelected = value => + table.toggleAllPageRowsSelected = (value, ignoreCanSelect) => table.setRowSelection(old => { const resolvedValue = typeof value !== 'undefined' ? value - : !table.getIsAllPageRowsSelected() + : !table.getIsAllPageRowsSelected(ignoreCanSelect) const rowSelection: RowSelectionState = { ...old } - table.getRowModel().rows.forEach(row => { mutateRowIsSelected(rowSelection, row.id, resolvedValue, true, table) }) @@ -405,17 +410,20 @@ export const RowSelection: TableFeature = { return isAllRowsSelected } - table.getIsAllPageRowsSelected = () => { - const paginationFlatRows = table - .getPaginationRowModel() - .flatRows.filter(row => row.getCanSelect()) + table.getIsAllPageRowsSelected = (ignoreCanSelect?: boolean) => { + const paginationFlatRows = table.getPaginationRowModel().flatRows + + const filterPaginationFlatRows = ignoreCanSelect + ? paginationFlatRows + : paginationFlatRows.filter(row => row.getCanSelect()) + const { rowSelection } = table.getState() - let isAllPageRowsSelected = !!paginationFlatRows.length + let isAllPageRowsSelected = !!filterPaginationFlatRows.length if ( isAllPageRowsSelected && - paginationFlatRows.some(row => !rowSelection[row.id]) + filterPaginationFlatRows.some(row => !rowSelection[row.id]) ) { isAllPageRowsSelected = false } @@ -433,13 +441,25 @@ export const RowSelection: TableFeature = { ) } - table.getIsSomePageRowsSelected = () => { + table.getIsSomePageRowsSelected = (ignoreCanSelect?: boolean) => { const paginationFlatRows = table.getPaginationRowModel().flatRows - return table.getIsAllPageRowsSelected() + + const getIsSomeSelectedByCondition = () => { + return ignoreCanSelect + ? paginationFlatRows.some( + d => d.getIsSelected() || d.getIsSomeSelected() + ) && + paginationFlatRows.some( + d => !d.getIsSelected() || !d.getIsSomeSelected() + ) + : paginationFlatRows + .filter(row => row.getCanSelect()) + .some(d => d.getIsSelected() || d.getIsSomeSelected()) + } + + return table.getIsAllPageRowsSelected(ignoreCanSelect) ? false - : paginationFlatRows - .filter(row => row.getCanSelect()) - .some(d => d.getIsSelected() || d.getIsSomeSelected()) + : getIsSomeSelectedByCondition() } table.getToggleAllRowsSelectedHandler = () => { @@ -552,14 +572,16 @@ const mutateRowIsSelected = ( // !isGrouped || // (isGrouped && table.options.enableGroupingRowSelection) // ) { + + const canSelect = row.getCanSelect() if (value) { if (!row.getCanMultiSelect()) { Object.keys(selectedRowIds).forEach(key => delete selectedRowIds[key]) } - if (row.getCanSelect()) { + if (canSelect) { selectedRowIds[id] = true } - } else { + } else if (canSelect) { delete selectedRowIds[id] } // }