Skip to content

feat: add bulk row selection and delete to database table view #779

@zacharias-ona

Description

@zacharias-ona

Description

The database table view only supports single-row operations — users must delete or interact with rows one at a time. Adding checkbox-based row selection with bulk delete lets users manage data more efficiently, matching the expected behavior of spreadsheet-like interfaces.

Approval Required

This is a HIGH risk change:

  • Adds new interactive UI (checkbox column, selection toolbar) that needs E2E coverage
  • Introduces selection state management across the table
  • Bulk delete requires a new mutation pattern (batch delete rows)
  • Affects table column layout (new checkbox column)

Comment "approved" to release this to the automation queue.

Acceptance Criteria

  • Each table row has a checkbox in the first column for selection
  • Header row has a "select all" checkbox that toggles all visible rows
  • When rows are selected, a floating action bar appears with "Delete N rows" button
  • Bulk delete removes all selected rows with a single confirmation dialog
  • Bulk delete uses undo-via-toast pattern (consistent with existing single-row delete in feat: add undo via toast for destructive database operations (row delete, column delete) #671)
  • Shift+click selects a range of rows
  • Escape clears the selection
  • Selection state resets when switching views or navigating away
  • Storybook stories cover: no selection, partial selection, all selected, action bar
  • E2E tests cover: select single, select all, bulk delete, shift-range select
  • pnpm lint && pnpm typecheck && pnpm test pass

Dependencies

None

Technical Notes

  • Table view: src/components/database/views/table-view.tsx, table-row.tsx
  • Selection state can be managed with a Set<string> of row IDs in the database-view-client.tsx or a dedicated useRowSelection hook
  • The checkbox column should be a fixed-width first column (32px) in the CSS grid template
  • Bulk delete should call deleteRow in a loop or add a batch delete function to src/lib/database.ts
  • The undo-via-toast pattern is already implemented for single row/column delete — extend it for bulk operations
  • Reference existing patterns: src/components/database/hooks/use-database-rows.ts for row mutations

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestneeds-humanNeeds human input — automation will re-queue when user respondspriority:3

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions