feat: ListView grouping across all view types (Grid, Kanban, Gallery) by Copilot · Pull Request #779 · objectstack-ai/objectui

Copilot · 2026-02-23T08:49:36Z

groupingConfig was only wired to the Grid view. Kanban and Gallery views ignored it entirely, despite ListView already maintaining the state.

Changes

GroupRow.tsx — New standalone component extracted from inline ObjectGrid group rendering, with collapsible headers (chevron + label + count), aggregation summary display, and aria-expanded accessibility attribute
ObjectGrid.tsx — Refactored to use the new GroupRow component for grouped rendering
ListView.tsx — Propagate groupingConfig to kanban and gallery view schema construction (was only passed to grid)
ObjectGallery.tsx — Implement grouped rendering with collapsible section headers, mirroring the Grid's useGroupedData pattern. Supports fields[].collapsed initial state and per-field sort order
ObjectKanban.tsx — Map grouping.fields[0].field → swimlaneField fallback, reusing existing swimlane rendering. Explicit swimlaneField takes precedence
KanbanSchema (types.ts) — Add grouping?: GroupingConfig to the type
index.tsx (plugin-grid) — Export GroupRow component and GroupRowProps type

Gallery grouping example

<ObjectGallery
  schema={{
    objectName: 'products',
    grouping: {
      fields: [{ field: 'category', order: 'asc', collapsed: false }],
    },
  }}
  data={items}
/>
// Renders: [▾ Electronics (3)] [grid] / [▾ Tools (2)] [grid] / ...

Tests (41 new tests)

useGroupedData.test.ts — 12 tests: collapsed state management, toggleGroup, multi-field grouping, sort order, empty labels
GroupRow.test.tsx — 11 tests: render, collapse/expand, aggregation summary, chevron icons, accessibility (aria-expanded)
GalleryGrouping.test.tsx — 8 tests: grouped rendering, collapse/expand toggle, initial collapsed state, record counts, sort order, empty labels
KanbanGrouping.test.tsx — 6 tests: swimlane mapping, explicit swimlane priority, resolution logic edge cases
ListViewGroupingPropagation.test.tsx — 4 tests: verifies groupingConfig flows correctly to grid, kanban, and gallery view schemas
All 523 existing tests across grid/list/kanban packages continue to pass

Original prompt

This section details on the original issue you should resolve

<issue_title>[P0] ListView Grouping — 分组渲染在全视图类型中生效</issue_title>
<issue_description>## 背景
Parent Issue: #736

useGroupedData hook 和 Group Popover 选择器已实现，但分组渲染仅在 Grid 视图中部分生效。Kanban/Gallery/Calendar/Timeline 等视图无分组渲染支持。

目标

分组配置通过 schema.grouping 驱动 所有视图类型 的分组渲染

Grid 视图：分组行头可展开/折叠，显示分组汇总

Kanban 视图：按分组字段自动生成泳道

Gallery 视图：按分组字段分区显示卡片

技术要点

packages/plugin-grid/src/useGroupedData.ts — 已有 hook，需验证 fields[].collapsed 状态管理

packages/plugin-grid/src/ObjectGrid.tsx L348 — 已调用 useGroupedData，需实现分组行渲染（GroupRow 组件）

packages/plugin-list/src/ListView.tsx L328 — 已有 groupingConfig state，需传递到非 Grid 视图

Spec 协议：GroupingConfigSchema → fields[].field, fields[].order, fields[].collapsed

改动范围

packages/plugin-grid/src/ObjectGrid.tsx — 添加 GroupRow 渲染组件

packages/plugin-list/src/ListView.tsx — 传递 groupingConfig 到所有 viewComponent

packages/plugin-kanban/src/ObjectKanban.tsx — 支持分组配置

packages/plugin-gallery/src/ObjectGallery.tsx — 支持分组配置

验收标准

Grid 视图分组行可展开/折叠

分组行显示字段值 + 记录数

Kanban 视图按分组字段分区

Gallery 视图按分组字段分区

schema.grouping.fields[].collapsed 初始折叠状态生效

所有新增代码有对应单元测试

pnpm test 全部通过
</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes [P0] ListView Grouping — 分组渲染在全视图类型中生效 #748

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

