9D: Cross-page select-all with inverted selection model

In backend modes, clicking select-all now sets a selectAllRows flag
instead of enumerating all row IDs (which aren't all loaded). Individual
deselections after select-all are tracked in a deselectedRowIds set.

The inverted state is resolved transparently at API boundaries:
- Shiny getReactableState('selected') resolves to an integer vector
  using the self-contained rowCount in the inverted payload
- onStateChange/stateInfo.selected reports visible page's selections
- Checkbox UI shows correct checked/indeterminate state

Client-side tables (no backend) keep existing behavior unchanged.

Known issue: per-row selections in backend mode only report visible
page's selected indices to Shiny, not the full cross-page set.

Author: glin

R/shiny.R

@@ -296,7 +296,14 @@ getReactableState <- function(outputId, name = NULL, session = NULL) {
 
   getState <- function(outputId, name) {
     # NOTE: input IDs must always come first to work with Shiny modules
-    session$input[[sprintf("%s__reactable__%s", outputId, name)]]
+    value <- session$input[[sprintf("%s__reactable__%s", outputId, name)]]
+    # Resolve inverted selection (selectAll mode) to a concrete integer vector.
+    # The inverted payload includes rowCount so it's self-contained.
+    if (name == "selected" && is.list(value) && isTRUE(value$selectAll)) {
+      deselected <- as.integer(unlist(value$deselected))
+      value <- setdiff(seq_len(value$rowCount), deselected)
+    }
+    value
   }
 
   props <- c("page", "pageSize", "pages", "sorted", "selected")

srcjs/Reactable.js

@@ -1384,14 +1384,25 @@ function Table({
 
   const rowsById = instance.preFilteredRowsById || instance.rowsById
   const selectedRowIndexes = React.useMemo(() => {
+    if (state.selectAllRows) {
+      // Inverted mode: all non-grouped rows are selected unless in deselectedRowIds.
+      // For backend mode, rowsById only has current page's rows, so this returns
+      // only the visible selected indices. Full resolution for Shiny happens separately.
+      return Object.values(rowsById).reduce((indexes, row) => {
+        if (!row.isGrouped && !state.deselectedRowIds[row.id]) {
+          indexes.push(row.index)
+        }
+        return indexes
+      }, [])
+    }
     return Object.keys(state.selectedRowIds).reduce((indexes, id) => {
       const row = rowsById[id]
       if (row) {
         indexes.push(row.index)
       }
       return indexes
     }, [])
-  }, [state.selectedRowIds, rowsById])
+  }, [state.selectedRowIds, state.selectAllRows, state.deselectedRowIds, rowsById])
 
   // Update Shiny on selected row changes (deprecated in v0.2.0)
   React.useEffect(() => {
@@ -2260,28 +2271,41 @@ function Table({
       sorted[sortInfo.id] = sortInfo.desc ? 'desc' : 'asc'
     }
 
+    // For inverted selection (select-all active), send a self-contained inverted
+    // representation so R can resolve it without needing separate state storage.
+    let selected
+    if (state.selectAllRows) {
+      // Send deselected row indices (0-based __state.id values converted to 1-based R indices)
+      const deselectedIndexes = Object.keys(state.deselectedRowIds).map(id => Number(id) + 1)
+      selected = { selectAll: true, deselected: deselectedIndexes, rowCount: serverRowCount }
+    } else {
+      selected = selectedIndexes
+    }
+
     // NOTE: any object arrays will be simplified into vectors by jsonlite by default. Avoid sending
     // arrays without transforming them first, or adding a custom input type and input handler.
-    const state = {
+    const shinyState = {
       page: page,
       pageSize: stateInfo.pageSize,
       pages: stateInfo.pages,
       sorted: sorted,
-      selected: selectedIndexes
+      selected: selected
     }
     // Shiny.onInputChange has built-in debouncing, so it's not strictly necessary to
     // debounce rapid state changes here.
-    Object.keys(state).forEach(prop => {
+    Object.keys(shinyState).forEach(prop => {
       // NOTE: output IDs must always come first to work with Shiny modules
-      window.Shiny.onInputChange(`${outputId}__reactable__${prop}`, state[prop])
+      window.Shiny.onInputChange(`${outputId}__reactable__${prop}`, shinyState[prop])
     })
   }, [
     nested,
     stateInfo.page,
     stateInfo.pageSize,
     stateInfo.pages,
     stateInfo.sorted,
-    stateInfo.selected
+    stateInfo.selected,
+    state.selectAllRows,
+    state.deselectedRowIds
   ])
 
   // Getter for the latest page count

srcjs/__tests__/DuckDB.test.js

@@ -980,6 +980,168 @@ describe('DuckDB backend', () => {
     const page1Checkboxes = getSelectRowCheckboxes(container)
     expect(page1Checkboxes[1].checked).toBe(true)
   })
+
+  it('select-all selects rows across all pages', async () => {
+    const mockBackend = createMockBackend(10)
+
+    const firstPageData = {
+      a: [1, 2, 3, 4, 5],
+      b: ['row1', 'row2', 'row3', 'row4', 'row5']
+    }
+
+    const { container } = render(
+      <Reactable
+        data={firstPageData}
+        columns={baseColumns}
+        backend="duckdb"
+        arrowData="mock-base64-arrow-data"
+        defaultPageSize={5}
+        serverRowCount={10}
+        serverMaxRowCount={10}
+        selection="multiple"
+      />
+    )
+
+    await waitFor(() => {
+      expect(mockBackend.init).toHaveBeenCalled()
+    })
+
+    // Click select-all checkbox (first checkbox in the header)
+    const checkboxes = getSelectRowCheckboxes(container)
+    const selectAllCheckbox = checkboxes[0]
+    fireEvent.click(selectAllCheckbox)
+
+    // All rows on current page should be selected
+    expect(selectAllCheckbox.checked).toBe(true)
+    for (let i = 1; i <= 5; i++) {
+      expect(checkboxes[i].checked).toBe(true)
+    }
+
+    // Navigate to page 2
+    await act(async () => {
+      fireEvent.click(getNextButton(container))
+    })
+
+    await waitFor(() => {
+      expect(mockBackend.query).toHaveBeenCalledWith(expect.objectContaining({ pageIndex: 1 }))
+    })
+
+    // Rows on page 2 should also be selected (cross-page select-all)
+    const page2Checkboxes = getSelectRowCheckboxes(container)
+    expect(page2Checkboxes[0].checked).toBe(true) // select-all still checked
+    for (let i = 1; i <= 5; i++) {
+      expect(page2Checkboxes[i].checked).toBe(true)
+    }
+  })
+
+  it('deselecting a row after select-all uses inverted model', async () => {
+    const mockBackend = createMockBackend(10)
+
+    const firstPageData = {
+      a: [1, 2, 3, 4, 5],
+      b: ['row1', 'row2', 'row3', 'row4', 'row5']
+    }
+
+    const { container } = render(
+      <Reactable
+        data={firstPageData}
+        columns={baseColumns}
+        backend="duckdb"
+        arrowData="mock-base64-arrow-data"
+        defaultPageSize={5}
+        serverRowCount={10}
+        serverMaxRowCount={10}
+        selection="multiple"
+      />
+    )
+
+    await waitFor(() => {
+      expect(mockBackend.init).toHaveBeenCalled()
+    })
+
+    // Select all
+    const checkboxes = getSelectRowCheckboxes(container)
+    fireEvent.click(checkboxes[0])
+    expect(checkboxes[0].checked).toBe(true)
+
+    // Deselect the first row
+    fireEvent.click(checkboxes[1])
+    expect(checkboxes[1].checked).toBe(false)
+
+    // Select-all checkbox should now be indeterminate (not checked, not unchecked)
+    expect(checkboxes[0].checked).toBe(false)
+
+    // Other rows should still be selected
+    for (let i = 2; i <= 5; i++) {
+      expect(checkboxes[i].checked).toBe(true)
+    }
+
+    // Navigate to page 2 - rows should still be selected
+    await act(async () => {
+      fireEvent.click(getNextButton(container))
+    })
+
+    await waitFor(() => {
+      expect(mockBackend.query).toHaveBeenCalledWith(expect.objectContaining({ pageIndex: 1 }))
+    })
+
+    const page2Checkboxes = getSelectRowCheckboxes(container)
+    for (let i = 1; i <= 5; i++) {
+      expect(page2Checkboxes[i].checked).toBe(true)
+    }
+  })
+
+  it('deselect-all after select-all clears all selections', async () => {
+    const mockBackend = createMockBackend(10)
+
+    const firstPageData = {
+      a: [1, 2, 3, 4, 5],
+      b: ['row1', 'row2', 'row3', 'row4', 'row5']
+    }
+
+    const { container } = render(
+      <Reactable
+        data={firstPageData}
+        columns={baseColumns}
+        backend="duckdb"
+        arrowData="mock-base64-arrow-data"
+        defaultPageSize={5}
+        serverRowCount={10}
+        serverMaxRowCount={10}
+        selection="multiple"
+      />
+    )
+
+    await waitFor(() => {
+      expect(mockBackend.init).toHaveBeenCalled()
+    })
+
+    // Select all, then deselect all
+    const checkboxes = getSelectRowCheckboxes(container)
+    fireEvent.click(checkboxes[0]) // select all
+    expect(checkboxes[0].checked).toBe(true)
+    fireEvent.click(checkboxes[0]) // deselect all
+    expect(checkboxes[0].checked).toBe(false)
+
+    // All rows should be deselected
+    for (let i = 1; i <= 5; i++) {
+      expect(checkboxes[i].checked).toBe(false)
+    }
+
+    // Navigate to page 2 - rows should also be deselected
+    await act(async () => {
+      fireEvent.click(getNextButton(container))
+    })
+
+    await waitFor(() => {
+      expect(mockBackend.query).toHaveBeenCalledWith(expect.objectContaining({ pageIndex: 1 }))
+    })
+
+    const page2Checkboxes = getSelectRowCheckboxes(container)
+    for (let i = 1; i <= 5; i++) {
+      expect(page2Checkboxes[i].checked).toBe(false)
+    }
+  })
 })
 
 // Unit tests for the DuckDBBackend class itself, with a mock conn.