(v9) Select all rows of a remote table (include/exclude selection mode)

[JimKnoxx]

We have a remote table with server-side pagination. The server has 100,000 rows, and we load one page at a time.

We want "select all" to select all 100,000 rows. Today, the table selects only the loaded rows:

• toggleAllRowsSelected(true) reads the IDs from getPreGroupedRowModel().flatRows. These are only the loaded rows.
• getIsAllRowsSelected() checks only getFilteredRowModel().flatRows. When all loaded rows are selected, the header checkbox shows "all selected". But the server has more rows.
• When we load the next page, its rows are not selected. The header checkbox changes to "some selected", but the user did nothing.
• For 1,000,000 rows, rowSelection has 1,000,000 keys. We cannot send all these IDs to the server for a bulk action.

A fix in getIsAllRowsSelected() alone does not help. If it compares with rowCount, the header checkbox never shows "all selected" after a click.

Idea: an opt-in "exclude" selection mode. MUI X v8 has this as { type: 'include' | 'exclude', ids } (docs). The AG Grid server-side row model has selectAll and toggledNodes (docs).

• "Select all" sets the mode to "exclude" and clears the ID set.
• "Deselect all" sets the mode back to "include" and clears the ID set.
• In "exclude" mode, the ID set contains the exceptions. A row is selected when its ID is not in the set.
• In "exclude" mode, row.toggleSelected(false) adds the row ID to the set, and row.toggleSelected(true) removes it.
• Rows that the app loads later show as selected.
• The selected count is rowCount minus the number of exceptions.
• For a bulk action, the app sends the mode, the exceptions, and the current filter to the server.
• The mode is state, not an option. Only "select all", "deselect all", and a reset change it. A table option, for example manualRowSelection: true, only allows this behavior.

table.toggleAllRowsSelected(true)
table.state.rowSelectionMode === 'exclude'

table.getRow('7').toggleSelected(false)
table.state.rowSelection['7'] === true

table.getIsAllRowsSelected() === false
table.getIsSomeRowsSelected() === true
table.getSelectedRowCount() === 99_999

The default RowSelectionState shape does not change. A table without the opt-in works as before.

Related: #3513, #5929, #6039, #4781

[mohamadgarmabi]

+1 — we hit the same wall with server-paginated tables. For bulk actions, include/exclude is the only shape that scales.

A few edge cases worth settling in the design:

1. Filters change while in exclude mode. "All" means "all rows matching the filter at click time". If the filter changes afterwards, the app either has to reset to include mode or keep the filter snapshot. Resetting the mode on globalFilter / columnFilters change by default (like autoResetPageIndex) seems the safer default.
2. rowSelection flips meaning by mode. In the example, rowSelection['7'] === true means deselected. Custom code that does Object.keys(rowSelection) to collect selected IDs will silently do the wrong thing. A separate field (e.g. rowSelectionExceptions) would make that mistake harder.
3. Exceptions reach rowCount. If the user unchecks every row by hand, the count is 0 but the mode is still exclude. Normalizing back to include with an empty set keeps getIsSomeRowsSelected() honest.
4. Sub-rows. Should enableSubRowSelection apply to children that aren't loaded yet? Probably out of scope at first, but worth a line in the docs.

Until something lands, this works in userland today (with getRowId: r => r.id): keep the mode in your own state, derive rowSelection for the loaded rows, and handle the checkbox clicks yourself:

type Sel = { mode: 'include' | 'exclude'; ids: Set<string> }
const [sel, setSel] = useState<Sel>({ mode: 'include', ids: new Set() })

const rowSelection = useMemo(
  () => Object.fromEntries(
    data.map(r => [r.id, sel.mode === 'exclude' ? !sel.ids.has(r.id) : sel.ids.has(r.id)]),
  ),
  [data, sel],
)

const toggleRow = (id: string) =>
  setSel(s => {
    const ids = new Set(s.ids)
    ids.has(id) ? ids.delete(id) : ids.add(id)
    return { ...s, ids }
  })
const selectAll = () => setSel({ mode: 'exclude', ids: new Set() })
const clearAll = () => setSel({ mode: 'include', ids: new Set() })
const selectedCount = sel.mode === 'exclude' ? rowCount - sel.ids.size : sel.ids.size
// bulk action payload: { mode: sel.mode, ids: [...sel.ids], filters }

Rows loaded later pick up the right state automatically, because rowSelection is derived from sel.