feat: add row grouping to database table view
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
- Domain
- frontend, testing-qa
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
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
ViewConfigDropdownfromdatabase-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 testpass
Dependencies
None
Technical Notes
- Add the
ViewConfigDropdownforgroup_byto the table toolbar indatabase-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 insrc/lib/database-group.tsthat returns{ value: string | null, rows: DatabaseRow[] }[] - In
table-view.tsx, whenconfig.group_byis 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-virtualestimateSizeto 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
groupRowsByPropertyinboard-view-helpers.tscan be referenced but table grouping needs a different output format (flat list with interleaved headers vs. column-based groups) - Reference
.agents/conventions.mdfor component patterns and.agents/design.mdfor visual styling
- Dominant language
- TypeScript
- Stars
- 55
- Forks
- 11
- PR merge metrics
- No merged PRs in 30d
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from gitpod-io/memo
-
enhancement needs-human priority:3
Difficulty 4/5 3-5 days Newbie friendliness 48/100
-
enhancement needs-human priority:3
Difficulty 4/5 3-5 days Newbie friendliness 55/100
-
bug needs-human priority:1
Difficulty 1/5 Under an hour Newbie friendliness 25/100
-
enhancement needs-human priority:3
Difficulty 5/5 Over a week Newbie friendliness 45/100
-
enhancement needs-human priority:3
Difficulty 4/5 3-5 days Newbie friendliness 35/100
Similar issues
-
clawsweeper:fix-shape-clear clawsweeper:queueable-fix clawsweeper:source-repro impact:ux-friction issue-rating: 🦞 diamond lobster no-stale P3
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 76/100
-
code-quality refactoring
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
github/gh-aw-firewall#8816 ·
-
integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
langchain-ai/deepagents#6450 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 88/100
vercel/react-tweet#225 ·