vercel · 2026-02-23T08:49:42Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
objectui	Ready	Preview, Comment	Feb 23, 2026 9:45am
objectui-demo	Ready	Preview, Comment	Feb 23, 2026 9:45am
objectui-storybook	Error		Feb 23, 2026 9:45am

…Config from ListView - ListView.tsx: pass groupingConfig to kanban and gallery view schemas - ObjectGallery.tsx: add grouped sections with collapsible headers - ObjectKanban.tsx: map grouping.fields[0].field to swimlaneField fallback - KanbanSchema: add optional grouping field - Add GalleryGrouping.test.tsx (8 tests) and KanbanGrouping.test.tsx (6 tests) Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

hotlong · 2026-02-23T09:14:38Z

@copilot 仔细评估，需要完成所有开发需求

Copilot

Pull request overview

This PR extends ListView’s existing grouping state so it affects all supported view types (Grid, Kanban, Gallery), enabling consistent grouped rendering and behavior across views.

Changes:

Pass groupingConfig from ListView into the constructed Kanban and Gallery child schemas.
Add grouped rendering to ObjectGallery with collapsible group sections and group sorting.
Add Kanban schema support for grouping and wire grouping.fields[0].field as a swimlaneField fallback in ObjectKanban.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/plugin-list/src/ListView.tsx	Forwards `groupingConfig` into kanban/gallery schema construction.
packages/plugin-list/src/ObjectGallery.tsx	Implements grouped + collapsible section rendering when `schema.grouping` is present.
packages/plugin-list/src/tests/GalleryGrouping.test.tsx	Adds unit tests for gallery grouping/collapse/sort/count behavior.
packages/plugin-kanban/src/ObjectKanban.tsx	Uses `schema.grouping.fields[0].field` as a `swimlaneField` fallback.
packages/plugin-kanban/src/types.ts	Adds `grouping?: GroupingConfig` to `KanbanSchema`.
packages/plugin-kanban/src/tests/KanbanGrouping.test.tsx	Adds tests around swimlane rendering and resolution logic.

Copilot · 2026-02-23T09:18:15Z

          groupField: schema.kanban?.groupField || schema.options?.kanban?.groupField || 'status',
          titleField: schema.kanban?.titleField || schema.options?.kanban?.titleField || 'name',
          cardFields: schema.kanban?.cardFields || effectiveFields || [],
+          ...(groupingConfig ? { grouping: groupingConfig } : {}),
          ...(schema.options?.kanban || {}),
          ...(schema.kanban || {}),


viewComponentSchema is memoized without groupingConfig in the dependency array, so changing grouping via the Group popover can leave the memoized schema stale and not propagate the new grouping prop to Kanban/Gallery (and Grid as well). Include groupingConfig (and any other referenced state like rowColorConfig / navigation.handleClick) in the useMemo dependencies, or remove the memoization if it’s not needed.

Copilot · 2026-02-23T09:18:15Z

+                            <button
+                                type="button"
+                                className="flex w-full items-center gap-2 px-3 py-2 text-sm font-medium text-left bg-muted/50 hover:bg-muted transition-colors"
+                                onClick={() => toggleGroup(group.key)}
+                            >
+                                {group.collapsed
+                                    ? <ChevronRight className="h-4 w-4 shrink-0" />
+                                    : <ChevronDown className="h-4 w-4 shrink-0" />}
+                                <span>{group.label}</span>
+                                <span className="ml-auto text-xs text-muted-foreground">{group.items.length}</span>
+                            </button>


The group toggle button controls visibility of the group content but doesn’t expose its expanded/collapsed state to assistive tech. Add aria-expanded (and ideally aria-controls pointing at the group panel) so screen readers can understand and announce the toggle state.

Copilot · 2026-02-23T09:18:16Z

  // Clone schema to inject data and className
+  // Use grouping.fields[0].field as swimlaneField fallback when no explicit swimlaneField
+  const effectiveSwimlaneField = schema.swimlaneField
+    || (schema.grouping?.fields?.[0]?.field);
+
  const effectiveSchema = {
      ...schema,
      data: effectiveData,
      columns: effectiveColumns,
-      className: className || schema.className
+      className: className || schema.className,
+      ...(effectiveSwimlaneField ? { swimlaneField: effectiveSwimlaneField } : {}),
  };


