diff --git a/packages/affine/data-view/src/core/group-by/define.ts b/packages/affine/data-view/src/core/group-by/define.ts
index 09ea332ac733..9ee3bc536538 100644
--- a/packages/affine/data-view/src/core/group-by/define.ts
+++ b/packages/affine/data-view/src/core/group-by/define.ts
@@ -43,7 +43,7 @@ export const groupByMatchers = [
       return [
         {
           key: `${value}`,
-          value,
+          value: value.toString(),
         },
       ];
     },
diff --git a/packages/affine/data-view/src/core/group-by/renderer/string-group.ts b/packages/affine/data-view/src/core/group-by/renderer/string-group.ts
index d3e3c8cf2328..8d1f6df0c68b 100644
--- a/packages/affine/data-view/src/core/group-by/renderer/string-group.ts
+++ b/packages/affine/data-view/src/core/group-by/renderer/string-group.ts
@@ -30,7 +30,7 @@ export class StringGroupView extends BaseGroup<NonNullable<unknown>, string> {
         items: [
           menu.input({
             initialValue: this.value ?? '',
-            onChange: text => {
+            onComplete: text => {
               this.updateValue?.(text);
             },
           }),
diff --git a/packages/affine/data-view/src/core/group-by/trait.ts b/packages/affine/data-view/src/core/group-by/trait.ts
index 959a8c3e4793..b1eaf3e22000 100644
--- a/packages/affine/data-view/src/core/group-by/trait.ts
+++ b/packages/affine/data-view/src/core/group-by/trait.ts
@@ -6,6 +6,7 @@ import { computed, type ReadonlySignal } from '@preact/signals-core';
 
 import type { GroupBy, GroupProperty } from '../common/types.js';
 import type { TypeInstance } from '../logical/type.js';
+import type { DVJSON } from '../property/types.js';
 import type { Property } from '../view-manager/property.js';
 import type { SingleView } from '../view-manager/single-view.js';
 
@@ -19,7 +20,7 @@ export type GroupData = {
   key: string;
   name: string;
   type: TypeInstance;
-  value: unknown;
+  value: DVJSON;
   rows: string[];
 };
 
@@ -281,13 +282,13 @@ export class GroupTrait {
     this.view.cellValueSet(rowId, propertyId, newValue);
   }
 
-  updateValue(rows: string[], value: unknown) {
+  updateValue(rows: string[], value: DVJSON) {
     const propertyId = this.propertyId;
     if (!propertyId) {
       return;
     }
     rows.forEach(id => {
-      this.view.cellValueSet(id, propertyId, value);
+      this.view.cellJsonValueSet(id, propertyId, value);
     });
   }
 }
diff --git a/packages/affine/data-view/src/core/group-by/types.ts b/packages/affine/data-view/src/core/group-by/types.ts
index 07ac93d078de..032b8a601ade 100644
--- a/packages/affine/data-view/src/core/group-by/types.ts
+++ b/packages/affine/data-view/src/core/group-by/types.ts
@@ -1,9 +1,10 @@
 import type { TypeInstance } from '../logical/type.js';
+import type { DVJSON } from '../property/types.js';
 import type { UniComponent } from '../utils/index.js';
 
 export interface GroupRenderProps<
   Data extends NonNullable<unknown> = NonNullable<unknown>,
-  Value = unknown,
+  Value = DVJSON,
 > {
   data: Data;
   updateData?: (data: Data) => void;
@@ -17,14 +18,14 @@ export type GroupByConfig = {
   groupName: (type: TypeInstance, value: unknown) => string;
   defaultKeys: (type: TypeInstance) => {
     key: string;
-    value: unknown;
+    value: DVJSON;
   }[];
   valuesGroup: (
     value: unknown,
     type: TypeInstance
   ) => {
     key: string;
-    value: unknown;
+    value: DVJSON;
   }[];
   addToGroup?: (value: unknown, oldValue: unknown) => unknown;
   removeFromGroup?: (value: unknown, oldValue: unknown) => unknown;
diff --git a/packages/affine/data-view/src/core/view-manager/single-view.ts b/packages/affine/data-view/src/core/view-manager/single-view.ts
index 838fb981cb13..53cbdf053fe0 100644
--- a/packages/affine/data-view/src/core/view-manager/single-view.ts
+++ b/packages/affine/data-view/src/core/view-manager/single-view.ts
@@ -4,6 +4,7 @@ import { computed, type ReadonlySignal, signal } from '@preact/signals-core';
 
 import type { DataViewContextKey } from '../data-source/context.js';
 import type { Variable } from '../expression/types.js';
+import type { DVJSON } from '../index.js';
 import type { TypeInstance } from '../logical/type.js';
 import type { PropertyMetaConfig } from '../property/property-config.js';
 import type { TraitKey } from '../traits/key.js';
@@ -53,6 +54,8 @@ export interface SingleView {
 
   cellJsonValueGet(rowId: string, propertyId: string): unknown;
 
+  cellJsonValueSet(rowId: string, propertyId: string, value: DVJSON): void;
+
   cellStringValueGet(rowId: string, propertyId: string): string | undefined;
 
   cellGet(rowId: string, propertyId: string): Cell;
@@ -259,6 +262,23 @@ export abstract class SingleViewBase<
     });
   }
 
+  cellJsonValueSet(rowId: string, propertyId: string, value: DVJSON): void {
+    const type = this.propertyTypeGet(propertyId);
+    if (!type) {
+      return;
+    }
+    const fromJson = this.dataSource.propertyMetaGet(type).config.cellFromJson;
+    this.dataSource.cellValueChange(
+      rowId,
+      propertyId,
+      fromJson({
+        value,
+        data: this.propertyDataGet(propertyId),
+        dataSource: this.dataSource,
+      })
+    );
+  }
+
   cellStringValueGet(rowId: string, propertyId: string): string | undefined {
     const type = this.propertyTypeGet(propertyId);
     if (!type) {