diff --git a/packages/client/src/schema-component/antd/void-table/demos/apiClient.ts b/packages/client/src/schema-component/antd/void-table/demos/apiClient.ts
index 4ff7f027b..3517d836e 100644
--- a/packages/client/src/schema-component/antd/void-table/demos/apiClient.ts
+++ b/packages/client/src/schema-component/antd/void-table/demos/apiClient.ts
@@ -22,6 +22,7 @@ mock.onGet('/posts:list').reply(async (config) => {
         return {
           id: v + (page - 1) * pageSize,
           name: uid(),
+          date: '2022-01-02 22:22:22'
         };
       }),
       meta: {
diff --git a/packages/client/src/schema-component/antd/void-table/demos/demo2.tsx b/packages/client/src/schema-component/antd/void-table/demos/demo2.tsx
new file mode 100644
index 000000000..f8b567c14
--- /dev/null
+++ b/packages/client/src/schema-component/antd/void-table/demos/demo2.tsx
@@ -0,0 +1,209 @@
+/**
+ * title: 勾选
+ */
+import { ISchema, useField, useFieldSchema } from '@formily/react';
+import { uid } from '@formily/shared';
+import {
+  AntdSchemaComponentProvider,
+  APIClientProvider,
+  CollectionField,
+  CollectionProvider,
+  SchemaComponent,
+  SchemaComponentProvider,
+  useCollection
+} from '@nocobase/client';
+import React, { useEffect } from 'react';
+import { useDesignable } from '../../..';
+import { apiClient } from './apiClient';
+
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    block1: {
+      type: 'void',
+      'x-decorator': 'CollectionBlock',
+      properties: {
+        table1: {
+          type: 'void',
+          'x-uid': 'input',
+          'x-component': 'VoidTable',
+          'x-component-props': {
+            rowKey: 'id',
+            rowSelection: {
+              type: 'checkbox',
+            },
+            pagination: {
+              current: 2,
+              pageSize: 2,
+            },
+            request: {
+              resource: 'posts',
+              action: 'list',
+              params: {
+                filter: {},
+                // pageSize: 5,
+              },
+            },
+          },
+          properties: {
+            column1: {
+              type: 'void',
+              // title: 'ID',
+              'x-decorator': 'TableColumnDecorator',
+              'x-component': 'VoidTable.Column',
+              properties: {
+                id: {
+                  type: 'number',
+                  'x-component': 'CollectionField',
+                  'x-read-pretty': true,
+                },
+              },
+            },
+            column2: {
+              type: 'void',
+              // title: 'Name',
+              'x-decorator': 'TableColumnDecorator',
+              'x-component': 'VoidTable.Column',
+              properties: {
+                name: {
+                  type: 'string',
+                  'x-component': 'CollectionField',
+                  'x-read-pretty': true,
+                },
+              },
+            },
+            column3: {
+              type: 'void',
+              // title: 'Name',
+              'x-decorator': 'TableColumnDecorator',
+              'x-component': 'VoidTable.Column',
+              properties: {
+                date: {
+                  type: 'string',
+                  'x-component': 'CollectionField',
+                  'x-read-pretty': true,
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+const useColumnSchema = () => {
+  const { getField } = useCollection();
+  const columnSchema = useFieldSchema();
+  const fieldSchema = columnSchema.reduceProperties((buf, s) => {
+    if (s['x-component'] === 'CollectionField') {
+      return s;
+    }
+    return buf;
+  }, null);
+  if (!fieldSchema) {
+    return;
+  }
+  const collectionField = getField(fieldSchema.name);
+  return { columnSchema, fieldSchema, collectionField };
+};
+
+const TableColumnDecorator = (props) => {
+  const field = useField();
+  const { columnSchema, fieldSchema, collectionField } = useColumnSchema();
+  const { refresh } = useDesignable();
+  useEffect(() => {
+    if (field.title) {
+      return;
+    }
+    if (!fieldSchema) {
+      return;
+    }
+    if (collectionField?.uiSchema?.title) {
+      field.title = collectionField?.uiSchema?.title;
+    }
+  }, []);
+  return (
+    <>
+      {props.children}
+      <div
+        onClick={() => {
+          field.title = uid();
+          columnSchema.title = field.title = field.title;
+          refresh();
+          field.query(`.*.${fieldSchema.name}`).take((f) => {
+            f.componentProps.dateFormat = 'YYYY-MM-DD';
+          });
+        }}
+      >
+        Edit
+      </div>
+    </>
+  );
+};
+
+const CollectionBlock = (props) => {
+  return (
+    <CollectionProvider
+      collection={{
+        name: 'posts',
+        fields: [
+          {
+            type: 'integer',
+            name: 'id',
+            interface: 'input',
+            uiSchema: {
+              title: 'ID1',
+              type: 'number',
+              'x-component': 'InputNumber',
+              required: true,
+              description: 'description1',
+            } as ISchema,
+          },
+          {
+            type: 'string',
+            name: 'name',
+            interface: 'input',
+            uiSchema: {
+              title: 'Name1',
+              type: 'string',
+              'x-component': 'Input',
+              required: true,
+              description: 'description1',
+            } as ISchema,
+          },
+          {
+            type: 'string',
+            name: 'date',
+            interface: 'datetime',
+            uiSchema: {
+              type: 'boolean',
+              title: `Date1`,
+              'x-read-pretty': true,
+              'x-decorator': 'FormItem',
+              'x-component': 'DatePicker',
+              'x-component-props': {
+                dateFormat: 'YYYY/MM/DD',
+                // showTime: true,
+              },
+            },
+          },
+        ],
+      }}
+    >
+      {props.children}
+    </CollectionProvider>
+  );
+};
+
+export default () => {
+  return (
+    <APIClientProvider apiClient={apiClient}>
+      <SchemaComponentProvider components={{ TableColumnDecorator, CollectionBlock, CollectionField }}>
+        <AntdSchemaComponentProvider>
+          <SchemaComponent schema={schema} />
+        </AntdSchemaComponentProvider>
+      </SchemaComponentProvider>
+    </APIClientProvider>
+  );
+};
diff --git a/packages/client/src/schema-component/antd/void-table/index.md b/packages/client/src/schema-component/antd/void-table/index.md
index 2a10504ea..a9bbb0151 100644
--- a/packages/client/src/schema-component/antd/void-table/index.md
+++ b/packages/client/src/schema-component/antd/void-table/index.md
@@ -202,34 +202,6 @@ export default () => {
 
 <code src="./demos/demo1.tsx">
 
-为了更好的支持 columns 的渲染，添加了 VoidTable.Column 用于配置表格列，VoidTable.Column 写在 properties 里，属性与 antd 的 [Table.Column](https://ant.design/components/table/#Column) 一致。
+CollectionProvider + CollectionField
 
-```ts
-{
-  type: 'void',
-  'x-component': 'VoidTable',
-  'x-component-props': {
-    rowKey: 'id',
-    dataSource: [
-      { id: 1, name: 'Name1' },
-      { id: 2, name: 'Name2' },
-      { id: 3, name: 'Name3' },
-    ],
-  },
-  properties: {
-    column1: {
-      type: 'void',
-      'x-component': 'VoidTable.Column',
-      'x-component-props': {
-        title: 'Name',
-      },
-      properties: {
-        name: {
-          type: 'string',
-          'x-component': 'Input',
-        },
-      },
-    },
-  },
-}
-```
+<code src="./demos/demo2.tsx">