Inconsistent filtering functionality

[danny-zegel-zocdoc]

When using client side filtering I need a way to both toggle row selections and check the row selections for filtered rows but table.getIsSomeRowsSelected() & table.getIsAllRowsSelected() both consider all rows in the table ignoring filtering while table.toggleAllRowsSelected() toggles only rows that are filtered in. This is both inconsistent and lacks the capabilities I need.

Am I using the following, any help would be appreciated.

    const table = useReactTable({
        data,
        columns: tableColumns,
        state: {
            sorting,
            pagination: {
                pageIndex,
                pageSize: currentPageSize,
            },
            rowSelection,
        },
        onSortingChange: handleSortingChange,
        onPaginationChange: handlePaginationChange,
        getCoreRowModel: getCoreRowModel(),
        getExpandedRowModel: getExpandedRowModel(),
        getSortedRowModel: getSortedRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        getFilteredRowModel: getFilteredRowModel(),
        filterFromLeafRows: true,
        enableSorting: true,
        manualSorting: enableServerSideSorting,
        manualPagination: enableServerSidePagination,
        onRowSelectionChange: setRowSelection,
        enableRowSelection: (row) =>
            !!row.original && !row.original.isDisabled && !row.subRows?.length,
        getSubRows: (originalRow) => originalRow?.getSubRows?.(),
        getRowCanExpand: (row) => true,
        enableSubRowSelection: enableSubRows,
        getRowId: (row) => row.rowId,
        autoResetPageIndex: true,
        paginateExpandedRows: false,
    });

[amasen02]

The reason for this behavior is that TanStack Table differentiates between the global dataset selection state and the filtered subset selection state:

• table.toggleAllRowsSelected() operates on table.getFilteredRowModel().rows by design (it only checks/unchecks rows visible under the current filter).
• In contrast, table.getIsAllRowsSelected() and table.getIsSomeRowsSelected() calculate against table.getPreFilteredRowModel().flatRows (the entire underlying dataset). If 100 rows exist in total and filtering narrows it to 5 rows which are all checked, table.getIsAllRowsSelected() returns false because 95 unfiltered rows remain unselected.

---

Solution: Check Selection Against getFilteredRowModel

To check selection state strictly for the filtered rows, derive the state from getFilteredRowModel():

// 1. All rows matching current filter criteria:
const filteredRows = table.getFilteredRowModel().rows;

// 2. Filter out disabled/unselectable rows if using custom enableRowSelection:
const selectableFilteredRows = filteredRows.filter((row) => row.getCanSelect());

// 3. Status for the header checkbox:
const isAllFilteredRowsSelected =
  selectableFilteredRows.length > 0 &&
  selectableFilteredRows.every((row) => row.getIsSelected());

const isSomeFilteredRowsSelected =
  selectableFilteredRows.some((row) => row.getIsSelected()) &&
  !isAllFilteredRowsSelected;

---

Alternative: Using getFilteredSelectedRowModel()

If you have getFilteredRowModel() registered, TanStack Table also provides getFilteredSelectedRowModel() which returns only rows that are both filtered-in and selected:

const filteredCount = table.getFilteredRowModel().rows.length;
const selectedFilteredCount = table.getFilteredSelectedRowModel().rows.length;

const isAllFilteredRowsSelected =
  filteredCount > 0 && selectedFilteredCount === filteredCount;

const isSomeFilteredRowsSelected =
  selectedFilteredCount > 0 && !isAllFilteredRowsSelected;

---

Header Checkbox Implementation

You can drop these derived values directly into an indeterminate header checkbox:

<input
  type="checkbox"
  checked={isAllFilteredRowsSelected}
  ref={(el) => {
    if (el) {
      el.indeterminate = isSomeFilteredRowsSelected;
    }
  }}
  onChange={() => {
    // If all are selected, uncheck all filtered rows; otherwise check them all
    table.toggleAllRowsSelected(!isAllFilteredRowsSelected);
  }}
/>

This aligns the header checkbox indeterminate / checked state 1:1 with the filtered rows currently in view.