Files
supabase/apps/studio/components/ui/DataTable/useTableRowSelection.ts
Saxon FletcherandClaude Opus 5 a311279d66 feat(studio): add range and multi-row selection to DataTableInfinite (#50688)
Stack 3/4 · previous: #50687 · next: #50689

## Problem

`DataTableInfinite` could only open one row at a time. Multi-select
meant clicking a separate checkbox column, with no support for ranges or
modifier keys.

## Solution

This PR only adds shared primitives. Behavior stays the same until a
consumer passes `onSelectRow` (wired up in the next PR).

- `selectTableRow` (`rowSelection.utils.ts`): a pure reducer for plain,
Cmd/Ctrl-toggle, Shift-range, and additive-range selection over the
current display order, with a fixed anchor.
- `useTableRowSelection`: holds the selection state and resets it when
its `scope` (project/filters) changes.
- `DataTableProvider` gets an optional `onSelectRow`. When it's set,
`DataTableInfinite` rows use it and reflect `row.getIsSelected()`. Rows
also get `aria-selected`, Space activates them like Enter, and
shift-click no longer selects text.

## Review instructions

1. Read `rowSelection.utils.test.ts`: it covers the selection rules.
2. Open Unified Logs. Row clicks should behave the same as on master.

## Checklist

- [ ] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Added richer data-table row selection, including multi-select, range
selection, toggling, and keyboard support.
- Added visual and accessibility feedback for selected rows, including
pointer cursor and `aria-selected`.
- Preserved selections across paging and live updates while resetting
them when filters or projects change.
  - Added support for external row-selection callbacks.

- **Tests**
- Added comprehensive coverage for selection behavior and state
persistence.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
2026-09-24 08:56:22 +10:00

26 lines
960 B
TypeScript

import { useState } from 'react'
import { RowSelectionModifiers, selectTableRow, TableRowSelection } from './rowSelection.utils'
export function useTableRowSelection({ scope, initialId }: { scope: string; initialId?: string }) {
const [selectionScope, setSelectionScope] = useState(scope)
const [selection, setSelection] = useState<TableRowSelection>(() => ({
selected: initialId ? { [initialId]: true } : {},
anchorId: initialId,
activeId: initialId,
}))
// A new project/filter/sort starts a new selection; paging and live updates do not.
if (selectionScope !== scope) {
setSelectionScope(scope)
setSelection({ selected: {} })
}
const selectRow = (orderedIds: string[], id: string, modifiers?: RowSelectionModifiers) =>
setSelection((previous) => selectTableRow(previous, orderedIds, id, modifiers))
const clearSelection = () => setSelection({ selected: {} })
return { selection, selectRow, clearSelection }
}