The new grouping → swimlaneField fallback is not directly covered by a test that renders ObjectKanban with schema.grouping and asserts it actually produces a swimlane layout. Current tests exercise KanbanImpl and a copied resolver function, which won’t fail if ObjectKanban stops wiring schema.grouping into swimlaneField. Add an integration-level unit test for ObjectKanban covering explicit swimlaneField precedence and grouping fallback.

…ew propagation tests - Extract GroupRow component from inline ObjectGrid rendering - Add useGroupedData collapsed state tests (12 tests) - Add GroupRow component tests (11 tests) - Add ListView grouping config propagation tests (4 tests) - Export GroupRow and GroupRowProps from plugin-grid Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Copilot · 2026-02-23T09:28:05Z

@copilot 仔细评估，需要完成所有开发需求

All development requirements have been completed in commits 53ff697 and 2e31e8f:

Acceptance criteria fulfilled:

✅ Grid view group rows expand/collapse — extracted into GroupRow component with aria-expanded
✅ Group rows show field value + record count + aggregation summary
✅ Kanban view groups by grouping.fields[0].field → swimlaneField mapping
✅ Gallery view groups with collapsible sections per group
✅ schema.grouping.fields[].collapsed initial collapsed state works
✅ 41 new tests covering all new code (523 total, 33 files pass)

Full change list:

GroupRow.tsx — new standalone component for group row rendering
ObjectGrid.tsx — refactored to use GroupRow component
ObjectGallery.tsx — grouping support with collapsible sections
ObjectKanban.tsx — grouping → swimlaneField mapping
ListView.tsx — propagates groupingConfig to all view types
KanbanSchema (types.ts) — added grouping?: GroupingConfig
5 new test files: useGroupedData.test.ts (12), GroupRow.test.tsx (11), GalleryGrouping.test.tsx (8), KanbanGrouping.test.tsx (6), ListViewGroupingPropagation.test.tsx (4)

Initial plan

2824cc6

Copilot AI assigned Copilot and hotlong Feb 23, 2026

Copilot started work on behalf of hotlong February 23, 2026 08:49 View session

vercel Bot deployed to Preview – objectui-demo February 23, 2026 08:51 View deployment

vercel Bot deployed to Preview – objectui-demo February 23, 2026 09:02 View deployment

Copilot AI changed the title ~~[WIP] Add grouping rendering support for all view types~~ feat: ListView grouping across all view types (Grid, Kanban, Gallery) Feb 23, 2026

Copilot AI requested a review from hotlong February 23, 2026 09:06

Copilot finished work on behalf of hotlong February 23, 2026 09:06

hotlong marked this pull request as ready for review February 23, 2026 09:13

Copilot AI review requested due to automatic review settings February 23, 2026 09:13

Copilot started reviewing on behalf of hotlong February 23, 2026 09:14 View session

Copilot started work on behalf of hotlong February 23, 2026 09:15 View session

Copilot AI reviewed Feb 23, 2026

View reviewed changes

vercel Bot deployed to Preview – objectui-demo February 23, 2026 09:25 View deployment

fix: remove duplicate count display in GroupRow header

2e31e8f

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

vercel Bot deployed to Preview – objectui-demo February 23, 2026 09:29 View deployment

Copilot finished work on behalf of hotlong February 23, 2026 09:29

hotlong merged commit 7cbb7a1 into main Feb 23, 2026
2 of 4 checks passed

vercel Bot deployed to Preview – objectui February 23, 2026 09:41 View deployment

vercel Bot had a problem deploying to Preview – objectui-storybook February 23, 2026 09:42 Failure

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: ListView grouping across all view types (Grid, Kanban, Gallery)#779

feat: ListView grouping across all view types (Grid, Kanban, Gallery)#779
hotlong merged 4 commits intomainfrom
copilot/add-grouping-support-to-all-views

Copilot AI commented Feb 23, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Feb 23, 2026 •

edited

Loading

Uh oh!

hotlong commented Feb 23, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 23, 2026

Uh oh!

Copilot AI Feb 23, 2026

Uh oh!

Copilot AI Feb 23, 2026

Uh oh!

Copilot AI commented Feb 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Copilot AI commented Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Gallery grouping example

Tests (41 new tests)

目标

技术要点

改动范围

验收标准

Comments on the Issue (you are @copilot in this section)

Uh oh!

vercel Bot commented Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hotlong commented Feb 23, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Feb 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Feb 23, 2026 •

edited

Loading

vercel Bot commented Feb 23, 2026 •

edited

Loading