feat: add row grouping to database table view

Open
#1,252 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
42/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Quiet
Tech stack
storybook, typescript

Research direction

Start with database-view-client.tsx and the board view pattern around line 403, then review table-view.tsx, board-view-helpers.ts, and .agents/conventions.md and .agents/design.md. Implement and verify the named acceptance criteria, including virtualization, selection, sorting, stories, and the E2E flow, then run pnpm lint && pnpm typecheck && pnpm test.

Written by the indexing model from the issue text.

Description

enhancement needs-human priority:3

Description

The board view supports grouping rows by a select property via config.group_by, but the table view does not. Table row grouping is one of the most-requested database features in Notion-style tools — it lets users organize rows into collapsible sections based on a property value (e.g., group tasks by Status or Priority). The DatabaseViewConfig.group_by field and the ViewConfigDropdown component already exist, so the infrastructure is partially in place.

Approval Required

This is a HIGH risk change because:

  • Adds collapsible group headers to the table view that interact with virtualization (@tanstack/react-virtual), column resize, column reorder, and bulk selection
  • Group headers must span the full table width and render a collapse/expand toggle + group value + row count
  • Collapsed groups must be excluded from the virtualized item list, affecting scroll position calculations
  • Bulk selection ("select all") must respect group boundaries (select all in group vs. select all globally)
  • Sort order within groups must be maintained independently
  • Filter changes may create/remove groups dynamically

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

Acceptance Criteria

  • A "Group by" dropdown appears in the table view toolbar (reusing ViewConfigDropdown from database-view-helpers.tsx)
  • Grouping is available for select, multi-select, status, person, and checkbox property types
  • When a group-by property is selected, rows are organized under collapsible group headers
  • Each group header shows: expand/collapse chevron, property value (with color for select/status), row count
  • Groups are collapsible — clicking the header or pressing Enter/Space toggles the group
  • Collapsed group state is stored in component state (not persisted — resets on page reload)
  • Rows without a value for the group-by property appear in an "No value" group at the bottom
  • The "Group by" selection is persisted in config.group_by (same field used by board view)
  • Removing the group-by property returns to the flat table layout
  • Group headers span the full table width and align with the column grid
  • Bulk selection checkboxes in group headers select/deselect all rows in that group
  • Sorting within groups is maintained (rows within each group follow the active sort order)
  • Storybook stories cover: ungrouped (default), grouped by select, grouped with collapsed groups, grouped with empty group
  • E2E test: add select column → set values → enable "Group by" → verify groups appear → collapse a group → verify rows hidden → expand → verify rows visible → remove grouping → verify flat layout
  • pnpm lint && pnpm typecheck && pnpm test pass

Dependencies

None

Technical Notes

  • Add the ViewConfigDropdown for group_by to the table toolbar in database-view-client.tsx (same pattern as board view, line ~403)
  • Filter eligible properties to types that support grouping: select, multi_select, status, person, checkbox
  • Create a groupRows(rows, propertyId, properties) utility in src/lib/database-group.ts that returns { value: string | null, rows: DatabaseRow[] }[]
  • In table-view.tsx, when config.group_by is set, replace the flat row list with a grouped structure. Each group header is a non-data row in the virtualized list
  • Use @tanstack/react-virtual estimateSize to account for group header rows (which have a different height than data rows)
  • Track collapsed groups in a Set<string> state variable. Collapsed groups contribute only their header row to the virtualized list
  • The board view's groupRowsByProperty in board-view-helpers.ts can be referenced but table grouping needs a different output format (flat list with interleaved headers vs. column-based groups)
  • Reference .agents/conventions.md for component patterns and .agents/design.md for visual styling
Dominant language
TypeScript
Stars
55
Forks
11
PR merge metrics
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from gitpod-io/memo

All issues in gitpod-io/memo

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.