From 5a3170c5016c98f7b660d448a76d83f4d5b0b488 Mon Sep 17 00:00:00 2001
From: zzj3720 <zuozijian1994@gmail.com>
Date: Wed, 10 Apr 2024 15:05:12 +0800
Subject: [PATCH 01/15] refactor(database): extract the core part and support
 external registration of columns.

---
 .../__tests__/database/database.unit.spec.ts  |  17 +-
 .../database/typesystem.unit.spec.ts          |   2 +-
 .../src/_common/adapters/notion-html.ts       |  11 +-
 .../src/_common/components/icon/uni-icon.ts   |  11 -
 .../blocks/src/_common/components/index.ts    |   6 +-
 .../quick-action/database-convert-view.ts     |   4 +-
 packages/blocks/src/_common/icons/database.ts | 367 +-----------
 packages/blocks/src/_common/types.ts          |  64 ---
 .../src/data-view-block/data-view-block.ts    |   3 -
 .../src/data-view-block/data-view-model.ts    |   4 +-
 .../{common/datasource => }/block-icons.ts    |   2 +-
 .../src/database-block/columns/index.ts       |  22 +
 .../columns/rich-text/cell-renderer.ts        |  25 +-
 .../columns/rich-text/define.ts               |  85 +++
 .../columns/title/cell-renderer.ts            |  15 +
 .../database-block/columns/title/define.ts    |  22 +
 .../common/columns/image/define.ts            |  25 -
 .../database-block/common/columns/manager.ts  | 208 -------
 .../common/columns/progress/define.ts         |  36 --
 .../database-block/common/columns/renderer.ts |  49 --
 .../common/columns/rich-text/define.ts        |  94 ----
 .../common/columns/text/define.ts             |  25 -
 .../common/columns/title/cell-renderer.ts     |  18 -
 .../common/columns/title/define.ts            |  25 -
 .../database-block/common/columns/types.ts    |   5 -
 .../database-block/common/group-by/util.ts    |  20 -
 .../src/database-block/common/view-manager.ts | 134 -----
 ...ase-block-datasource.ts => data-source.ts} | 118 ++--
 .../columns => data-view/column}/base-cell.ts |   2 +-
 .../data-view/column/column-config.ts         | 171 ++++++
 .../database-block/data-view/column/index.ts  |   3 +
 .../data-view/column/manager.ts               |  54 ++
 .../column/presets}/checkbox/cell-renderer.ts |  14 +-
 .../column/presets}/checkbox/define.ts        |  15 +-
 .../column/presets}/date/cell-renderer.ts     |  17 +-
 .../column/presets}/date/define.ts            |   7 +-
 .../column/presets}/image/cell-renderer.ts    |  13 +-
 .../data-view/column/presets/image/define.ts  |  22 +
 .../data-view/column/presets/index.ts         |  21 +
 .../column/presets}/link/cell-renderer.ts     |  17 +-
 .../presets}/link/components/link-node.ts     |   2 +-
 .../column/presets}/link/define.ts            |   7 +-
 .../presets}/multi-select/cell-renderer.ts    |  37 +-
 .../column/presets}/multi-select/define.ts    |  21 +-
 .../column/presets}/number/cell-renderer.ts   |  13 +-
 .../column/presets}/number/define.ts          |  22 +-
 .../column/presets}/progress/cell-renderer.ts |  11 +-
 .../column/presets/progress/define.ts         |  29 +
 .../column/presets}/select/cell-renderer.ts   |  25 +-
 .../column/presets}/select/define.ts          |  20 +-
 .../column/presets}/text/cell-renderer.ts     |  13 +-
 .../data-view/column/presets/text/define.ts   |  22 +
 .../data-view/column/renderer.ts              |  33 ++
 .../database-block/data-view/column/types.ts  |   5 +
 .../{ => data-view}/common/ast.ts             |   2 +-
 .../{ => data-view}/common/base-data-view.ts  |   9 +-
 .../common/component/overflow/overflow.ts     |   0
 .../{ => data-view}/common/css-variable.ts    |   0
 .../{ => data-view}/common/data-stats.ts      |   2 +-
 .../common/data-view-manager.ts               |  76 ++-
 .../{ => data-view}/common/data-view.ts       |  19 +-
 .../common/datasource/all-doc-datasource.ts   |  25 +-
 .../{ => data-view}/common/datasource/base.ts |  20 +-
 .../common/datasource/datasource-manager.ts   |   6 +-
 .../common/datasource/tags-datasource.ts      |  37 +-
 .../{ => data-view}/common/detail/detail.ts   |   6 +-
 .../{ => data-view}/common/detail/field.ts    |  20 +-
 .../{ => data-view}/common/detail/layout.ts   |   4 +-
 .../common/detail/selection.ts                |   6 +-
 .../common/filter/condition.ts                |   4 +-
 .../common/filter/filter-bar.ts               |  14 +-
 .../common/filter/filter-group.ts             |  14 +-
 .../common/filter/filter-modal.ts             |   2 +-
 .../common/filter/filter-root.ts              |  17 +-
 .../common/filter/matcher/boolean.ts          |   0
 .../common/filter/matcher/date.ts             |   0
 .../common/filter/matcher/matcher.ts          |   0
 .../common/filter/matcher/multi-tag.ts        |   0
 .../common/filter/matcher/number.ts           |   0
 .../common/filter/matcher/string.ts           |   0
 .../common/filter/matcher/tag.ts              |   0
 .../common/filter/matcher/unknown.ts          |   0
 .../{ => data-view}/common/group-by/define.ts |   2 +-
 .../common/group-by/group-title.ts            |   4 +-
 .../{ => data-view}/common/group-by/helper.ts |   3 +-
 .../common/group-by/matcher.ts                |   2 +-
 .../common/group-by/renderer/base.ts          |   0
 .../common/group-by/renderer/number-group.ts  |   2 +-
 .../common/group-by/renderer/select-group.ts  |   6 +-
 .../common/group-by/renderer/string-group.ts  |   2 +-
 .../common/group-by/setting.ts                |  22 +-
 .../common/header-area/icon.ts                |   2 +-
 .../common/header-area/text.ts                |  10 +-
 .../{ => data-view}/common/header/consts.ts   |   0
 .../common/header/reference.ts                |   0
 .../{ => data-view}/common/header/title.ts    |   4 +-
 .../common/header/tools/add-row/add-row.ts    |   4 +-
 .../tools/add-row/new-record-preview.ts       |   2 +-
 .../common/header/tools/base-tool.ts          |   0
 .../common/header/tools/expand/index.ts       |  27 +-
 .../common/header/tools/expand/styles.ts      |   0
 .../tools/expand/table-full-screen-modal.ts   |   6 +-
 .../common/header/tools/filter.ts             |   4 +-
 .../common/header/tools/search.ts             |  11 +-
 .../common/header/tools/tools.ts              |   2 +-
 .../common/header/tools/view-options.ts       |  15 +-
 .../{ => data-view}/common/header/views.ts    |  18 +-
 .../data-view/common/icons}/icon.ts           |   2 +-
 .../data-view/common/icons/index.ts           | 525 ++++++++++++++++++
 .../database-block/data-view/common/index.ts  |   1 +
 .../{ => data-view}/common/literal/define.ts  |   7 +-
 .../{ => data-view}/common/literal/matcher.ts |   6 +-
 .../common/literal/renderer/array-literal.ts  |   0
 .../common/literal/renderer/date-literal.ts   |   0
 .../literal/renderer/literal-element.ts       |   0
 .../common/literal/renderer/tag-literal.ts    |   0
 .../common/literal/renderer/union-string.ts   |   0
 .../{ => data-view}/common/popup.ts           |   0
 .../{ => data-view}/common/properties.ts      |   4 +-
 .../{ => data-view}/common/ref/ref.ts         |   6 +-
 .../{ => data-view}/common/selection.ts       |   5 +-
 .../{ => data-view}/common/types.ts           |   0
 .../data-view/common/view-manager.ts          |  18 +
 .../{ => data-view}/common/view-source.ts     |   0
 .../database-block/data-view/components.ts    |   1 +
 .../{ => data-view}/data-view.ts              |  55 +-
 .../src/database-block/data-view/index.ts     |  18 +
 .../{ => data-view}/logical/data-type.ts      |   2 +-
 .../{ => data-view}/logical/eval-filter.ts    |   0
 .../{ => data-view}/logical/matcher.ts        |   0
 .../logical/property-matcher.ts               |   0
 .../{ => data-view}/logical/typesystem.ts     |   0
 .../src/database-block/data-view/types.ts     |  25 +
 .../{ => data-view}/utils/drag.ts             |   0
 .../database-block/data-view/utils/event.ts   |   3 +
 .../{ => data-view}/utils/frame-loop.ts       |   0
 .../database-block/data-view/utils/index.ts   |   1 +
 .../{ => data-view}/utils/insert.ts           |   0
 .../data-view/utils}/menu/index.ts            |   0
 .../data-view/utils}/menu/menu.ts             |   7 +-
 .../data-view/utils}/menu/title.ts            |   2 +-
 .../data-view/utils}/tags/colors.ts           |   0
 .../data-view/utils}/tags/multi-tag-select.ts |   6 +-
 .../data-view/utils}/tags/multi-tag-view.ts   |   0
 .../data-view/utils}/tags/styles.ts           |   0
 .../data-view/utils/uni-component/index.ts    |   1 +
 .../utils}/uni-component/operation.ts         |   0
 .../utils}/uni-component/render-template.ts   |   0
 .../utils}/uni-component/uni-component.ts     |   0
 .../data-view/utils/uni-icon.ts               |  11 +
 .../{ => data-view}/utils/utils.ts            |   0
 .../{ => data-view/views}/kanban/card.ts      |   9 +-
 .../{ => data-view/views}/kanban/cell.ts      |   4 +-
 .../views}/kanban/controller/clipboard.ts     |   2 +-
 .../views}/kanban/controller/drag.ts          |  10 +-
 .../views}/kanban/controller/hotkeys.ts       |   0
 .../views}/kanban/controller/selection.ts     |  10 +-
 .../{ => data-view/views}/kanban/define.ts    |  38 +-
 .../{ => data-view/views}/kanban/group.ts     |  12 +-
 .../views}/kanban/header-cell.ts              |   8 +-
 .../{ => data-view/views}/kanban/header.ts    |   2 +-
 .../views}/kanban/kanban-view-manager.ts      |  32 +-
 .../views}/kanban/kanban-view.ts              |  14 +-
 .../{ => data-view/views}/kanban/menu.ts      |  12 +-
 .../data-view/views/kanban/renderer.ts        |  19 +
 .../data-view/views/kanban/types.ts           |  32 ++
 .../views}/table/components/cell-container.ts |   6 +-
 .../components/column-header/column-header.ts |   6 +-
 .../column-header/column-renderer.ts          |   2 +-
 .../column-header/database-header-column.ts   |  17 +-
 .../table/components/column-header/styles.ts  |   0
 .../column-header/vertical-indicator.ts       |   4 +-
 .../table/components/column-stats-cell.ts     |   6 +-
 .../views}/table/components/column-stats.ts   |   0
 .../views}/table/components/header-cell.ts    |   8 +-
 .../views}/table/components/menu.ts           |  22 +-
 .../views}/table/components/row.ts            |  21 +-
 .../{ => data-view/views}/table/consts.ts     |   0
 .../views}/table/controller/clipboard.ts      |   2 +-
 .../views}/table/controller/drag.ts           |   4 +-
 .../views}/table/controller/hotkeys.ts        |   0
 .../views}/table/controller/selection.ts      |  10 +-
 .../{ => data-view/views}/table/define.ts     |   8 +-
 .../{ => data-view/views}/table/group.ts      |  12 +-
 .../data-view/views/table/renderer.ts         |  21 +
 .../{ => data-view/views}/table/stat-ops.ts   |   0
 .../views}/table/table-view-manager.ts        |  32 +-
 .../{ => data-view/views}/table/table-view.ts |  16 +-
 .../{ => data-view/views}/table/types.ts      |  17 +
 .../src/database-block/database-block.ts      | 184 ++----
 .../src/database-block/database-model.ts      |  35 +-
 .../src/database-block/database-service.ts    |   4 +-
 .../block-renderer.ts                         |   8 +-
 packages/blocks/src/database-block/index.ts   |  20 +-
 .../src/database-block/kanban/renderer.ts     |  19 -
 .../src/database-block/table/renderer.ts      |  21 -
 packages/blocks/src/database-block/types.ts   |  14 +-
 .../blocks/src/database-block/view-source.ts  | 108 ++++
 .../root-block/widgets/slash-menu/config.ts   |   2 +-
 .../playground/apps/starter/data/database.ts  |  29 +-
 .../fragments/doc-meta-tags/doc-meta-tags.ts  |   8 +-
 201 files changed, 2046 insertions(+), 1994 deletions(-)
 delete mode 100644 packages/blocks/src/_common/components/icon/uni-icon.ts
 rename packages/blocks/src/database-block/{common/datasource => }/block-icons.ts (99%)
 create mode 100644 packages/blocks/src/database-block/columns/index.ts
 rename packages/blocks/src/database-block/{common => }/columns/rich-text/cell-renderer.ts (92%)
 create mode 100644 packages/blocks/src/database-block/columns/rich-text/define.ts
 create mode 100644 packages/blocks/src/database-block/columns/title/cell-renderer.ts
 create mode 100644 packages/blocks/src/database-block/columns/title/define.ts
 delete mode 100644 packages/blocks/src/database-block/common/columns/image/define.ts
 delete mode 100644 packages/blocks/src/database-block/common/columns/manager.ts
 delete mode 100644 packages/blocks/src/database-block/common/columns/progress/define.ts
 delete mode 100644 packages/blocks/src/database-block/common/columns/renderer.ts
 delete mode 100644 packages/blocks/src/database-block/common/columns/rich-text/define.ts
 delete mode 100644 packages/blocks/src/database-block/common/columns/text/define.ts
 delete mode 100644 packages/blocks/src/database-block/common/columns/title/cell-renderer.ts
 delete mode 100644 packages/blocks/src/database-block/common/columns/title/define.ts
 delete mode 100644 packages/blocks/src/database-block/common/columns/types.ts
 delete mode 100644 packages/blocks/src/database-block/common/group-by/util.ts
 delete mode 100644 packages/blocks/src/database-block/common/view-manager.ts
 rename packages/blocks/src/database-block/{common/datasource/database-block-datasource.ts => data-source.ts} (77%)
 rename packages/blocks/src/database-block/{common/columns => data-view/column}/base-cell.ts (98%)
 create mode 100644 packages/blocks/src/database-block/data-view/column/column-config.ts
 create mode 100644 packages/blocks/src/database-block/data-view/column/index.ts
 create mode 100644 packages/blocks/src/database-block/data-view/column/manager.ts
 rename packages/blocks/src/database-block/{common/columns => data-view/column/presets}/checkbox/cell-renderer.ts (79%)
 rename packages/blocks/src/database-block/{common/columns => data-view/column/presets}/checkbox/define.ts (53%)
 rename packages/blocks/src/database-block/{common/columns => data-view/column/presets}/date/cell-renderer.ts (88%)
 rename packages/blocks/src/database-block/{common/columns => data-view/column/presets}/date/define.ts (64%)
 rename packages/blocks/src/database-block/{common/columns => data-view/column/presets}/image/cell-renderer.ts (61%)
 create mode 100644 packages/blocks/src/database-block/data-view/column/presets/image/define.ts
 create mode 100644 packages/blocks/src/database-block/data-view/column/presets/index.ts
 rename packages/blocks/src/database-block/{common/columns => data-view/column/presets}/link/cell-renderer.ts (89%)
 rename packages/blocks/src/database-block/{common/columns => data-view/column/presets}/link/components/link-node.ts (93%)
 rename packages/blocks/src/database-block/{common/columns => data-view/column/presets}/link/define.ts (59%)
 rename packages/blocks/src/database-block/{common/columns => data-view/column/presets}/multi-select/cell-renderer.ts (68%)
 rename packages/blocks/src/database-block/{common/columns => data-view/column/presets}/multi-select/define.ts (73%)
 rename packages/blocks/src/database-block/{common/columns => data-view/column/presets}/number/cell-renderer.ts (89%)
 rename packages/blocks/src/database-block/{common/columns => data-view/column/presets}/number/define.ts (51%)
 rename packages/blocks/src/database-block/{common/columns => data-view/column/presets}/progress/cell-renderer.ts (94%)
 create mode 100644 packages/blocks/src/database-block/data-view/column/presets/progress/define.ts
 rename packages/blocks/src/database-block/{common/columns => data-view/column/presets}/select/cell-renderer.ts (71%)
 rename packages/blocks/src/database-block/{common/columns => data-view/column/presets}/select/define.ts (71%)
 rename packages/blocks/src/database-block/{common/columns => data-view/column/presets}/text/cell-renderer.ts (87%)
 create mode 100644 packages/blocks/src/database-block/data-view/column/presets/text/define.ts
 create mode 100644 packages/blocks/src/database-block/data-view/column/renderer.ts
 create mode 100644 packages/blocks/src/database-block/data-view/column/types.ts
 rename packages/blocks/src/database-block/{ => data-view}/common/ast.ts (96%)
 rename packages/blocks/src/database-block/{ => data-view}/common/base-data-view.ts (84%)
 rename packages/blocks/src/database-block/{ => data-view}/common/component/overflow/overflow.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/css-variable.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/data-stats.ts (99%)
 rename packages/blocks/src/database-block/{ => data-view}/common/data-view-manager.ts (90%)
 rename packages/blocks/src/database-block/{ => data-view}/common/data-view.ts (88%)
 rename packages/blocks/src/database-block/{ => data-view}/common/datasource/all-doc-datasource.ts (82%)
 rename packages/blocks/src/database-block/{ => data-view}/common/datasource/base.ts (90%)
 rename packages/blocks/src/database-block/{ => data-view}/common/datasource/datasource-manager.ts (89%)
 rename packages/blocks/src/database-block/{ => data-view}/common/datasource/tags-datasource.ts (81%)
 rename packages/blocks/src/database-block/{ => data-view}/common/detail/detail.ts (94%)
 rename packages/blocks/src/database-block/{ => data-view}/common/detail/field.ts (96%)
 rename packages/blocks/src/database-block/{ => data-view}/common/detail/layout.ts (96%)
 rename packages/blocks/src/database-block/{ => data-view}/common/detail/selection.ts (94%)
 rename packages/blocks/src/database-block/{ => data-view}/common/filter/condition.ts (97%)
 rename packages/blocks/src/database-block/{ => data-view}/common/filter/filter-bar.ts (95%)
 rename packages/blocks/src/database-block/{ => data-view}/common/filter/filter-group.ts (98%)
 rename packages/blocks/src/database-block/{ => data-view}/common/filter/filter-modal.ts (98%)
 rename packages/blocks/src/database-block/{ => data-view}/common/filter/filter-root.ts (97%)
 rename packages/blocks/src/database-block/{ => data-view}/common/filter/matcher/boolean.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/filter/matcher/date.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/filter/matcher/matcher.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/filter/matcher/multi-tag.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/filter/matcher/number.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/filter/matcher/string.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/filter/matcher/tag.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/filter/matcher/unknown.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/group-by/define.ts (96%)
 rename packages/blocks/src/database-block/{ => data-view}/common/group-by/group-title.ts (94%)
 rename packages/blocks/src/database-block/{ => data-view}/common/group-by/helper.ts (98%)
 rename packages/blocks/src/database-block/{ => data-view}/common/group-by/matcher.ts (90%)
 rename packages/blocks/src/database-block/{ => data-view}/common/group-by/renderer/base.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/group-by/renderer/number-group.ts (95%)
 rename packages/blocks/src/database-block/{ => data-view}/common/group-by/renderer/select-group.ts (91%)
 rename packages/blocks/src/database-block/{ => data-view}/common/group-by/renderer/string-group.ts (93%)
 rename packages/blocks/src/database-block/{ => data-view}/common/group-by/setting.ts (92%)
 rename packages/blocks/src/database-block/{ => data-view}/common/header-area/icon.ts (89%)
 rename packages/blocks/src/database-block/{ => data-view}/common/header-area/text.ts (94%)
 rename packages/blocks/src/database-block/{ => data-view}/common/header/consts.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/header/reference.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/header/title.ts (96%)
 rename packages/blocks/src/database-block/{ => data-view}/common/header/tools/add-row/add-row.ts (97%)
 rename packages/blocks/src/database-block/{ => data-view}/common/header/tools/add-row/new-record-preview.ts (94%)
 rename packages/blocks/src/database-block/{ => data-view}/common/header/tools/base-tool.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/header/tools/expand/index.ts (87%)
 rename packages/blocks/src/database-block/{ => data-view}/common/header/tools/expand/styles.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/header/tools/expand/table-full-screen-modal.ts (90%)
 rename packages/blocks/src/database-block/{ => data-view}/common/header/tools/filter.ts (94%)
 rename packages/blocks/src/database-block/{ => data-view}/common/header/tools/search.ts (93%)
 rename packages/blocks/src/database-block/{ => data-view}/common/header/tools/tools.ts (95%)
 rename packages/blocks/src/database-block/{ => data-view}/common/header/tools/view-options.ts (92%)
 rename packages/blocks/src/database-block/{ => data-view}/common/header/views.ts (96%)
 rename packages/blocks/src/{_common/components/icon => database-block/data-view/common/icons}/icon.ts (91%)
 create mode 100644 packages/blocks/src/database-block/data-view/common/icons/index.ts
 create mode 100644 packages/blocks/src/database-block/data-view/common/index.ts
 rename packages/blocks/src/database-block/{ => data-view}/common/literal/define.ts (96%)
 rename packages/blocks/src/database-block/{ => data-view}/common/literal/matcher.ts (85%)
 rename packages/blocks/src/database-block/{ => data-view}/common/literal/renderer/array-literal.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/literal/renderer/date-literal.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/literal/renderer/literal-element.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/literal/renderer/tag-literal.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/literal/renderer/union-string.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/popup.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/common/properties.ts (98%)
 rename packages/blocks/src/database-block/{ => data-view}/common/ref/ref.ts (94%)
 rename packages/blocks/src/database-block/{ => data-view}/common/selection.ts (96%)
 rename packages/blocks/src/database-block/{ => data-view}/common/types.ts (100%)
 create mode 100644 packages/blocks/src/database-block/data-view/common/view-manager.ts
 rename packages/blocks/src/database-block/{ => data-view}/common/view-source.ts (100%)
 create mode 100644 packages/blocks/src/database-block/data-view/components.ts
 rename packages/blocks/src/database-block/{ => data-view}/data-view.ts (81%)
 create mode 100644 packages/blocks/src/database-block/data-view/index.ts
 rename packages/blocks/src/database-block/{ => data-view}/logical/data-type.ts (92%)
 rename packages/blocks/src/database-block/{ => data-view}/logical/eval-filter.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/logical/matcher.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/logical/property-matcher.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view}/logical/typesystem.ts (100%)
 create mode 100644 packages/blocks/src/database-block/data-view/types.ts
 rename packages/blocks/src/database-block/{ => data-view}/utils/drag.ts (100%)
 create mode 100644 packages/blocks/src/database-block/data-view/utils/event.ts
 rename packages/blocks/src/database-block/{ => data-view}/utils/frame-loop.ts (100%)
 create mode 100644 packages/blocks/src/database-block/data-view/utils/index.ts
 rename packages/blocks/src/database-block/{ => data-view}/utils/insert.ts (100%)
 rename packages/blocks/src/{_common/components => database-block/data-view/utils}/menu/index.ts (100%)
 rename packages/blocks/src/{_common/components => database-block/data-view/utils}/menu/menu.ts (98%)
 rename packages/blocks/src/{_common/components => database-block/data-view/utils}/menu/title.ts (93%)
 rename packages/blocks/src/{_common/components => database-block/data-view/utils}/tags/colors.ts (100%)
 rename packages/blocks/src/{_common/components => database-block/data-view/utils}/tags/multi-tag-select.ts (98%)
 rename packages/blocks/src/{_common/components => database-block/data-view/utils}/tags/multi-tag-view.ts (100%)
 rename packages/blocks/src/{_common/components => database-block/data-view/utils}/tags/styles.ts (100%)
 create mode 100644 packages/blocks/src/database-block/data-view/utils/uni-component/index.ts
 rename packages/blocks/src/{_common/components => database-block/data-view/utils}/uni-component/operation.ts (100%)
 rename packages/blocks/src/{_common/components => database-block/data-view/utils}/uni-component/render-template.ts (100%)
 rename packages/blocks/src/{_common/components => database-block/data-view/utils}/uni-component/uni-component.ts (100%)
 create mode 100644 packages/blocks/src/database-block/data-view/utils/uni-icon.ts
 rename packages/blocks/src/database-block/{ => data-view}/utils/utils.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view/views}/kanban/card.ts (96%)
 rename packages/blocks/src/database-block/{ => data-view/views}/kanban/cell.ts (96%)
 rename packages/blocks/src/database-block/{ => data-view/views}/kanban/controller/clipboard.ts (93%)
 rename packages/blocks/src/database-block/{ => data-view/views}/kanban/controller/drag.ts (96%)
 rename packages/blocks/src/database-block/{ => data-view/views}/kanban/controller/hotkeys.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view/views}/kanban/controller/selection.ts (99%)
 rename packages/blocks/src/database-block/{ => data-view/views}/kanban/define.ts (58%)
 rename packages/blocks/src/database-block/{ => data-view/views}/kanban/group.ts (93%)
 rename packages/blocks/src/database-block/{ => data-view/views}/kanban/header-cell.ts (58%)
 rename packages/blocks/src/database-block/{ => data-view/views}/kanban/header.ts (96%)
 rename packages/blocks/src/database-block/{ => data-view/views}/kanban/kanban-view-manager.ts (89%)
 rename packages/blocks/src/database-block/{ => data-view/views}/kanban/kanban-view.ts (93%)
 rename packages/blocks/src/database-block/{ => data-view/views}/kanban/menu.ts (91%)
 create mode 100644 packages/blocks/src/database-block/data-view/views/kanban/renderer.ts
 create mode 100644 packages/blocks/src/database-block/data-view/views/kanban/types.ts
 rename packages/blocks/src/database-block/{ => data-view/views}/table/components/cell-container.ts (93%)
 rename packages/blocks/src/database-block/{ => data-view/views}/table/components/column-header/column-header.ts (95%)
 rename packages/blocks/src/database-block/{ => data-view/views}/table/components/column-header/column-renderer.ts (96%)
 rename packages/blocks/src/database-block/{ => data-view/views}/table/components/column-header/database-header-column.ts (97%)
 rename packages/blocks/src/database-block/{ => data-view/views}/table/components/column-header/styles.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view/views}/table/components/column-header/vertical-indicator.ts (97%)
 rename packages/blocks/src/database-block/{ => data-view/views}/table/components/column-stats-cell.ts (95%)
 rename packages/blocks/src/database-block/{ => data-view/views}/table/components/column-stats.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view/views}/table/components/header-cell.ts (57%)
 rename packages/blocks/src/database-block/{ => data-view/views}/table/components/menu.ts (88%)
 rename packages/blocks/src/database-block/{ => data-view/views}/table/components/row.ts (94%)
 rename packages/blocks/src/database-block/{ => data-view/views}/table/consts.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view/views}/table/controller/clipboard.ts (99%)
 rename packages/blocks/src/database-block/{ => data-view/views}/table/controller/drag.ts (98%)
 rename packages/blocks/src/database-block/{ => data-view/views}/table/controller/hotkeys.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view/views}/table/controller/selection.ts (99%)
 rename packages/blocks/src/database-block/{ => data-view/views}/table/define.ts (77%)
 rename packages/blocks/src/database-block/{ => data-view/views}/table/group.ts (93%)
 create mode 100644 packages/blocks/src/database-block/data-view/views/table/renderer.ts
 rename packages/blocks/src/database-block/{ => data-view/views}/table/stat-ops.ts (100%)
 rename packages/blocks/src/database-block/{ => data-view/views}/table/table-view-manager.ts (90%)
 rename packages/blocks/src/database-block/{ => data-view/views}/table/table-view.ts (93%)
 rename packages/blocks/src/database-block/{ => data-view/views}/table/types.ts (78%)
 rename packages/blocks/src/database-block/{common/datasource => detail-panel}/block-renderer.ts (88%)
 delete mode 100644 packages/blocks/src/database-block/kanban/renderer.ts
 delete mode 100644 packages/blocks/src/database-block/table/renderer.ts
 create mode 100644 packages/blocks/src/database-block/view-source.ts

diff --git a/packages/blocks/src/__tests__/database/database.unit.spec.ts b/packages/blocks/src/__tests__/database/database.unit.spec.ts
index 9af1cdf4b887..3fe703c0b3df 100644
--- a/packages/blocks/src/__tests__/database/database.unit.spec.ts
+++ b/packages/blocks/src/__tests__/database/database.unit.spec.ts
@@ -6,12 +6,15 @@ import type { BlockModel, Doc } from '@blocksuite/store';
 import { DocCollection, Generator, Schema } from '@blocksuite/store';
 import { beforeEach, describe, expect, test } from 'vitest';
 
-import { numberPureColumnConfig } from '../../database-block/common/columns/number/define.js';
-import { richTextPureColumnConfig } from '../../database-block/common/columns/rich-text/define.js';
-import { selectPureColumnConfig } from '../../database-block/common/columns/select/define.js';
+import { selectColumnModelConfig } from '../../database-block/data-view/column/presets/select/define.js';
 import type { DatabaseBlockModel } from '../../database-block/database-model.js';
 import { DatabaseBlockSchema } from '../../database-block/database-model.js';
-import type { Cell, Column } from '../../database-block/types.js';
+import {
+  type Cell,
+  type Column,
+  numberPureColumnConfig,
+  richTextColumnModelConfig,
+} from '../../database-block/index.js';
 import { NoteBlockSchema } from '../../note-block/note-model.js';
 import { ParagraphBlockSchema } from '../../paragraph-block/paragraph-model.js';
 import { RootBlockSchema } from '../../root-block/root-model.js';
@@ -82,9 +85,9 @@ describe('DatabaseManager', () => {
     col1 = db.addColumn('end', numberPureColumnConfig.create('Number'));
     col2 = db.addColumn(
       'end',
-      selectPureColumnConfig.create('Single Select', { options: selection })
+      selectColumnModelConfig.create('Single Select', { options: selection })
     );
-    col3 = db.addColumn('end', richTextPureColumnConfig.create('Rich Text'));
+    col3 = db.addColumn('end', richTextColumnModelConfig.create('Rich Text'));
 
     doc.updateBlock(databaseModel, {
       columns: [col1, col2, col3],
@@ -200,7 +203,7 @@ describe('DatabaseManager', () => {
   test('copyCellsByColumn', () => {
     const newColId = db.addColumn(
       'end',
-      selectPureColumnConfig.create('Copied Select', { options: selection })
+      selectColumnModelConfig.create('Copied Select', { options: selection })
     );
 
     db.copyCellsByColumn(col2, newColId);
diff --git a/packages/blocks/src/__tests__/database/typesystem.unit.spec.ts b/packages/blocks/src/__tests__/database/typesystem.unit.spec.ts
index ef16b3492269..247164aa467f 100644
--- a/packages/blocks/src/__tests__/database/typesystem.unit.spec.ts
+++ b/packages/blocks/src/__tests__/database/typesystem.unit.spec.ts
@@ -8,7 +8,7 @@ import {
   tUnion,
   tUnknown,
   typesystem,
-} from '../../database-block/logical/typesystem.js';
+} from '../../database-block/data-view/logical/typesystem.js';
 
 export const tString = typesystem.defineData<{ value: string }>({
   name: 'String',
diff --git a/packages/blocks/src/_common/adapters/notion-html.ts b/packages/blocks/src/_common/adapters/notion-html.ts
index 618d34df3333..766a2244afd0 100644
--- a/packages/blocks/src/_common/adapters/notion-html.ts
+++ b/packages/blocks/src/_common/adapters/notion-html.ts
@@ -8,18 +8,21 @@ import type {
   FromSliceSnapshotPayload,
   FromSliceSnapshotResult,
 } from '@blocksuite/store';
-import { type AssetsManager, getAssetName, sha } from '@blocksuite/store';
-import { ASTWalker, BaseAdapter } from '@blocksuite/store';
 import {
+  type AssetsManager,
+  ASTWalker,
+  BaseAdapter,
   type BlockSnapshot,
   type DocSnapshot,
+  getAssetName,
+  nanoid,
+  sha,
   type SliceSnapshot,
 } from '@blocksuite/store';
-import { nanoid } from '@blocksuite/store';
 import rehypeParse from 'rehype-parse';
 import { unified } from 'unified';
 
-import { getTagColor } from '../components/tags/colors.js';
+import { getTagColor } from '../../database-block/data-view/utils/tags/colors.js';
 import { NoteDisplayMode } from '../types.js';
 import { getFilenameFromContentDisposition } from '../utils/header-value-parser.js';
 import {
diff --git a/packages/blocks/src/_common/components/icon/uni-icon.ts b/packages/blocks/src/_common/components/icon/uni-icon.ts
deleted file mode 100644
index 373f721f6608..000000000000
--- a/packages/blocks/src/_common/components/icon/uni-icon.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type * as icons from '../../../_common/icons/index.js';
-import { map } from '../uni-component/operation.js';
-import { createUniComponentFromWebComponent } from '../uni-component/uni-component.js';
-import { AffineLitIcon } from './icon.js';
-
-const litIcon = createUniComponentFromWebComponent<{ name: string }>(
-  AffineLitIcon
-);
-export const createIcon = (name: keyof typeof icons) => {
-  return map(litIcon, () => ({ name }));
-};
diff --git a/packages/blocks/src/_common/components/index.ts b/packages/blocks/src/_common/components/index.ts
index 55604d136793..814eceb896d7 100644
--- a/packages/blocks/src/_common/components/index.ts
+++ b/packages/blocks/src/_common/components/index.ts
@@ -8,5 +8,9 @@ export * from './rich-text/rich-text.js';
 export * from './toast.js';
 export * from './tooltip/index.js';
 import './portal.js';
-export { popTagSelect, type SelectTag } from './tags/multi-tag-select.js';
+
+export {
+  popTagSelect,
+  type SelectTag,
+} from '../../database-block/data-view/utils/tags/multi-tag-select.js';
 export { scrollbarStyle } from './utils.js';
diff --git a/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts b/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts
index bd98a9abb83d..ea5e5221f99f 100644
--- a/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts
+++ b/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts
@@ -4,9 +4,9 @@ import { assertExists } from '@blocksuite/global/utils';
 import { css, html, LitElement, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import type { DataViewTypes } from '../../../database-block/common/data-view.js';
+import type { DataViewTypes } from '../../../database-block/data-view/common/data-view.js';
+import { DatabaseSearchClose } from '../../../database-block/data-view/common/icons/index.js';
 import type { DatabaseBlockModel } from '../../../database-block/database-model.js';
-import { DatabaseSearchClose } from '../../icons/database.js';
 import {
   DatabaseKanbanViewIcon,
   DatabaseTableViewIcon,
diff --git a/packages/blocks/src/_common/icons/database.ts b/packages/blocks/src/_common/icons/database.ts
index d2195c60c40a..41ebabb2fcd7 100644
--- a/packages/blocks/src/_common/icons/database.ts
+++ b/packages/blocks/src/_common/icons/database.ts
@@ -1,371 +1,6 @@
-import { html } from 'lit';
-
 // database icon
 
-export const DatabaseSearchIcon = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M3.75 9.5C3.75 6.32436 6.32436 3.75 9.5 3.75C12.6756 3.75 15.25 6.32436 15.25 9.5C15.25 12.6756 12.6756 15.25 9.5 15.25C6.32436 15.25 3.75 12.6756 3.75 9.5ZM9.5 2.25C5.49594 2.25 2.25 5.49594 2.25 9.5C2.25 13.5041 5.49594 16.75 9.5 16.75C11.2319 16.75 12.8219 16.1427 14.0689 15.1295L19.4697 20.5303C19.7626 20.8232 20.2374 20.8232 20.5303 20.5303C20.8232 20.2374 20.8232 19.7626 20.5303 19.4697L15.1295 14.0689C16.1427 12.8219 16.75 11.2319 16.75 9.5C16.75 5.49594 13.5041 2.25 9.5 2.25Z"
-    fill="currentColor"
-  />
-</svg> `;
-
-export const DatabaseDuplicate = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M6 3.25C4.48122 3.25 3.25 4.48122 3.25 6V14C3.25 15.5188 4.48122 16.75 6 16.75H7.25V18C7.25 19.5188 8.48122 20.75 10 20.75H18C19.5188 20.75 20.75 19.5188 20.75 18V10C20.75 8.48122 19.5188 7.25 18 7.25H16.75V6C16.75 4.48122 15.5188 3.25 14 3.25H6ZM10 7.25H15.25V6C15.25 5.30964 14.6904 4.75 14 4.75H6C5.30964 4.75 4.75 5.30964 4.75 6V14C4.75 14.6904 5.30964 15.25 6 15.25H8C8.41421 15.25 8.75 15.5858 8.75 16V18C8.75 18.6904 9.30964 19.25 10 19.25H18C18.6904 19.25 19.25 18.6904 19.25 18V10C19.25 9.30964 18.6904 8.75 18 8.75H16H10C9.46561 8.75 9.00774 9.08568 8.82933 9.56024C8.68357 9.94796 8.2511 10.1441 7.86338 9.99835C7.47566 9.85259 7.27951 9.42012 7.42527 9.0324C7.81633 7.99216 8.82056 7.25 10 7.25ZM12.8871 10.489C12.6049 10.1858 12.1303 10.1688 11.8271 10.451C11.524 10.7333 11.507 11.2078 11.7892 11.511L12.4771 12.25H7.79999C7.38577 12.25 7.04999 12.5858 7.04999 13C7.04999 13.4142 7.38577 13.75 7.79999 13.75H12.4771L11.7892 14.489C11.507 14.7922 11.524 15.2667 11.8271 15.549C12.1303 15.8312 12.6049 15.8142 12.8871 15.511L14.7489 13.511C15.017 13.2231 15.017 12.7769 14.7489 12.489L12.8871 10.489Z"
-    fill="currentColor"
-  />
-</svg> `;
-
-export const DatabaseInsertLeft = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M14 3.75C13.0335 3.75 12.25 4.5335 12.25 5.5V18.5C12.25 19.4665 13.0335 20.25 14 20.25H18C18.9665 20.25 19.75 19.4665 19.75 18.5V5.5C19.75 4.5335 18.9665 3.75 18 3.75H14ZM13.75 5.5C13.75 5.36193 13.8619 5.25 14 5.25H18C18.1381 5.25 18.25 5.36193 18.25 5.5V18.5C18.25 18.6381 18.1381 18.75 18 18.75H14C13.8619 18.75 13.75 18.6381 13.75 18.5V5.5ZM8.25 9.5C8.25 9.08579 7.91421 8.75 7.5 8.75C7.08579 8.75 6.75 9.08579 6.75 9.5V11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H6.75V14.5C6.75 14.9142 7.08579 15.25 7.5 15.25C7.91421 15.25 8.25 14.9142 8.25 14.5V12.75H10C10.4142 12.75 10.75 12.4142 10.75 12C10.75 11.5858 10.4142 11.25 10 11.25H8.25V9.5Z"
-    fill="currentColor"
-  />
-</svg> `;
-
-export const DatabaseInsertRight = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M6 3.75C5.0335 3.75 4.25 4.5335 4.25 5.5V18.5C4.25 19.4665 5.0335 20.25 6 20.25H10C10.9665 20.25 11.75 19.4665 11.75 18.5V5.5C11.75 4.5335 10.9665 3.75 10 3.75H6ZM5.75 5.5C5.75 5.36193 5.86193 5.25 6 5.25H10C10.1381 5.25 10.25 5.36193 10.25 5.5V18.5C10.25 18.6381 10.1381 18.75 10 18.75H6C5.86193 18.75 5.75 18.6381 5.75 18.5V5.5ZM17.25 9.5C17.25 9.08579 16.9142 8.75 16.5 8.75C16.0858 8.75 15.75 9.08579 15.75 9.5V11.25H14C13.5858 11.25 13.25 11.5858 13.25 12C13.25 12.4142 13.5858 12.75 14 12.75H15.75V14.5C15.75 14.9142 16.0858 15.25 16.5 15.25C16.9142 15.25 17.25 14.9142 17.25 14.5V12.75H19C19.4142 12.75 19.75 12.4142 19.75 12C19.75 11.5858 19.4142 11.25 19 11.25H17.25V9.5Z"
-    fill="currentColor"
-  />
-</svg> `;
-
-export const DatabaseMoveLeft = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M4 4V20M8 12H20M8 12L12 8M8 12L12 16"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>`;
-
-export const DatabaseMoveRight = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M20 4V20M4 12H16M16 12L12 8M16 12L12 16"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>`;
-
-export const DatabaseMultiSelect = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M4 5L6.42929 7.42929C6.46834 7.46834 6.53166 7.46834 6.57071 7.42929L9 5"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-  />
-  <path
-    d="M4 11L6.42929 13.4293C6.46834 13.4683 6.53166 13.4683 6.57071 13.4293L9 11"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-  />
-  <path
-    d="M4 17L6.42929 19.4293C6.46834 19.4683 6.53166 19.4683 6.57071 19.4293L9 17"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-  />
-  <path
-    d="M12 6L20 6"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-  />
-  <path
-    d="M12 12L20 12"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-  />
-  <path
-    d="M12 18L20 18"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-  />
-</svg>`;
-
-export const DatabaseNumber = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M18.5 4L12.5 20"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-  />
-  <path
-    d="M12 4L6 20"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-  />
-  <path
-    d="M20 8.5H5.5"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-  />
-  <path
-    d="M19 15L4 15"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-  />
-</svg>`;
-
-export const DatabaseSelect = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="currentColor"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill="currentColor"
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 16.5563 7.44365 20.25 12 20.25C16.5563 20.25 20.25 16.5563 20.25 12C20.25 7.44365 16.5563 3.75 12 3.75ZM2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12Z"
-  />
-  <path
-    fill="currentColor"
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M7.46967 10.4697C7.76256 10.1768 8.23744 10.1768 8.53033 10.4697L12 13.9393L15.4697 10.4697C15.7626 10.1768 16.2374 10.1768 16.5303 10.4697C16.8232 10.7626 16.8232 11.2374 16.5303 11.5303L12.601 15.4596C12.2691 15.7916 11.7309 15.7916 11.399 15.4596L7.46967 11.5303C7.17678 11.2374 7.17678 10.7626 7.46967 10.4697Z"
-  />
-</svg>`;
-
-export const DatabaseProgress = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill="currentColor"
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M15 4.25C15.4142 4.25 15.75 4.58579 15.75 5V6.25H18C20.0711 6.25 21.75 7.92893 21.75 10V14C21.75 16.0711 20.0711 17.75 18 17.75H15.75V19C15.75 19.4142 15.4142 19.75 15 19.75C14.5858 19.75 14.25 19.4142 14.25 19V17.75H6C3.92893 17.75 2.25 16.0711 2.25 14V10C2.25 7.92893 3.92893 6.25 6 6.25H14.25V5C14.25 4.58579 14.5858 4.25 15 4.25ZM14.25 7.75H6C4.75736 7.75 3.75 8.75736 3.75 10V14C3.75 15.2426 4.75736 16.25 6 16.25H14.25V7.75ZM15.75 16.25H18C19.2426 16.25 20.25 15.2426 20.25 14V10C20.25 8.75736 19.2426 7.75 18 7.75H15.75V16.25ZM6 9.25C6.41421 9.25 6.75 9.58579 6.75 10V14C6.75 14.4142 6.41421 14.75 6 14.75C5.58579 14.75 5.25 14.4142 5.25 14L5.25 10C5.25 9.58579 5.58579 9.25 6 9.25ZM9 9.25C9.41421 9.25 9.75 9.58579 9.75 10L9.75 14C9.75 14.4142 9.41421 14.75 9 14.75C8.58579 14.75 8.25 14.4142 8.25 14L8.25 10C8.25 9.58579 8.58579 9.25 9 9.25ZM12 9.25C12.4142 9.25 12.75 9.58579 12.75 10V14C12.75 14.4142 12.4142 14.75 12 14.75C11.5858 14.75 11.25 14.4142 11.25 14V10C11.25 9.58579 11.5858 9.25 12 9.25Z"
-  />
-</svg>`;
-
-export const DatabaseSearchClose = html`<svg
-  width="16"
-  height="16"
-  viewBox="0 0 16 16"
-  xmlns="http://www.w3.org/2000/svg"
-  fill="none"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M4.22872 4.22878C4.42398 4.03352 4.74057 4.03352 4.93583 4.22878L7.99996 7.29291L11.0641 4.22878C11.2593 4.03352 11.5759 4.03352 11.7712 4.22878C11.9665 4.42405 11.9665 4.74063 11.7712 4.93589L8.70707 8.00002L11.7712 11.0641C11.9665 11.2594 11.9665 11.576 11.7712 11.7713C11.5759 11.9665 11.2593 11.9665 11.0641 11.7713L7.99996 8.70713L4.93583 11.7713C4.74057 11.9665 4.42398 11.9665 4.22872 11.7713C4.03346 11.576 4.03346 11.2594 4.22872 11.0641L7.29285 8.00002L4.22872 4.93589C4.03346 4.74063 4.03346 4.42405 4.22872 4.22878Z"
-  />
-</svg>`;
-
-const addColumnStyle = `
-  width: 12px;
-  height: 12px;
-  fill: var(--affine-text-primary-color);
-`;
-export const DatabaseAddColumn = html`<svg
-  viewBox="0 0 16 16"
-  style=${addColumnStyle}
->
-  <path
-    d="M7.977 14.963c.407 0 .747-.324.747-.723V8.72h5.362c.399 0 .74-.34.74-.747a.746.746 0 00-.74-.738H8.724V1.706c0-.398-.34-.722-.747-.722a.732.732 0 00-.739.722v5.529h-5.37a.746.746 0 00-.74.738c0 .407.341.747.74.747h5.37v5.52c0 .399.332.723.739.723z"
-  ></path>
-</svg>`;
-
-export const DatabaseDragIcon = html`<svg
-  width="10"
-  height="14"
-  viewBox="0 0 10 14"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <rect width="10" height="14" rx="2" />
-  <rect width="10" height="14" rx="2" fill-opacity="0.08" />
-  <g clip-path="url(#clip0_179_9218)">
-    <circle cx="3" cy="3" r="1" fill="var(--affine-icon-color)" />
-    <circle cx="3" cy="6.79163" r="1" fill="var(--affine-icon-color)" />
-    <circle cx="3" cy="10.5833" r="1" fill="var(--affine-icon-color)" />
-    <circle cx="7" cy="3" r="1" fill="var(--affine-icon-color)" />
-    <circle cx="7" cy="6.79163" r="1" fill="var(--affine-icon-color)" />
-    <circle cx="7" cy="10.5833" r="1" fill="var(--affine-icon-color)" />
-  </g>
-  <defs>
-    <clipPath id="clip0_179_9218">
-      <rect width="6" height="10" transform="translate(2 2)" />
-    </clipPath>
-  </defs>
-</svg>`;
-
-export const DatabaseExpand = html`
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M11.4697 3.46967C11.7626 3.17678 12.2374 3.17678 12.5303 3.46967L17.5303 8.46967C17.8232 8.76256 17.8232 9.23744 17.5303 9.53033C17.2374 9.82322 16.7626 9.82322 16.4697 9.53033L12 5.06066L7.53033 9.53033C7.23744 9.82322 6.76256 9.82322 6.46967 9.53033C6.17678 9.23744 6.17678 8.76256 6.46967 8.46967L11.4697 3.46967ZM6.46967 14.4697C6.76256 14.1768 7.23744 14.1768 7.53033 14.4697L12 18.9393L16.4697 14.4697C16.7626 14.1768 17.2374 14.1768 17.5303 14.4697C17.8232 14.7626 17.8232 15.2374 17.5303 15.5303L12.5303 20.5303C12.2374 20.8232 11.7626 20.8232 11.4697 20.5303L6.46967 15.5303C6.17678 15.2374 6.17678 14.7626 6.46967 14.4697Z"
-    />
-  </svg>
-`;
-
-export const DatabaseTableViewClose = html`
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M6.34314 6.34321C6.63604 6.05031 7.11091 6.05031 7.4038 6.34321L12 10.9394L16.5962 6.34321C16.8891 6.05031 17.364 6.05031 17.6569 6.34321C17.9497 6.6361 17.9497 7.11097 17.6569 7.40387L13.0607 12.0001L17.6569 16.5963C17.9497 16.8891 17.9497 17.364 17.6569 17.6569C17.364 17.9498 16.8891 17.9498 16.5962 17.6569L12 13.0607L7.4038 17.6569C7.11091 17.9498 6.63604 17.9498 6.34314 17.6569C6.05025 17.364 6.05025 16.8891 6.34314 16.5963L10.9393 12.0001L6.34314 7.40387C6.05025 7.11097 6.05025 6.6361 6.34314 6.34321Z"
-    />
-  </svg>
-`;
-
-export const DateTime = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M8 2.75C8.41421 2.75 8.75 3.08579 8.75 3.5V4.25H15.25V3.5C15.25 3.08579 15.5858 2.75 16 2.75C16.4142 2.75 16.75 3.08579 16.75 3.5V4.25H19C20.5188 4.25 21.75 5.48122 21.75 7V9.5V19C21.75 20.5188 20.5188 21.75 19 21.75H5C3.48122 21.75 2.25 20.5188 2.25 19V9.5V7C2.25 5.48122 3.48122 4.25 5 4.25H7.25V3.5C7.25 3.08579 7.58579 2.75 8 2.75ZM15.25 5.75V6.5C15.25 6.91421 15.5858 7.25 16 7.25C16.4142 7.25 16.75 6.91421 16.75 6.5V5.75H19C19.6904 5.75 20.25 6.30964 20.25 7V8.75H3.75V7C3.75 6.30964 4.30964 5.75 5 5.75H7.25V6.5C7.25 6.91421 7.58579 7.25 8 7.25C8.41421 7.25 8.75 6.91421 8.75 6.5V5.75H15.25ZM3.75 10.25H20.25V19C20.25 19.6904 19.6904 20.25 19 20.25H5C4.30964 20.25 3.75 19.6904 3.75 19V10.25Z"
-    fill="currentColor"
-  />
-</svg> `;
-
-export const ConvertIcon = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M8.19232 4.25C7.7781 4.25 7.44232 4.58579 7.44232 5C7.44232 5.41421 7.7781 5.75 8.19232 5.75H16.7308C17.4211 5.75 17.9808 6.30965 17.9808 7V14.7278L16.3765 13.1235C16.0836 12.8306 15.6087 12.8306 15.3158 13.1235C15.0229 13.4164 15.0229 13.8913 15.3158 14.1842L18.2005 17.0688C18.3411 17.2094 18.5319 17.2885 18.7308 17.2885C18.9297 17.2885 19.1205 17.2094 19.2611 17.0688L22.1457 14.1842C22.4386 13.8913 22.4386 13.4164 22.1457 13.1235C21.8528 12.8306 21.378 12.8306 21.0851 13.1235L19.4808 14.7278V7C19.4808 5.48122 18.2496 4.25 16.7308 4.25H8.19232ZM15.4231 19.75C15.8373 19.75 16.1731 19.4142 16.1731 19C16.1731 18.5858 15.8373 18.25 15.4231 18.25H6.88462C6.19426 18.25 5.63461 17.6904 5.63461 17V9.2722L7.2389 10.8765C7.53179 11.1694 8.00667 11.1694 8.29956 10.8765C8.59245 10.5836 8.59245 10.1087 8.29956 9.81582L5.41494 6.93121C5.27429 6.79056 5.08353 6.71154 4.88461 6.71154C4.6857 6.71154 4.49494 6.79056 4.35429 6.93121L1.46967 9.81582C1.17678 10.1087 1.17678 10.5836 1.46967 10.8765C1.76256 11.1694 2.23744 11.1694 2.53033 10.8765L4.13461 9.2722V17C4.13461 18.5188 5.36583 19.75 6.88462 19.75H15.4231Z"
-    fill="currentColor"
-  />
-</svg> `;
-
-export const FilterIcon = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M3.75 12C3.75 7.44365 7.44365 3.75 12 3.75C16.5563 3.75 20.25 7.44365 20.25 12C20.25 16.5563 16.5563 20.25 12 20.25C7.44365 20.25 3.75 16.5563 3.75 12ZM12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25ZM8 8.75C7.58579 8.75 7.25 9.08579 7.25 9.5C7.25 9.91421 7.58579 10.25 8 10.25H16C16.4142 10.25 16.75 9.91421 16.75 9.5C16.75 9.08579 16.4142 8.75 16 8.75H8ZM8.25 12.5C8.25 12.0858 8.58579 11.75 9 11.75H15C15.4142 11.75 15.75 12.0858 15.75 12.5C15.75 12.9142 15.4142 13.25 15 13.25H9C8.58579 13.25 8.25 12.9142 8.25 12.5ZM11 14.75C10.5858 14.75 10.25 15.0858 10.25 15.5C10.25 15.9142 10.5858 16.25 11 16.25H13C13.4142 16.25 13.75 15.9142 13.75 15.5C13.75 15.0858 13.4142 14.75 13 14.75H11Z"
-    fill="currentColor"
-  />
-</svg> `;
-
-export const GroupingIcon = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M2.75 6C2.75 4.48122 3.98122 3.25 5.5 3.25H9H15H18.5C20.0188 3.25 21.25 4.48122 21.25 6V18C21.25 19.5188 20.0188 20.75 18.5 20.75H5.5C3.98122 20.75 2.75 19.5188 2.75 18V6ZM14.25 4.75H9.75V19.25H14.25V4.75ZM15.75 19.25V4.75H18.5C19.1904 4.75 19.75 5.30964 19.75 6V18C19.75 18.6904 19.1904 19.25 18.5 19.25H15.75ZM5.5 4.75H8.25V19.25H5.5C4.80964 19.25 4.25 18.6904 4.25 18V6C4.25 5.30964 4.80964 4.75 5.5 4.75Z"
-    fill="currentColor"
-  />
-</svg> `;
-
-export const InfoIcon = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M20.75 6C20.75 6.41421 20.4142 6.75 20 6.75L10.6465 6.75C10.32 7.90425 9.25878 8.75 8 8.75C6.74122 8.75 5.67998 7.90425 5.35352 6.75L4 6.75C3.58579 6.75 3.25 6.41421 3.25 6C3.25 5.58579 3.58579 5.25 4 5.25L5.35352 5.25C5.67998 4.09575 6.74122 3.25 8 3.25C9.25878 3.25 10.32 4.09575 10.6465 5.25L20 5.25C20.4142 5.25 20.75 5.58579 20.75 6ZM20.75 12C20.75 12.4142 20.4142 12.75 20 12.75L18.6465 12.75C18.32 13.9043 17.2588 14.75 16 14.75C14.7412 14.75 13.68 13.9043 13.3535 12.75L4 12.75C3.58579 12.75 3.25 12.4142 3.25 12C3.25 11.5858 3.58579 11.25 4 11.25L13.3535 11.25C13.68 10.0957 14.7412 9.25 16 9.25C17.2588 9.25 18.32 10.0957 18.6465 11.25L20 11.25C20.4142 11.25 20.75 11.5858 20.75 12ZM20.75 18C20.75 18.4142 20.4142 18.75 20 18.75L10.6465 18.75C10.32 19.9043 9.25878 20.75 8 20.75C6.74122 20.75 5.67998 19.9043 5.35352 18.75L4 18.75C3.58579 18.75 3.25 18.4142 3.25 18C3.25 17.5858 3.58579 17.25 4 17.25L5.35352 17.25C5.67998 16.0957 6.74122 15.25 8 15.25C9.25878 15.25 10.32 16.0957 10.6465 17.25L20 17.25C20.4142 17.25 20.75 17.5858 20.75 18ZM17.25 12C17.25 11.3096 16.6904 10.75 16 10.75C15.3096 10.75 14.75 11.3096 14.75 12C14.75 12.6904 15.3096 13.25 16 13.25C16.6904 13.25 17.25 12.6904 17.25 12ZM9.25 6C9.25 5.30964 8.69036 4.75 8 4.75C7.30964 4.75 6.75 5.30964 6.75 6C6.75 6.69036 7.30964 7.25 8 7.25C8.69036 7.25 9.25 6.69036 9.25 6ZM9.25 18C9.25 17.3096 8.69036 16.75 8 16.75C7.30964 16.75 6.75 17.3096 6.75 18C6.75 18.6904 7.30964 19.25 8 19.25C8.69036 19.25 9.25 18.6904 9.25 18Z"
-    fill="currentColor"
-  />
-</svg> `;
+import { html } from 'lit';
 
 export const DoneIcon = html`<svg
   width="24"
diff --git a/packages/blocks/src/_common/types.ts b/packages/blocks/src/_common/types.ts
index 8091b1d28249..b619e50ce764 100644
--- a/packages/blocks/src/_common/types.ts
+++ b/packages/blocks/src/_common/types.ts
@@ -41,70 +41,6 @@ export interface EditingState {
   rect: DOMRect;
 }
 
-export type CellFocus = {
-  rowIndex: number;
-  columnIndex: number;
-};
-export type MultiSelection = {
-  start: number;
-  end: number;
-};
-export type TableViewSelection = {
-  viewId: string;
-  type: 'table';
-  groupKey?: string;
-  rowsSelection?: MultiSelection;
-  columnsSelection?: MultiSelection;
-  focus: CellFocus;
-  isEditing: boolean;
-};
-
-type WithKanbanViewType<T> = T extends unknown
-  ? {
-      viewId: string;
-      type: 'kanban';
-    } & T
-  : never;
-
-export type KanbanCellSelection = {
-  selectionType: 'cell';
-  groupKey: string;
-  cardId: string;
-  columnId: string;
-  isEditing: boolean;
-};
-export type KanbanCardSelectionCard = {
-  groupKey: string;
-  cardId: string;
-};
-export type KanbanCardSelection = {
-  selectionType: 'card';
-  cards: [KanbanCardSelectionCard, ...KanbanCardSelectionCard[]];
-};
-export type KanbanGroupSelection = {
-  selectionType: 'group';
-  groupKeys: [string, ...string[]];
-};
-export type KanbanViewSelection =
-  | KanbanCellSelection
-  | KanbanCardSelection
-  | KanbanGroupSelection;
-export type KanbanViewSelectionWithType =
-  WithKanbanViewType<KanbanViewSelection>;
-
-export type DataViewSelection =
-  | TableViewSelection
-  | KanbanViewSelectionWithType;
-export type GetDataViewSelection<
-  K extends DataViewSelection['type'],
-  T = DataViewSelection,
-> = T extends {
-  type: K;
-}
-  ? T
-  : never;
-export type DataViewSelectionState = DataViewSelection | undefined;
-
 /** Common context interface definition for block models. */
 
 export type CommonSlots = RefNodeSlots;
diff --git a/packages/blocks/src/data-view-block/data-view-block.ts b/packages/blocks/src/data-view-block/data-view-block.ts
index 4621ebacd7c2..3a0286d1d039 100644
--- a/packages/blocks/src/data-view-block/data-view-block.ts
+++ b/packages/blocks/src/data-view-block/data-view-block.ts
@@ -1,6 +1,3 @@
-// related component
-import '../database-block/table/table-view.js';
-
 import { BlockElement, RangeManager } from '@blocksuite/block-std';
 import { nothing } from 'lit';
 import { customElement } from 'lit/decorators.js';
diff --git a/packages/blocks/src/data-view-block/data-view-model.ts b/packages/blocks/src/data-view-block/data-view-model.ts
index d33852df5e67..b9fa2793b35a 100644
--- a/packages/blocks/src/data-view-block/data-view-model.ts
+++ b/packages/blocks/src/data-view-block/data-view-model.ts
@@ -1,7 +1,7 @@
 import { BlockModel, defineBlockSchema } from '@blocksuite/store';
 
-import type { FilterGroup } from '../database-block/common/ast.js';
-import type { DataSourceConfig } from '../database-block/common/datasource/base.js';
+import type { FilterGroup } from '../database-block/data-view/common/ast.js';
+import type { DataSourceConfig } from '../database-block/data-view/common/datasource/base.js';
 
 export type DataProperty = {
   id: string;
diff --git a/packages/blocks/src/database-block/common/datasource/block-icons.ts b/packages/blocks/src/database-block/block-icons.ts
similarity index 99%
rename from packages/blocks/src/database-block/common/datasource/block-icons.ts
rename to packages/blocks/src/database-block/block-icons.ts
index afb046e2d9ae..74d22e509f76 100644
--- a/packages/blocks/src/database-block/common/datasource/block-icons.ts
+++ b/packages/blocks/src/database-block/block-icons.ts
@@ -2,7 +2,7 @@ import type { BlockModel } from '@blocksuite/store';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import type { ParagraphType } from '../../../paragraph-block/index.js';
+import type { ParagraphType } from '../paragraph-block/index.js';
 
 const bulleted = html`<svg
   width="24"
diff --git a/packages/blocks/src/database-block/columns/index.ts b/packages/blocks/src/database-block/columns/index.ts
new file mode 100644
index 000000000000..714c09e99e7f
--- /dev/null
+++ b/packages/blocks/src/database-block/columns/index.ts
@@ -0,0 +1,22 @@
+import type { ColumnMeta } from '../data-view/index.js';
+import { columnPresets } from '../data-view/index.js';
+import { richTextColumnConfig } from './rich-text/cell-renderer.js';
+import { titleColumnConfig } from './title/cell-renderer.js';
+
+export const databaseBlockColumns = [
+  columnPresets.dateColumnConfig,
+  columnPresets.numberColumnConfig,
+  columnPresets.progressColumnConfig,
+  columnPresets.selectColumnConfig,
+  columnPresets.multiSelectColumnConfig,
+  columnPresets.linkColumnConfig,
+  columnPresets.checkboxColumnConfig,
+  richTextColumnConfig,
+];
+export const databaseBlockHiddenColumns = [titleColumnConfig];
+export const databaseBlockColumnMap = Object.fromEntries(
+  [...databaseBlockColumns, ...databaseBlockHiddenColumns].map(v => [
+    v.type,
+    v as ColumnMeta,
+  ])
+);
diff --git a/packages/blocks/src/database-block/common/columns/rich-text/cell-renderer.ts b/packages/blocks/src/database-block/columns/rich-text/cell-renderer.ts
similarity index 92%
rename from packages/blocks/src/database-block/common/columns/rich-text/cell-renderer.ts
rename to packages/blocks/src/database-block/columns/rich-text/cell-renderer.ts
index fcca559de509..5e0a33e9b501 100644
--- a/packages/blocks/src/database-block/common/columns/rich-text/cell-renderer.ts
+++ b/packages/blocks/src/database-block/columns/rich-text/cell-renderer.ts
@@ -6,16 +6,16 @@ import { css, nothing } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import { createIcon } from '../../../../_common/components/icon/uni-icon.js';
-import type { RichText } from '../../../../_common/components/rich-text/rich-text.js';
-import {
-  type AffineInlineEditor,
-  type AffineTextAttributes,
-} from '../../../../_common/inline/presets/affine-inline-specs.js';
-import type { DatabaseBlockComponent } from '../../../database-block.js';
-import { BaseCellRenderer } from '../base-cell.js';
-import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js';
-import { richTextColumnTypeName, richTextPureColumnConfig } from './define.js';
+import type { RichText } from '../../../_common/components/index.js';
+import type {
+  AffineInlineEditor,
+  AffineTextAttributes,
+} from '../../../_common/inline/presets/affine-inline-specs.js';
+import { BaseCellRenderer } from '../../data-view/column/base-cell.js';
+import { createFromBaseCellRenderer } from '../../data-view/column/renderer.js';
+import { createIcon } from '../../data-view/utils/uni-icon.js';
+import type { DatabaseBlockComponent } from '../../database-block.js';
+import { richTextColumnModelConfig } from './define.js';
 
 function toggleStyle(
   inlineEditor: AffineInlineEditor,
@@ -366,8 +366,7 @@ declare global {
   }
 }
 
-columnRenderer.register({
-  type: richTextColumnTypeName,
+export const richTextColumnConfig = richTextColumnModelConfig.renderConfig({
   icon: createIcon('TextIcon'),
 
   cellRenderer: {
@@ -375,5 +374,3 @@ columnRenderer.register({
     edit: createFromBaseCellRenderer(RichTextCellEditing),
   },
 });
-
-export const richTextColumnConfig = richTextPureColumnConfig;
diff --git a/packages/blocks/src/database-block/columns/rich-text/define.ts b/packages/blocks/src/database-block/columns/rich-text/define.ts
new file mode 100644
index 000000000000..435cdeead83e
--- /dev/null
+++ b/packages/blocks/src/database-block/columns/rich-text/define.ts
@@ -0,0 +1,85 @@
+import type { Text } from '@blocksuite/store';
+import { nanoid } from '@blocksuite/store';
+
+import { columnType } from '../../data-view/column/column-config.js';
+import { tRichText } from '../../data-view/logical/data-type.js';
+import { getTagColor } from '../../data-view/utils/tags/colors.js';
+import type { SelectTag } from '../../data-view/utils/tags/multi-tag-select.js';
+
+export const richTextColumnType = columnType('rich-text');
+
+declare global {
+  interface ColumnConfigMap {
+    [richTextColumnType.type]: typeof richTextColumnModelConfig.model;
+  }
+}
+export const richTextColumnModelConfig = richTextColumnType.modelConfig<
+  Text['yText']
+>({
+  name: 'Text',
+  type: () => tRichText.create(),
+  defaultData: () => ({}),
+  cellToString: data => data?.toString() ?? '',
+  cellFromString: data => {
+    return {
+      value: data,
+    };
+  },
+  cellToJson: data => data?.toString() ?? null,
+});
+richTextColumnModelConfig.addConvert('select', (_column, cells) => {
+  const options: Record<string, SelectTag> = {};
+  const getTag = (name: string) => {
+    if (options[name]) return options[name];
+    const tag: SelectTag = {
+      id: nanoid(),
+      value: name,
+      color: getTagColor(),
+    };
+    options[name] = tag;
+    return tag;
+  };
+  return {
+    cells: cells.map(v => {
+      const tags = v?.toString().split(',');
+      const value = tags?.[0]?.trim();
+      if (value) {
+        return getTag(value).id;
+      }
+      return undefined;
+    }),
+    column: {
+      options: Object.values(options),
+    },
+  };
+});
+
+richTextColumnModelConfig.addConvert('multi-select', (_column, cells) => {
+  const options: Record<string, SelectTag> = {};
+  const getTag = (name: string) => {
+    if (options[name]) return options[name];
+    const tag: SelectTag = {
+      id: nanoid(),
+      value: name,
+      color: getTagColor(),
+    };
+    options[name] = tag;
+    return tag;
+  };
+  return {
+    cells: cells.map(v => {
+      const result: string[] = [];
+      const values = v?.toString().split(',');
+      values?.forEach(value => {
+        value = value.trim();
+        if (value) {
+          result.push(getTag(value).id);
+        }
+      });
+      return result;
+    }),
+    column: {
+      options: Object.values(options),
+    },
+  };
+});
diff --git a/packages/blocks/src/database-block/columns/title/cell-renderer.ts b/packages/blocks/src/database-block/columns/title/cell-renderer.ts
new file mode 100644
index 000000000000..ce0b4aed9f93
--- /dev/null
+++ b/packages/blocks/src/database-block/columns/title/cell-renderer.ts
@@ -0,0 +1,15 @@
+import { createFromBaseCellRenderer } from '../../data-view/column/renderer.js';
+import { createIcon } from '../../data-view/utils/uni-icon.js';
+import {
+  RichTextCell,
+  RichTextCellEditing,
+} from '../rich-text/cell-renderer.js';
+import { titlePureColumnConfig } from './define.js';
+
+export const titleColumnConfig = titlePureColumnConfig.renderConfig({
+  icon: createIcon('TitleIcon'),
+  cellRenderer: {
+    view: createFromBaseCellRenderer(RichTextCell),
+    edit: createFromBaseCellRenderer(RichTextCellEditing),
+  },
+});
diff --git a/packages/blocks/src/database-block/columns/title/define.ts b/packages/blocks/src/database-block/columns/title/define.ts
new file mode 100644
index 000000000000..bb710097a85e
--- /dev/null
+++ b/packages/blocks/src/database-block/columns/title/define.ts
@@ -0,0 +1,22 @@
+import { columnType } from '../../data-view/column/column-config.js';
+import { tRichText } from '../../data-view/logical/data-type.js';
+
+export const titleColumnType = columnType('title');
+
+declare global {
+  interface ColumnConfigMap {
+    [titleColumnType.type]: typeof titlePureColumnConfig.model;
+  }
+}
+export const titlePureColumnConfig = titleColumnType.modelConfig<string>({
+  name: 'Title',
+  type: () => tRichText.create(),
+  defaultData: () => ({}),
+  cellToString: data => data?.toString() ?? '',
+  cellFromString: data => {
+    return {
+      value: data,
+    };
+  },
+  cellToJson: data => data?.toString() ?? null,
+});
diff --git a/packages/blocks/src/database-block/common/columns/image/define.ts b/packages/blocks/src/database-block/common/columns/image/define.ts
deleted file mode 100644
index bf226eb5bfc1..000000000000
--- a/packages/blocks/src/database-block/common/columns/image/define.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { tImage } from '../../../logical/data-type.js';
-import { columnManager } from '../manager.js';
-
-export const ImageColumnTypeName = 'image';
-
-declare global {
-  interface ColumnConfigMap {
-    [ImageColumnTypeName]: typeof imagePureColumnConfig;
-  }
-}
-export const imagePureColumnConfig = columnManager.register<string>(
-  ImageColumnTypeName,
-  {
-    name: 'image',
-    type: () => tImage.create(),
-    defaultData: () => ({}),
-    cellToString: data => data ?? '',
-    cellFromString: data => {
-      return {
-        value: data,
-      };
-    },
-    cellToJson: data => data ?? null,
-  }
-);
diff --git a/packages/blocks/src/database-block/common/columns/manager.ts b/packages/blocks/src/database-block/common/columns/manager.ts
deleted file mode 100644
index 9f9604cedda0..000000000000
--- a/packages/blocks/src/database-block/common/columns/manager.ts
+++ /dev/null
@@ -1,208 +0,0 @@
-import type { UniComponent } from '../../../_common/components/uni-component/uni-component.js';
-import type { TType } from '../../logical/typesystem.js';
-import type { StatCalcOpType } from '../../types.js';
-import type {
-  DataViewColumnManager,
-  DataViewManager,
-} from '../data-view-manager.js';
-
-type JSON =
-  | null
-  | number
-  | string
-  | boolean
-  | JSON[]
-  | {
-      [k: string]: JSON;
-    };
-
-export interface CellRenderProps<
-  Data extends NonNullable<unknown> = NonNullable<unknown>,
-  Value = unknown,
-> {
-  view: DataViewManager;
-  column: DataViewColumnManager<Value, Data>;
-  rowId: string;
-  isEditing: boolean;
-  selectCurrentCell: (editing: boolean) => void;
-}
-
-export interface DataViewCellLifeCycle {
-  beforeEnterEditMode(): boolean;
-
-  onEnterEditMode(): void;
-
-  onExitEditMode(): void;
-
-  focusCell(): boolean;
-
-  blurCell(): boolean;
-
-  forceUpdate(): void;
-}
-
-export type DataViewCellComponent<
-  Data extends NonNullable<unknown> = NonNullable<unknown>,
-  Value = unknown,
-> = UniComponent<CellRenderProps<Data, Value>, DataViewCellLifeCycle>;
-
-export type CellRenderer<
-  Data extends NonNullable<unknown> = NonNullable<unknown>,
-  Value = unknown,
-> = {
-  view: DataViewCellComponent<Data, Value>;
-  edit?: DataViewCellComponent<Data, Value>;
-};
-type ColumnOps<
-  Data extends NonNullable<unknown> = NonNullable<unknown>,
-  Value = unknown,
-> = {
-  name: string;
-  defaultData: () => Data;
-  type: (data: Data) => TType;
-  formatValue?: (value: unknown, colData: Data) => Value;
-  cellToString: (data: Value, colData: Data) => string;
-  cellFromString: (
-    data: string,
-    colData: Data
-  ) => { value: unknown; data?: Record<string, unknown> };
-  cellToJson: (data: Value, colData: Data) => JSON;
-  addGroup?: (text: string, oldData: Data) => Data;
-};
-
-type ConvertFunction<From extends ColumnConfig, To extends ColumnConfig> = (
-  column: GetColumnDataFromConfig<From>,
-  cells: (GetCellDataFromConfig<From> | undefined)[]
-) => {
-  column: GetColumnDataFromConfig<To>;
-  cells: (GetCellDataFromConfig<To> | undefined)[];
-};
-
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface ColumnConfigMap {}
-}
-
-export class ColumnConfigManager {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private map = new Map<string, ColumnConfig<any, any>>();
-
-  getColumn<Type extends keyof ColumnConfigMap>(
-    type: Type
-  ): ColumnConfigMap[Type];
-  getColumn(type: string): ColumnConfig;
-  getColumn(type: string): ColumnConfig {
-    const column = this.map.get(type);
-    if (!column) {
-      throw new Error(`${type} is not exist`);
-    }
-    return column;
-  }
-
-  register<CellData, T extends Record<string, unknown> = Record<string, never>>(
-    type: string,
-    ops: ColumnOps<T, CellData>
-  ) {
-    const config = new ColumnConfig(type, ops);
-    this.map.set(type, config);
-    return config;
-  }
-}
-
-export type GetColumnDataFromConfig<T extends ColumnConfig> =
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  T extends ColumnConfig<infer R, any> ? R : never;
-export type GetCellDataFromConfig<T extends ColumnConfig> =
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  T extends ColumnConfig<any, infer R> ? R : never;
-
-export class ColumnConfig<
-  T extends NonNullable<unknown> = NonNullable<unknown>,
-  CellData = unknown,
-> {
-  convertMap = new Map();
-
-  constructor(
-    public readonly type: string,
-    public ops: ColumnOps<T, CellData>
-  ) {}
-
-  create(
-    name: string,
-    data?: T
-  ): {
-    type: string;
-    name: string;
-    statCalcOp: StatCalcOpType;
-    data: T;
-  } {
-    return {
-      type: this.type,
-      name,
-      statCalcOp: 'none',
-      data: data ?? this.ops.defaultData(),
-    };
-  }
-
-  defaultData() {
-    return this.ops.defaultData();
-  }
-
-  createWithId(
-    id: string,
-    name: string,
-    data?: T
-  ): {
-    type: string;
-    name: string;
-    data: T;
-    id: string;
-  } {
-    return {
-      id,
-      type: this.type,
-      name,
-      data: data ?? this.ops.defaultData(),
-    };
-  }
-
-  dataType(data: T) {
-    return this.ops.type(data);
-  }
-
-  toString(cellData: CellData, colData: T): string {
-    return this.ops.cellToString(cellData, colData);
-  }
-
-  toJson(cellData: CellData, colData: T): JSON {
-    return this.ops.cellToJson(cellData, colData);
-  }
-
-  formatValue(cellData: CellData, colData: T): CellData | undefined {
-    return cellData === undefined
-      ? undefined
-      : this.ops.formatValue?.(cellData, colData) ?? cellData;
-  }
-
-  fromString(cellData: string, colData: T) {
-    return this.ops.cellFromString(cellData, colData);
-  }
-
-  convertCell(to: string, column: Record<string, unknown>, cells: unknown[]) {
-    return this.convertMap.get(to)?.(column, cells);
-  }
-
-  registerConvert<ToCellName extends keyof ColumnConfigMap>(
-    to: ToCellName,
-    // @ts-expect-error
-    convert: ConvertFunction<this, ColumnConfigMap[ToCellName]>
-  ) {
-    this.convertMap.set(to, convert);
-  }
-
-  get name() {
-    return this.ops.name;
-  }
-}
-
-export const columnManager = new ColumnConfigManager();
diff --git a/packages/blocks/src/database-block/common/columns/progress/define.ts b/packages/blocks/src/database-block/common/columns/progress/define.ts
deleted file mode 100644
index 4e65d70a224c..000000000000
--- a/packages/blocks/src/database-block/common/columns/progress/define.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Text } from '@blocksuite/store';
-
-import { tNumber } from '../../../logical/data-type.js';
-import { columnManager } from '../manager.js';
-import { richTextColumnTypeName } from '../rich-text/define.js';
-
-export const progressColumnTypeName = 'progress';
-
-declare global {
-  interface ColumnConfigMap {
-    [progressColumnTypeName]: typeof progressPureColumnConfig;
-  }
-}
-export const progressPureColumnConfig = columnManager.register<number>(
-  progressColumnTypeName,
-  {
-    name: 'Progress',
-    type: () => tNumber.create(),
-    defaultData: () => ({}),
-    cellToString: data => data?.toString() ?? '',
-    cellFromString: data => {
-      const num = data ? Number(data) : NaN;
-      return {
-        value: isNaN(num) ? null : num,
-      };
-    },
-    cellToJson: data => data ?? null,
-  }
-);
-progressPureColumnConfig.registerConvert(
-  richTextColumnTypeName,
-  (_column, cells) => ({
-    column: {},
-    cells: cells.map(v => new Text(v?.toString()).yText),
-  })
-);
diff --git a/packages/blocks/src/database-block/common/columns/renderer.ts b/packages/blocks/src/database-block/common/columns/renderer.ts
deleted file mode 100644
index f351e65d15e2..000000000000
--- a/packages/blocks/src/database-block/common/columns/renderer.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { UniComponent } from '../../../_common/components/uni-component/uni-component.js';
-import { createUniComponentFromWebComponent } from '../../../_common/components/uni-component/uni-component.js';
-import type { BaseCellRenderer } from './base-cell.js';
-import type { CellRenderer, DataViewCellComponent } from './manager.js';
-
-export interface Renderer<
-  Data extends NonNullable<unknown> = NonNullable<unknown>,
-  Value = unknown,
-> {
-  type: string;
-  icon?: UniComponent;
-  cellRenderer: CellRenderer<Data, Value>;
-  detailCellRenderer?: CellRenderer<Data, Value>;
-}
-
-export class ColumnRendererHelper {
-  private _columns = new Map<string, Renderer>();
-
-  register(renderer: Renderer) {
-    const columns = this._columns;
-    if (columns.has(renderer.type)) {
-      throw new Error('cannot register twice for ' + renderer.type);
-    }
-    columns.set(renderer.type, renderer);
-  }
-
-  get(type: Renderer['type']): Renderer {
-    const renderer = this._columns.get(type);
-    if (!renderer) {
-      throw new Error(`cannot find renderer of ${type}`);
-    }
-    return renderer;
-  }
-
-  list(): Renderer[] {
-    return Array.from(this._columns.values());
-  }
-}
-
-export const columnRenderer = new ColumnRendererHelper();
-
-export const createFromBaseCellRenderer = <
-  Value,
-  Data extends Record<string, unknown> = Record<string, unknown>,
->(
-  renderer: new () => BaseCellRenderer<Value, Data>
-): DataViewCellComponent => {
-  return createUniComponentFromWebComponent(renderer as never) as never;
-};
diff --git a/packages/blocks/src/database-block/common/columns/rich-text/define.ts b/packages/blocks/src/database-block/common/columns/rich-text/define.ts
deleted file mode 100644
index 153fbf9ab4a7..000000000000
--- a/packages/blocks/src/database-block/common/columns/rich-text/define.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import type { Text } from '@blocksuite/store';
-import { nanoid } from '@blocksuite/store';
-
-import { getTagColor } from '../../../../_common/components/tags/colors.js';
-import type { SelectTag } from '../../../../_common/components/tags/multi-tag-select.js';
-import { tRichText } from '../../../logical/data-type.js';
-import { columnManager } from '../manager.js';
-import { multiSelectColumnTypeName } from '../multi-select/define.js';
-import { selectColumnTypeName } from '../select/define.js';
-
-export const richTextColumnTypeName = 'rich-text';
-
-declare global {
-  interface ColumnConfigMap {
-    [richTextColumnTypeName]: typeof richTextPureColumnConfig;
-  }
-}
-export const richTextPureColumnConfig = columnManager.register<Text['yText']>(
-  richTextColumnTypeName,
-  {
-    name: 'Text',
-    type: () => tRichText.create(),
-    defaultData: () => ({}),
-    cellToString: data => data?.toString() ?? '',
-    cellFromString: data => {
-      return {
-        value: data,
-      };
-    },
-    cellToJson: data => data?.toString() ?? null,
-  }
-);
-richTextPureColumnConfig.registerConvert(
-  selectColumnTypeName,
-  (_column, cells) => {
-    const options: Record<string, SelectTag> = {};
-    const getTag = (name: string) => {
-      if (options[name]) return options[name];
-      const tag: SelectTag = {
-        id: nanoid(),
-        value: name,
-        color: getTagColor(),
-      };
-      options[name] = tag;
-      return tag;
-    };
-    return {
-      cells: cells.map(v => {
-        const tags = v?.toString().split(',');
-        const value = tags?.[0]?.trim();
-        if (value) {
-          return getTag(value).id;
-        }
-        return undefined;
-      }),
-      column: {
-        options: Object.values(options),
-      },
-    };
-  }
-);
-
-richTextPureColumnConfig.registerConvert(
-  multiSelectColumnTypeName,
-  (_column, cells) => {
-    const options: Record<string, SelectTag> = {};
-    const getTag = (name: string) => {
-      if (options[name]) return options[name];
-      const tag: SelectTag = {
-        id: nanoid(),
-        value: name,
-        color: getTagColor(),
-      };
-      options[name] = tag;
-      return tag;
-    };
-    return {
-      cells: cells.map(v => {
-        const result: string[] = [];
-        const values = v?.toString().split(',');
-        values?.forEach(value => {
-          value = value.trim();
-          if (value) {
-            result.push(getTag(value).id);
-          }
-        });
-        return result;
-      }),
-      column: {
-        options: Object.values(options),
-      },
-    };
-  }
-);
diff --git a/packages/blocks/src/database-block/common/columns/text/define.ts b/packages/blocks/src/database-block/common/columns/text/define.ts
deleted file mode 100644
index d945c50b093c..000000000000
--- a/packages/blocks/src/database-block/common/columns/text/define.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { tString } from '../../../logical/data-type.js';
-import { columnManager } from '../manager.js';
-
-export const textColumnTypeName = 'text';
-
-declare global {
-  interface ColumnConfigMap {
-    [textColumnTypeName]: typeof textPureColumnConfig;
-  }
-}
-export const textPureColumnConfig = columnManager.register<string>(
-  textColumnTypeName,
-  {
-    name: 'Plain-Text',
-    type: () => tString.create(),
-    defaultData: () => ({}),
-    cellToString: data => data ?? '',
-    cellFromString: data => {
-      return {
-        value: data,
-      };
-    },
-    cellToJson: data => data ?? null,
-  }
-);
diff --git a/packages/blocks/src/database-block/common/columns/title/cell-renderer.ts b/packages/blocks/src/database-block/common/columns/title/cell-renderer.ts
deleted file mode 100644
index e34174463378..000000000000
--- a/packages/blocks/src/database-block/common/columns/title/cell-renderer.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { createIcon } from '../../../../_common/components/icon/uni-icon.js';
-import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js';
-import {
-  RichTextCell,
-  RichTextCellEditing,
-} from '../rich-text/cell-renderer.js';
-import { titleColumnTypeName, titlePureColumnConfig } from './define.js';
-
-columnRenderer.register({
-  type: titleColumnTypeName,
-  icon: createIcon('TitleIcon'),
-  cellRenderer: {
-    view: createFromBaseCellRenderer(RichTextCell),
-    edit: createFromBaseCellRenderer(RichTextCellEditing),
-  },
-});
-
-export const titleColumnConfig = titlePureColumnConfig;
diff --git a/packages/blocks/src/database-block/common/columns/title/define.ts b/packages/blocks/src/database-block/common/columns/title/define.ts
deleted file mode 100644
index 058459cf3dec..000000000000
--- a/packages/blocks/src/database-block/common/columns/title/define.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { tRichText } from '../../../logical/data-type.js';
-import { columnManager } from '../manager.js';
-
-export const titleColumnTypeName = 'title';
-
-declare global {
-  interface ColumnConfigMap {
-    [titleColumnTypeName]: typeof titlePureColumnConfig;
-  }
-}
-export const titlePureColumnConfig = columnManager.register<string>(
-  titleColumnTypeName,
-  {
-    name: 'Title',
-    type: () => tRichText.create(),
-    defaultData: () => ({}),
-    cellToString: data => data?.toString() ?? '',
-    cellFromString: data => {
-      return {
-        value: data,
-      };
-    },
-    cellToJson: data => data?.toString() ?? null,
-  }
-);
diff --git a/packages/blocks/src/database-block/common/columns/types.ts b/packages/blocks/src/database-block/common/columns/types.ts
deleted file mode 100644
index e663f459f11a..000000000000
--- a/packages/blocks/src/database-block/common/columns/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { SelectTag } from '../../../_common/components/tags/multi-tag-select.js';
-
-export type SelectColumnData = {
-  options: SelectTag[];
-};
diff --git a/packages/blocks/src/database-block/common/group-by/util.ts b/packages/blocks/src/database-block/common/group-by/util.ts
deleted file mode 100644
index 54ea14d83ce3..000000000000
--- a/packages/blocks/src/database-block/common/group-by/util.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { columnManager } from '../columns/manager.js';
-import type { GroupBy } from '../types.js';
-import { groupByMatcher } from './matcher.js';
-
-export const defaultGroupBy = (
-  columnId: string,
-  type: string,
-  data: NonNullable<unknown>
-): GroupBy | undefined => {
-  const name = groupByMatcher.match(
-    columnManager.getColumn(type).dataType(data)
-  )?.name;
-  return name != null
-    ? {
-        type: 'groupBy',
-        columnId: columnId,
-        name: name,
-      }
-    : undefined;
-};
diff --git a/packages/blocks/src/database-block/common/view-manager.ts b/packages/blocks/src/database-block/common/view-manager.ts
deleted file mode 100644
index 5612212e5fe9..000000000000
--- a/packages/blocks/src/database-block/common/view-manager.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import type { DatabaseBlockModel } from '../database-model.js';
-import { tTag } from '../logical/data-type.js';
-import { isTArray } from '../logical/typesystem.js';
-import { DEFAULT_COLUMN_WIDTH } from '../table/consts.js';
-import type { Column, InsertToPosition } from '../types.js';
-import { insertPositionToIndex } from '../utils/insert.js';
-import type { FilterGroup } from './ast.js';
-import { columnManager } from './columns/manager.js';
-import { groupByMatcher } from './group-by/matcher.js';
-
-export type TableViewColumn = {
-  id: string;
-  width: number;
-  hide?: boolean;
-};
-
-export type KanbanViewColumn = {
-  id: string;
-  hide?: boolean;
-};
-export type GroupBy = {
-  type: 'groupBy';
-  columnId: string;
-  name: string;
-};
-export type DatabaseModeMap = {
-  table: {
-    columns: TableViewColumn[];
-    filter: FilterGroup;
-  };
-  kanban: {
-    columns: KanbanViewColumn[];
-    filter: FilterGroup;
-    groupBy?: GroupBy;
-  };
-};
-export type DatabaseViewDataMap = {
-  [K in keyof DatabaseModeMap]: DatabaseModeMap[K] & {
-    id: string;
-    name: string;
-    mode: K;
-  };
-};
-
-type ViewOperation<Data> = {
-  init(model: DatabaseBlockModel, id: string, name: string): Data;
-  addColumn(
-    model: DatabaseBlockModel,
-    view: Data,
-    newColumn: Column,
-    position: InsertToPosition
-  ): void;
-  deleteColumn(model: DatabaseBlockModel, view: Data, id: string): void;
-};
-
-export const defaultGroupBy = (
-  columnId: string,
-  type: string,
-  data: NonNullable<unknown>
-): GroupBy | undefined => {
-  const name = groupByMatcher.match(
-    columnManager.getColumn(type).dataType(data)
-  )?.name;
-  return name != null
-    ? {
-        type: 'groupBy',
-        columnId: columnId,
-        name: name,
-      }
-    : undefined;
-};
-export const ViewOperationMap: {
-  [K in keyof DatabaseViewDataMap]: ViewOperation<DatabaseViewDataMap[K]>;
-} = {
-  kanban: {
-    init(model, id, name) {
-      const column = model.columns.find(column => {
-        const type = columnManager.getColumn(column.type).dataType(column.data);
-        return !!(tTag.is(type) || (isTArray(type) && tTag.is(type.ele)));
-      });
-      if (!column) {
-        throw new Error('not implement yet');
-      }
-      return {
-        id,
-        name,
-        mode: 'kanban',
-        columns: model.columns.map(v => ({
-          id: v.id,
-          hide: false,
-        })),
-        filter: {
-          type: 'group',
-          op: 'and',
-          conditions: [],
-        },
-        groupBy: defaultGroupBy(column.id, column.type, column.data),
-      };
-    },
-    addColumn(_model, _view, _newColumn) {
-      //Nothing to do
-    },
-    deleteColumn(_model, _view, _id) {
-      //Nothing to do
-    },
-  },
-  table: {
-    init(_model, id, name) {
-      return {
-        id,
-        name,
-        mode: 'table',
-        columns: [],
-        filter: {
-          type: 'group',
-          op: 'and',
-          conditions: [],
-        },
-      };
-    },
-    addColumn(_model, view, newColumn, position) {
-      view.columns.splice(insertPositionToIndex(position, view.columns), 0, {
-        id: newColumn.id,
-        width: DEFAULT_COLUMN_WIDTH,
-      });
-    },
-    deleteColumn(_model, view, id) {
-      const index = view.columns.findIndex(c => c.id === id);
-      if (index >= 0) {
-        view.columns.splice(index, 1);
-      }
-    },
-  },
-};
diff --git a/packages/blocks/src/database-block/common/datasource/database-block-datasource.ts b/packages/blocks/src/database-block/data-source.ts
similarity index 77%
rename from packages/blocks/src/database-block/common/datasource/database-block-datasource.ts
rename to packages/blocks/src/database-block/data-source.ts
index e853ef0370c7..32a55e40f9c0 100644
--- a/packages/blocks/src/database-block/common/datasource/database-block-datasource.ts
+++ b/packages/blocks/src/database-block/data-source.ts
@@ -1,32 +1,28 @@
-import type { EditorHost } from '@blocksuite/block-std';
-import type { Disposable } from '@blocksuite/global/utils';
-import { assertExists, Slot } from '@blocksuite/global/utils';
-import type { BlockModel } from '@blocksuite/store';
-import { Text, type Y } from '@blocksuite/store';
-
-import { createUniComponentFromWebComponent } from '../../../_common/components/uni-component/uni-component.js';
-import type { DatabaseBlockModel } from '../../database-model.js';
-import type { InsertToPosition, StatCalcOpType } from '../../types.js';
-import { insertPositionToIndex } from '../../utils/insert.js';
-import { checkboxColumnConfig } from '../columns/checkbox/cell-renderer.js';
-import { dateColumnConfig } from '../columns/date/cell-renderer.js';
-import { imageColumnConfig } from '../columns/image/cell-renderer.js';
-import { linkColumnConfig } from '../columns/link/cell-renderer.js';
-import type { ColumnConfig } from '../columns/manager.js';
-import { columnManager } from '../columns/manager.js';
-import { multiSelectColumnConfig } from '../columns/multi-select/cell-renderer.js';
-import { multiSelectPureColumnConfig } from '../columns/multi-select/define.js';
-import { numberColumnConfig } from '../columns/number/cell-renderer.js';
-import { progressColumnConfig } from '../columns/progress/cell-renderer.js';
-import { richTextColumnConfig } from '../columns/rich-text/cell-renderer.js';
-import { selectColumnConfig } from '../columns/select/cell-renderer.js';
-import { titleColumnConfig } from '../columns/title/cell-renderer.js';
-import type { DatabaseBlockDataSourceConfig, DetailSlots } from './base.js';
-import { BaseDataSource } from './base.js';
-import { getIcon } from './block-icons.js';
-import { BlockRenderer } from './block-renderer.js';
+import { type EditorHost } from '@blocksuite/block-std';
+import { assertExists, type Disposable, Slot } from '@blocksuite/global/utils';
+import { type BlockModel, Text, type Y } from '@blocksuite/store';
 
-export class DatabaseBlockDataSource extends BaseDataSource {
+import { getIcon } from './block-icons.js';
+import {
+  databaseBlockColumnMap,
+  databaseBlockColumns,
+} from './columns/index.js';
+import type { StatCalcOpType } from './data-view/index.js';
+import {
+  BaseDataSource,
+  type ColumnConfig,
+  type ColumnMeta,
+  columnPresets,
+  createUniComponentFromWebComponent,
+  type DatabaseBlockDataSourceConfig,
+  type DetailSlots,
+  insertPositionToIndex,
+  type InsertToPosition,
+} from './data-view/index.js';
+import { type DatabaseBlockModel } from './database-model.js';
+import { BlockRenderer } from './detail-panel/block-renderer.js';
+
+export class Datasource extends BaseDataSource {
   private _model: DatabaseBlockModel;
   private _batch = 0;
 
@@ -74,6 +70,7 @@ export class DatabaseBlockDataSource extends BaseDataSource {
     value: unknown
   ): void {
     this._runCapture();
+
     const type = this.propertyGetType(propertyId);
     if (type === 'title' && typeof value === 'string') {
       const text = this.getModelById(rowId)?.text;
@@ -158,9 +155,9 @@ export class DatabaseBlockDataSource extends BaseDataSource {
     this.doc.captureSync();
     return this._model.addColumn(
       insertToPosition,
-      columnManager
-        .getColumn(type ?? multiSelectPureColumnConfig.type)
-        .create(this.newColumnName())
+      databaseBlockColumnMap[
+        type ?? columnPresets.multiSelectColumnConfig.type
+      ].model.create(this.newColumnName())
     );
   }
 
@@ -180,15 +177,6 @@ export class DatabaseBlockDataSource extends BaseDataSource {
     this._model.applyColumnUpdate();
   }
 
-  public propertyChangeStatCalcOp(
-    propertyId: string,
-    type: StatCalcOpType
-  ): void {
-    this.doc.captureSync();
-    this._model.updateColumn(propertyId, () => ({ statCalcOp: type }));
-    this._model.applyColumnUpdate();
-  }
-
   public propertyChangeType(propertyId: string, toType: string): void {
     const currentType = this.propertyGetType(propertyId);
     const currentData = this.propertyGetData(propertyId);
@@ -196,10 +184,12 @@ export class DatabaseBlockDataSource extends BaseDataSource {
     const currentCells = rows.map(rowId =>
       this.cellGetValue(rowId, propertyId)
     );
-    const result = columnManager
-      .getColumn(currentType)
-      ?.convertCell(toType, currentData, currentCells) ?? {
-      column: columnManager.getColumn(toType).defaultData(),
+    const result = databaseBlockColumnMap[currentType].model?.convertCell(
+      toType,
+      currentData,
+      currentCells
+    ) ?? {
+      column: databaseBlockColumnMap[currentType].model.defaultData(),
       cells: currentCells.map(() => undefined),
     };
     this.doc.captureSync();
@@ -251,12 +241,6 @@ export class DatabaseBlockDataSource extends BaseDataSource {
     return this._model.columns.find(v => v.id === propertyId)?.type ?? '';
   }
 
-  public propertyGetStatCalcOp(propertyId: string): StatCalcOpType {
-    return (
-      this._model.columns.find(v => v.id === propertyId)?.statCalcOp ?? 'none'
-    );
-  }
-
   public propertyDuplicate(columnId: string): string {
     this.doc.captureSync();
     const currentSchema = this._model.getColumn(columnId);
@@ -320,17 +304,12 @@ export class DatabaseBlockDataSource extends BaseDataSource {
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  public get allPropertyConfig(): ColumnConfig<any, any>[] {
-    return [
-      dateColumnConfig,
-      numberColumnConfig,
-      progressColumnConfig,
-      selectColumnConfig,
-      multiSelectColumnConfig,
-      richTextColumnConfig,
-      linkColumnConfig,
-      checkboxColumnConfig,
-    ];
+  public get allPropertyConfig(): ColumnConfig<any, any, any>[] {
+    return databaseBlockColumns.map(v => v.model);
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  public getPropertyMeta(type: string): ColumnMeta<any, any, any> {
+    return databaseBlockColumnMap[type];
   }
 
   public override get detailSlots(): DetailSlots {
@@ -351,6 +330,19 @@ export class DatabaseBlockDataSource extends BaseDataSource {
       this.doc.moveBlocks([model], this._model, target);
     }
   }
-}
 
-export const hiddenColumn = [titleColumnConfig, imageColumnConfig];
+  public propertyChangeStatCalcOp(
+    propertyId: string,
+    type: StatCalcOpType
+  ): void {
+    this.doc.captureSync();
+    this._model.updateColumn(propertyId, () => ({ statCalcOp: type }));
+    this._model.applyColumnUpdate();
+  }
+
+  public propertyGetStatCalcOp(propertyId: string): StatCalcOpType {
+    return (
+      this._model.columns.find(v => v.id === propertyId)?.statCalcOp ?? 'none'
+    );
+  }
+}
diff --git a/packages/blocks/src/database-block/common/columns/base-cell.ts b/packages/blocks/src/database-block/data-view/column/base-cell.ts
similarity index 98%
rename from packages/blocks/src/database-block/common/columns/base-cell.ts
rename to packages/blocks/src/database-block/data-view/column/base-cell.ts
index 385e56509eb4..29154f92f5b5 100644
--- a/packages/blocks/src/database-block/common/columns/base-cell.ts
+++ b/packages/blocks/src/database-block/data-view/column/base-cell.ts
@@ -4,7 +4,7 @@ import { property } from 'lit/decorators.js';
 import type {
   DataViewColumnManager,
   DataViewManager,
-} from '../data-view-manager.js';
+} from '../common/data-view-manager.js';
 import type { CellRenderProps, DataViewCellLifeCycle } from './manager.js';
 
 export abstract class BaseCellRenderer<
diff --git a/packages/blocks/src/database-block/data-view/column/column-config.ts b/packages/blocks/src/database-block/data-view/column/column-config.ts
new file mode 100644
index 000000000000..5a19817f9975
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/column/column-config.ts
@@ -0,0 +1,171 @@
+import type { TType } from '../logical/typesystem.js';
+import type { StatCalcOpType } from '../views/table/types.js';
+import type {
+  GetCellDataFromConfig,
+  GetColumnDataFromConfig,
+} from './manager.js';
+import { createRendererConfig, type Renderer } from './renderer.js';
+
+type JSON =
+  | null
+  | number
+  | string
+  | boolean
+  | JSON[]
+  | {
+      [k: string]: JSON;
+    };
+
+type ColumnOps<
+  Data extends NonNullable<unknown> = NonNullable<unknown>,
+  Value = unknown,
+> = {
+  name: string;
+  defaultData: () => Data;
+  type: (data: Data) => TType;
+  formatValue?: (value: unknown, colData: Data) => Value;
+  cellToString: (data: Value, colData: Data) => string;
+  cellFromString: (
+    data: string,
+    colData: Data
+  ) => {
+    value: unknown;
+    data?: Record<string, unknown>;
+  };
+  cellToJson: (data: Value, colData: Data) => JSON;
+  addGroup?: (text: string, oldData: Data) => Data;
+};
+
+export class ColumnConfig<
+  Type extends string = keyof ColumnConfigMap,
+  T extends NonNullable<unknown> = NonNullable<unknown>,
+  CellData = unknown,
+> {
+  convertMap = new Map();
+
+  constructor(
+    public readonly type: Type,
+    public ops: ColumnOps<T, CellData>
+  ) {}
+
+  create = (
+    name: string,
+    data?: T
+  ): {
+    type: string;
+    name: string;
+    statCalcOp: StatCalcOpType;
+    data: T;
+  } => {
+    return {
+      type: this.type,
+      name,
+      statCalcOp: 'none',
+      data: data ?? this.ops.defaultData(),
+    };
+  };
+
+  defaultData() {
+    return this.ops.defaultData();
+  }
+
+  createWithId(
+    id: string,
+    name: string,
+    data?: T
+  ): {
+    type: string;
+    name: string;
+    data: T;
+    id: string;
+  } {
+    return {
+      id,
+      type: this.type,
+      name,
+      data: data ?? this.ops.defaultData(),
+    };
+  }
+
+  dataType(data: T) {
+    return this.ops.type(data);
+  }
+
+  toString(cellData: CellData, colData: T): string {
+    return this.ops.cellToString(cellData, colData);
+  }
+
+  toJson(cellData: CellData, colData: T): JSON {
+    return this.ops.cellToJson(cellData, colData);
+  }
+
+  formatValue(cellData: CellData, colData: T): CellData | undefined {
+    return cellData === undefined
+      ? undefined
+      : this.ops.formatValue?.(cellData, colData) ?? cellData;
+  }
+
+  fromString(cellData: string, colData: T) {
+    return this.ops.cellFromString(cellData, colData);
+  }
+
+  convertCell(to: string, column: Record<string, unknown>, cells: unknown[]) {
+    return this.convertMap.get(to)?.(column, cells);
+  }
+
+  registerConvert = <ToCellName extends keyof ColumnConfigMap>(
+    to: ToCellName,
+    convert: (
+      column: GetColumnDataFromConfig<ColumnConfig<Type, T, CellData>>,
+      cells: (
+        | GetCellDataFromConfig<ColumnConfig<Type, T, CellData>>
+        | undefined
+      )[]
+    ) => {
+      column: GetColumnDataFromConfig<ColumnConfigMap[ToCellName]>;
+      cells: (GetCellDataFromConfig<ColumnConfigMap[ToCellName]> | undefined)[];
+    }
+  ) => {
+    this.convertMap.set(to, convert);
+  };
+
+  get name() {
+    return this.ops.name;
+  }
+}
+export type ColumnMeta<
+  Type extends string = keyof ColumnConfigMap,
+  CellData = unknown,
+  ColumnData extends NonNullable<unknown> = NonNullable<unknown>,
+> = {
+  type: Type;
+  model: ColumnConfig<Type, ColumnData, CellData>;
+  renderer: Renderer<ColumnData, CellData>;
+};
+export const columnType = <Type extends string>(type: Type) => ({
+  type: type,
+  modelConfig: <
+    CellData,
+    ColumnData extends Record<string, unknown> = Record<string, never>,
+  >(
+    ops: ColumnOps<ColumnData, CellData>
+  ) => {
+    const model = new ColumnConfig(type, ops);
+    return {
+      type,
+      model,
+      create: model.create,
+      addConvert: model.registerConvert,
+      renderConfig: (
+        renderer: Omit<Renderer<ColumnData, CellData>, 'type'>
+      ) => ({
+        type,
+        model,
+        renderer: createRendererConfig<CellData, ColumnData>({
+          ...renderer,
+          type,
+        }),
+      }),
+    };
+  },
+});
diff --git a/packages/blocks/src/database-block/data-view/column/index.ts b/packages/blocks/src/database-block/data-view/column/index.ts
new file mode 100644
index 000000000000..56eeab944463
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/column/index.ts
@@ -0,0 +1,3 @@
+export * from './base-cell.js';
+export { ColumnConfig } from './column-config.js';
+export * from './manager.js';
diff --git a/packages/blocks/src/database-block/data-view/column/manager.ts b/packages/blocks/src/database-block/data-view/column/manager.ts
new file mode 100644
index 000000000000..0d2963140ec4
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/column/manager.ts
@@ -0,0 +1,54 @@
+import type {
+  DataViewColumnManager,
+  DataViewManager,
+} from '../common/data-view-manager.js';
+import type { UniComponent } from '../utils/uni-component/index.js';
+import type { ColumnConfig } from './column-config.js';
+
+export interface CellRenderProps<
+  Data extends NonNullable<unknown> = NonNullable<unknown>,
+  Value = unknown,
+> {
+  view: DataViewManager;
+  column: DataViewColumnManager<Value, Data>;
+  rowId: string;
+  isEditing: boolean;
+  selectCurrentCell: (editing: boolean) => void;
+}
+
+export interface DataViewCellLifeCycle {
+  beforeEnterEditMode(): boolean;
+
+  onEnterEditMode(): void;
+
+  onExitEditMode(): void;
+
+  focusCell(): boolean;
+
+  blurCell(): boolean;
+
+  forceUpdate(): void;
+}
+
+export type DataViewCellComponent<
+  Data extends NonNullable<unknown> = NonNullable<unknown>,
+  Value = unknown,
+> = UniComponent<CellRenderProps<Data, Value>, DataViewCellLifeCycle>;
+
+export type CellRenderer<
+  Data extends NonNullable<unknown> = NonNullable<unknown>,
+  Value = unknown,
+> = {
+  view: DataViewCellComponent<Data, Value>;
+  edit?: DataViewCellComponent<Data, Value>;
+};
+declare global {
+  export interface ColumnConfigMap {}
+}
+
+export type GetColumnDataFromConfig<T> =
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  T extends ColumnConfig<infer _, infer R, any> ? R : never;
+export type GetCellDataFromConfig<T> =
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  T extends ColumnConfig<infer _, any, infer R> ? R : never;
diff --git a/packages/blocks/src/database-block/common/columns/checkbox/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/checkbox/cell-renderer.ts
similarity index 79%
rename from packages/blocks/src/database-block/common/columns/checkbox/cell-renderer.ts
rename to packages/blocks/src/database-block/data-view/column/presets/checkbox/cell-renderer.ts
index 50765c50d022..083f80734951 100644
--- a/packages/blocks/src/database-block/common/columns/checkbox/cell-renderer.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/checkbox/cell-renderer.ts
@@ -1,15 +1,15 @@
 import { css, html } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 
-import { createIcon } from '../../../../_common/components/icon/uni-icon.js';
 import {
   checkboxChecked,
   checkboxUnchecked,
   playCheckAnimation,
-} from '../../../../list-block/utils/icons.js';
-import { BaseCellRenderer } from '../base-cell.js';
-import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js';
-import { checkboxPureColumnConfig } from './define.js';
+} from '../../../../../list-block/utils/icons.js';
+import { createIcon } from '../../../utils/uni-icon.js';
+import { BaseCellRenderer } from '../../base-cell.js';
+import { createFromBaseCellRenderer } from '../../renderer.js';
+import { checkboxColumnModelConfig } from './define.js';
 
 @customElement('affine-database-checkbox-cell')
 export class CheckboxCell extends BaseCellRenderer<boolean> {
@@ -75,11 +75,9 @@ export class CheckboxCell extends BaseCellRenderer<boolean> {
   }
 }
 
-columnRenderer.register({
-  type: checkboxPureColumnConfig.type,
+export const checkboxColumnConfig = checkboxColumnModelConfig.renderConfig({
   icon: createIcon('CheckBoxIcon'),
   cellRenderer: {
     view: createFromBaseCellRenderer(CheckboxCell),
   },
 });
-export const checkboxColumnConfig = checkboxPureColumnConfig;
diff --git a/packages/blocks/src/database-block/common/columns/checkbox/define.ts b/packages/blocks/src/database-block/data-view/column/presets/checkbox/define.ts
similarity index 53%
rename from packages/blocks/src/database-block/common/columns/checkbox/define.ts
rename to packages/blocks/src/database-block/data-view/column/presets/checkbox/define.ts
index 53b8898ac424..8c3882578f6b 100644
--- a/packages/blocks/src/database-block/common/columns/checkbox/define.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/checkbox/define.ts
@@ -1,24 +1,23 @@
 import { tBoolean } from '../../../logical/data-type.js';
-import { columnManager } from '../manager.js';
+import { columnType } from '../../column-config.js';
 
+export const chceckboxColumnType = columnType('checkbox');
 declare global {
   interface ColumnConfigMap {
-    checkbox: typeof checkboxPureColumnConfig;
+    [chceckboxColumnType.type]: typeof checkboxColumnModelConfig;
   }
 }
 
-export const checkboxPureColumnConfig = columnManager.register<boolean>(
-  'checkbox',
-  {
+export const checkboxColumnModelConfig =
+  chceckboxColumnType.modelConfig<boolean>({
     name: 'Checkbox',
     type: () => tBoolean.create(),
     defaultData: () => ({}),
     cellToString: data => (data ? 'True' : 'False'),
     cellFromString: data => {
       return {
-        value: data === 'False' ? false : true,
+        value: data !== 'False',
       };
     },
     cellToJson: data => data ?? null,
-  }
-);
+  });
diff --git a/packages/blocks/src/database-block/common/columns/date/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/date/cell-renderer.ts
similarity index 88%
rename from packages/blocks/src/database-block/common/columns/date/cell-renderer.ts
rename to packages/blocks/src/database-block/data-view/column/presets/date/cell-renderer.ts
index 53c70aef2c90..143bd24a542c 100644
--- a/packages/blocks/src/database-block/common/columns/date/cell-renderer.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/date/cell-renderer.ts
@@ -4,12 +4,12 @@ import { format } from 'date-fns/format';
 import { css, html, unsafeCSS } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 
-import { DatePicker } from '../../../../_common/components/date-picker/date-picker.js';
-import { createIcon } from '../../../../_common/components/icon/uni-icon.js';
-import { createLitPortal } from '../../../../_common/components/portal.js';
-import { BaseCellRenderer } from '../base-cell.js';
-import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js';
-import { datePureColumnConfig } from './define.js';
+import { DatePicker } from '../../../../../_common/components/date-picker/index.js';
+import { createLitPortal } from '../../../../../_common/components/portal.js';
+import { createIcon } from '../../../utils/uni-icon.js';
+import { BaseCellRenderer } from '../../base-cell.js';
+import { createFromBaseCellRenderer } from '../../renderer.js';
+import { dateColumnModelConfig } from './define.js';
 
 @customElement('affine-database-date-cell')
 export class DateCell extends BaseCellRenderer<number> {
@@ -153,13 +153,10 @@ export class DateCellEditing extends BaseCellRenderer<number> {
   }
 }
 
-columnRenderer.register({
-  type: datePureColumnConfig.type,
+export const dateColumnConfig = dateColumnModelConfig.renderConfig({
   icon: createIcon('DateTime'),
   cellRenderer: {
     view: createFromBaseCellRenderer(DateCell),
     edit: createFromBaseCellRenderer(DateCellEditing),
   },
 });
-
-export const dateColumnConfig = datePureColumnConfig;
diff --git a/packages/blocks/src/database-block/common/columns/date/define.ts b/packages/blocks/src/database-block/data-view/column/presets/date/define.ts
similarity index 64%
rename from packages/blocks/src/database-block/common/columns/date/define.ts
rename to packages/blocks/src/database-block/data-view/column/presets/date/define.ts
index 71cd6e86754c..72c0441e52c2 100644
--- a/packages/blocks/src/database-block/common/columns/date/define.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/date/define.ts
@@ -1,12 +1,13 @@
 import { tDate } from '../../../logical/data-type.js';
-import { columnManager } from '../manager.js';
+import { columnType } from '../../column-config.js';
 
+export const dateColumnType = columnType('date');
 declare global {
   interface ColumnConfigMap {
-    date: typeof datePureColumnConfig;
+    [dateColumnType.type]: typeof dateColumnModelConfig;
   }
 }
-export const datePureColumnConfig = columnManager.register<number>('date', {
+export const dateColumnModelConfig = dateColumnType.modelConfig<number>({
   name: 'Date',
   type: () => tDate.create(),
   defaultData: () => ({}),
diff --git a/packages/blocks/src/database-block/common/columns/image/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/image/cell-renderer.ts
similarity index 61%
rename from packages/blocks/src/database-block/common/columns/image/cell-renderer.ts
rename to packages/blocks/src/database-block/data-view/column/presets/image/cell-renderer.ts
index d62b21ef0aa4..bdc73b1ddc58 100644
--- a/packages/blocks/src/database-block/common/columns/image/cell-renderer.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/image/cell-renderer.ts
@@ -1,10 +1,10 @@
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { createIcon } from '../../../../_common/components/icon/uni-icon.js';
-import { BaseCellRenderer } from '../base-cell.js';
-import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js';
-import { ImageColumnTypeName, imagePureColumnConfig } from './define.js';
+import { createIcon } from '../../../utils/uni-icon.js';
+import { BaseCellRenderer } from '../../base-cell.js';
+import { createFromBaseCellRenderer } from '../../renderer.js';
+import { imageColumnModelConfig } from './define.js';
 
 @customElement('affine-database-image-cell')
 export class TextCell extends BaseCellRenderer<string> {
@@ -26,12 +26,9 @@ export class TextCell extends BaseCellRenderer<string> {
   }
 }
 
-columnRenderer.register({
-  type: ImageColumnTypeName,
+export const imageColumnConfig = imageColumnModelConfig.renderConfig({
   icon: createIcon('ImageIcon'),
   cellRenderer: {
     view: createFromBaseCellRenderer(TextCell),
   },
 });
-
-export const imageColumnConfig = imagePureColumnConfig;
diff --git a/packages/blocks/src/database-block/data-view/column/presets/image/define.ts b/packages/blocks/src/database-block/data-view/column/presets/image/define.ts
new file mode 100644
index 000000000000..6e0a632ae787
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/column/presets/image/define.ts
@@ -0,0 +1,22 @@
+import { tImage } from '../../../logical/data-type.js';
+import { columnType } from '../../column-config.js';
+
+export const imageColumnType = columnType('image');
+
+declare global {
+  interface ColumnConfigMap {
+    [imageColumnType.type]: typeof imageColumnModelConfig.model;
+  }
+}
+export const imageColumnModelConfig = imageColumnType.modelConfig<string>({
+  name: 'image',
+  type: () => tImage.create(),
+  defaultData: () => ({}),
+  cellToString: data => data ?? '',
+  cellFromString: data => {
+    return {
+      value: data,
+    };
+  },
+  cellToJson: data => data ?? null,
+});
diff --git a/packages/blocks/src/database-block/data-view/column/presets/index.ts b/packages/blocks/src/database-block/data-view/column/presets/index.ts
new file mode 100644
index 000000000000..0256e81d942e
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/column/presets/index.ts
@@ -0,0 +1,21 @@
+import { checkboxColumnConfig } from './checkbox/cell-renderer.js';
+import { dateColumnConfig } from './date/cell-renderer.js';
+import { imageColumnConfig } from './image/cell-renderer.js';
+import { linkColumnConfig } from './link/cell-renderer.js';
+import { multiSelectColumnConfig } from './multi-select/cell-renderer.js';
+import { numberColumnConfig } from './number/cell-renderer.js';
+import { progressColumnConfig } from './progress/cell-renderer.js';
+import { selectColumnConfig } from './select/cell-renderer.js';
+import { textColumnConfig } from './text/cell-renderer.js';
+
+export const columnPresets = {
+  checkboxColumnConfig,
+  dateColumnConfig,
+  imageColumnConfig,
+  linkColumnConfig,
+  multiSelectColumnConfig,
+  numberColumnConfig,
+  progressColumnConfig,
+  selectColumnConfig,
+  textColumnConfig,
+};
diff --git a/packages/blocks/src/database-block/common/columns/link/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/link/cell-renderer.ts
similarity index 89%
rename from packages/blocks/src/database-block/common/columns/link/cell-renderer.ts
rename to packages/blocks/src/database-block/data-view/column/presets/link/cell-renderer.ts
index 9aad16492241..7e31012c667f 100644
--- a/packages/blocks/src/database-block/common/columns/link/cell-renderer.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/link/cell-renderer.ts
@@ -5,12 +5,12 @@ import { css, unsafeCSS } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import { createIcon } from '../../../../_common/components/icon/uni-icon.js';
-import { PenIcon } from '../../../../_common/icons/index.js';
-import { stopPropagation } from '../../../../_common/utils/event.js';
-import { isValidUrl, normalizeUrl } from '../../../../_common/utils/url.js';
-import { BaseCellRenderer } from '../base-cell.js';
-import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js';
+import { PenIcon } from '../../../../../_common/icons/index.js';
+import { isValidUrl, normalizeUrl } from '../../../../../_common/utils/url.js';
+import { stopPropagation } from '../../../utils/event.js';
+import { createIcon } from '../../../utils/uni-icon.js';
+import { BaseCellRenderer } from '../../base-cell.js';
+import { createFromBaseCellRenderer } from '../../renderer.js';
 import { linkPureColumnConfig } from './define.js';
 
 @customElement('affine-database-link-cell')
@@ -182,13 +182,10 @@ export class LinkCellEditing extends BaseCellRenderer<string> {
   }
 }
 
-columnRenderer.register({
-  type: linkPureColumnConfig.type,
+export const linkColumnConfig = linkPureColumnConfig.renderConfig({
   icon: createIcon('LinkIcon'),
   cellRenderer: {
     view: createFromBaseCellRenderer(LinkCell),
     edit: createFromBaseCellRenderer(LinkCellEditing),
   },
 });
-
-export const linkColumnConfig = linkPureColumnConfig;
diff --git a/packages/blocks/src/database-block/common/columns/link/components/link-node.ts b/packages/blocks/src/database-block/data-view/column/presets/link/components/link-node.ts
similarity index 93%
rename from packages/blocks/src/database-block/common/columns/link/components/link-node.ts
rename to packages/blocks/src/database-block/data-view/column/presets/link/components/link-node.ts
index 77c14b94c9ed..b6f0410cb7e0 100644
--- a/packages/blocks/src/database-block/common/columns/link/components/link-node.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/link/components/link-node.ts
@@ -2,7 +2,7 @@ import { ShadowlessElement } from '@blocksuite/block-std';
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { isValidUrl } from '../../../../../_common/utils/url.js';
+import { isValidUrl } from '../../../../../../_common/utils/url.js';
 
 @customElement('affine-database-link-node')
 export class LinkNode extends ShadowlessElement {
diff --git a/packages/blocks/src/database-block/common/columns/link/define.ts b/packages/blocks/src/database-block/data-view/column/presets/link/define.ts
similarity index 59%
rename from packages/blocks/src/database-block/common/columns/link/define.ts
rename to packages/blocks/src/database-block/data-view/column/presets/link/define.ts
index b100676ea46d..54c65dcb5183 100644
--- a/packages/blocks/src/database-block/common/columns/link/define.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/link/define.ts
@@ -1,12 +1,13 @@
 import { tString } from '../../../logical/data-type.js';
-import { columnManager } from '../manager.js';
+import { columnType } from '../../column-config.js';
 
+export const linkColumnType = columnType('link');
 declare global {
   interface ColumnConfigMap {
-    link: typeof linkPureColumnConfig;
+    [linkColumnType.type]: typeof linkPureColumnConfig.model;
   }
 }
-export const linkPureColumnConfig = columnManager.register<string>('link', {
+export const linkPureColumnConfig = linkColumnType.modelConfig<string>({
   name: 'Link',
   type: () => tString.create(),
   defaultData: () => ({}),
diff --git a/packages/blocks/src/database-block/common/columns/multi-select/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/multi-select/cell-renderer.ts
similarity index 68%
rename from packages/blocks/src/database-block/common/columns/multi-select/cell-renderer.ts
rename to packages/blocks/src/database-block/data-view/column/presets/multi-select/cell-renderer.ts
index e5a91d76ea13..406685f0f80a 100644
--- a/packages/blocks/src/database-block/common/columns/multi-select/cell-renderer.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/multi-select/cell-renderer.ts
@@ -1,15 +1,17 @@
-import '../../../../_common/components/tags/multi-tag-select.js';
-import '../../../../_common/components/tags/multi-tag-view.js';
+import '../../../utils/tags/multi-tag-select.js';
+import '../../../utils/tags/multi-tag-view.js';
 
 import { customElement } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import { createIcon } from '../../../../_common/components/icon/uni-icon.js';
-import type { SelectTag } from '../../../../_common/components/tags/multi-tag-select.js';
-import { popTagSelect } from '../../../../_common/components/tags/multi-tag-select.js';
-import { BaseCellRenderer } from '../base-cell.js';
-import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js';
-import type { SelectColumnData } from '../types.js';
+import {
+  popTagSelect,
+  type SelectTag,
+} from '../../../utils/tags/multi-tag-select.js';
+import { createIcon } from '../../../utils/uni-icon.js';
+import { BaseCellRenderer } from '../../base-cell.js';
+import { createFromBaseCellRenderer } from '../../renderer.js';
+import type { SelectColumnData } from '../../types.js';
 import { multiSelectPureColumnConfig } from './define.js';
 
 @customElement('affine-database-multi-select-cell')
@@ -87,13 +89,12 @@ export class MultiSelectCellEditing extends BaseCellRenderer<
   }
 }
 
-columnRenderer.register({
-  type: multiSelectPureColumnConfig.type,
-  icon: createIcon('DatabaseMultiSelect'),
-  cellRenderer: {
-    view: createFromBaseCellRenderer(MultiSelectCell),
-    edit: createFromBaseCellRenderer(MultiSelectCellEditing),
-  },
-});
-
-export const multiSelectColumnConfig = multiSelectPureColumnConfig;
+export const multiSelectColumnConfig = multiSelectPureColumnConfig.renderConfig(
+  {
+    icon: createIcon('DatabaseMultiSelect'),
+    cellRenderer: {
+      view: createFromBaseCellRenderer(MultiSelectCell),
+      edit: createFromBaseCellRenderer(MultiSelectCellEditing),
+    },
+  }
+);
diff --git a/packages/blocks/src/database-block/common/columns/multi-select/define.ts b/packages/blocks/src/database-block/data-view/column/presets/multi-select/define.ts
similarity index 73%
rename from packages/blocks/src/database-block/common/columns/multi-select/define.ts
rename to packages/blocks/src/database-block/data-view/column/presets/multi-select/define.ts
index bd1ef61536df..f63e108ab107 100644
--- a/packages/blocks/src/database-block/common/columns/multi-select/define.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/multi-select/define.ts
@@ -1,23 +1,22 @@
 import { nanoid, Text } from '@blocksuite/store';
 
-import { getTagColor } from '../../../../_common/components/tags/colors.js';
-import type { SelectTag } from '../../../../_common/components/tags/multi-tag-select.js';
 import { tTag } from '../../../logical/data-type.js';
 import { tArray } from '../../../logical/typesystem.js';
-import { columnManager } from '../manager.js';
-import type { SelectColumnData } from '../types.js';
-
-export const multiSelectColumnTypeName = 'multi-select';
+import { getTagColor } from '../../../utils/tags/colors.js';
+import type { SelectTag } from '../../../utils/tags/multi-tag-select.js';
+import { columnType } from '../../column-config.js';
+import type { SelectColumnData } from '../../types.js';
 
+export const multiSelectColumnType = columnType('multi-select');
 declare global {
   interface ColumnConfigMap {
-    'multi-select': typeof multiSelectPureColumnConfig;
+    [multiSelectColumnType.type]: typeof multiSelectPureColumnConfig.model;
   }
 }
-export const multiSelectPureColumnConfig = columnManager.register<
+export const multiSelectPureColumnConfig = multiSelectColumnType.modelConfig<
   string[],
   SelectColumnData
->(multiSelectColumnTypeName, {
+>({
   name: 'Multi-select',
   type: data => tArray(tTag.create({ tags: data.options })),
   defaultData: () => ({
@@ -70,11 +69,11 @@ export const multiSelectPureColumnConfig = columnManager.register<
   },
   cellToJson: data => data ?? null,
 });
-multiSelectPureColumnConfig.registerConvert('select', (column, cells) => ({
+multiSelectPureColumnConfig.addConvert('select', (column, cells) => ({
   column,
   cells: cells.map(v => v?.[0]),
 }));
-multiSelectPureColumnConfig.registerConvert('rich-text', (column, cells) => {
+multiSelectPureColumnConfig.addConvert('rich-text', (column, cells) => {
   const optionMap = Object.fromEntries(column.options.map(v => [v.id, v]));
   return {
     column: {},
diff --git a/packages/blocks/src/database-block/common/columns/number/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/number/cell-renderer.ts
similarity index 89%
rename from packages/blocks/src/database-block/common/columns/number/cell-renderer.ts
rename to packages/blocks/src/database-block/data-view/column/presets/number/cell-renderer.ts
index b654736ab776..410797077ecb 100644
--- a/packages/blocks/src/database-block/common/columns/number/cell-renderer.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/number/cell-renderer.ts
@@ -2,10 +2,10 @@ import { baseTheme } from '@toeverything/theme';
 import { css, html, unsafeCSS } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 
-import { createIcon } from '../../../../_common/components/icon/uni-icon.js';
-import { stopPropagation } from '../../../../_common/utils/event.js';
-import { BaseCellRenderer } from '../base-cell.js';
-import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js';
+import { stopPropagation } from '../../../utils/event.js';
+import { createIcon } from '../../../utils/uni-icon.js';
+import { BaseCellRenderer } from '../../base-cell.js';
+import { createFromBaseCellRenderer } from '../../renderer.js';
 import { numberPureColumnConfig } from './define.js';
 
 @customElement('affine-database-number-cell')
@@ -129,13 +129,10 @@ export class NumberCellEditing extends BaseCellRenderer<number> {
   }
 }
 
-columnRenderer.register({
-  type: numberPureColumnConfig.type,
+export const numberColumnConfig = numberPureColumnConfig.renderConfig({
   icon: createIcon('DatabaseNumber'),
   cellRenderer: {
     view: createFromBaseCellRenderer(NumberCell),
     edit: createFromBaseCellRenderer(NumberCellEditing),
   },
 });
-
-export const numberColumnConfig = numberPureColumnConfig;
diff --git a/packages/blocks/src/database-block/common/columns/number/define.ts b/packages/blocks/src/database-block/data-view/column/presets/number/define.ts
similarity index 51%
rename from packages/blocks/src/database-block/common/columns/number/define.ts
rename to packages/blocks/src/database-block/data-view/column/presets/number/define.ts
index f055b99fda6a..c813f138b4c9 100644
--- a/packages/blocks/src/database-block/common/columns/number/define.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/number/define.ts
@@ -1,22 +1,21 @@
 import { Text } from '@blocksuite/store';
 
 import { tNumber } from '../../../logical/data-type.js';
-import { columnManager } from '../manager.js';
-import { richTextColumnTypeName } from '../rich-text/define.js';
+import { columnType } from '../../column-config.js';
 
-export const numberColumnTypeName = 'number';
+export const numberColumnType = columnType('number');
 
 declare global {
   interface ColumnConfigMap {
-    [numberColumnTypeName]: typeof numberPureColumnConfig;
+    [numberColumnType.type]: typeof numberPureColumnConfig.model;
   }
 }
-export const numberPureColumnConfig = columnManager.register<
+export const numberPureColumnConfig = numberColumnType.modelConfig<
   number,
   {
     decimal: number;
   }
->(numberColumnTypeName, {
+>({
   name: 'Number',
   type: () => tNumber.create(),
   defaultData: () => ({ decimal: 0 }),
@@ -29,10 +28,7 @@ export const numberPureColumnConfig = columnManager.register<
   },
   cellToJson: data => data ?? null,
 });
-numberPureColumnConfig.registerConvert(
-  richTextColumnTypeName,
-  (_column, cells) => ({
-    column: {},
-    cells: cells.map(v => new Text(v?.toString()).yText),
-  })
-);
+numberPureColumnConfig.addConvert('rich-text', (_column, cells) => ({
+  column: {},
+  cells: cells.map(v => new Text(v?.toString()).yText),
+}));
diff --git a/packages/blocks/src/database-block/common/columns/progress/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/progress/cell-renderer.ts
similarity index 94%
rename from packages/blocks/src/database-block/common/columns/progress/cell-renderer.ts
rename to packages/blocks/src/database-block/data-view/column/presets/progress/cell-renderer.ts
index a5ed8b07138c..59dfe27fc850 100644
--- a/packages/blocks/src/database-block/common/columns/progress/cell-renderer.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/progress/cell-renderer.ts
@@ -2,10 +2,10 @@ import { css, html } from 'lit';
 import { customElement, query, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { createIcon } from '../../../../_common/components/icon/uni-icon.js';
 import { startDrag } from '../../../utils/drag.js';
-import { BaseCellRenderer } from '../base-cell.js';
-import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js';
+import { createIcon } from '../../../utils/uni-icon.js';
+import { BaseCellRenderer } from '../../base-cell.js';
+import { createFromBaseCellRenderer } from '../../renderer.js';
 import { progressPureColumnConfig } from './define.js';
 
 const styles = css`
@@ -230,13 +230,10 @@ export class ProgressCellEditing extends BaseCellRenderer<number> {
   }
 }
 
-columnRenderer.register({
-  type: progressPureColumnConfig.type,
+export const progressColumnConfig = progressPureColumnConfig.renderConfig({
   icon: createIcon('DatabaseProgress'),
   cellRenderer: {
     view: createFromBaseCellRenderer(ProgressCell),
     edit: createFromBaseCellRenderer(ProgressCellEditing),
   },
 });
-
-export const progressColumnConfig = progressPureColumnConfig;
diff --git a/packages/blocks/src/database-block/data-view/column/presets/progress/define.ts b/packages/blocks/src/database-block/data-view/column/presets/progress/define.ts
new file mode 100644
index 000000000000..5ceb22a4440c
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/column/presets/progress/define.ts
@@ -0,0 +1,29 @@
+import { Text } from '@blocksuite/store';
+
+import { tNumber } from '../../../logical/data-type.js';
+import { columnType } from '../../column-config.js';
+
+export const progressColumnType = columnType('progress');
+
+declare global {
+  interface ColumnConfigMap {
+    [progressColumnType.type]: typeof progressPureColumnConfig.model;
+  }
+}
+export const progressPureColumnConfig = progressColumnType.modelConfig<number>({
+  name: 'Progress',
+  type: () => tNumber.create(),
+  defaultData: () => ({}),
+  cellToString: data => data?.toString() ?? '',
+  cellFromString: data => {
+    const num = data ? Number(data) : NaN;
+    return {
+      value: isNaN(num) ? null : num,
+    };
+  },
+  cellToJson: data => data ?? null,
+});
+progressPureColumnConfig.addConvert('rich-text', (_column, cells) => ({
+  column: {},
+  cells: cells.map(v => new Text(v?.toString()).yText),
+}));
diff --git a/packages/blocks/src/database-block/common/columns/select/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/select/cell-renderer.ts
similarity index 71%
rename from packages/blocks/src/database-block/common/columns/select/cell-renderer.ts
rename to packages/blocks/src/database-block/data-view/column/presets/select/cell-renderer.ts
index 2d6f87e7e2a4..244b8df923b1 100644
--- a/packages/blocks/src/database-block/common/columns/select/cell-renderer.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/select/cell-renderer.ts
@@ -1,16 +1,18 @@
-import '../../../../_common/components/tags/multi-tag-select.js';
-import '../../../../_common/components/tags/multi-tag-view.js';
+import '../../../utils/tags/multi-tag-select.js';
+import '../../../utils/tags/multi-tag-view.js';
 
 import { customElement } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import { createIcon } from '../../../../_common/components/icon/uni-icon.js';
-import type { SelectTag } from '../../../../_common/components/tags/multi-tag-select.js';
-import { popTagSelect } from '../../../../_common/components/tags/multi-tag-select.js';
-import { BaseCellRenderer } from '../base-cell.js';
-import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js';
-import type { SelectColumnData } from '../types.js';
-import { selectPureColumnConfig } from './define.js';
+import {
+  popTagSelect,
+  type SelectTag,
+} from '../../../utils/tags/multi-tag-select.js';
+import { createIcon } from '../../../utils/uni-icon.js';
+import { BaseCellRenderer } from '../../base-cell.js';
+import { createFromBaseCellRenderer } from '../../renderer.js';
+import type { SelectColumnData } from '../../types.js';
+import { selectColumnModelConfig } from './define.js';
 
 @customElement('affine-database-select-cell')
 export class SelectCell extends BaseCellRenderer<string[], SelectColumnData> {
@@ -86,13 +88,10 @@ export class SelectCellEditing extends BaseCellRenderer<
   }
 }
 
-columnRenderer.register({
-  type: selectPureColumnConfig.type,
+export const selectColumnConfig = selectColumnModelConfig.renderConfig({
   icon: createIcon('DatabaseSelect'),
   cellRenderer: {
     view: createFromBaseCellRenderer(SelectCell),
     edit: createFromBaseCellRenderer(SelectCellEditing),
   },
 });
-
-export const selectColumnConfig = selectPureColumnConfig;
diff --git a/packages/blocks/src/database-block/common/columns/select/define.ts b/packages/blocks/src/database-block/data-view/column/presets/select/define.ts
similarity index 71%
rename from packages/blocks/src/database-block/common/columns/select/define.ts
rename to packages/blocks/src/database-block/data-view/column/presets/select/define.ts
index 824eeb448402..beeb654bbf7e 100644
--- a/packages/blocks/src/database-block/common/columns/select/define.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/select/define.ts
@@ -1,22 +1,22 @@
 import { nanoid, Text } from '@blocksuite/store';
 
-import { getTagColor } from '../../../../_common/components/tags/colors.js';
-import type { SelectTag } from '../../../../_common/components/tags/multi-tag-select.js';
 import { tTag } from '../../../logical/data-type.js';
-import { columnManager } from '../manager.js';
-import type { SelectColumnData } from '../types.js';
+import { getTagColor } from '../../../utils/tags/colors.js';
+import type { SelectTag } from '../../../utils/tags/multi-tag-select.js';
+import { columnType } from '../../column-config.js';
+import type { SelectColumnData } from '../../types.js';
 
-export const selectColumnTypeName = 'select';
+export const selectColumnType = columnType('select');
 
 declare global {
   interface ColumnConfigMap {
-    [selectColumnTypeName]: typeof selectPureColumnConfig;
+    [selectColumnType.type]: typeof selectColumnModelConfig.model;
   }
 }
-export const selectPureColumnConfig = columnManager.register<
+export const selectColumnModelConfig = selectColumnType.modelConfig<
   string,
   SelectColumnData
->(selectColumnTypeName, {
+>({
   name: 'Select',
   type: data => tTag.create({ tags: data.options }),
   defaultData: () => ({
@@ -66,12 +66,12 @@ export const selectPureColumnConfig = columnManager.register<
   cellToJson: data => data ?? null,
 });
 
-selectPureColumnConfig.registerConvert('multi-select', (column, cells) => ({
+selectColumnModelConfig.addConvert('multi-select', (column, cells) => ({
   column,
   cells: cells.map(v => (v ? [v] : undefined)),
 }));
 
-selectPureColumnConfig.registerConvert('rich-text', (column, cells) => {
+selectColumnModelConfig.addConvert('rich-text', (column, cells) => {
   const optionMap = Object.fromEntries(column.options.map(v => [v.id, v]));
   return {
     column: {},
diff --git a/packages/blocks/src/database-block/common/columns/text/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/text/cell-renderer.ts
similarity index 87%
rename from packages/blocks/src/database-block/common/columns/text/cell-renderer.ts
rename to packages/blocks/src/database-block/data-view/column/presets/text/cell-renderer.ts
index cb5886d068ab..562e298be861 100644
--- a/packages/blocks/src/database-block/common/columns/text/cell-renderer.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/text/cell-renderer.ts
@@ -2,10 +2,10 @@ import { baseTheme } from '@toeverything/theme';
 import { css, html, unsafeCSS } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 
-import { createIcon } from '../../../../_common/components/icon/uni-icon.js';
-import { BaseCellRenderer } from '../base-cell.js';
-import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js';
-import { textColumnTypeName, textPureColumnConfig } from './define.js';
+import { createIcon } from '../../../utils/uni-icon.js';
+import { BaseCellRenderer } from '../../base-cell.js';
+import { createFromBaseCellRenderer } from '../../renderer.js';
+import { textColumnModelConfig } from './define.js';
 
 @customElement('affine-database-text-cell')
 export class TextCell extends BaseCellRenderer<string> {
@@ -112,8 +112,7 @@ export class TextCellEditing extends BaseCellRenderer<string> {
   }
 }
 
-columnRenderer.register({
-  type: textColumnTypeName,
+export const textColumnConfig = textColumnModelConfig.renderConfig({
   icon: createIcon('TextIcon'),
 
   cellRenderer: {
@@ -121,5 +120,3 @@ columnRenderer.register({
     edit: createFromBaseCellRenderer(TextCellEditing),
   },
 });
-
-export const textColumnConfig = textPureColumnConfig;
diff --git a/packages/blocks/src/database-block/data-view/column/presets/text/define.ts b/packages/blocks/src/database-block/data-view/column/presets/text/define.ts
new file mode 100644
index 000000000000..a2f477229b19
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/column/presets/text/define.ts
@@ -0,0 +1,22 @@
+import { tString } from '../../../logical/data-type.js';
+import { columnType } from '../../column-config.js';
+
+export const textColumnType = columnType('text');
+
+declare global {
+  interface ColumnConfigMap {
+    [textColumnType.type]: typeof textColumnModelConfig.model;
+  }
+}
+export const textColumnModelConfig = textColumnType.modelConfig<string>({
+  name: 'Plain-Text',
+  type: () => tString.create(),
+  defaultData: () => ({}),
+  cellToString: data => data ?? '',
+  cellFromString: data => {
+    return {
+      value: data,
+    };
+  },
+  cellToJson: data => data ?? null,
+});
diff --git a/packages/blocks/src/database-block/data-view/column/renderer.ts b/packages/blocks/src/database-block/data-view/column/renderer.ts
new file mode 100644
index 000000000000..d3d5c99f7499
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/column/renderer.ts
@@ -0,0 +1,33 @@
+import {
+  createUniComponentFromWebComponent,
+  type UniComponent,
+} from '../utils/uni-component/index.js';
+import type { BaseCellRenderer } from './base-cell.js';
+import type { CellRenderer, DataViewCellComponent } from './manager.js';
+
+export interface Renderer<
+  Data extends NonNullable<unknown> = NonNullable<unknown>,
+  Value = unknown,
+> {
+  type: string;
+  icon?: UniComponent;
+  cellRenderer: CellRenderer<Data, Value>;
+  detailCellRenderer?: CellRenderer<Data, Value>;
+}
+
+export const createFromBaseCellRenderer = <
+  Value,
+  Data extends Record<string, unknown> = Record<string, unknown>,
+>(
+  renderer: new () => BaseCellRenderer<Value, Data>
+): DataViewCellComponent => {
+  return createUniComponentFromWebComponent(renderer as never) as never;
+};
+export const createRendererConfig = <
+  CellData,
+  ColumnData extends NonNullable<unknown>,
+>(
+  renderer: Renderer<ColumnData, CellData>
+) => {
+  return renderer;
+};
diff --git a/packages/blocks/src/database-block/data-view/column/types.ts b/packages/blocks/src/database-block/data-view/column/types.ts
new file mode 100644
index 000000000000..6822f0d5f78f
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/column/types.ts
@@ -0,0 +1,5 @@
+import type { SelectTag } from '../utils/tags/multi-tag-select.js';
+
+export type SelectColumnData = {
+  options: SelectTag[];
+};
diff --git a/packages/blocks/src/database-block/common/ast.ts b/packages/blocks/src/database-block/data-view/common/ast.ts
similarity index 96%
rename from packages/blocks/src/database-block/common/ast.ts
rename to packages/blocks/src/database-block/data-view/common/ast.ts
index cacf7d9a3913..21c6b19978e3 100644
--- a/packages/blocks/src/database-block/common/ast.ts
+++ b/packages/blocks/src/database-block/data-view/common/ast.ts
@@ -1,6 +1,6 @@
-import type { UniComponent } from '../../_common/components/uni-component/uni-component.js';
 import { propertyMatcher } from '../logical/property-matcher.js';
 import type { TType } from '../logical/typesystem.js';
+import type { UniComponent } from '../utils/uni-component/uni-component.js';
 import { filterMatcher } from './filter/matcher/matcher.js';
 
 export type Variable = {
diff --git a/packages/blocks/src/database-block/common/base-data-view.ts b/packages/blocks/src/database-block/data-view/common/base-data-view.ts
similarity index 84%
rename from packages/blocks/src/database-block/common/base-data-view.ts
rename to packages/blocks/src/database-block/data-view/common/base-data-view.ts
index 16d40b47b3a8..bbaaef0eb270 100644
--- a/packages/blocks/src/database-block/common/base-data-view.ts
+++ b/packages/blocks/src/database-block/data-view/common/base-data-view.ts
@@ -8,10 +8,9 @@ import type { Disposable, Slot } from '@blocksuite/global/utils';
 import type { Doc } from '@blocksuite/store';
 import { property } from 'lit/decorators.js';
 
-import type { UniComponent } from '../../_common/components/uni-component/uni-component.js';
-import type { DataViewSelection } from '../../_common/utils/index.js';
-import type { DataViewNative } from '../data-view.js';
-import type { InsertToPosition } from '../types.js';
+import type { DataViewRenderer } from '../data-view.js';
+import type { DataViewSelection, InsertToPosition } from '../types.js';
+import type { UniComponent } from '../utils/uni-component/uni-component.js';
 import type { DataViewExpose, DataViewProps } from './data-view.js';
 import type { DataViewManager } from './data-view-manager.js';
 
@@ -29,7 +28,7 @@ export abstract class BaseDataView<
   header!: UniComponent<{ viewMethods: DataViewExpose; view: T }>;
 
   @property({ attribute: false })
-  dataViewEle!: DataViewNative;
+  dataViewEle!: DataViewRenderer;
   @property({ attribute: false })
   view!: T;
 
diff --git a/packages/blocks/src/database-block/common/component/overflow/overflow.ts b/packages/blocks/src/database-block/data-view/common/component/overflow/overflow.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/component/overflow/overflow.ts
rename to packages/blocks/src/database-block/data-view/common/component/overflow/overflow.ts
diff --git a/packages/blocks/src/database-block/common/css-variable.ts b/packages/blocks/src/database-block/data-view/common/css-variable.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/css-variable.ts
rename to packages/blocks/src/database-block/data-view/common/css-variable.ts
diff --git a/packages/blocks/src/database-block/common/data-stats.ts b/packages/blocks/src/database-block/data-view/common/data-stats.ts
similarity index 99%
rename from packages/blocks/src/database-block/common/data-stats.ts
rename to packages/blocks/src/database-block/data-view/common/data-stats.ts
index 4d398583d9ab..7889b29fd9c8 100644
--- a/packages/blocks/src/database-block/common/data-stats.ts
+++ b/packages/blocks/src/database-block/data-view/common/data-stats.ts
@@ -1,6 +1,6 @@
 import { assertEquals } from '@blocksuite/global/utils';
 
-import type { SelectTag } from '../../_common/components/index.js';
+import type { SelectTag } from '../utils/tags/multi-tag-select.js';
 import type { DataViewColumnManager } from './data-view-manager.js';
 
 /**
diff --git a/packages/blocks/src/database-block/common/data-view-manager.ts b/packages/blocks/src/database-block/data-view/common/data-view-manager.ts
similarity index 90%
rename from packages/blocks/src/database-block/common/data-view-manager.ts
rename to packages/blocks/src/database-block/data-view/common/data-view-manager.ts
index 5b4820a481cc..b52423af8064 100644
--- a/packages/blocks/src/database-block/common/data-view-manager.ts
+++ b/packages/blocks/src/database-block/data-view/common/data-view-manager.ts
@@ -1,21 +1,14 @@
 import type { Disposable } from '@blocksuite/global/utils';
 import { Slot } from '@blocksuite/global/utils';
 
-import type { UniComponent } from '../../_common/components/uni-component/uni-component.js';
+import type { ColumnMeta } from '../column/column-config.js';
+import type { ColumnConfig } from '../column/index.js';
+import { type CellRenderer } from '../column/index.js';
 import type { TType } from '../logical/typesystem.js';
-import type {
-  ColumnDataUpdater,
-  InsertToPosition,
-  StatCalcOpType,
-} from '../types.js';
+import type { ColumnDataUpdater, InsertToPosition } from '../types.js';
+import type { UniComponent } from '../utils/uni-component/uni-component.js';
+import type { StatCalcOpType } from '../views/table/types.js';
 import type { FilterGroup, Variable } from './ast.js';
-import type {
-  CellRenderer,
-  ColumnConfig,
-  ColumnConfigManager,
-} from './columns/manager.js';
-import { columnManager } from './columns/manager.js';
-import { columnRenderer } from './columns/renderer.js';
 import { ColumnDataStats } from './data-stats.js';
 import type { DataSource, DetailSlots } from './datasource/base.js';
 
@@ -80,6 +73,8 @@ export interface DataViewManager {
 
   columnGet(columnId: string): DataViewColumnManager;
 
+  columnGetMeta(type: string): ColumnMeta;
+
   columnGetPreColumn(columnId: string): DataViewColumnManager | undefined;
 
   columnGetNextColumn(columnId: string): DataViewColumnManager | undefined;
@@ -114,8 +109,6 @@ export interface DataViewManager {
 
   get allColumnConfig(): ColumnConfig[];
 
-  get columnConfigManager(): ColumnConfigManager;
-
   getIcon(type: string): UniComponent | undefined;
 
   /**
@@ -266,18 +259,18 @@ export abstract class BaseDataViewManager implements DataViewManager {
   }
 
   public cellGetValue(rowId: string, columnId: string): unknown {
-    return columnManager
-      .getColumn(this.columnGetType(columnId))
-      .formatValue(
+    return this.dataSource
+      .getPropertyMeta(this.columnGetType(columnId))
+      .model.formatValue(
         this.dataSource.cellGetValue(rowId, columnId),
         this.columnGetData(columnId)
       );
   }
 
   public cellGetJsonValue(rowId: string, columnId: string): unknown {
-    return columnManager
-      .getColumn(this.columnGetType(columnId))
-      .toJson(
+    return this.dataSource
+      .getPropertyMeta(this.columnGetType(columnId))
+      .model.toJson(
         this.dataSource.cellGetValue(rowId, columnId),
         this.columnGetData(columnId)
       );
@@ -289,9 +282,9 @@ export abstract class BaseDataViewManager implements DataViewManager {
 
   public cellGetStringValue(rowId: string, columnId: string): string {
     return (
-      columnManager
-        .getColumn(this.columnGetType(columnId))
-        .toString(
+      this.dataSource
+        .getPropertyMeta(this.columnGetType(columnId))
+        .model.toString(
           this.dataSource.cellGetValue(rowId, columnId),
           this.columnGetData(columnId)
         ) ?? ''
@@ -304,9 +297,9 @@ export abstract class BaseDataViewManager implements DataViewManager {
 
   public cellSetValueFromString(columnId: string, cellData: string) {
     return (
-      columnManager
-        .getColumn(this.columnGetType(columnId))
-        .fromString(cellData, this.columnGetData(columnId)) ?? ''
+      this.dataSource
+        .getPropertyMeta(this.columnGetType(columnId))
+        .model.fromString(cellData, this.columnGetData(columnId)) ?? ''
     );
   }
 
@@ -346,14 +339,18 @@ export abstract class BaseDataViewManager implements DataViewManager {
 
   public abstract columnGet(columnId: string): DataViewColumnManager;
 
+  public columnGetMeta(type: string): ColumnMeta {
+    return this.dataSource.getPropertyMeta(type);
+  }
+
   public columnGetData(columnId: string): Record<string, unknown> {
     return this.dataSource.propertyGetData(columnId);
   }
 
   public columnGetDataType(columnId: string): TType {
-    return columnManager
-      .getColumn(this.columnGetType(columnId))
-      .dataType(this.columnGetData(columnId));
+    return this.dataSource
+      .getPropertyMeta(this.columnGetType(columnId))
+      .model.dataType(this.columnGetData(columnId));
   }
 
   public abstract columnGetHide(columnId: string): boolean;
@@ -445,12 +442,8 @@ export abstract class BaseDataViewManager implements DataViewManager {
     return this.dataSource.allPropertyConfig;
   }
 
-  public get columnConfigManager(): ColumnConfigManager {
-    return this.dataSource.columnConfigManager;
-  }
-
   public getIcon(type: string): UniComponent | undefined {
-    return columnRenderer.get(type).icon;
+    return this.dataSource.getPropertyMeta(type).renderer.icon;
   }
 
   abstract columnMove(columnId: string, position: InsertToPosition): void;
@@ -473,7 +466,9 @@ export abstract class BaseDataViewManager implements DataViewManager {
       return {
         id: v.id,
         name: v.name,
-        type: columnManager.getColumn(v.type).dataType(v.data),
+        type: this.dataSource
+          .getPropertyMeta(this.columnGetType(v.type))
+          .model.dataType(v.data),
         icon: v.icon,
       };
     });
@@ -541,11 +536,14 @@ export abstract class BaseDataViewColumnManager
   }
 
   get renderer(): CellRenderer {
-    return columnRenderer.get(this.type).cellRenderer;
+    return this.dataViewManager.columnGetMeta(this.type).renderer.cellRenderer;
   }
 
   get detailRenderer(): CellRenderer {
-    return columnRenderer.get(this.type).detailCellRenderer ?? this.renderer;
+    return (
+      this.dataViewManager.columnGetMeta(this.type).renderer
+        .detailCellRenderer ?? this.renderer
+    );
   }
 
   get type(): string {
@@ -553,7 +551,7 @@ export abstract class BaseDataViewColumnManager
   }
 
   get dataType(): TType {
-    return columnManager.getColumn(this.type).dataType(this.data);
+    return this.dataViewManager.columnGetDataType(this.id);
   }
 
   getValue(rowId: string): unknown | undefined {
diff --git a/packages/blocks/src/database-block/common/data-view.ts b/packages/blocks/src/database-block/data-view/common/data-view.ts
similarity index 88%
rename from packages/blocks/src/database-block/common/data-view.ts
rename to packages/blocks/src/database-block/data-view/common/data-view.ts
index 19683e05ec56..6d282e0059c6 100644
--- a/packages/blocks/src/database-block/common/data-view.ts
+++ b/packages/blocks/src/database-block/data-view/common/data-view.ts
@@ -6,11 +6,11 @@ import type {
 import type { Disposable, Slot } from '@blocksuite/global/utils';
 import type { Doc } from '@blocksuite/store';
 
-import type { UniComponent } from '../../_common/components/uni-component/uni-component.js';
-import type { DataViewSelection } from '../../_common/utils/index.js';
-import type { DataViewNative } from '../data-view.js';
-import type { DatabaseBlockModel } from '../database-model.js';
-import type { InsertToPosition } from '../types.js';
+import type { DatabaseBlockModel } from '../../database-model.js';
+import type { ColumnMeta } from '../column/column-config.js';
+import type { DataViewRenderer } from '../data-view.js';
+import type { DataViewSelection, InsertToPosition } from '../types.js';
+import type { UniComponent } from '../utils/uni-component/uni-component.js';
 import type { DataViewManager } from './data-view-manager.js';
 
 export type DataViewHeaderComponentProp<
@@ -21,7 +21,7 @@ export interface DataViewProps<
   T extends DataViewManager = DataViewManager,
   Selection extends DataViewSelection = DataViewSelection,
 > {
-  dataViewEle: DataViewNative;
+  dataViewEle: DataViewRenderer;
 
   header?: DataViewHeaderComponentProp<T>;
 
@@ -83,7 +83,12 @@ export interface DataViewConfig<
   type: DataViewTypes;
   defaultName: string;
 
-  init(model: DatabaseBlockModel, id: string, name: string): Data;
+  init(
+    columnMetaMap: Record<string, ColumnMeta>,
+    model: DatabaseBlockModel,
+    id: string,
+    name: string
+  ): Data;
 }
 
 export type DataViewToolsProps<
diff --git a/packages/blocks/src/database-block/common/datasource/all-doc-datasource.ts b/packages/blocks/src/database-block/data-view/common/datasource/all-doc-datasource.ts
similarity index 82%
rename from packages/blocks/src/database-block/common/datasource/all-doc-datasource.ts
rename to packages/blocks/src/database-block/data-view/common/datasource/all-doc-datasource.ts
index 744527632de2..9017dd745bbc 100644
--- a/packages/blocks/src/database-block/common/datasource/all-doc-datasource.ts
+++ b/packages/blocks/src/database-block/data-view/common/datasource/all-doc-datasource.ts
@@ -1,14 +1,15 @@
-import type { EditorHost } from '@blocksuite/block-std';
+import { type EditorHost } from '@blocksuite/block-std';
 import { assertExists, Slot } from '@blocksuite/global/utils';
-import type { Doc, DocCollection } from '@blocksuite/store';
+import { type Doc, type DocCollection } from '@blocksuite/store';
 
-import type { InsertToPosition, StatCalcOpType } from '../../types.js';
-import type { ColumnConfig } from '../columns/manager.js';
-import { multiSelectPureColumnConfig } from '../columns/multi-select/define.js';
-import { numberPureColumnConfig } from '../columns/number/define.js';
-import { textPureColumnConfig } from '../columns/text/define.js';
-import type { AllDocDataSourceConfig } from './base.js';
-import { BaseDataSource } from './base.js';
+import type { ColumnMeta } from '../../column/column-config.js';
+import { type ColumnConfig } from '../../column/index.js';
+import { multiSelectPureColumnConfig } from '../../column/presets/multi-select/define.js';
+import { numberPureColumnConfig } from '../../column/presets/number/define.js';
+import { textColumnModelConfig } from '../../column/presets/text/define.js';
+import type { InsertToPosition } from '../../types.js';
+import type { StatCalcOpType } from '../../views/table/types.js';
+import { type AllDocDataSourceConfig, BaseDataSource } from './base.js';
 
 export class AllDocDataSource extends BaseDataSource {
   private collection: DocCollection;
@@ -28,7 +29,7 @@ export class AllDocDataSource extends BaseDataSource {
     }
   > = {
     title: {
-      type: textPureColumnConfig.type,
+      type: textColumnModelConfig.type,
       getValue: doc => doc.meta?.title,
       setValue: (doc, value) => {
         assertExists(doc.meta);
@@ -160,4 +161,8 @@ export class AllDocDataSource extends BaseDataSource {
     rowId;
     position;
   }
+
+  public getPropertyMeta(_type: string): ColumnMeta {
+    throw new Error('not support');
+  }
 }
diff --git a/packages/blocks/src/database-block/common/datasource/base.ts b/packages/blocks/src/database-block/data-view/common/datasource/base.ts
similarity index 90%
rename from packages/blocks/src/database-block/common/datasource/base.ts
rename to packages/blocks/src/database-block/data-view/common/datasource/base.ts
index ccc8b1c7089f..7a0769ccf769 100644
--- a/packages/blocks/src/database-block/common/datasource/base.ts
+++ b/packages/blocks/src/database-block/data-view/common/datasource/base.ts
@@ -1,13 +1,11 @@
 import type { Disposable, Slot } from '@blocksuite/global/utils';
 
-import type { UniComponent } from '../../../_common/components/uni-component/uni-component.js';
-import { DEFAULT_COLUMN_WIDTH } from '../../table/consts.js';
-import type { InsertToPosition, StatCalcOpType } from '../../types.js';
-import {
-  type ColumnConfig,
-  type ColumnConfigManager,
-  columnManager,
-} from '../columns/manager.js';
+import type { ColumnMeta } from '../../column/column-config.js';
+import type { ColumnConfig } from '../../column/index.js';
+import type { InsertToPosition } from '../../types.js';
+import type { UniComponent } from '../../utils/uni-component/uni-component.js';
+import { DEFAULT_COLUMN_WIDTH } from '../../views/table/consts.js';
+import type { StatCalcOpType } from '../../views/table/types.js';
 import type { DataViewManager } from '../data-view-manager.js';
 
 export type DetailSlotProps = { view: DataViewManager; rowId: string };
@@ -18,6 +16,7 @@ export interface DetailSlots {
 
 export interface DataSource {
   allPropertyConfig: ColumnConfig[];
+  getPropertyMeta(type: string): ColumnMeta;
   properties: string[];
   rows: string[];
   cellGetValue: (rowId: string, propertyId: string) => unknown;
@@ -48,8 +47,6 @@ export interface DataSource {
   propertyDelete: (id: string) => void;
   propertyDuplicate: (columnId: string) => string;
 
-  columnConfigManager: ColumnConfigManager;
-
   /**
    * @deprecated
    */
@@ -159,9 +156,8 @@ export abstract class BaseDataSource implements DataSource {
     //
   }
 
-  public columnConfigManager: ColumnConfigManager = columnManager;
   public abstract allPropertyConfig: ColumnConfig[];
-
+  public abstract getPropertyMeta(type: string): ColumnMeta;
   public get detailSlots(): DetailSlots {
     return {};
   }
diff --git a/packages/blocks/src/database-block/common/datasource/datasource-manager.ts b/packages/blocks/src/database-block/data-view/common/datasource/datasource-manager.ts
similarity index 89%
rename from packages/blocks/src/database-block/common/datasource/datasource-manager.ts
rename to packages/blocks/src/database-block/data-view/common/datasource/datasource-manager.ts
index 370bd8ac8d5d..128c6f779f08 100644
--- a/packages/blocks/src/database-block/common/datasource/datasource-manager.ts
+++ b/packages/blocks/src/database-block/data-view/common/datasource/datasource-manager.ts
@@ -1,6 +1,7 @@
 import type { EditorHost } from '@blocksuite/block-std';
 
-import type { DatabaseBlockModel } from '../../database-model.js';
+import { Datasource } from '../../../data-source.js';
+import type { DatabaseBlockModel } from '../../../database-model.js';
 import { AllDocDataSource } from './all-doc-datasource.js';
 import type {
   AllDocDataSourceConfig,
@@ -10,7 +11,6 @@ import type {
   GetConfig,
   TagsDataSourceConfig,
 } from './base.js';
-import { DatabaseBlockDataSource } from './database-block-datasource.js';
 import { TagsDataSource } from './tags-datasource.js';
 
 const dataSourceMap: {
@@ -26,7 +26,7 @@ const dataSourceMap: {
         ?.getBlockById(config.blockId) as DatabaseBlockModel;
       return dbBlock?.title.toString() ?? '';
     },
-    constructor: DatabaseBlockDataSource,
+    constructor: Datasource,
   },
   'all-pages': {
     title: (_host: EditorHost, _config: AllDocDataSourceConfig) => {
diff --git a/packages/blocks/src/database-block/common/datasource/tags-datasource.ts b/packages/blocks/src/database-block/data-view/common/datasource/tags-datasource.ts
similarity index 81%
rename from packages/blocks/src/database-block/common/datasource/tags-datasource.ts
rename to packages/blocks/src/database-block/data-view/common/datasource/tags-datasource.ts
index 2c97731bfc93..f58f0a89d262 100644
--- a/packages/blocks/src/database-block/common/datasource/tags-datasource.ts
+++ b/packages/blocks/src/database-block/data-view/common/datasource/tags-datasource.ts
@@ -1,19 +1,16 @@
-import type { EditorHost } from '@blocksuite/block-std';
+import { type EditorHost } from '@blocksuite/block-std';
 import { assertExists, Slot } from '@blocksuite/global/utils';
-import type { DocCollection } from '@blocksuite/store';
-import { nanoid } from '@blocksuite/store';
-
-import {
-  getTagColor,
-  selectOptionColors,
-} from '../../../_common/components/tags/colors.js';
-import type { SelectTag } from '../../../_common/components/tags/multi-tag-select.js';
-import type { InsertToPosition, StatCalcOpType } from '../../types.js';
-import type { ColumnConfig } from '../columns/manager.js';
-import { selectPureColumnConfig } from '../columns/select/define.js';
-import { textPureColumnConfig } from '../columns/text/define.js';
-import type { TagsDataSourceConfig } from './base.js';
-import { BaseDataSource } from './base.js';
+import { type DocCollection, nanoid } from '@blocksuite/store';
+
+import type { ColumnMeta } from '../../column/column-config.js';
+import { type ColumnConfig } from '../../column/index.js';
+import { selectColumnModelConfig } from '../../column/presets/select/define.js';
+import { textColumnModelConfig } from '../../column/presets/text/define.js';
+import type { InsertToPosition } from '../../types.js';
+import { getTagColor, selectOptionColors } from '../../utils/tags/colors.js';
+import type { SelectTag } from '../../utils/tags/multi-tag-select.js';
+import type { StatCalcOpType } from '../../views/table/types.js';
+import { BaseDataSource, type TagsDataSourceConfig } from './base.js';
 
 export class TagsDataSource extends BaseDataSource {
   private meta: DocCollection['meta'];
@@ -39,7 +36,7 @@ export class TagsDataSource extends BaseDataSource {
     }
   > = {
     value: {
-      type: textPureColumnConfig.type,
+      type: textColumnModelConfig.type,
       getValue: tag => tag.value,
       setValue: (tag, value) => {
         this.changeTag({
@@ -49,7 +46,7 @@ export class TagsDataSource extends BaseDataSource {
       },
     },
     color: {
-      type: selectPureColumnConfig.type,
+      type: selectColumnModelConfig.type,
       getValue: tag => tag.color,
       setValue: (tag, value) => {
         this.changeTag({
@@ -66,7 +63,7 @@ export class TagsDataSource extends BaseDataSource {
       }),
     },
     parent: {
-      type: selectPureColumnConfig.type,
+      type: selectColumnModelConfig.type,
       getData: () => ({ options: this.meta.properties.tags?.options ?? [] }),
       getValue: tag => tag.parentId,
       setValue: (tag, value) => {
@@ -197,4 +194,8 @@ export class TagsDataSource extends BaseDataSource {
     this.changeTags(this.tags.map(v => (v.id === tag.id ? tag : v)));
   };
   public allPropertyConfig: ColumnConfig[] = [];
+
+  public getPropertyMeta(_type: string): ColumnMeta {
+    throw new Error('not support');
+  }
 }
diff --git a/packages/blocks/src/database-block/common/detail/detail.ts b/packages/blocks/src/database-block/data-view/common/detail/detail.ts
similarity index 94%
rename from packages/blocks/src/database-block/common/detail/detail.ts
rename to packages/blocks/src/database-block/data-view/common/detail/detail.ts
index 8247d87c97e0..7c1aea6b90c8 100644
--- a/packages/blocks/src/database-block/common/detail/detail.ts
+++ b/packages/blocks/src/database-block/data-view/common/detail/detail.ts
@@ -6,12 +6,12 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
 
-import { popFilterableSimpleMenu } from '../../../_common/components/menu/index.js';
-import { renderUniLit } from '../../../_common/components/uni-component/uni-component.js';
-import { PlusIcon } from '../../../_common/icons/index.js';
+import { popFilterableSimpleMenu } from '../../utils/menu/index.js';
+import { renderUniLit } from '../../utils/uni-component/uni-component.js';
 import { dataViewCommonStyle } from '../css-variable.js';
 import type { DataViewManager } from '../data-view-manager.js';
 import type { DetailSlotProps } from '../datasource/base.js';
+import { PlusIcon } from '../icons/index.js';
 import { DetailSelection } from './selection.js';
 
 const styles = css`
diff --git a/packages/blocks/src/database-block/common/detail/field.ts b/packages/blocks/src/database-block/data-view/common/detail/field.ts
similarity index 96%
rename from packages/blocks/src/database-block/common/detail/field.ts
rename to packages/blocks/src/database-block/data-view/common/detail/field.ts
index 2dfcb5259614..2e954ad6f34c 100644
--- a/packages/blocks/src/database-block/common/detail/field.ts
+++ b/packages/blocks/src/database-block/data-view/common/detail/field.ts
@@ -5,23 +5,23 @@ import { classMap } from 'lit/directives/class-map.js';
 import { createRef } from 'lit/directives/ref.js';
 import { html } from 'lit/static-html.js';
 
-import { popMenu } from '../../../_common/components/menu/index.js';
-import { renderUniLit } from '../../../_common/components/uni-component/uni-component.js';
-import {
-  DatabaseDuplicate,
-  DatabaseMoveLeft,
-  DatabaseMoveRight,
-  DeleteIcon,
-  TextIcon,
-} from '../../../_common/icons/index.js';
 import type {
   CellRenderProps,
   DataViewCellLifeCycle,
-} from '../columns/manager.js';
+} from '../../column/index.js';
+import { popMenu } from '../../utils/menu/index.js';
+import { renderUniLit } from '../../utils/uni-component/uni-component.js';
 import type {
   DataViewColumnManager,
   DataViewManager,
 } from '../data-view-manager.js';
+import {
+  DatabaseDuplicate,
+  DatabaseMoveLeft,
+  DatabaseMoveRight,
+  DeleteIcon,
+  TextIcon,
+} from '../icons/index.js';
 
 @customElement('affine-data-view-record-field')
 export class RecordField extends WithDisposable(ShadowlessElement) {
diff --git a/packages/blocks/src/database-block/common/detail/layout.ts b/packages/blocks/src/database-block/data-view/common/detail/layout.ts
similarity index 96%
rename from packages/blocks/src/database-block/common/detail/layout.ts
rename to packages/blocks/src/database-block/data-view/common/detail/layout.ts
index 705ed840d039..3e2784075d85 100644
--- a/packages/blocks/src/database-block/common/detail/layout.ts
+++ b/packages/blocks/src/database-block/data-view/common/detail/layout.ts
@@ -9,9 +9,9 @@ import {
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { createModal } from '../../../_common/components/menu/index.js';
-import { CrossIcon } from '../../../_common/icons/index.js';
+import { createModal } from '../../utils/menu/index.js';
 import type { DataViewManager } from '../data-view-manager.js';
+import { CrossIcon } from '../icons/index.js';
 import { RecordDetail } from './detail.js';
 
 @customElement('side-layout-modal')
diff --git a/packages/blocks/src/database-block/common/detail/selection.ts b/packages/blocks/src/database-block/data-view/common/detail/selection.ts
similarity index 94%
rename from packages/blocks/src/database-block/common/detail/selection.ts
rename to packages/blocks/src/database-block/data-view/common/detail/selection.ts
index 8d265b5848cd..647be786b225 100644
--- a/packages/blocks/src/database-block/common/detail/selection.ts
+++ b/packages/blocks/src/database-block/data-view/common/detail/selection.ts
@@ -1,6 +1,6 @@
-import type { KanbanCardSelection } from '../../../_common/utils/index.js';
-import type { KanbanCard } from '../../kanban/card.js';
-import { KanbanCell } from '../../kanban/cell.js';
+import type { KanbanCard } from '../../views/kanban/card.js';
+import { KanbanCell } from '../../views/kanban/cell.js';
+import type { KanbanCardSelection } from '../../views/kanban/types.js';
 import type { RecordDetail } from './detail.js';
 import { RecordField } from './field.js';
 
diff --git a/packages/blocks/src/database-block/common/filter/condition.ts b/packages/blocks/src/database-block/data-view/common/filter/condition.ts
similarity index 97%
rename from packages/blocks/src/database-block/common/filter/condition.ts
rename to packages/blocks/src/database-block/data-view/common/filter/condition.ts
index 354529059e6c..2f197baf9c8b 100644
--- a/packages/blocks/src/database-block/common/filter/condition.ts
+++ b/packages/blocks/src/database-block/data-view/common/filter/condition.ts
@@ -7,10 +7,9 @@ import { css, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
-import { popFilterableSimpleMenu } from '../../../_common/components/menu/menu.js';
-import { CrossIcon } from '../../../_common/icons/index.js';
 import { tBoolean } from '../../logical/data-type.js';
 import { typesystem } from '../../logical/typesystem.js';
+import { popFilterableSimpleMenu } from '../../utils/menu/index.js';
 import type {
   FilterGroup,
   SingleFilter,
@@ -23,6 +22,7 @@ import {
   firstFilterInGroup,
   getRefType,
 } from '../ast.js';
+import { CrossIcon } from '../icons/index.js';
 import { popLiteralEdit, renderLiteral } from '../literal/matcher.js';
 import { filterMatcher } from './matcher/matcher.js';
 
diff --git a/packages/blocks/src/database-block/common/filter/filter-bar.ts b/packages/blocks/src/database-block/data-view/common/filter/filter-bar.ts
similarity index 95%
rename from packages/blocks/src/database-block/common/filter/filter-bar.ts
rename to packages/blocks/src/database-block/data-view/common/filter/filter-bar.ts
index 88392ee1b2d4..2e170635d49d 100644
--- a/packages/blocks/src/database-block/common/filter/filter-bar.ts
+++ b/packages/blocks/src/database-block/data-view/common/filter/filter-bar.ts
@@ -3,18 +3,12 @@ import { css, html, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
-import {
-  createPopup,
-  eventToVRect,
-} from '../../../_common/components/menu/index.js';
-import { renderTemplate } from '../../../_common/components/uni-component/render-template.js';
-import {
-  AddCursorIcon,
-  CrossIcon,
-  FilterIcon,
-} from '../../../_common/icons/index.js';
+import { AddCursorIcon } from '../../../../_common/icons/index.js';
+import { createPopup, eventToVRect } from '../../utils/menu/index.js';
+import { renderTemplate } from '../../utils/uni-component/render-template.js';
 import type { Filter, FilterGroup, Variable } from '../ast.js';
 import type { DataViewManager } from '../data-view-manager.js';
+import { CrossIcon, FilterIcon } from '../icons/index.js';
 import { popCreateFilter } from '../ref/ref.js';
 import { popFilterModal } from './filter-modal.js';
 
diff --git a/packages/blocks/src/database-block/common/filter/filter-group.ts b/packages/blocks/src/database-block/data-view/common/filter/filter-group.ts
similarity index 98%
rename from packages/blocks/src/database-block/common/filter/filter-group.ts
rename to packages/blocks/src/database-block/data-view/common/filter/filter-group.ts
index 87245402c187..560b85dff6d5 100644
--- a/packages/blocks/src/database-block/common/filter/filter-group.ts
+++ b/packages/blocks/src/database-block/data-view/common/filter/filter-group.ts
@@ -8,20 +8,22 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 
+import {
+  ArrowDownSmallIcon,
+  DuplicateIcon,
+} from '../../../../_common/icons/index.js';
 import {
   eventToVRect,
   popFilterableSimpleMenu,
-} from '../../../_common/components/menu/menu.js';
+} from '../../utils/menu/index.js';
+import type { Filter, FilterGroup, Variable } from '../ast.js';
+import { firstFilter } from '../ast.js';
 import {
-  ArrowDownSmallIcon,
   ConvertIcon,
   DeleteIcon,
-  DuplicateIcon,
   MoreHorizontalIcon,
   PlusIcon,
-} from '../../../_common/icons/index.js';
-import type { Filter, FilterGroup, Variable } from '../ast.js';
-import { firstFilter } from '../ast.js';
+} from '../icons/index.js';
 import { popAddNewFilter } from './condition.js';
 
 @customElement('filter-group-view')
diff --git a/packages/blocks/src/database-block/common/filter/filter-modal.ts b/packages/blocks/src/database-block/data-view/common/filter/filter-modal.ts
similarity index 98%
rename from packages/blocks/src/database-block/common/filter/filter-modal.ts
rename to packages/blocks/src/database-block/data-view/common/filter/filter-modal.ts
index 223d6a4c2ccf..830ded9b4f76 100644
--- a/packages/blocks/src/database-block/common/filter/filter-modal.ts
+++ b/packages/blocks/src/database-block/data-view/common/filter/filter-modal.ts
@@ -6,7 +6,7 @@ import type { ReferenceElement } from '@floating-ui/dom';
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { createPopup } from '../../../_common/components/menu/index.js';
+import { createPopup } from '../../utils/menu/index.js';
 import type { FilterGroup, Variable } from '../ast.js';
 
 @customElement('advanced-filter-modal')
diff --git a/packages/blocks/src/database-block/common/filter/filter-root.ts b/packages/blocks/src/database-block/data-view/common/filter/filter-root.ts
similarity index 97%
rename from packages/blocks/src/database-block/common/filter/filter-root.ts
rename to packages/blocks/src/database-block/data-view/common/filter/filter-root.ts
index 7d81db32f3fa..b4fbe810eb40 100644
--- a/packages/blocks/src/database-block/common/filter/filter-root.ts
+++ b/packages/blocks/src/database-block/data-view/common/filter/filter-root.ts
@@ -8,19 +8,22 @@ import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 import {
+  ArrowDownSmallIcon,
+  DuplicateIcon,
+} from '../../../../_common/icons/index.js';
+import {
+  eventToVRect,
   popFilterableSimpleMenu,
   positionToVRect,
-} from '../../../_common/components/menu/index.js';
-import { menuTitle } from '../../../_common/components/menu/title.js';
+} from '../../utils/menu/index.js';
+import { menuTitle } from '../../utils/menu/title.js';
+import type { Filter, FilterGroup, Variable } from '../ast.js';
 import {
-  ArrowDownSmallIcon,
   ConvertIcon,
   DeleteIcon,
-  DuplicateIcon,
   MoreHorizontalIcon,
   PlusIcon,
-} from '../../../_common/icons/index.js';
-import type { Filter, FilterGroup, Variable } from '../ast.js';
+} from '../icons/index.js';
 import { popAddNewFilter } from './condition.js';
 import type { FilterGroupView } from './filter-group.js';
 import { getDepth } from './filter-group.js';
@@ -181,7 +184,7 @@ export class FilterRootView extends WithDisposable(ShadowlessElement) {
   };
 
   private _addNew = (e: MouseEvent) => {
-    popAddNewFilter(positionToVRect(e.x, e.y), {
+    popAddNewFilter(eventToVRect(e), {
       value: this.data,
       onChange: this.setData,
       vars: this.vars,
diff --git a/packages/blocks/src/database-block/common/filter/matcher/boolean.ts b/packages/blocks/src/database-block/data-view/common/filter/matcher/boolean.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/filter/matcher/boolean.ts
rename to packages/blocks/src/database-block/data-view/common/filter/matcher/boolean.ts
diff --git a/packages/blocks/src/database-block/common/filter/matcher/date.ts b/packages/blocks/src/database-block/data-view/common/filter/matcher/date.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/filter/matcher/date.ts
rename to packages/blocks/src/database-block/data-view/common/filter/matcher/date.ts
diff --git a/packages/blocks/src/database-block/common/filter/matcher/matcher.ts b/packages/blocks/src/database-block/data-view/common/filter/matcher/matcher.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/filter/matcher/matcher.ts
rename to packages/blocks/src/database-block/data-view/common/filter/matcher/matcher.ts
diff --git a/packages/blocks/src/database-block/common/filter/matcher/multi-tag.ts b/packages/blocks/src/database-block/data-view/common/filter/matcher/multi-tag.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/filter/matcher/multi-tag.ts
rename to packages/blocks/src/database-block/data-view/common/filter/matcher/multi-tag.ts
diff --git a/packages/blocks/src/database-block/common/filter/matcher/number.ts b/packages/blocks/src/database-block/data-view/common/filter/matcher/number.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/filter/matcher/number.ts
rename to packages/blocks/src/database-block/data-view/common/filter/matcher/number.ts
diff --git a/packages/blocks/src/database-block/common/filter/matcher/string.ts b/packages/blocks/src/database-block/data-view/common/filter/matcher/string.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/filter/matcher/string.ts
rename to packages/blocks/src/database-block/data-view/common/filter/matcher/string.ts
diff --git a/packages/blocks/src/database-block/common/filter/matcher/tag.ts b/packages/blocks/src/database-block/data-view/common/filter/matcher/tag.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/filter/matcher/tag.ts
rename to packages/blocks/src/database-block/data-view/common/filter/matcher/tag.ts
diff --git a/packages/blocks/src/database-block/common/filter/matcher/unknown.ts b/packages/blocks/src/database-block/data-view/common/filter/matcher/unknown.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/filter/matcher/unknown.ts
rename to packages/blocks/src/database-block/data-view/common/filter/matcher/unknown.ts
diff --git a/packages/blocks/src/database-block/common/group-by/define.ts b/packages/blocks/src/database-block/data-view/common/group-by/define.ts
similarity index 96%
rename from packages/blocks/src/database-block/common/group-by/define.ts
rename to packages/blocks/src/database-block/data-view/common/group-by/define.ts
index 045ccd2c4ab2..98402955ca28 100644
--- a/packages/blocks/src/database-block/common/group-by/define.ts
+++ b/packages/blocks/src/database-block/data-view/common/group-by/define.ts
@@ -1,6 +1,6 @@
-import { createUniComponentFromWebComponent } from '../../../_common/components/uni-component/uni-component.js';
 import { tNumber, tString, tTag } from '../../logical/data-type.js';
 import { isTArray, tArray } from '../../logical/typesystem.js';
+import { createUniComponentFromWebComponent } from '../../utils/uni-component/uni-component.js';
 import { groupByMatcher } from './matcher.js';
 import { NumberGroupView } from './renderer/number-group.js';
 import { SelectGroupView } from './renderer/select-group.js';
diff --git a/packages/blocks/src/database-block/common/group-by/group-title.ts b/packages/blocks/src/database-block/data-view/common/group-by/group-title.ts
similarity index 94%
rename from packages/blocks/src/database-block/common/group-by/group-title.ts
rename to packages/blocks/src/database-block/data-view/common/group-by/group-title.ts
index 9ca202df479d..ef001b88d6a4 100644
--- a/packages/blocks/src/database-block/common/group-by/group-title.ts
+++ b/packages/blocks/src/database-block/data-view/common/group-by/group-title.ts
@@ -1,8 +1,8 @@
 import { nothing } from 'lit';
 import { html } from 'lit/static-html.js';
 
-import { renderUniLit } from '../../../_common/components/uni-component/uni-component.js';
-import { MoreHorizontalIcon, PlusIcon } from '../../../_common/icons/index.js';
+import { renderUniLit } from '../../utils/uni-component/uni-component.js';
+import { MoreHorizontalIcon, PlusIcon } from '../icons/index.js';
 import type { GroupData } from './helper.js';
 import type { GroupRenderProps } from './matcher.js';
 
diff --git a/packages/blocks/src/database-block/common/group-by/helper.ts b/packages/blocks/src/database-block/data-view/common/group-by/helper.ts
similarity index 98%
rename from packages/blocks/src/database-block/common/group-by/helper.ts
rename to packages/blocks/src/database-block/data-view/common/group-by/helper.ts
index cde08726c80a..26c29e00464a 100644
--- a/packages/blocks/src/database-block/common/group-by/helper.ts
+++ b/packages/blocks/src/database-block/data-view/common/group-by/helper.ts
@@ -185,8 +185,7 @@ export class GroupHelper {
     this.changeCardSort(toGroupKey, rows);
   }
   get addGroup() {
-    return this.viewManager.columnConfigManager.getColumn(this.column.type).ops
-      .addGroup;
+    return this.viewManager.columnGetMeta(this.column.type).model.ops.addGroup;
   }
 }
 export const sortByManually = <T>(
diff --git a/packages/blocks/src/database-block/common/group-by/matcher.ts b/packages/blocks/src/database-block/data-view/common/group-by/matcher.ts
similarity index 90%
rename from packages/blocks/src/database-block/common/group-by/matcher.ts
rename to packages/blocks/src/database-block/data-view/common/group-by/matcher.ts
index 0625e9ee35f8..e2fdd44fffc0 100644
--- a/packages/blocks/src/database-block/common/group-by/matcher.ts
+++ b/packages/blocks/src/database-block/data-view/common/group-by/matcher.ts
@@ -1,6 +1,6 @@
-import type { UniComponent } from '../../../_common/components/uni-component/uni-component.js';
 import { Matcher } from '../../logical/matcher.js';
 import type { TType } from '../../logical/typesystem.js';
+import type { UniComponent } from '../../utils/uni-component/uni-component.js';
 
 export interface GroupRenderProps<
   Data extends NonNullable<unknown> = NonNullable<unknown>,
diff --git a/packages/blocks/src/database-block/common/group-by/renderer/base.ts b/packages/blocks/src/database-block/data-view/common/group-by/renderer/base.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/group-by/renderer/base.ts
rename to packages/blocks/src/database-block/data-view/common/group-by/renderer/base.ts
diff --git a/packages/blocks/src/database-block/common/group-by/renderer/number-group.ts b/packages/blocks/src/database-block/data-view/common/group-by/renderer/number-group.ts
similarity index 95%
rename from packages/blocks/src/database-block/common/group-by/renderer/number-group.ts
rename to packages/blocks/src/database-block/data-view/common/group-by/renderer/number-group.ts
index 6d6d119c669f..376dfc946c90 100644
--- a/packages/blocks/src/database-block/common/group-by/renderer/number-group.ts
+++ b/packages/blocks/src/database-block/data-view/common/group-by/renderer/number-group.ts
@@ -1,7 +1,7 @@
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { popMenu } from '../../../../_common/components/menu/index.js';
+import { popMenu } from '../../../utils/menu/index.js';
 import { BaseGroup } from './base.js';
 
 @customElement('data-view-group-title-number-view')
diff --git a/packages/blocks/src/database-block/common/group-by/renderer/select-group.ts b/packages/blocks/src/database-block/data-view/common/group-by/renderer/select-group.ts
similarity index 91%
rename from packages/blocks/src/database-block/common/group-by/renderer/select-group.ts
rename to packages/blocks/src/database-block/data-view/common/group-by/renderer/select-group.ts
index 167025ffdaba..356c6f9ad3c2 100644
--- a/packages/blocks/src/database-block/common/group-by/renderer/select-group.ts
+++ b/packages/blocks/src/database-block/data-view/common/group-by/renderer/select-group.ts
@@ -3,9 +3,9 @@ import { customElement } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { popMenu } from '../../../../_common/components/menu/index.js';
-import { selectOptionColors } from '../../../../_common/components/tags/colors.js';
-import type { SelectTag } from '../../../../_common/components/tags/multi-tag-select.js';
+import { popMenu } from '../../../utils/menu/index.js';
+import { selectOptionColors } from '../../../utils/tags/colors.js';
+import type { SelectTag } from '../../../utils/tags/multi-tag-select.js';
 import { BaseGroup } from './base.js';
 
 @customElement('data-view-group-title-select-view')
diff --git a/packages/blocks/src/database-block/common/group-by/renderer/string-group.ts b/packages/blocks/src/database-block/data-view/common/group-by/renderer/string-group.ts
similarity index 93%
rename from packages/blocks/src/database-block/common/group-by/renderer/string-group.ts
rename to packages/blocks/src/database-block/data-view/common/group-by/renderer/string-group.ts
index 92d126170075..1cfcd64bc98e 100644
--- a/packages/blocks/src/database-block/common/group-by/renderer/string-group.ts
+++ b/packages/blocks/src/database-block/data-view/common/group-by/renderer/string-group.ts
@@ -1,7 +1,7 @@
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { popMenu } from '../../../../_common/components/menu/index.js';
+import { popMenu } from '../../../utils/menu/index.js';
 import { BaseGroup } from './base.js';
 
 @customElement('data-view-group-title-string-view')
diff --git a/packages/blocks/src/database-block/common/group-by/setting.ts b/packages/blocks/src/database-block/data-view/common/group-by/setting.ts
similarity index 92%
rename from packages/blocks/src/database-block/common/group-by/setting.ts
rename to packages/blocks/src/database-block/data-view/common/group-by/setting.ts
index ee710d43d9d9..835e98dcfed0 100644
--- a/packages/blocks/src/database-block/common/group-by/setting.ts
+++ b/packages/blocks/src/database-block/data-view/common/group-by/setting.ts
@@ -6,20 +6,18 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import Sortable from 'sortablejs';
 
-import type {
-  Menu,
-  MenuOptions,
-} from '../../../_common/components/menu/index.js';
-import { popMenu } from '../../../_common/components/menu/index.js';
-import { menuTitleItem } from '../../../_common/components/menu/title.js';
-import { renderUniLit } from '../../../_common/components/uni-component/uni-component.js';
+import { ArrowRightSmallIcon } from '../../../../_common/icons/index.js';
 import {
-  ArrowRightSmallIcon,
-  DeleteIcon,
-} from '../../../_common/icons/index.js';
-import { DataViewKanbanManager } from '../../kanban/kanban-view-manager.js';
-import { DataViewTableManager } from '../../table/table-view-manager.js';
+  type Menu,
+  type MenuOptions,
+  popMenu,
+} from '../../utils/menu/index.js';
+import { menuTitleItem } from '../../utils/menu/title.js';
+import { renderUniLit } from '../../utils/uni-component/uni-component.js';
+import { DataViewKanbanManager } from '../../views/kanban/kanban-view-manager.js';
+import { DataViewTableManager } from '../../views/table/table-view-manager.js';
 import { dataViewCssVariable } from '../css-variable.js';
+import { DeleteIcon } from '../icons/index.js';
 import type { GroupRenderProps } from './matcher.js';
 import { groupByMatcher } from './matcher.js';
 
diff --git a/packages/blocks/src/database-block/common/header-area/icon.ts b/packages/blocks/src/database-block/data-view/common/header-area/icon.ts
similarity index 89%
rename from packages/blocks/src/database-block/common/header-area/icon.ts
rename to packages/blocks/src/database-block/data-view/common/header-area/icon.ts
index a08faa43d5f9..8c1a8f7792de 100644
--- a/packages/blocks/src/database-block/common/header-area/icon.ts
+++ b/packages/blocks/src/database-block/data-view/common/header-area/icon.ts
@@ -1,7 +1,7 @@
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { BaseCellRenderer } from '../columns/base-cell.js';
+import { BaseCellRenderer } from '../../column/index.js';
 
 @customElement('data-view-header-area-icon')
 export class IconCell extends BaseCellRenderer<string> {
diff --git a/packages/blocks/src/database-block/common/header-area/text.ts b/packages/blocks/src/database-block/data-view/common/header-area/text.ts
similarity index 94%
rename from packages/blocks/src/database-block/common/header-area/text.ts
rename to packages/blocks/src/database-block/data-view/common/header-area/text.ts
index be1247c3ad2f..4da5e0c73e65 100644
--- a/packages/blocks/src/database-block/common/header-area/text.ts
+++ b/packages/blocks/src/database-block/data-view/common/header-area/text.ts
@@ -6,12 +6,12 @@ import { css } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import type { RichText } from '../../../_common/components/rich-text/rich-text.js';
-import type { DatabaseBlockComponent } from '../../database-block.js';
-import type { DataViewKanbanManager } from '../../kanban/kanban-view-manager.js';
+import type { RichText } from '../../../../_common/components/index.js';
+import type { DatabaseBlockComponent } from '../../../database-block.js';
+import { BaseCellRenderer } from '../../column/index.js';
 import { tRichText } from '../../logical/data-type.js';
-import type { DataViewTableManager } from '../../table/table-view-manager.js';
-import { BaseCellRenderer } from '../columns/base-cell.js';
+import type { DataViewKanbanManager } from '../../views/kanban/kanban-view-manager.js';
+import type { DataViewTableManager } from '../../views/table/table-view-manager.js';
 
 const styles = css`
   data-view-header-area-text {
diff --git a/packages/blocks/src/database-block/common/header/consts.ts b/packages/blocks/src/database-block/data-view/common/header/consts.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/header/consts.ts
rename to packages/blocks/src/database-block/data-view/common/header/consts.ts
diff --git a/packages/blocks/src/database-block/common/header/reference.ts b/packages/blocks/src/database-block/data-view/common/header/reference.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/header/reference.ts
rename to packages/blocks/src/database-block/data-view/common/header/reference.ts
diff --git a/packages/blocks/src/database-block/common/header/title.ts b/packages/blocks/src/database-block/data-view/common/header/title.ts
similarity index 96%
rename from packages/blocks/src/database-block/common/header/title.ts
rename to packages/blocks/src/database-block/data-view/common/header/title.ts
index b222c42486a6..257200d8c266 100644
--- a/packages/blocks/src/database-block/common/header/title.ts
+++ b/packages/blocks/src/database-block/data-view/common/header/title.ts
@@ -6,8 +6,8 @@ import { css, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import type { RichText } from '../../../_common/components/rich-text/rich-text.js';
-import type { DatabaseBlockComponent } from '../../database-block.js';
+import type { RichText } from '../../../../_common/components/index.js';
+import type { DatabaseBlockComponent } from '../../../database-block.js';
 
 @customElement('affine-database-title')
 export class DatabaseTitle extends WithDisposable(ShadowlessElement) {
diff --git a/packages/blocks/src/database-block/common/header/tools/add-row/add-row.ts b/packages/blocks/src/database-block/data-view/common/header/tools/add-row/add-row.ts
similarity index 97%
rename from packages/blocks/src/database-block/common/header/tools/add-row/add-row.ts
rename to packages/blocks/src/database-block/data-view/common/header/tools/add-row/add-row.ts
index 5c6c606504c7..61cc61f4cb51 100644
--- a/packages/blocks/src/database-block/common/header/tools/add-row/add-row.ts
+++ b/packages/blocks/src/database-block/data-view/common/header/tools/add-row/add-row.ts
@@ -1,7 +1,7 @@
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 
-import { PlusIcon } from '../../../../../_common/icons/index.js';
+import { PlusIcon } from '../../../../../../_common/icons/index.js';
 import type { InsertToPosition } from '../../../../types.js';
 import { startDrag } from '../../../../utils/drag.js';
 import { BaseTool } from '../base-tool.js';
@@ -53,7 +53,7 @@ export class DataViewHeaderToolsAddRow extends BaseTool {
   _dragStart = (e: MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    const container = this.closest('affine-data-view-native');
+    const container = this.closest('affine-data-view-renderer');
     const tableRect = container
       ?.querySelector('affine-database-table')
       ?.getBoundingClientRect();
diff --git a/packages/blocks/src/database-block/common/header/tools/add-row/new-record-preview.ts b/packages/blocks/src/database-block/data-view/common/header/tools/add-row/new-record-preview.ts
similarity index 94%
rename from packages/blocks/src/database-block/common/header/tools/add-row/new-record-preview.ts
rename to packages/blocks/src/database-block/data-view/common/header/tools/add-row/new-record-preview.ts
index 30385b312a43..6bbb45726197 100644
--- a/packages/blocks/src/database-block/common/header/tools/add-row/new-record-preview.ts
+++ b/packages/blocks/src/database-block/data-view/common/header/tools/add-row/new-record-preview.ts
@@ -2,7 +2,7 @@ import { ShadowlessElement } from '@blocksuite/block-std';
 import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { PlusIcon } from '../../../../../_common/icons/index.js';
+import { PlusIcon } from '../../../../../../_common/icons/index.js';
 
 @customElement('affine-database-new-record-preview')
 export class NewRecordPreview extends ShadowlessElement {
diff --git a/packages/blocks/src/database-block/common/header/tools/base-tool.ts b/packages/blocks/src/database-block/data-view/common/header/tools/base-tool.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/header/tools/base-tool.ts
rename to packages/blocks/src/database-block/data-view/common/header/tools/base-tool.ts
diff --git a/packages/blocks/src/database-block/common/header/tools/expand/index.ts b/packages/blocks/src/database-block/data-view/common/header/tools/expand/index.ts
similarity index 87%
rename from packages/blocks/src/database-block/common/header/tools/expand/index.ts
rename to packages/blocks/src/database-block/data-view/common/header/tools/expand/index.ts
index e03fd1fda176..2bd53fa7c3ef 100644
--- a/packages/blocks/src/database-block/common/header/tools/expand/index.ts
+++ b/packages/blocks/src/database-block/data-view/common/header/tools/expand/index.ts
@@ -1,21 +1,24 @@
 import type { EventName, UIEventHandler } from '@blocksuite/block-std';
-import { PathFinder } from '@blocksuite/block-std';
-import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
+import {
+  PathFinder,
+  ShadowlessElement,
+  WithDisposable,
+} from '@blocksuite/block-std';
 import type { Disposable } from '@blocksuite/global/utils';
 import { assertExists, Slot } from '@blocksuite/global/utils';
 import type { PropertyValues } from 'lit';
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { createModal } from '../../../../../_common/components/menu/index.js';
-import { renderTemplate } from '../../../../../_common/components/uni-component/render-template.js';
 import {
   CrossIcon,
   ExpandWideIcon,
-} from '../../../../../_common/icons/index.js';
-import type { DataViewSelection } from '../../../../../_common/utils/index.js';
-import type { DataViewNativeConfig } from '../../../../data-view.js';
-import type { DatabaseBlockComponent } from '../../../../database-block.js';
+} from '../../../../../../_common/icons/index.js';
+import type { DatabaseBlockComponent } from '../../../../../database-block.js';
+import type { DataViewRendererConfig } from '../../../../data-view.js';
+import type { DataViewSelection } from '../../../../types.js';
+import { createModal } from '../../../../utils/menu/index.js';
+import { renderTemplate } from '../../../../utils/uni-component/render-template.js';
 import { DatabaseSelection } from '../../../selection.js';
 
 export function showDatabasePreviewModal(database: DatabaseBlockComponent) {
@@ -145,7 +148,7 @@ export class DatabaseBlockModalPreview extends WithDisposable(
   protected override firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
     requestAnimationFrame(() => {
-      this.querySelector('affine-data-view-native')?.focusFirstCell();
+      this.querySelector('affine-data-view-renderer')?.focusFirstCell();
     });
   }
 
@@ -177,7 +180,7 @@ export class DatabaseBlockModalPreview extends WithDisposable(
   };
 
   protected override render(): unknown {
-    const config: DataViewNativeConfig = {
+    const config: DataViewRendererConfig = {
       bindHotkey: this.bindHotkey,
       handleEvent: this.handleEvent,
       getFlag: this.database.getFlag,
@@ -189,7 +192,9 @@ export class DatabaseBlockModalPreview extends WithDisposable(
       std: this.database.std,
     };
     return html`
-      <affine-data-view-native .config="${config}"></affine-data-view-native>
+      <affine-data-view-renderer
+        .config="${config}"
+      ></affine-data-view-renderer>
     `;
   }
 }
diff --git a/packages/blocks/src/database-block/common/header/tools/expand/styles.ts b/packages/blocks/src/database-block/data-view/common/header/tools/expand/styles.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/header/tools/expand/styles.ts
rename to packages/blocks/src/database-block/data-view/common/header/tools/expand/styles.ts
diff --git a/packages/blocks/src/database-block/common/header/tools/expand/table-full-screen-modal.ts b/packages/blocks/src/database-block/data-view/common/header/tools/expand/table-full-screen-modal.ts
similarity index 90%
rename from packages/blocks/src/database-block/common/header/tools/expand/table-full-screen-modal.ts
rename to packages/blocks/src/database-block/data-view/common/header/tools/expand/table-full-screen-modal.ts
index 7b3db36cf257..c07d7540a229 100644
--- a/packages/blocks/src/database-block/common/header/tools/expand/table-full-screen-modal.ts
+++ b/packages/blocks/src/database-block/data-view/common/header/tools/expand/table-full-screen-modal.ts
@@ -1,14 +1,12 @@
-import '../../../../../_common/components/button.js';
-
 import { BlockElement } from '@blocksuite/block-std';
 import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
+import type { DatabaseBlockModel } from '../../../../../database-model.js';
 import {
   DatabaseTableViewClose,
   DatabaseTableViewIcon,
-} from '../../../../../_common/icons/index.js';
-import type { DatabaseBlockModel } from '../../../../database-model.js';
+} from '../../../icons/index.js';
 import { fullScreenStyles } from './styles.js';
 
 @customElement('affine-database-table-view-full-screen')
diff --git a/packages/blocks/src/database-block/common/header/tools/filter.ts b/packages/blocks/src/database-block/data-view/common/header/tools/filter.ts
similarity index 94%
rename from packages/blocks/src/database-block/common/header/tools/filter.ts
rename to packages/blocks/src/database-block/data-view/common/header/tools/filter.ts
index 48dc2d348e8f..d69dbdee7cca 100644
--- a/packages/blocks/src/database-block/common/header/tools/filter.ts
+++ b/packages/blocks/src/database-block/data-view/common/header/tools/filter.ts
@@ -3,10 +3,10 @@ import '../../../common/filter/filter-group.js';
 import { css, html, nothing } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { eventToVRect } from '../../../../_common/components/menu/index.js';
-import { FilterIcon } from '../../../../_common/icons/index.js';
 import type { FilterGroup } from '../../../common/ast.js';
 import { popCreateFilter } from '../../../common/ref/ref.js';
+import { eventToVRect } from '../../../utils/menu/index.js';
+import { FilterIcon } from '../../icons/index.js';
 import { BaseTool } from './base-tool.js';
 
 const styles = css`
diff --git a/packages/blocks/src/database-block/common/header/tools/search.ts b/packages/blocks/src/database-block/data-view/common/header/tools/search.ts
similarity index 93%
rename from packages/blocks/src/database-block/common/header/tools/search.ts
rename to packages/blocks/src/database-block/data-view/common/header/tools/search.ts
index 4a8ff8e0f58e..355e502d9564 100644
--- a/packages/blocks/src/database-block/common/header/tools/search.ts
+++ b/packages/blocks/src/database-block/data-view/common/header/tools/search.ts
@@ -6,13 +6,10 @@ import { customElement, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import {
-  DatabaseSearchClose,
-  DatabaseSearchIcon,
-} from '../../../../_common/icons/index.js';
-import { stopPropagation } from '../../../../_common/utils/event.js';
-import type { DataViewKanbanManager } from '../../../kanban/kanban-view-manager.js';
-import type { DataViewTableManager } from '../../../table/table-view-manager.js';
+import { stopPropagation } from '../../../utils/event.js';
+import type { DataViewKanbanManager } from '../../../views/kanban/kanban-view-manager.js';
+import type { DataViewTableManager } from '../../../views/table/table-view-manager.js';
+import { DatabaseSearchClose, DatabaseSearchIcon } from '../../icons/index.js';
 import { BaseTool } from './base-tool.js';
 
 const styles = css`
diff --git a/packages/blocks/src/database-block/common/header/tools/tools.ts b/packages/blocks/src/database-block/data-view/common/header/tools/tools.ts
similarity index 95%
rename from packages/blocks/src/database-block/common/header/tools/tools.ts
rename to packages/blocks/src/database-block/data-view/common/header/tools/tools.ts
index 65ff52a95e72..46bf66b88aa6 100644
--- a/packages/blocks/src/database-block/common/header/tools/tools.ts
+++ b/packages/blocks/src/database-block/data-view/common/header/tools/tools.ts
@@ -9,7 +9,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 
-import { renderUniLit } from '../../../../_common/components/uni-component/uni-component.js';
+import { renderUniLit } from '../../../utils/uni-component/uni-component.js';
 import { type DataViewExpose, viewRendererManager } from '../../data-view.js';
 import type { DataViewManager } from '../../data-view-manager.js';
 
diff --git a/packages/blocks/src/database-block/common/header/tools/view-options.ts b/packages/blocks/src/database-block/data-view/common/header/tools/view-options.ts
similarity index 92%
rename from packages/blocks/src/database-block/common/header/tools/view-options.ts
rename to packages/blocks/src/database-block/data-view/common/header/tools/view-options.ts
index c68eebd13eb9..87e58813eb52 100644
--- a/packages/blocks/src/database-block/common/header/tools/view-options.ts
+++ b/packages/blocks/src/database-block/data-view/common/header/tools/view-options.ts
@@ -2,26 +2,21 @@ import type { ReferenceElement } from '@floating-ui/dom';
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import {
-  eventToVRect,
-  popMenu,
-} from '../../../../_common/components/menu/menu.js';
 import {
   ArrowRightSmallIcon,
   DeleteIcon,
   DuplicateIcon,
-  FilterIcon,
-  GroupingIcon,
-  InfoIcon,
   MoreHorizontalIcon,
-} from '../../../../_common/icons/index.js';
-import type { DataViewKanbanManager } from '../../../kanban/kanban-view-manager.js';
-import type { DataViewTableManager } from '../../../table/table-view-manager.js';
+} from '../../../../../_common/icons/index.js';
+import { eventToVRect, popMenu } from '../../../utils/menu/index.js';
+import type { DataViewKanbanManager } from '../../../views/kanban/kanban-view-manager.js';
+import type { DataViewTableManager } from '../../../views/table/table-view-manager.js';
 import { popFilterModal } from '../../filter/filter-modal.js';
 import {
   popGroupSetting,
   popSelectGroupByProperty,
 } from '../../group-by/setting.js';
+import { FilterIcon, GroupingIcon, InfoIcon } from '../../icons/index.js';
 import { popPropertiesSetting } from '../../properties.js';
 import { BaseTool } from './base-tool.js';
 
diff --git a/packages/blocks/src/database-block/common/header/views.ts b/packages/blocks/src/database-block/data-view/common/header/views.ts
similarity index 96%
rename from packages/blocks/src/database-block/common/header/views.ts
rename to packages/blocks/src/database-block/data-view/common/header/views.ts
index 9ae2468afe60..5abc1084eefa 100644
--- a/packages/blocks/src/database-block/common/header/views.ts
+++ b/packages/blocks/src/database-block/data-view/common/header/views.ts
@@ -6,21 +6,21 @@ import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import {
-  eventToVRect,
-  popFilterableSimpleMenu,
-  popMenu,
-} from '../../../_common/components/menu/index.js';
-import { renderUniLit } from '../../../_common/components/uni-component/uni-component.js';
 import {
   AddCursorIcon,
-  DeleteIcon,
   DuplicateIcon,
   MoreHorizontalIcon,
   MoveLeftIcon,
   MoveRightIcon,
-} from '../../../_common/icons/index.js';
+} from '../../../../_common/icons/index.js';
+import {
+  eventToVRect,
+  popFilterableSimpleMenu,
+  popMenu,
+} from '../../utils/menu/index.js';
+import { renderUniLit } from '../../utils/uni-component/uni-component.js';
 import { viewManager, viewRendererManager } from '../data-view.js';
+import { DeleteIcon } from '../icons/index.js';
 import type { ViewSource } from '../view-source.js';
 
 @customElement('data-view-header-views')
@@ -173,7 +173,7 @@ export class DataViewHeaderViews extends WithDisposable(ShadowlessElement) {
               {}
             ),
             select: () => {
-              this.closest('affine-data-view-native')
+              this.closest('affine-data-view-renderer')
                 ?.querySelector('data-view-header-tools-view-options')
                 ?.openMoreAction(target);
             },
diff --git a/packages/blocks/src/_common/components/icon/icon.ts b/packages/blocks/src/database-block/data-view/common/icons/icon.ts
similarity index 91%
rename from packages/blocks/src/_common/components/icon/icon.ts
rename to packages/blocks/src/database-block/data-view/common/icons/icon.ts
index 2743195ceb7c..973239e69514 100644
--- a/packages/blocks/src/_common/components/icon/icon.ts
+++ b/packages/blocks/src/database-block/data-view/common/icons/icon.ts
@@ -2,7 +2,7 @@ import { ShadowlessElement } from '@blocksuite/block-std';
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import * as icons from '../../../_common/icons/index.js';
+import * as icons from './index.js';
 
 @customElement('affine-lit-icon')
 export class AffineLitIcon extends ShadowlessElement {
diff --git a/packages/blocks/src/database-block/data-view/common/icons/index.ts b/packages/blocks/src/database-block/data-view/common/icons/index.ts
new file mode 100644
index 000000000000..82285df26edc
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/common/icons/index.ts
@@ -0,0 +1,525 @@
+import { html } from 'lit';
+
+export const DatabaseSearchIcon = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M3.75 9.5C3.75 6.32436 6.32436 3.75 9.5 3.75C12.6756 3.75 15.25 6.32436 15.25 9.5C15.25 12.6756 12.6756 15.25 9.5 15.25C6.32436 15.25 3.75 12.6756 3.75 9.5ZM9.5 2.25C5.49594 2.25 2.25 5.49594 2.25 9.5C2.25 13.5041 5.49594 16.75 9.5 16.75C11.2319 16.75 12.8219 16.1427 14.0689 15.1295L19.4697 20.5303C19.7626 20.8232 20.2374 20.8232 20.5303 20.5303C20.8232 20.2374 20.8232 19.7626 20.5303 19.4697L15.1295 14.0689C16.1427 12.8219 16.75 11.2319 16.75 9.5C16.75 5.49594 13.5041 2.25 9.5 2.25Z"
+    fill="currentColor"
+  />
+</svg> `;
+export const DatabaseDuplicate = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M6 3.25C4.48122 3.25 3.25 4.48122 3.25 6V14C3.25 15.5188 4.48122 16.75 6 16.75H7.25V18C7.25 19.5188 8.48122 20.75 10 20.75H18C19.5188 20.75 20.75 19.5188 20.75 18V10C20.75 8.48122 19.5188 7.25 18 7.25H16.75V6C16.75 4.48122 15.5188 3.25 14 3.25H6ZM10 7.25H15.25V6C15.25 5.30964 14.6904 4.75 14 4.75H6C5.30964 4.75 4.75 5.30964 4.75 6V14C4.75 14.6904 5.30964 15.25 6 15.25H8C8.41421 15.25 8.75 15.5858 8.75 16V18C8.75 18.6904 9.30964 19.25 10 19.25H18C18.6904 19.25 19.25 18.6904 19.25 18V10C19.25 9.30964 18.6904 8.75 18 8.75H16H10C9.46561 8.75 9.00774 9.08568 8.82933 9.56024C8.68357 9.94796 8.2511 10.1441 7.86338 9.99835C7.47566 9.85259 7.27951 9.42012 7.42527 9.0324C7.81633 7.99216 8.82056 7.25 10 7.25ZM12.8871 10.489C12.6049 10.1858 12.1303 10.1688 11.8271 10.451C11.524 10.7333 11.507 11.2078 11.7892 11.511L12.4771 12.25H7.79999C7.38577 12.25 7.04999 12.5858 7.04999 13C7.04999 13.4142 7.38577 13.75 7.79999 13.75H12.4771L11.7892 14.489C11.507 14.7922 11.524 15.2667 11.8271 15.549C12.1303 15.8312 12.6049 15.8142 12.8871 15.511L14.7489 13.511C15.017 13.2231 15.017 12.7769 14.7489 12.489L12.8871 10.489Z"
+    fill="currentColor"
+  />
+</svg> `;
+export const DatabaseInsertLeft = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M14 3.75C13.0335 3.75 12.25 4.5335 12.25 5.5V18.5C12.25 19.4665 13.0335 20.25 14 20.25H18C18.9665 20.25 19.75 19.4665 19.75 18.5V5.5C19.75 4.5335 18.9665 3.75 18 3.75H14ZM13.75 5.5C13.75 5.36193 13.8619 5.25 14 5.25H18C18.1381 5.25 18.25 5.36193 18.25 5.5V18.5C18.25 18.6381 18.1381 18.75 18 18.75H14C13.8619 18.75 13.75 18.6381 13.75 18.5V5.5ZM8.25 9.5C8.25 9.08579 7.91421 8.75 7.5 8.75C7.08579 8.75 6.75 9.08579 6.75 9.5V11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H6.75V14.5C6.75 14.9142 7.08579 15.25 7.5 15.25C7.91421 15.25 8.25 14.9142 8.25 14.5V12.75H10C10.4142 12.75 10.75 12.4142 10.75 12C10.75 11.5858 10.4142 11.25 10 11.25H8.25V9.5Z"
+    fill="currentColor"
+  />
+</svg> `;
+export const DatabaseInsertRight = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M6 3.75C5.0335 3.75 4.25 4.5335 4.25 5.5V18.5C4.25 19.4665 5.0335 20.25 6 20.25H10C10.9665 20.25 11.75 19.4665 11.75 18.5V5.5C11.75 4.5335 10.9665 3.75 10 3.75H6ZM5.75 5.5C5.75 5.36193 5.86193 5.25 6 5.25H10C10.1381 5.25 10.25 5.36193 10.25 5.5V18.5C10.25 18.6381 10.1381 18.75 10 18.75H6C5.86193 18.75 5.75 18.6381 5.75 18.5V5.5ZM17.25 9.5C17.25 9.08579 16.9142 8.75 16.5 8.75C16.0858 8.75 15.75 9.08579 15.75 9.5V11.25H14C13.5858 11.25 13.25 11.5858 13.25 12C13.25 12.4142 13.5858 12.75 14 12.75H15.75V14.5C15.75 14.9142 16.0858 15.25 16.5 15.25C16.9142 15.25 17.25 14.9142 17.25 14.5V12.75H19C19.4142 12.75 19.75 12.4142 19.75 12C19.75 11.5858 19.4142 11.25 19 11.25H17.25V9.5Z"
+    fill="currentColor"
+  />
+</svg> `;
+export const DatabaseMoveLeft = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M4 4V20M8 12H20M8 12L12 8M8 12L12 16"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>`;
+export const DatabaseMoveRight = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M20 4V20M4 12H16M16 12L12 8M16 12L12 16"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>`;
+export const DatabaseMultiSelect = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M4 5L6.42929 7.42929C6.46834 7.46834 6.53166 7.46834 6.57071 7.42929L9 5"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <path
+    d="M4 11L6.42929 13.4293C6.46834 13.4683 6.53166 13.4683 6.57071 13.4293L9 11"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <path
+    d="M4 17L6.42929 19.4293C6.46834 19.4683 6.53166 19.4683 6.57071 19.4293L9 17"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <path
+    d="M12 6L20 6"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <path
+    d="M12 12L20 12"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <path
+    d="M12 18L20 18"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+</svg>`;
+export const DatabaseNumber = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M18.5 4L12.5 20"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <path
+    d="M12 4L6 20"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <path
+    d="M20 8.5H5.5"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <path
+    d="M19 15L4 15"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+</svg>`;
+export const DatabaseSelect = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill="currentColor"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 16.5563 7.44365 20.25 12 20.25C16.5563 20.25 20.25 16.5563 20.25 12C20.25 7.44365 16.5563 3.75 12 3.75ZM2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12Z"
+  />
+  <path
+    fill="currentColor"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7.46967 10.4697C7.76256 10.1768 8.23744 10.1768 8.53033 10.4697L12 13.9393L15.4697 10.4697C15.7626 10.1768 16.2374 10.1768 16.5303 10.4697C16.8232 10.7626 16.8232 11.2374 16.5303 11.5303L12.601 15.4596C12.2691 15.7916 11.7309 15.7916 11.399 15.4596L7.46967 11.5303C7.17678 11.2374 7.17678 10.7626 7.46967 10.4697Z"
+  />
+</svg>`;
+export const DatabaseProgress = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill="currentColor"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M15 4.25C15.4142 4.25 15.75 4.58579 15.75 5V6.25H18C20.0711 6.25 21.75 7.92893 21.75 10V14C21.75 16.0711 20.0711 17.75 18 17.75H15.75V19C15.75 19.4142 15.4142 19.75 15 19.75C14.5858 19.75 14.25 19.4142 14.25 19V17.75H6C3.92893 17.75 2.25 16.0711 2.25 14V10C2.25 7.92893 3.92893 6.25 6 6.25H14.25V5C14.25 4.58579 14.5858 4.25 15 4.25ZM14.25 7.75H6C4.75736 7.75 3.75 8.75736 3.75 10V14C3.75 15.2426 4.75736 16.25 6 16.25H14.25V7.75ZM15.75 16.25H18C19.2426 16.25 20.25 15.2426 20.25 14V10C20.25 8.75736 19.2426 7.75 18 7.75H15.75V16.25ZM6 9.25C6.41421 9.25 6.75 9.58579 6.75 10V14C6.75 14.4142 6.41421 14.75 6 14.75C5.58579 14.75 5.25 14.4142 5.25 14L5.25 10C5.25 9.58579 5.58579 9.25 6 9.25ZM9 9.25C9.41421 9.25 9.75 9.58579 9.75 10L9.75 14C9.75 14.4142 9.41421 14.75 9 14.75C8.58579 14.75 8.25 14.4142 8.25 14L8.25 10C8.25 9.58579 8.58579 9.25 9 9.25ZM12 9.25C12.4142 9.25 12.75 9.58579 12.75 10V14C12.75 14.4142 12.4142 14.75 12 14.75C11.5858 14.75 11.25 14.4142 11.25 14V10C11.25 9.58579 11.5858 9.25 12 9.25Z"
+  />
+</svg>`;
+export const DatabaseSearchClose = html`<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M4.22872 4.22878C4.42398 4.03352 4.74057 4.03352 4.93583 4.22878L7.99996 7.29291L11.0641 4.22878C11.2593 4.03352 11.5759 4.03352 11.7712 4.22878C11.9665 4.42405 11.9665 4.74063 11.7712 4.93589L8.70707 8.00002L11.7712 11.0641C11.9665 11.2594 11.9665 11.576 11.7712 11.7713C11.5759 11.9665 11.2593 11.9665 11.0641 11.7713L7.99996 8.70713L4.93583 11.7713C4.74057 11.9665 4.42398 11.9665 4.22872 11.7713C4.03346 11.576 4.03346 11.2594 4.22872 11.0641L7.29285 8.00002L4.22872 4.93589C4.03346 4.74063 4.03346 4.42405 4.22872 4.22878Z"
+  />
+</svg>`;
+
+export const DatabaseAddColumn = html`<svg
+  viewBox="0 0 16 16"
+  style="
+  width: 12px;
+  height: 12px;
+  fill: var(--affine-text-primary-color);"
+>
+  <path
+    d="M7.977 14.963c.407 0 .747-.324.747-.723V8.72h5.362c.399 0 .74-.34.74-.747a.746.746 0 00-.74-.738H8.724V1.706c0-.398-.34-.722-.747-.722a.732.732 0 00-.739.722v5.529h-5.37a.746.746 0 00-.74.738c0 .407.341.747.74.747h5.37v5.52c0 .399.332.723.739.723z"
+  ></path>
+</svg>`;
+export const DatabaseDragIcon = html`<svg
+  width="10"
+  height="14"
+  viewBox="0 0 10 14"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <rect width="10" height="14" rx="2" />
+  <rect width="10" height="14" rx="2" fill-opacity="0.08" />
+  <g clip-path="url(#clip0_179_9218)">
+    <circle cx="3" cy="3" r="1" fill="var(--affine-icon-color)" />
+    <circle cx="3" cy="6.79163" r="1" fill="var(--affine-icon-color)" />
+    <circle cx="3" cy="10.5833" r="1" fill="var(--affine-icon-color)" />
+    <circle cx="7" cy="3" r="1" fill="var(--affine-icon-color)" />
+    <circle cx="7" cy="6.79163" r="1" fill="var(--affine-icon-color)" />
+    <circle cx="7" cy="10.5833" r="1" fill="var(--affine-icon-color)" />
+  </g>
+  <defs>
+    <clipPath id="clip0_179_9218">
+      <rect width="6" height="10" transform="translate(2 2)" />
+    </clipPath>
+  </defs>
+</svg>`;
+export const DatabaseExpand = html`
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.4697 3.46967C11.7626 3.17678 12.2374 3.17678 12.5303 3.46967L17.5303 8.46967C17.8232 8.76256 17.8232 9.23744 17.5303 9.53033C17.2374 9.82322 16.7626 9.82322 16.4697 9.53033L12 5.06066L7.53033 9.53033C7.23744 9.82322 6.76256 9.82322 6.46967 9.53033C6.17678 9.23744 6.17678 8.76256 6.46967 8.46967L11.4697 3.46967ZM6.46967 14.4697C6.76256 14.1768 7.23744 14.1768 7.53033 14.4697L12 18.9393L16.4697 14.4697C16.7626 14.1768 17.2374 14.1768 17.5303 14.4697C17.8232 14.7626 17.8232 15.2374 17.5303 15.5303L12.5303 20.5303C12.2374 20.8232 11.7626 20.8232 11.4697 20.5303L6.46967 15.5303C6.17678 15.2374 6.17678 14.7626 6.46967 14.4697Z"
+    />
+  </svg>
+`;
+export const DatabaseTableViewClose = html`
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.34314 6.34321C6.63604 6.05031 7.11091 6.05031 7.4038 6.34321L12 10.9394L16.5962 6.34321C16.8891 6.05031 17.364 6.05031 17.6569 6.34321C17.9497 6.6361 17.9497 7.11097 17.6569 7.40387L13.0607 12.0001L17.6569 16.5963C17.9497 16.8891 17.9497 17.364 17.6569 17.6569C17.364 17.9498 16.8891 17.9498 16.5962 17.6569L12 13.0607L7.4038 17.6569C7.11091 17.9498 6.63604 17.9498 6.34314 17.6569C6.05025 17.364 6.05025 16.8891 6.34314 16.5963L10.9393 12.0001L6.34314 7.40387C6.05025 7.11097 6.05025 6.6361 6.34314 6.34321Z"
+    />
+  </svg>
+`;
+export const CrossIcon = html` <svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    fill="currentColor"
+    d="M6.34315 6.34314C6.63604 6.05025 7.11091 6.05025 7.40381 6.34314L12 10.9393L16.5962 6.34314C16.8891 6.05025 17.364 6.05025 17.6569 6.34314C17.9497 6.63604 17.9497 7.11091 17.6569 7.4038L13.0607 12L17.6569 16.5962C17.9497 16.8891 17.9497 17.364 17.6569 17.6569C17.364 17.9497 16.8891 17.9497 16.5962 17.6569L12 13.0607L7.40381 17.6569C7.11091 17.9497 6.63604 17.9497 6.34315 17.6569C6.05025 17.364 6.05025 16.8891 6.34315 16.5962L10.9393 12L6.34315 7.4038C6.05025 7.11091 6.05025 6.63604 6.34315 6.34314Z"
+  />
+</svg>`;
+export const PlusIcon = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    fill="currentColor"
+    d="M12 5.25C12.4142 5.25 12.75 5.58579 12.75 6V11.25H18C18.4142 11.25 18.75 11.5858 18.75 12C18.75 12.4142 18.4142 12.75 18 12.75H12.75V18C12.75 18.4142 12.4142 18.75 12 18.75C11.5858 18.75 11.25 18.4142 11.25 18V12.75H6C5.58579 12.75 5.25 12.4142 5.25 12C5.25 11.5858 5.58579 11.25 6 11.25H11.25V6C11.25 5.58579 11.5858 5.25 12 5.25Z"
+  />
+</svg>`;
+export const DeleteIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    fill="currentColor"
+    d="M11 2.25C9.48122 2.25 8.25 3.48122 8.25 5V6.1499H4C3.53056 6.1499 3.15 6.53046 3.15 6.9999C3.15 7.46934 3.53056 7.8499 4 7.8499H4.3088L5.11923 19.1959C5.22202 20.635 6.41948 21.75 7.86224 21.75H16.1378C17.5805 21.75 18.778 20.635 18.8808 19.1959L19.6912 7.8499H20C20.4694 7.8499 20.85 7.46934 20.85 6.9999C20.85 6.53046 20.4694 6.1499 20 6.1499H15.75V5C15.75 3.48122 14.5188 2.25 13 2.25H11ZM14.25 6.1499V5C14.25 4.30964 13.6904 3.75 13 3.75H11C10.3096 3.75 9.75 4.30964 9.75 5V6.1499H14.25ZM18.1874 7.8499H5.81262L6.61542 19.0891C6.66214 19.7432 7.20644 20.25 7.86224 20.25H16.1378C16.7936 20.25 17.3379 19.7432 17.3846 19.0891L18.1874 7.8499ZM10.75 11C10.75 10.5858 10.4142 10.25 10 10.25C9.58579 10.25 9.25 10.5858 9.25 11V17C9.25 17.4142 9.58579 17.75 10 17.75C10.4142 17.75 10.75 17.4142 10.75 17V11ZM14 10.25C14.4142 10.25 14.75 10.5858 14.75 11V17C14.75 17.4142 14.4142 17.75 14 17.75C13.5858 17.75 13.25 17.4142 13.25 17V11C13.25 10.5858 13.5858 10.25 14 10.25Z"
+  />
+</svg>`;
+export const MoreHorizontalIcon = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M4.5 12.0001C4.5 12.9559 5.27489 13.7308 6.23077 13.7308C7.18665 13.7308 7.96154 12.9559 7.96154 12.0001C7.96154 11.0442 7.18665 10.2693 6.23077 10.2693C5.27489 10.2693 4.5 11.0442 4.5 12.0001ZM12 13.7308C11.0441 13.7308 10.2692 12.9559 10.2692 12.0001C10.2692 11.0442 11.0441 10.2693 12 10.2693C12.9559 10.2693 13.7308 11.0442 13.7308 12.0001C13.7308 12.9559 12.9559 13.7308 12 13.7308ZM17.7692 13.7308C16.8134 13.7308 16.0385 12.9559 16.0385 12.0001C16.0385 11.0442 16.8134 10.2693 17.7692 10.2693C18.7251 10.2693 19.5 11.0442 19.5 12.0001C19.5 12.9559 18.7251 13.7308 17.7692 13.7308Z"
+    fill="currentColor"
+  />
+</svg> `;
+export const ArrowLeftBigIcon = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M10.9968 6.4927C11.277 6.79778 11.2568 7.27223 10.9517 7.5524L6.92547 11.25L19 11.25C19.4142 11.25 19.75 11.5858 19.75 12C19.75 12.4142 19.4142 12.75 19 12.75L6.92547 12.75L10.9517 16.4476C11.2568 16.7278 11.277 17.2022 10.9968 17.5073C10.7167 17.8124 10.2422 17.8326 9.93714 17.5524L4.4927 12.5524C4.33803 12.4104 4.25 12.21 4.25 12C4.25 11.79 4.33803 11.5896 4.4927 11.4476L9.93714 6.44761C10.2422 6.16743 10.7167 6.18762 10.9968 6.4927Z"
+    fill="currentColor"
+  />
+</svg> `;
+export const TextIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M3.25 4C3.25 3.58579 3.58579 3.25 4 3.25H20C20.4142 3.25 20.75 3.58579 20.75 4V6.66667C20.75 7.08088 20.4142 7.41667 20 7.41667C19.5858 7.41667 19.25 7.08088 19.25 6.66667V4.75H12.75V19.25H16C16.4142 19.25 16.75 19.5858 16.75 20C16.75 20.4142 16.4142 20.75 16 20.75H8C7.58579 20.75 7.25 20.4142 7.25 20C7.25 19.5858 7.58579 19.25 8 19.25H11.25V4.75H4.75V6.66667C4.75 7.08088 4.41421 7.41667 4 7.41667C3.58579 7.41667 3.25 7.08088 3.25 6.66667V4Z"
+    fill="currentColor"
+  />
+</svg>`;
+export const CheckBoxIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    fill="currentColor"
+    d="M6 3.25C4.48122 3.25 3.25 4.48122 3.25 6V18C3.25 19.5188 4.48122 20.75 6 20.75H18C19.5188 20.75 20.75 19.5188 20.75 18V6C20.75 4.48122 19.5188 3.25 18 3.25H6ZM4.75 6C4.75 5.30964 5.30964 4.75 6 4.75H18C18.6904 4.75 19.25 5.30964 19.25 6V18C19.25 18.6904 18.6904 19.25 18 19.25H6C5.30964 19.25 4.75 18.6904 4.75 18V6ZM16.5303 9.53033C16.8232 9.23744 16.8232 8.76256 16.5303 8.46967C16.2374 8.17678 15.7626 8.17678 15.4697 8.46967L10.5 13.4393L9.03033 11.9697C8.73744 11.6768 8.26256 11.6768 7.96967 11.9697C7.67678 12.2626 7.67678 12.7374 7.96967 13.0303L9.96967 15.0303C10.2626 15.3232 10.7374 15.3232 11.0303 15.0303L16.5303 9.53033Z"
+  />
+</svg>`;
+export const DateTime = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8 2.75C8.41421 2.75 8.75 3.08579 8.75 3.5V4.25H15.25V3.5C15.25 3.08579 15.5858 2.75 16 2.75C16.4142 2.75 16.75 3.08579 16.75 3.5V4.25H19C20.5188 4.25 21.75 5.48122 21.75 7V9.5V19C21.75 20.5188 20.5188 21.75 19 21.75H5C3.48122 21.75 2.25 20.5188 2.25 19V9.5V7C2.25 5.48122 3.48122 4.25 5 4.25H7.25V3.5C7.25 3.08579 7.58579 2.75 8 2.75ZM15.25 5.75V6.5C15.25 6.91421 15.5858 7.25 16 7.25C16.4142 7.25 16.75 6.91421 16.75 6.5V5.75H19C19.6904 5.75 20.25 6.30964 20.25 7V8.75H3.75V7C3.75 6.30964 4.30964 5.75 5 5.75H7.25V6.5C7.25 6.91421 7.58579 7.25 8 7.25C8.41421 7.25 8.75 6.91421 8.75 6.5V5.75H15.25ZM3.75 10.25H20.25V19C20.25 19.6904 19.6904 20.25 19 20.25H5C4.30964 20.25 3.75 19.6904 3.75 19V10.25Z"
+    fill="currentColor"
+  />
+</svg> `;
+export const ImageIcon = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    fill="currentColor"
+    d="M6 3.25C4.48122 3.25 3.25 4.48122 3.25 6V16V18C3.25 19.5188 4.48122 20.75 6 20.75H18C19.5188 20.75 20.75 19.5188 20.75 18V14V6C20.75 4.48122 19.5188 3.25 18 3.25H6ZM4.75 18V16.3107L9.11612 11.9445C9.60427 11.4564 10.3957 11.4564 10.8839 11.9445L13.4697 14.5303L15.4697 16.5303C15.7626 16.8232 16.2374 16.8232 16.5303 16.5303C16.8232 16.2374 16.8232 15.7626 16.5303 15.4697L15.0607 14L16.1161 12.9445C16.6043 12.4564 17.3957 12.4564 17.8839 12.9445L19.25 14.3107V18C19.25 18.6904 18.6904 19.25 18 19.25H6C5.30964 19.25 4.75 18.6904 4.75 18ZM11.9445 10.8839L14 12.9393L15.0555 11.8839C16.1294 10.8099 17.8706 10.8099 18.9445 11.8839L19.25 12.1893V6C19.25 5.30964 18.6904 4.75 18 4.75H6C5.30964 4.75 4.75 5.30964 4.75 6V14.1893L8.05546 10.8839C9.1294 9.80994 10.8706 9.80994 11.9445 10.8839ZM14 9C14.5523 9 15 8.55228 15 8C15 7.44772 14.5523 7 14 7C13.4477 7 13 7.44772 13 8C13 8.55228 13.4477 9 14 9Z"
+  />
+</svg>`;
+export const TitleIcon = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2.84088 5.25C2.42667 5.25 2.09088 5.58579 2.09088 6V8C2.09088 8.41421 2.42667 8.75 2.84088 8.75C3.25509 8.75 3.59088 8.41421 3.59088 8V6.75H6.99997V17.25H5.0227C4.60849 17.25 4.2727 17.5858 4.2727 18C4.2727 18.4142 4.60849 18.75 5.0227 18.75H7.74997H10.4772C10.8915 18.75 11.2272 18.4142 11.2272 18C11.2272 17.5858 10.8915 17.25 10.4772 17.25H8.49997V6.75H11.9091V8C11.9091 8.41421 12.2449 8.75 12.6591 8.75C13.0733 8.75 13.4091 8.41421 13.4091 8V6C13.4091 5.58579 13.0733 5.25 12.6591 5.25H7.74997H2.84088ZM15.6045 5.25C15.1903 5.25 14.8545 5.58579 14.8545 6C14.8545 6.41421 15.1903 6.75 15.6045 6.75H21.059C21.4733 6.75 21.809 6.41421 21.809 6C21.809 5.58579 21.4733 5.25 21.059 5.25H15.6045ZM14.8545 12C14.8545 11.5858 15.1903 11.25 15.6045 11.25H21.059C21.4733 11.25 21.809 11.5858 21.809 12C21.809 12.4142 21.4733 12.75 21.059 12.75H15.6045C15.1903 12.75 14.8545 12.4142 14.8545 12ZM15.6045 17.25C15.1903 17.25 14.8545 17.5858 14.8545 18C14.8545 18.4142 15.1903 18.75 15.6045 18.75H21.059C21.4733 18.75 21.809 18.4142 21.809 18C21.809 17.5858 21.4733 17.25 21.059 17.25H15.6045Z"
+    fill="currentColor"
+  />
+</svg> `;
+
+export const LinkIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill="currentColor"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M18.4283 5.57173C17.3326 4.47609 15.5563 4.47609 14.4606 5.57173L13.4832 6.54916C13.1903 6.84205 12.7154 6.84205 12.4225 6.54916C12.1296 6.25627 12.1296 5.78139 12.4225 5.4885L13.4 4.51107C15.0814 2.82964 17.8075 2.82964 19.4889 4.51107C21.1704 6.19249 21.1704 8.91862 19.4889 10.6L15.9334 14.1556C14.252 15.837 11.5258 15.837 9.8444 14.1556C9.55151 13.8627 9.55151 13.3878 9.8444 13.0949C10.1373 12.802 10.6122 12.802 10.9051 13.0949C12.0007 14.1906 13.7771 14.1906 14.8727 13.0949L18.4283 9.53938C19.5239 8.44375 19.5239 6.66737 18.4283 5.57173ZM13.0949 10.9051C11.9993 9.80942 10.2229 9.80942 9.12728 10.9051L5.57173 14.4606C4.47609 15.5563 4.47609 17.3326 5.57173 18.4283C6.66737 19.5239 8.44375 19.5239 9.53938 18.4283L10.5185 17.4491C10.8114 17.1562 11.2863 17.1562 11.5792 17.4491C11.8721 17.742 11.8721 18.2169 11.5792 18.5098L10.6 19.4889C8.91862 21.1704 6.19249 21.1704 4.51107 19.4889C2.82964 17.8075 2.82964 15.0814 4.51107 13.4L8.06662 9.8444C9.74805 8.16298 12.4742 8.16298 14.1556 9.8444C14.4485 10.1373 14.4485 10.6122 14.1556 10.9051C13.8627 11.198 13.3878 11.198 13.0949 10.9051Z"
+  />
+</svg>`;
+export const DatabaseKanbanViewIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill="currentColor"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5.5 3.75C4.5335 3.75 3.75 4.5335 3.75 5.5V18C3.75 18.9665 4.5335 19.75 5.5 19.75H9.5C10.4665 19.75 11.25 18.9665 11.25 18V5.5C11.25 4.5335 10.4665 3.75 9.5 3.75H5.5ZM5.25 5.5C5.25 5.36193 5.36193 5.25 5.5 5.25H9.5C9.63807 5.25 9.75 5.36193 9.75 5.5V18C9.75 18.1381 9.63807 18.25 9.5 18.25H5.5C5.36193 18.25 5.25 18.1381 5.25 18V5.5ZM14.5 3.75C13.5335 3.75 12.75 4.5335 12.75 5.5V12.5C12.75 13.4665 13.5335 14.25 14.5 14.25H18.5C19.4665 14.25 20.25 13.4665 20.25 12.5V5.5C20.25 4.5335 19.4665 3.75 18.5 3.75H14.5ZM14.25 5.5C14.25 5.36193 14.3619 5.25 14.5 5.25H18.5C18.6381 5.25 18.75 5.36193 18.75 5.5V12.5C18.75 12.6381 18.6381 12.75 18.5 12.75H14.5C14.3619 12.75 14.25 12.6381 14.25 12.5V5.5Z"
+  />
+</svg>`;
+export const DatabaseTableViewIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill="currentColor"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M3.25 6C3.25 4.48122 4.48122 3.25 6 3.25H18C19.5188 3.25 20.75 4.48122 20.75 6V18C20.75 19.5188 19.5188 20.75 18 20.75H6C4.48122 20.75 3.25 19.5188 3.25 18V6ZM6 4.75C5.30964 4.75 4.75 5.30964 4.75 6V8.25H19.25V6C19.25 5.30964 18.6904 4.75 18 4.75H6ZM4.75 18V9.75H7.75V19.25H6C5.30964 19.25 4.75 18.6904 4.75 18ZM9.25 19.25H18C18.6904 19.25 19.25 18.6904 19.25 18V9.75H9.25V19.25Z"
+  />
+</svg>`;
+
+export const ConvertIcon = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8.19232 4.25C7.7781 4.25 7.44232 4.58579 7.44232 5C7.44232 5.41421 7.7781 5.75 8.19232 5.75H16.7308C17.4211 5.75 17.9808 6.30965 17.9808 7V14.7278L16.3765 13.1235C16.0836 12.8306 15.6087 12.8306 15.3158 13.1235C15.0229 13.4164 15.0229 13.8913 15.3158 14.1842L18.2005 17.0688C18.3411 17.2094 18.5319 17.2885 18.7308 17.2885C18.9297 17.2885 19.1205 17.2094 19.2611 17.0688L22.1457 14.1842C22.4386 13.8913 22.4386 13.4164 22.1457 13.1235C21.8528 12.8306 21.378 12.8306 21.0851 13.1235L19.4808 14.7278V7C19.4808 5.48122 18.2496 4.25 16.7308 4.25H8.19232ZM15.4231 19.75C15.8373 19.75 16.1731 19.4142 16.1731 19C16.1731 18.5858 15.8373 18.25 15.4231 18.25H6.88462C6.19426 18.25 5.63461 17.6904 5.63461 17V9.2722L7.2389 10.8765C7.53179 11.1694 8.00667 11.1694 8.29956 10.8765C8.59245 10.5836 8.59245 10.1087 8.29956 9.81582L5.41494 6.93121C5.27429 6.79056 5.08353 6.71154 4.88461 6.71154C4.6857 6.71154 4.49494 6.79056 4.35429 6.93121L1.46967 9.81582C1.17678 10.1087 1.17678 10.5836 1.46967 10.8765C1.76256 11.1694 2.23744 11.1694 2.53033 10.8765L4.13461 9.2722V17C4.13461 18.5188 5.36583 19.75 6.88462 19.75H15.4231Z"
+    fill="currentColor"
+  />
+</svg> `;
+
+export const FilterIcon = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M3.75 12C3.75 7.44365 7.44365 3.75 12 3.75C16.5563 3.75 20.25 7.44365 20.25 12C20.25 16.5563 16.5563 20.25 12 20.25C7.44365 20.25 3.75 16.5563 3.75 12ZM12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25ZM8 8.75C7.58579 8.75 7.25 9.08579 7.25 9.5C7.25 9.91421 7.58579 10.25 8 10.25H16C16.4142 10.25 16.75 9.91421 16.75 9.5C16.75 9.08579 16.4142 8.75 16 8.75H8ZM8.25 12.5C8.25 12.0858 8.58579 11.75 9 11.75H15C15.4142 11.75 15.75 12.0858 15.75 12.5C15.75 12.9142 15.4142 13.25 15 13.25H9C8.58579 13.25 8.25 12.9142 8.25 12.5ZM11 14.75C10.5858 14.75 10.25 15.0858 10.25 15.5C10.25 15.9142 10.5858 16.25 11 16.25H13C13.4142 16.25 13.75 15.9142 13.75 15.5C13.75 15.0858 13.4142 14.75 13 14.75H11Z"
+    fill="currentColor"
+  />
+</svg> `;
+
+export const GroupingIcon = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2.75 6C2.75 4.48122 3.98122 3.25 5.5 3.25H9H15H18.5C20.0188 3.25 21.25 4.48122 21.25 6V18C21.25 19.5188 20.0188 20.75 18.5 20.75H5.5C3.98122 20.75 2.75 19.5188 2.75 18V6ZM14.25 4.75H9.75V19.25H14.25V4.75ZM15.75 19.25V4.75H18.5C19.1904 4.75 19.75 5.30964 19.75 6V18C19.75 18.6904 19.1904 19.25 18.5 19.25H15.75ZM5.5 4.75H8.25V19.25H5.5C4.80964 19.25 4.25 18.6904 4.25 18V6C4.25 5.30964 4.80964 4.75 5.5 4.75Z"
+    fill="currentColor"
+  />
+</svg> `;
+
+export const InfoIcon = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M20.75 6C20.75 6.41421 20.4142 6.75 20 6.75L10.6465 6.75C10.32 7.90425 9.25878 8.75 8 8.75C6.74122 8.75 5.67998 7.90425 5.35352 6.75L4 6.75C3.58579 6.75 3.25 6.41421 3.25 6C3.25 5.58579 3.58579 5.25 4 5.25L5.35352 5.25C5.67998 4.09575 6.74122 3.25 8 3.25C9.25878 3.25 10.32 4.09575 10.6465 5.25L20 5.25C20.4142 5.25 20.75 5.58579 20.75 6ZM20.75 12C20.75 12.4142 20.4142 12.75 20 12.75L18.6465 12.75C18.32 13.9043 17.2588 14.75 16 14.75C14.7412 14.75 13.68 13.9043 13.3535 12.75L4 12.75C3.58579 12.75 3.25 12.4142 3.25 12C3.25 11.5858 3.58579 11.25 4 11.25L13.3535 11.25C13.68 10.0957 14.7412 9.25 16 9.25C17.2588 9.25 18.32 10.0957 18.6465 11.25L20 11.25C20.4142 11.25 20.75 11.5858 20.75 12ZM20.75 18C20.75 18.4142 20.4142 18.75 20 18.75L10.6465 18.75C10.32 19.9043 9.25878 20.75 8 20.75C6.74122 20.75 5.67998 19.9043 5.35352 18.75L4 18.75C3.58579 18.75 3.25 18.4142 3.25 18C3.25 17.5858 3.58579 17.25 4 17.25L5.35352 17.25C5.67998 16.0957 6.74122 15.25 8 15.25C9.25878 15.25 10.32 16.0957 10.6465 17.25L20 17.25C20.4142 17.25 20.75 17.5858 20.75 18ZM17.25 12C17.25 11.3096 16.6904 10.75 16 10.75C15.3096 10.75 14.75 11.3096 14.75 12C14.75 12.6904 15.3096 13.25 16 13.25C16.6904 13.25 17.25 12.6904 17.25 12ZM9.25 6C9.25 5.30964 8.69036 4.75 8 4.75C7.30964 4.75 6.75 5.30964 6.75 6C6.75 6.69036 7.30964 7.25 8 7.25C8.69036 7.25 9.25 6.69036 9.25 6ZM9.25 18C9.25 17.3096 8.69036 16.75 8 16.75C7.30964 16.75 6.75 17.3096 6.75 18C6.75 18.6904 7.30964 19.25 8 19.25C8.69036 19.25 9.25 18.6904 9.25 18Z"
+    fill="currentColor"
+  />
+</svg> `;
+
+export const DoneIcon = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M19.5303 6.46967C19.8232 6.76256 19.8232 7.23744 19.5303 7.53033L9.53033 17.5303C9.23744 17.8232 8.76256 17.8232 8.46967 17.5303L4.46967 13.5303C4.17678 13.2374 4.17678 12.7626 4.46967 12.4697C4.76256 12.1768 5.23744 12.1768 5.53033 12.4697L9 15.9393L18.4697 6.46967C18.7626 6.17678 19.2374 6.17678 19.5303 6.46967Z"
+    fill="currentColor"
+  />
+</svg> `;
diff --git a/packages/blocks/src/database-block/data-view/common/index.ts b/packages/blocks/src/database-block/data-view/common/index.ts
new file mode 100644
index 000000000000..975d6e2b936e
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/common/index.ts
@@ -0,0 +1 @@
+export * from './view-source.js';
diff --git a/packages/blocks/src/database-block/common/literal/define.ts b/packages/blocks/src/database-block/data-view/common/literal/define.ts
similarity index 96%
rename from packages/blocks/src/database-block/common/literal/define.ts
rename to packages/blocks/src/database-block/data-view/common/literal/define.ts
index 43004ced6862..b3bc99e4c39d 100644
--- a/packages/blocks/src/database-block/common/literal/define.ts
+++ b/packages/blocks/src/database-block/data-view/common/literal/define.ts
@@ -1,11 +1,6 @@
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import {
-  createPopup,
-  popMenu,
-} from '../../../_common/components/menu/index.js';
-import { createUniComponentFromWebComponent } from '../../../_common/components/uni-component/uni-component.js';
 import {
   tBoolean,
   tDate,
@@ -14,6 +9,8 @@ import {
   tTag,
 } from '../../logical/data-type.js';
 import { isTArray, tArray } from '../../logical/typesystem.js';
+import { createPopup, popMenu } from '../../utils/menu/index.js';
+import { createUniComponentFromWebComponent } from '../../utils/uni-component/uni-component.js';
 import { literalMatcher } from './matcher.js';
 import { DateLiteral } from './renderer/date-literal.js';
 import {
diff --git a/packages/blocks/src/database-block/common/literal/matcher.ts b/packages/blocks/src/database-block/data-view/common/literal/matcher.ts
similarity index 85%
rename from packages/blocks/src/database-block/common/literal/matcher.ts
rename to packages/blocks/src/database-block/data-view/common/literal/matcher.ts
index f4844f0278da..ee300e7d3c50 100644
--- a/packages/blocks/src/database-block/common/literal/matcher.ts
+++ b/packages/blocks/src/database-block/data-view/common/literal/matcher.ts
@@ -1,9 +1,11 @@
 import { type ReferenceElement } from '@floating-ui/dom';
 
-import type { UniComponent } from '../../../_common/components/uni-component/uni-component.js';
-import { renderUniLit } from '../../../_common/components/uni-component/uni-component.js';
 import { Matcher } from '../../logical/matcher.js';
 import type { TType } from '../../logical/typesystem.js';
+import {
+  renderUniLit,
+  type UniComponent,
+} from '../../utils/uni-component/uni-component.js';
 
 export const renderLiteral = (
   type: TType,
diff --git a/packages/blocks/src/database-block/common/literal/renderer/array-literal.ts b/packages/blocks/src/database-block/data-view/common/literal/renderer/array-literal.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/literal/renderer/array-literal.ts
rename to packages/blocks/src/database-block/data-view/common/literal/renderer/array-literal.ts
diff --git a/packages/blocks/src/database-block/common/literal/renderer/date-literal.ts b/packages/blocks/src/database-block/data-view/common/literal/renderer/date-literal.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/literal/renderer/date-literal.ts
rename to packages/blocks/src/database-block/data-view/common/literal/renderer/date-literal.ts
diff --git a/packages/blocks/src/database-block/common/literal/renderer/literal-element.ts b/packages/blocks/src/database-block/data-view/common/literal/renderer/literal-element.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/literal/renderer/literal-element.ts
rename to packages/blocks/src/database-block/data-view/common/literal/renderer/literal-element.ts
diff --git a/packages/blocks/src/database-block/common/literal/renderer/tag-literal.ts b/packages/blocks/src/database-block/data-view/common/literal/renderer/tag-literal.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/literal/renderer/tag-literal.ts
rename to packages/blocks/src/database-block/data-view/common/literal/renderer/tag-literal.ts
diff --git a/packages/blocks/src/database-block/common/literal/renderer/union-string.ts b/packages/blocks/src/database-block/data-view/common/literal/renderer/union-string.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/literal/renderer/union-string.ts
rename to packages/blocks/src/database-block/data-view/common/literal/renderer/union-string.ts
diff --git a/packages/blocks/src/database-block/common/popup.ts b/packages/blocks/src/database-block/data-view/common/popup.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/popup.ts
rename to packages/blocks/src/database-block/data-view/common/popup.ts
diff --git a/packages/blocks/src/database-block/common/properties.ts b/packages/blocks/src/database-block/data-view/common/properties.ts
similarity index 98%
rename from packages/blocks/src/database-block/common/properties.ts
rename to packages/blocks/src/database-block/data-view/common/properties.ts
index f9c651788705..57a15b88e438 100644
--- a/packages/blocks/src/database-block/common/properties.ts
+++ b/packages/blocks/src/database-block/data-view/common/properties.ts
@@ -6,8 +6,8 @@ import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import Sortable from 'sortablejs';
 
-import { createPopup } from '../../_common/components/menu/index.js';
-import { ArrowLeftBigIcon } from '../../_common/icons/index.js';
+import { ArrowLeftBigIcon } from '../../../_common/icons/index.js';
+import { createPopup } from '../utils/menu/index.js';
 import type {
   DataViewColumnManager,
   DataViewManager,
diff --git a/packages/blocks/src/database-block/common/ref/ref.ts b/packages/blocks/src/database-block/data-view/common/ref/ref.ts
similarity index 94%
rename from packages/blocks/src/database-block/common/ref/ref.ts
rename to packages/blocks/src/database-block/data-view/common/ref/ref.ts
index a46036c45109..525bb61141b4 100644
--- a/packages/blocks/src/database-block/common/ref/ref.ts
+++ b/packages/blocks/src/database-block/data-view/common/ref/ref.ts
@@ -3,12 +3,12 @@ import type { ReferenceElement } from '@floating-ui/dom';
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
+import { AddCursorIcon } from '../../../../_common/icons/index.js';
 import {
   eventToVRect,
   popFilterableSimpleMenu,
-} from '../../../_common/components/menu/menu.js';
-import { renderUniLit } from '../../../_common/components/uni-component/uni-component.js';
-import { AddCursorIcon } from '../../../_common/icons/index.js';
+} from '../../utils/menu/index.js';
+import { renderUniLit } from '../../utils/uni-component/uni-component.js';
 import type { Filter, Variable, VariableOrProperty } from '../ast.js';
 import { firstFilterByRef, firstFilterInGroup } from '../ast.js';
 
diff --git a/packages/blocks/src/database-block/common/selection.ts b/packages/blocks/src/database-block/data-view/common/selection.ts
similarity index 96%
rename from packages/blocks/src/database-block/common/selection.ts
rename to packages/blocks/src/database-block/data-view/common/selection.ts
index 43b4608f68cb..6538fb2cb271 100644
--- a/packages/blocks/src/database-block/common/selection.ts
+++ b/packages/blocks/src/database-block/data-view/common/selection.ts
@@ -1,10 +1,7 @@
 import { BaseSelection } from '@blocksuite/block-std';
 import { z } from 'zod';
 
-import type {
-  DataViewSelection,
-  GetDataViewSelection,
-} from '../../_common/utils/index.js';
+import type { DataViewSelection, GetDataViewSelection } from '../types.js';
 
 const TableViewSelectionSchema = z.object({
   viewId: z.string(),
diff --git a/packages/blocks/src/database-block/common/types.ts b/packages/blocks/src/database-block/data-view/common/types.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/types.ts
rename to packages/blocks/src/database-block/data-view/common/types.ts
diff --git a/packages/blocks/src/database-block/data-view/common/view-manager.ts b/packages/blocks/src/database-block/data-view/common/view-manager.ts
new file mode 100644
index 000000000000..5407bbec2f68
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/common/view-manager.ts
@@ -0,0 +1,18 @@
+import type { ColumnMeta } from '../column/column-config.js';
+import { groupByMatcher } from './group-by/matcher.js';
+import type { GroupBy } from './types.js';
+
+export const defaultGroupBy = (
+  columnMeta: ColumnMeta,
+  columnId: string,
+  data: NonNullable<unknown>
+): GroupBy | undefined => {
+  const name = groupByMatcher.match(columnMeta.model.dataType(data))?.name;
+  return name != null
+    ? {
+        type: 'groupBy',
+        columnId: columnId,
+        name: name,
+      }
+    : undefined;
+};
diff --git a/packages/blocks/src/database-block/common/view-source.ts b/packages/blocks/src/database-block/data-view/common/view-source.ts
similarity index 100%
rename from packages/blocks/src/database-block/common/view-source.ts
rename to packages/blocks/src/database-block/data-view/common/view-source.ts
diff --git a/packages/blocks/src/database-block/data-view/components.ts b/packages/blocks/src/database-block/data-view/components.ts
new file mode 100644
index 000000000000..a781d3588234
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/components.ts
@@ -0,0 +1 @@
+import './data-view.js';
diff --git a/packages/blocks/src/database-block/data-view.ts b/packages/blocks/src/database-block/data-view/data-view.ts
similarity index 81%
rename from packages/blocks/src/database-block/data-view.ts
rename to packages/blocks/src/database-block/data-view/data-view.ts
index 97c653535ba4..dddca6701d56 100644
--- a/packages/blocks/src/database-block/data-view.ts
+++ b/packages/blocks/src/database-block/data-view/data-view.ts
@@ -1,7 +1,12 @@
-import './table/define.js';
-import './table/renderer.js';
-import './kanban/define.js';
-import './kanban/renderer.js';
+import './common/group-by/define.js';
+import './common/header/views.js';
+import './common/header/title.js';
+import './common/header/tools/tools.js';
+import './common/filter/filter-bar.js';
+import './views/table/define';
+import './views/table/renderer';
+import './views/kanban/define';
+import './views/kanban/renderer';
 
 import type { BlockStdScope } from '@blocksuite/block-std';
 import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
@@ -11,14 +16,9 @@ import { css, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { keyed } from 'lit/directives/keyed.js';
-import { createRef } from 'lit/directives/ref.js';
+import { createRef, ref } from 'lit/directives/ref.js';
 import { html } from 'lit/static-html.js';
 
-import { renderUniLit } from '../_common/components/uni-component/uni-component.js';
-import type {
-  DataViewSelection,
-  DataViewSelectionState,
-} from '../_common/utils/index.js';
 import type { BaseDataView } from './common/base-data-view.js';
 import { dataViewCommonStyle } from './common/css-variable.js';
 import type {
@@ -31,8 +31,10 @@ import type { DataViewManager } from './common/data-view-manager.js';
 import type { DataSource } from './common/datasource/base.js';
 import { popSideDetail } from './common/detail/layout.js';
 import type { SingleViewSource, ViewSource } from './common/view-source.js';
-import { DataViewKanbanManager } from './kanban/kanban-view-manager.js';
-import { DataViewTableManager } from './table/table-view-manager.js';
+import type { DataViewSelection, DataViewSelectionState } from './types.js';
+import { renderUniLit } from './utils/uni-component/uni-component.js';
+import { DataViewKanbanManager } from './views/kanban/kanban-view-manager.js';
+import { DataViewTableManager } from './views/table/table-view-manager.js';
 
 type ViewProps = {
   view: DataViewManager;
@@ -54,7 +56,7 @@ const ViewManagerMap: Record<
   kanban: DataViewKanbanManager,
 };
 
-export type DataViewNativeConfig = {
+export type DataViewRendererConfig = {
   bindHotkey: DataViewProps['bindHotkey'];
   handleEvent: DataViewProps['handleEvent'];
   getFlag?: DataViewProps['getFlag'];
@@ -70,17 +72,17 @@ export type DataViewNativeConfig = {
   std: BlockStdScope;
 };
 
-@customElement('affine-data-view-native')
-export class DataViewNative extends WithDisposable(ShadowlessElement) {
+@customElement('affine-data-view-renderer')
+export class DataViewRenderer extends WithDisposable(ShadowlessElement) {
   static override styles = css`
-    ${unsafeCSS(dataViewCommonStyle('affine-data-view-native'))}
-    affine-data-view-native {
+    ${unsafeCSS(dataViewCommonStyle('affine-data-view-renderer'))}
+    affine-data-view-renderer {
       background-color: var(--affine-background-primary-color);
       display: contents;
     }
   `;
   @property({ attribute: false })
-  config!: DataViewNativeConfig;
+  config!: DataViewRendererConfig;
 
   public get expose() {
     return this._view.value;
@@ -218,6 +220,21 @@ export class DataViewNative extends WithDisposable(ShadowlessElement) {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'affine-data-view-native': DataViewNative;
+    'affine-data-view-renderer': DataViewRenderer;
+  }
+}
+
+export class DataView {
+  private _ref = createRef<DataViewRenderer>();
+
+  public get expose() {
+    return this._ref.value?.expose;
+  }
+
+  render(props: DataViewRendererConfig) {
+    return html` <affine-data-view-renderer
+      ${ref(this._ref)}
+      .config="${props}"
+    ></affine-data-view-renderer>`;
   }
 }
diff --git a/packages/blocks/src/database-block/data-view/index.ts b/packages/blocks/src/database-block/data-view/index.ts
new file mode 100644
index 000000000000..202699055fbe
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/index.ts
@@ -0,0 +1,18 @@
+export type { ColumnMeta } from './column/column-config.js';
+export { ColumnConfig } from './column/index.js';
+export { columnPresets } from './column/presets/index.js';
+export type { DetailSlots } from './common/datasource/base.js';
+export {
+  BaseDataSource,
+  type DatabaseBlockDataSourceConfig,
+} from './common/datasource/base.js';
+export type { ViewSource } from './common/index.js';
+export { DatabaseSelection } from './common/selection.js';
+export { DataView } from './data-view.js';
+export type { InsertToPosition } from './types.js';
+export type { DataViewSelection } from './types.js';
+export { popMenu } from './utils/index.js';
+export { insertPositionToIndex } from './utils/insert.js';
+export { createUniComponentFromWebComponent } from './utils/uni-component/index.js';
+export { defineUniComponent } from './utils/uni-component/index.js';
+export type { StatCalcOpType } from './views/table/types.js';
diff --git a/packages/blocks/src/database-block/logical/data-type.ts b/packages/blocks/src/database-block/data-view/logical/data-type.ts
similarity index 92%
rename from packages/blocks/src/database-block/logical/data-type.ts
rename to packages/blocks/src/database-block/data-view/logical/data-type.ts
index 2ea6921c6869..2aaf1428488f 100644
--- a/packages/blocks/src/database-block/logical/data-type.ts
+++ b/packages/blocks/src/database-block/data-view/logical/data-type.ts
@@ -1,4 +1,4 @@
-import type { SelectTag } from '../../_common/components/tags/multi-tag-select.js';
+import type { SelectTag } from '../utils/tags/multi-tag-select.js';
 import { typesystem } from './typesystem.js';
 
 export const tNumber = typesystem.defineData<{ value: number }>({
diff --git a/packages/blocks/src/database-block/logical/eval-filter.ts b/packages/blocks/src/database-block/data-view/logical/eval-filter.ts
similarity index 100%
rename from packages/blocks/src/database-block/logical/eval-filter.ts
rename to packages/blocks/src/database-block/data-view/logical/eval-filter.ts
diff --git a/packages/blocks/src/database-block/logical/matcher.ts b/packages/blocks/src/database-block/data-view/logical/matcher.ts
similarity index 100%
rename from packages/blocks/src/database-block/logical/matcher.ts
rename to packages/blocks/src/database-block/data-view/logical/matcher.ts
diff --git a/packages/blocks/src/database-block/logical/property-matcher.ts b/packages/blocks/src/database-block/data-view/logical/property-matcher.ts
similarity index 100%
rename from packages/blocks/src/database-block/logical/property-matcher.ts
rename to packages/blocks/src/database-block/data-view/logical/property-matcher.ts
diff --git a/packages/blocks/src/database-block/logical/typesystem.ts b/packages/blocks/src/database-block/data-view/logical/typesystem.ts
similarity index 100%
rename from packages/blocks/src/database-block/logical/typesystem.ts
rename to packages/blocks/src/database-block/data-view/logical/typesystem.ts
diff --git a/packages/blocks/src/database-block/data-view/types.ts b/packages/blocks/src/database-block/data-view/types.ts
new file mode 100644
index 000000000000..88b360f84f47
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/types.ts
@@ -0,0 +1,25 @@
+import type { KanbanViewSelectionWithType } from './views/kanban/types.js';
+import type { TableViewSelection } from './views/table/types.js';
+
+export type DataViewSelection =
+  | TableViewSelection
+  | KanbanViewSelectionWithType;
+export type GetDataViewSelection<
+  K extends DataViewSelection['type'],
+  T = DataViewSelection,
+> = T extends {
+  type: K;
+}
+  ? T
+  : never;
+export type DataViewSelectionState = DataViewSelection | undefined;
+export type InsertToPosition =
+  | 'end'
+  | 'start'
+  | {
+      id: string;
+      before: boolean;
+    };
+export type ColumnDataUpdater<
+  Data extends Record<string, unknown> = Record<string, unknown>,
+> = (data: Data) => Partial<Data>;
diff --git a/packages/blocks/src/database-block/utils/drag.ts b/packages/blocks/src/database-block/data-view/utils/drag.ts
similarity index 100%
rename from packages/blocks/src/database-block/utils/drag.ts
rename to packages/blocks/src/database-block/data-view/utils/drag.ts
diff --git a/packages/blocks/src/database-block/data-view/utils/event.ts b/packages/blocks/src/database-block/data-view/utils/event.ts
new file mode 100644
index 000000000000..ab7001f33733
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/utils/event.ts
@@ -0,0 +1,3 @@
+export function stopPropagation(event: Event) {
+  event.stopPropagation();
+}
diff --git a/packages/blocks/src/database-block/utils/frame-loop.ts b/packages/blocks/src/database-block/data-view/utils/frame-loop.ts
similarity index 100%
rename from packages/blocks/src/database-block/utils/frame-loop.ts
rename to packages/blocks/src/database-block/data-view/utils/frame-loop.ts
diff --git a/packages/blocks/src/database-block/data-view/utils/index.ts b/packages/blocks/src/database-block/data-view/utils/index.ts
new file mode 100644
index 000000000000..f15384a062f1
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/utils/index.ts
@@ -0,0 +1 @@
+export * from './menu/index.js';
diff --git a/packages/blocks/src/database-block/utils/insert.ts b/packages/blocks/src/database-block/data-view/utils/insert.ts
similarity index 100%
rename from packages/blocks/src/database-block/utils/insert.ts
rename to packages/blocks/src/database-block/data-view/utils/insert.ts
diff --git a/packages/blocks/src/_common/components/menu/index.ts b/packages/blocks/src/database-block/data-view/utils/menu/index.ts
similarity index 100%
rename from packages/blocks/src/_common/components/menu/index.ts
rename to packages/blocks/src/database-block/data-view/utils/menu/index.ts
diff --git a/packages/blocks/src/_common/components/menu/menu.ts b/packages/blocks/src/database-block/data-view/utils/menu/menu.ts
similarity index 98%
rename from packages/blocks/src/_common/components/menu/menu.ts
rename to packages/blocks/src/database-block/data-view/utils/menu/menu.ts
index bdf67e35f749..3dd7ccf4ad77 100644
--- a/packages/blocks/src/_common/components/menu/menu.ts
+++ b/packages/blocks/src/database-block/data-view/utils/menu/menu.ts
@@ -21,12 +21,13 @@ import { createRef, ref } from 'lit/directives/ref.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { ArrowRightSmallIcon, DoneIcon } from '../../../_common/icons/index.js';
-import { rangeWrap } from '../../../_common/utils/math.js';
+import { ArrowRightSmallIcon } from '../../../../_common/icons/index.js';
+import { rangeWrap } from '../../../../_common/utils/math.js';
 import {
   checkboxChecked,
   checkboxUnchecked,
-} from '../../../list-block/utils/icons.js';
+} from '../../../../list-block/utils/icons.js';
+import { DoneIcon } from '../../common/icons/index.js';
 
 type MenuCommon = {
   hide?: () => boolean;
diff --git a/packages/blocks/src/_common/components/menu/title.ts b/packages/blocks/src/database-block/data-view/utils/menu/title.ts
similarity index 93%
rename from packages/blocks/src/_common/components/menu/title.ts
rename to packages/blocks/src/database-block/data-view/utils/menu/title.ts
index e90394c27513..32a0c6f9b438 100644
--- a/packages/blocks/src/_common/components/menu/title.ts
+++ b/packages/blocks/src/database-block/data-view/utils/menu/title.ts
@@ -1,7 +1,7 @@
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { ArrowLeftBigIcon } from '../../../_common/icons/index.js';
+import { ArrowLeftBigIcon } from '../../common/icons/index.js';
 import type { Menu } from './menu.js';
 
 export const menuTitleItem = (
diff --git a/packages/blocks/src/_common/components/tags/colors.ts b/packages/blocks/src/database-block/data-view/utils/tags/colors.ts
similarity index 100%
rename from packages/blocks/src/_common/components/tags/colors.ts
rename to packages/blocks/src/database-block/data-view/utils/tags/colors.ts
diff --git a/packages/blocks/src/_common/components/tags/multi-tag-select.ts b/packages/blocks/src/database-block/data-view/utils/tags/multi-tag-select.ts
similarity index 98%
rename from packages/blocks/src/_common/components/tags/multi-tag-select.ts
rename to packages/blocks/src/database-block/data-view/utils/tags/multi-tag-select.ts
index 4da6205adef8..979fa87f3db6 100644
--- a/packages/blocks/src/_common/components/tags/multi-tag-select.ts
+++ b/packages/blocks/src/database-block/data-view/utils/tags/multi-tag-select.ts
@@ -8,14 +8,14 @@ import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
 
+import { rangeWrap } from '../../../../_common/utils/math.js';
 import {
   DatabaseSearchClose,
   DeleteIcon,
   MoreHorizontalIcon,
   PlusIcon,
-} from '../../../_common/icons/index.js';
-import { rangeWrap } from '../../../_common/utils/math.js';
-import { stopPropagation } from '../../utils/event.js';
+} from '../../common/icons/index.js';
+import { stopPropagation } from '../event.js';
 import { createPopup, popMenu } from '../menu/menu.js';
 import { getTagColor, selectOptionColors } from './colors.js';
 import { styles } from './styles.js';
diff --git a/packages/blocks/src/_common/components/tags/multi-tag-view.ts b/packages/blocks/src/database-block/data-view/utils/tags/multi-tag-view.ts
similarity index 100%
rename from packages/blocks/src/_common/components/tags/multi-tag-view.ts
rename to packages/blocks/src/database-block/data-view/utils/tags/multi-tag-view.ts
diff --git a/packages/blocks/src/_common/components/tags/styles.ts b/packages/blocks/src/database-block/data-view/utils/tags/styles.ts
similarity index 100%
rename from packages/blocks/src/_common/components/tags/styles.ts
rename to packages/blocks/src/database-block/data-view/utils/tags/styles.ts
diff --git a/packages/blocks/src/database-block/data-view/utils/uni-component/index.ts b/packages/blocks/src/database-block/data-view/utils/uni-component/index.ts
new file mode 100644
index 000000000000..a74a554b3b63
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/utils/uni-component/index.ts
@@ -0,0 +1 @@
+export * from './uni-component.js';
diff --git a/packages/blocks/src/_common/components/uni-component/operation.ts b/packages/blocks/src/database-block/data-view/utils/uni-component/operation.ts
similarity index 100%
rename from packages/blocks/src/_common/components/uni-component/operation.ts
rename to packages/blocks/src/database-block/data-view/utils/uni-component/operation.ts
diff --git a/packages/blocks/src/_common/components/uni-component/render-template.ts b/packages/blocks/src/database-block/data-view/utils/uni-component/render-template.ts
similarity index 100%
rename from packages/blocks/src/_common/components/uni-component/render-template.ts
rename to packages/blocks/src/database-block/data-view/utils/uni-component/render-template.ts
diff --git a/packages/blocks/src/_common/components/uni-component/uni-component.ts b/packages/blocks/src/database-block/data-view/utils/uni-component/uni-component.ts
similarity index 100%
rename from packages/blocks/src/_common/components/uni-component/uni-component.ts
rename to packages/blocks/src/database-block/data-view/utils/uni-component/uni-component.ts
diff --git a/packages/blocks/src/database-block/data-view/utils/uni-icon.ts b/packages/blocks/src/database-block/data-view/utils/uni-icon.ts
new file mode 100644
index 000000000000..dfd28ae93224
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/utils/uni-icon.ts
@@ -0,0 +1,11 @@
+import { AffineLitIcon } from '../common/icons/icon.js';
+import type * as icons from '../common/icons/index.js';
+import { map } from './uni-component/operation.js';
+import { createUniComponentFromWebComponent } from './uni-component/uni-component.js';
+
+const litIcon = createUniComponentFromWebComponent<{ name: string }>(
+  AffineLitIcon
+);
+export const createIcon = (name: keyof typeof icons) => {
+  return map(litIcon, () => ({ name }));
+};
diff --git a/packages/blocks/src/database-block/utils/utils.ts b/packages/blocks/src/database-block/data-view/utils/utils.ts
similarity index 100%
rename from packages/blocks/src/database-block/utils/utils.ts
rename to packages/blocks/src/database-block/data-view/utils/utils.ts
diff --git a/packages/blocks/src/database-block/kanban/card.ts b/packages/blocks/src/database-block/data-view/views/kanban/card.ts
similarity index 96%
rename from packages/blocks/src/database-block/kanban/card.ts
rename to packages/blocks/src/database-block/data-view/views/kanban/card.ts
index 121386570ef7..c422cf9444fd 100644
--- a/packages/blocks/src/database-block/kanban/card.ts
+++ b/packages/blocks/src/database-block/data-view/views/kanban/card.ts
@@ -7,9 +7,10 @@ import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
 
-import { positionToVRect } from '../../_common/components/menu/index.js';
-import { MoreHorizontalIcon, NewEditIcon } from '../../_common/icons/index.js';
-import type { DataViewNative } from '../data-view.js';
+import { NewEditIcon } from '../../../../_common/icons/index.js';
+import { MoreHorizontalIcon } from '../../common/icons/index.js';
+import type { DataViewRenderer } from '../../data-view.js';
+import { positionToVRect } from '../../utils/menu/index.js';
 import type {
   DataViewKanbanColumnManager,
   DataViewKanbanManager,
@@ -122,7 +123,7 @@ export class KanbanCard extends WithDisposable(ShadowlessElement) {
   static override styles = styles;
 
   @property({ attribute: false })
-  dataViewEle!: DataViewNative;
+  dataViewEle!: DataViewRenderer;
   @property({ attribute: false })
   view!: DataViewKanbanManager;
   @property({ attribute: false })
diff --git a/packages/blocks/src/database-block/kanban/cell.ts b/packages/blocks/src/database-block/data-view/views/kanban/cell.ts
similarity index 96%
rename from packages/blocks/src/database-block/kanban/cell.ts
rename to packages/blocks/src/database-block/data-view/views/kanban/cell.ts
index 65db6e31378c..54a478029cfe 100644
--- a/packages/blocks/src/database-block/kanban/cell.ts
+++ b/packages/blocks/src/database-block/data-view/views/kanban/cell.ts
@@ -6,11 +6,11 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { createRef } from 'lit/directives/ref.js';
 import { html } from 'lit/static-html.js';
 
-import { renderUniLit } from '../../_common/components/uni-component/uni-component.js';
 import type {
   CellRenderProps,
   DataViewCellLifeCycle,
-} from '../common/columns/manager.js';
+} from '../../column/index.js';
+import { renderUniLit } from '../../utils/uni-component/uni-component.js';
 import type {
   DataViewKanbanColumnManager,
   DataViewKanbanManager,
diff --git a/packages/blocks/src/database-block/kanban/controller/clipboard.ts b/packages/blocks/src/database-block/data-view/views/kanban/controller/clipboard.ts
similarity index 93%
rename from packages/blocks/src/database-block/kanban/controller/clipboard.ts
rename to packages/blocks/src/database-block/data-view/views/kanban/controller/clipboard.ts
index fa5ab73e46b3..b8784ae09c1a 100644
--- a/packages/blocks/src/database-block/kanban/controller/clipboard.ts
+++ b/packages/blocks/src/database-block/data-view/views/kanban/controller/clipboard.ts
@@ -1,8 +1,8 @@
 import type { UIEventStateContext } from '@blocksuite/block-std';
 import type { ReactiveController } from 'lit';
 
-import type { KanbanViewSelectionWithType } from '../../../_common/utils/index.js';
 import type { DataViewKanban } from '../kanban-view.js';
+import type { KanbanViewSelectionWithType } from '../types.js';
 
 export class KanbanClipboardController implements ReactiveController {
   constructor(public host: DataViewKanban) {
diff --git a/packages/blocks/src/database-block/kanban/controller/drag.ts b/packages/blocks/src/database-block/data-view/views/kanban/controller/drag.ts
similarity index 96%
rename from packages/blocks/src/database-block/kanban/controller/drag.ts
rename to packages/blocks/src/database-block/data-view/views/kanban/controller/drag.ts
index 4c499f9cbeb7..293d32faabab 100644
--- a/packages/blocks/src/database-block/kanban/controller/drag.ts
+++ b/packages/blocks/src/database-block/data-view/views/kanban/controller/drag.ts
@@ -1,12 +1,10 @@
-// related component
-
 import { assertExists } from '@blocksuite/global/utils';
 import type { ReactiveController } from 'lit';
 
-import { Point, Rect } from '../../../_common/utils/index.js';
-import type { InsertToPosition } from '../../types.js';
-import { startDrag } from '../../utils/drag.js';
-import { autoScrollOnBoundary } from '../../utils/frame-loop.js';
+import { Point, Rect } from '../../../../../_common/utils/index.js';
+import type { InsertToPosition } from '../../../types.js';
+import { startDrag } from '../../../utils/drag.js';
+import { autoScrollOnBoundary } from '../../../utils/frame-loop.js';
 import { KanbanCard } from '../card.js';
 import { KanbanGroup } from '../group.js';
 import type { DataViewKanban } from '../kanban-view.js';
diff --git a/packages/blocks/src/database-block/kanban/controller/hotkeys.ts b/packages/blocks/src/database-block/data-view/views/kanban/controller/hotkeys.ts
similarity index 100%
rename from packages/blocks/src/database-block/kanban/controller/hotkeys.ts
rename to packages/blocks/src/database-block/data-view/views/kanban/controller/hotkeys.ts
diff --git a/packages/blocks/src/database-block/kanban/controller/selection.ts b/packages/blocks/src/database-block/data-view/views/kanban/controller/selection.ts
similarity index 99%
rename from packages/blocks/src/database-block/kanban/controller/selection.ts
rename to packages/blocks/src/database-block/data-view/views/kanban/controller/selection.ts
index 4cca5f6d9b19..51236cd4b47d 100644
--- a/packages/blocks/src/database-block/kanban/controller/selection.ts
+++ b/packages/blocks/src/database-block/data-view/views/kanban/controller/selection.ts
@@ -1,6 +1,10 @@
 import { assertExists } from '@blocksuite/global/utils';
 import type { ReactiveController } from 'lit';
 
+import { KanbanCard } from '../card.js';
+import { KanbanCell } from '../cell.js';
+import type { KanbanGroup } from '../group.js';
+import type { DataViewKanban } from '../kanban-view.js';
 import type {
   KanbanCardSelection,
   KanbanCardSelectionCard,
@@ -8,11 +12,7 @@ import type {
   KanbanGroupSelection,
   KanbanViewSelection,
   KanbanViewSelectionWithType,
-} from '../../../_common/utils/index.js';
-import { KanbanCard } from '../card.js';
-import { KanbanCell } from '../cell.js';
-import type { KanbanGroup } from '../group.js';
-import type { DataViewKanban } from '../kanban-view.js';
+} from '../types.js';
 
 export class KanbanSelectionController implements ReactiveController {
   constructor(private host: DataViewKanban) {
diff --git a/packages/blocks/src/database-block/kanban/define.ts b/packages/blocks/src/database-block/data-view/views/kanban/define.ts
similarity index 58%
rename from packages/blocks/src/database-block/kanban/define.ts
rename to packages/blocks/src/database-block/data-view/views/kanban/define.ts
index 980d3cc48608..424c5e326494 100644
--- a/packages/blocks/src/database-block/kanban/define.ts
+++ b/packages/blocks/src/database-block/data-view/views/kanban/define.ts
@@ -1,13 +1,12 @@
-import type { FilterGroup } from '../common/ast.js';
-import { columnManager } from '../common/columns/manager.js';
-import { multiSelectPureColumnConfig } from '../common/columns/multi-select/define.js';
-import { numberPureColumnConfig } from '../common/columns/number/define.js';
-import { selectPureColumnConfig } from '../common/columns/select/define.js';
-import { textPureColumnConfig } from '../common/columns/text/define.js';
-import { viewManager } from '../common/data-view.js';
-import { groupByMatcher } from '../common/group-by/matcher.js';
-import { defaultGroupBy } from '../common/group-by/util.js';
-import type { GroupBy, GroupProperty, Sort } from '../common/types.js';
+import { multiSelectPureColumnConfig } from '../../column/presets/multi-select/define.js';
+import { numberPureColumnConfig } from '../../column/presets/number/define.js';
+import { selectColumnModelConfig } from '../../column/presets/select/define.js';
+import { textColumnModelConfig } from '../../column/presets/text/define.js';
+import type { FilterGroup } from '../../common/ast.js';
+import { viewManager } from '../../common/data-view.js';
+import { groupByMatcher } from '../../common/group-by/matcher.js';
+import type { GroupBy, GroupProperty, Sort } from '../../common/types.js';
+import { defaultGroupBy } from '../../common/view-manager.js';
 import type { Column } from '../table/types.js';
 
 declare global {
@@ -35,24 +34,25 @@ export type KanbanViewData = {
 
 viewManager.register('kanban', {
   defaultName: 'Kanban View',
-  init(model, id, name) {
+  init(columnMetaMap, model, id, name) {
     const allowList = model.columns.filter(column => {
-      const type = columnManager.getColumn(column.type).dataType(column.data);
+      const type = columnMetaMap[column.type].model.dataType(column.data);
       return !!groupByMatcher.match(type) && column.type !== 'title';
     });
     const getWeight = (column: Column) => {
       if (
         [
-          selectPureColumnConfig.type,
+          selectColumnModelConfig.type as string,
           multiSelectPureColumnConfig.type,
         ].includes(column.type)
       ) {
         return 3;
       }
       if (
-        [numberPureColumnConfig.type, textPureColumnConfig.type].includes(
-          column.type
-        )
+        [
+          numberPureColumnConfig.type as string,
+          textColumnModelConfig.type,
+        ].includes(column.type)
       ) {
         return 2;
       }
@@ -75,7 +75,11 @@ viewManager.register('kanban', {
         op: 'and',
         conditions: [],
       },
-      groupBy: defaultGroupBy(column.id, column.type, column.data),
+      groupBy: defaultGroupBy(
+        columnMetaMap[column.type],
+        column.id,
+        column.data
+      ),
       header: {
         titleColumn: model.columns.find(v => v.type === 'title')?.id,
         iconColumn: 'type',
diff --git a/packages/blocks/src/database-block/kanban/group.ts b/packages/blocks/src/database-block/data-view/views/kanban/group.ts
similarity index 93%
rename from packages/blocks/src/database-block/kanban/group.ts
rename to packages/blocks/src/database-block/data-view/views/kanban/group.ts
index bbc703b21895..2464f9e8c442 100644
--- a/packages/blocks/src/database-block/kanban/group.ts
+++ b/packages/blocks/src/database-block/data-view/views/kanban/group.ts
@@ -6,11 +6,11 @@ import { customElement, property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
 
-import { popFilterableSimpleMenu } from '../../_common/components/menu/index.js';
-import { AddCursorIcon } from '../../_common/icons/index.js';
-import { GroupTitle } from '../common/group-by/group-title.js';
-import type { GroupData } from '../common/group-by/helper.js';
-import type { DataViewNative } from '../data-view.js';
+import { AddCursorIcon } from '../../../../_common/icons/index.js';
+import { GroupTitle } from '../../common/group-by/group-title.js';
+import type { GroupData } from '../../common/group-by/helper.js';
+import type { DataViewRenderer } from '../../data-view.js';
+import { popFilterableSimpleMenu } from '../../utils/menu/index.js';
 import type { DataViewKanbanManager } from './kanban-view-manager.js';
 
 const styles = css`
@@ -98,7 +98,7 @@ export class KanbanGroup extends WithDisposable(ShadowlessElement) {
   static override styles = styles;
 
   @property({ attribute: false })
-  dataViewEle!: DataViewNative;
+  dataViewEle!: DataViewRenderer;
   @property({ attribute: false })
   view!: DataViewKanbanManager;
   @property({ attribute: false })
diff --git a/packages/blocks/src/database-block/kanban/header-cell.ts b/packages/blocks/src/database-block/data-view/views/kanban/header-cell.ts
similarity index 58%
rename from packages/blocks/src/database-block/kanban/header-cell.ts
rename to packages/blocks/src/database-block/data-view/views/kanban/header-cell.ts
index fade91b6f850..9f62b0a8f0f2 100644
--- a/packages/blocks/src/database-block/kanban/header-cell.ts
+++ b/packages/blocks/src/database-block/data-view/views/kanban/header-cell.ts
@@ -1,10 +1,10 @@
-import { map } from '../../_common/components/uni-component/operation.js';
-import type { CellRenderProps } from '../common/columns/manager.js';
-import { createFromBaseCellRenderer } from '../common/columns/renderer.js';
+import type { CellRenderProps } from '../../column/index.js';
+import { createFromBaseCellRenderer } from '../../column/renderer.js';
 import {
   HeaderAreaTextCell,
   HeaderAreaTextCellEditing,
-} from '../common/header-area/text.js';
+} from '../../common/header-area/text.js';
+import { map } from '../../utils/uni-component/operation.js';
 
 export const headerRenderer = {
   view: map(
diff --git a/packages/blocks/src/database-block/kanban/header.ts b/packages/blocks/src/database-block/data-view/views/kanban/header.ts
similarity index 96%
rename from packages/blocks/src/database-block/kanban/header.ts
rename to packages/blocks/src/database-block/data-view/views/kanban/header.ts
index 494853406433..4372887f952f 100644
--- a/packages/blocks/src/database-block/kanban/header.ts
+++ b/packages/blocks/src/database-block/data-view/views/kanban/header.ts
@@ -5,7 +5,7 @@ import { css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import { popMenu } from '../../_common/components/menu/index.js';
+import { popMenu } from '../../utils/menu/index.js';
 import type { DataViewKanbanManager } from './kanban-view-manager.js';
 
 const styles = css`
diff --git a/packages/blocks/src/database-block/kanban/kanban-view-manager.ts b/packages/blocks/src/database-block/data-view/views/kanban/kanban-view-manager.ts
similarity index 89%
rename from packages/blocks/src/database-block/kanban/kanban-view-manager.ts
rename to packages/blocks/src/database-block/data-view/views/kanban/kanban-view-manager.ts
index a130900d3513..803a408e4881 100644
--- a/packages/blocks/src/database-block/kanban/kanban-view-manager.ts
+++ b/packages/blocks/src/database-block/data-view/views/kanban/kanban-view-manager.ts
@@ -1,19 +1,19 @@
-import type { FilterGroup } from '../common/ast.js';
-import type { CellRenderer } from '../common/columns/manager.js';
-import type { RealDataViewDataTypeMap } from '../common/data-view.js';
+import type { CellRenderer } from '../../column/index.js';
+import type { FilterGroup } from '../../common/ast.js';
+import type { RealDataViewDataTypeMap } from '../../common/data-view.js';
 import {
   BaseDataViewColumnManager,
   BaseDataViewManager,
-} from '../common/data-view-manager.js';
-import type { DataSource } from '../common/datasource/base.js';
-import { GroupHelper, sortByManually } from '../common/group-by/helper.js';
-import { groupByMatcher } from '../common/group-by/matcher.js';
-import { defaultGroupBy } from '../common/group-by/util.js';
-import type { SingleViewSource } from '../common/view-source.js';
-import { evalFilter } from '../logical/eval-filter.js';
-import type { TType } from '../logical/typesystem.js';
-import type { InsertToPosition } from '../types.js';
-import { insertPositionToIndex } from '../utils/insert.js';
+} from '../../common/data-view-manager.js';
+import type { DataSource } from '../../common/datasource/base.js';
+import { GroupHelper, sortByManually } from '../../common/group-by/helper.js';
+import { groupByMatcher } from '../../common/group-by/matcher.js';
+import { defaultGroupBy } from '../../common/view-manager.js';
+import type { SingleViewSource } from '../../common/view-source.js';
+import { evalFilter } from '../../logical/eval-filter.js';
+import type { TType } from '../../logical/typesystem.js';
+import type { InsertToPosition } from '../../types.js';
+import { insertPositionToIndex } from '../../utils/insert.js';
 import { headerRenderer } from './header-cell.js';
 
 type KanbanViewData = RealDataViewDataTypeMap['kanban'];
@@ -159,7 +159,11 @@ export class DataViewKanbanManager extends BaseDataViewManager {
     const column = this.columnGet(columnId);
     this.updateView(_view => {
       return {
-        groupBy: defaultGroupBy(column.id, column.type, column.data),
+        groupBy: defaultGroupBy(
+          this.columnGetMeta(column.type),
+          column.id,
+          column.data
+        ),
       };
     });
   }
diff --git a/packages/blocks/src/database-block/kanban/kanban-view.ts b/packages/blocks/src/database-block/data-view/views/kanban/kanban-view.ts
similarity index 93%
rename from packages/blocks/src/database-block/kanban/kanban-view.ts
rename to packages/blocks/src/database-block/data-view/views/kanban/kanban-view.ts
index a490f8d46c89..3dcad02de716 100644
--- a/packages/blocks/src/database-block/kanban/kanban-view.ts
+++ b/packages/blocks/src/database-block/data-view/views/kanban/kanban-view.ts
@@ -1,7 +1,7 @@
 import './group.js';
 import './header.js';
 import './controller/drag.js';
-import '../common/group-by/define.js';
+import '../../common/group-by/define.js';
 
 import { css } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
@@ -9,18 +9,18 @@ import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
 import Sortable from 'sortablejs';
 
-import { popMenu } from '../../_common/components/menu/index.js';
-import { renderUniLit } from '../../_common/components/uni-component/uni-component.js';
-import { AddCursorIcon } from '../../_common/icons/index.js';
-import type { KanbanViewSelectionWithType } from '../../_common/utils/index.js';
-import { BaseDataView } from '../common/base-data-view.js';
-import type { GroupHelper } from '../common/group-by/helper.js';
+import { AddCursorIcon } from '../../../../_common/icons/index.js';
+import { BaseDataView } from '../../common/base-data-view.js';
+import type { GroupHelper } from '../../common/group-by/helper.js';
+import { popMenu } from '../../utils/menu/index.js';
+import { renderUniLit } from '../../utils/uni-component/uni-component.js';
 import { KanbanClipboardController } from './controller/clipboard.js';
 import { KanbanDragController } from './controller/drag.js';
 import { KanbanHotkeysController } from './controller/hotkeys.js';
 import { KanbanSelectionController } from './controller/selection.js';
 import { KanbanGroup } from './group.js';
 import type { DataViewKanbanManager } from './kanban-view-manager.js';
+import type { KanbanViewSelectionWithType } from './types.js';
 
 const styles = css`
   affine-data-view-kanban {
diff --git a/packages/blocks/src/database-block/kanban/menu.ts b/packages/blocks/src/database-block/data-view/views/kanban/menu.ts
similarity index 91%
rename from packages/blocks/src/database-block/kanban/menu.ts
rename to packages/blocks/src/database-block/data-view/views/kanban/menu.ts
index 21acb462fc15..3ebd3f3eb007 100644
--- a/packages/blocks/src/database-block/kanban/menu.ts
+++ b/packages/blocks/src/database-block/data-view/views/kanban/menu.ts
@@ -1,19 +1,19 @@
 import type { ReferenceElement } from '@floating-ui/dom';
 import { html } from 'lit';
 
-import { popFilterableSimpleMenu } from '../../_common/components/menu/index.js';
 import {
   ArrowRightBigIcon,
-  DeleteIcon,
   ExpandFullIcon,
   MoveLeftIcon,
   MoveRightIcon,
-} from '../../_common/icons/index.js';
-import type { DataViewNative } from '../data-view.js';
+} from '../../../../_common/icons/index.js';
+import { DeleteIcon } from '../../common/icons/index.js';
+import type { DataViewRenderer } from '../../data-view.js';
+import { popFilterableSimpleMenu } from '../../utils/menu/index.js';
 import type { KanbanSelectionController } from './controller/selection.js';
 
 export const openDetail = (
-  dataViewEle: DataViewNative,
+  dataViewEle: DataViewRenderer,
   rowId: string,
   selection: KanbanSelectionController
 ) => {
@@ -29,7 +29,7 @@ export const openDetail = (
 };
 
 export const popCardMenu = (
-  dataViewEle: DataViewNative,
+  dataViewEle: DataViewRenderer,
   ele: ReferenceElement,
   rowId: string,
   selection: KanbanSelectionController
diff --git a/packages/blocks/src/database-block/data-view/views/kanban/renderer.ts b/packages/blocks/src/database-block/data-view/views/kanban/renderer.ts
new file mode 100644
index 000000000000..9baf9e0c678c
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/views/kanban/renderer.ts
@@ -0,0 +1,19 @@
+import { viewRendererManager } from '../../common/data-view.js';
+import { ExpandDatabaseBlockModal } from '../../common/header/tools/expand/index.js';
+import { DataViewHeaderToolsFilter } from '../../common/header/tools/filter.js';
+import { DataViewHeaderToolsSearch } from '../../common/header/tools/search.js';
+import { DataViewHeaderToolsViewOptions } from '../../common/header/tools/view-options.js';
+import { createUniComponentFromWebComponent } from '../../utils/uni-component/uni-component.js';
+import { createIcon } from '../../utils/uni-icon.js';
+import { DataViewKanban } from './kanban-view.js';
+
+viewRendererManager.register('kanban', {
+  icon: createIcon('DatabaseKanbanViewIcon'),
+  view: createUniComponentFromWebComponent(DataViewKanban),
+  tools: [
+    createUniComponentFromWebComponent(DataViewHeaderToolsFilter),
+    createUniComponentFromWebComponent(ExpandDatabaseBlockModal),
+    createUniComponentFromWebComponent(DataViewHeaderToolsSearch),
+    createUniComponentFromWebComponent(DataViewHeaderToolsViewOptions),
+  ],
+});
diff --git a/packages/blocks/src/database-block/data-view/views/kanban/types.ts b/packages/blocks/src/database-block/data-view/views/kanban/types.ts
new file mode 100644
index 000000000000..f79dbdcf5139
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/views/kanban/types.ts
@@ -0,0 +1,32 @@
+type WithKanbanViewType<T> = T extends unknown
+  ? {
+      viewId: string;
+      type: 'kanban';
+    } & T
+  : never;
+
+export type KanbanCellSelection = {
+  selectionType: 'cell';
+  groupKey: string;
+  cardId: string;
+  columnId: string;
+  isEditing: boolean;
+};
+export type KanbanCardSelectionCard = {
+  groupKey: string;
+  cardId: string;
+};
+export type KanbanCardSelection = {
+  selectionType: 'card';
+  cards: [KanbanCardSelectionCard, ...KanbanCardSelectionCard[]];
+};
+export type KanbanGroupSelection = {
+  selectionType: 'group';
+  groupKeys: [string, ...string[]];
+};
+export type KanbanViewSelection =
+  | KanbanCellSelection
+  | KanbanCardSelection
+  | KanbanGroupSelection;
+export type KanbanViewSelectionWithType =
+  WithKanbanViewType<KanbanViewSelection>;
diff --git a/packages/blocks/src/database-block/table/components/cell-container.ts b/packages/blocks/src/database-block/data-view/views/table/components/cell-container.ts
similarity index 93%
rename from packages/blocks/src/database-block/table/components/cell-container.ts
rename to packages/blocks/src/database-block/data-view/views/table/components/cell-container.ts
index 02ccae87ee82..a14e46a072d6 100644
--- a/packages/blocks/src/database-block/table/components/cell-container.ts
+++ b/packages/blocks/src/database-block/data-view/views/table/components/cell-container.ts
@@ -4,12 +4,12 @@ import { css } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { createRef } from 'lit/directives/ref.js';
 
-import { renderUniLit } from '../../../_common/components/uni-component/uni-component.js';
 import type {
   CellRenderProps,
   DataViewCellLifeCycle,
-} from '../../common/columns/manager.js';
-import type { DataViewManager } from '../../common/data-view-manager.js';
+} from '../../../column/index.js';
+import type { DataViewManager } from '../../../common/data-view-manager.js';
+import { renderUniLit } from '../../../utils/uni-component/uni-component.js';
 import type { DataViewTableColumnManager } from '../table-view-manager.js';
 
 @customElement('affine-database-cell-container')
diff --git a/packages/blocks/src/database-block/table/components/column-header/column-header.ts b/packages/blocks/src/database-block/data-view/views/table/components/column-header/column-header.ts
similarity index 95%
rename from packages/blocks/src/database-block/table/components/column-header/column-header.ts
rename to packages/blocks/src/database-block/data-view/views/table/components/column-header/column-header.ts
index 94a2713eed58..97e3c20bf486 100644
--- a/packages/blocks/src/database-block/table/components/column-header/column-header.ts
+++ b/packages/blocks/src/database-block/data-view/views/table/components/column-header/column-header.ts
@@ -9,8 +9,8 @@ import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
 
-import { renderTemplate } from '../../../../_common/components/uni-component/render-template.js';
-import { AddCursorIcon } from '../../../../_common/icons/index.js';
+import { AddCursorIcon } from '../../../../../../_common/icons/index.js';
+import { renderTemplate } from '../../../../utils/uni-component/render-template.js';
 import type { DataViewTableManager } from '../../table-view-manager.js';
 import { styles } from './styles.js';
 
@@ -62,7 +62,7 @@ export class DatabaseColumnHeader extends WithDisposable(ShadowlessElement) {
       this.addColumnButton.style.marginLeft = '20px';
       this.addColumnButton.style.position = 'absolute';
       this.addColumnButton.style.zIndex = '1';
-      this.closest('affine-data-view-native')?.append(this.addColumnButton);
+      this.closest('affine-data-view-renderer')?.append(this.addColumnButton);
       requestAnimationFrame(() => {
         const referenceEl = this.addColumnPositionRef.value;
         if (!referenceEl) {
diff --git a/packages/blocks/src/database-block/table/components/column-header/column-renderer.ts b/packages/blocks/src/database-block/data-view/views/table/components/column-header/column-renderer.ts
similarity index 96%
rename from packages/blocks/src/database-block/table/components/column-header/column-renderer.ts
rename to packages/blocks/src/database-block/data-view/views/table/components/column-header/column-renderer.ts
index ed03e12f7a84..02b713ec3457 100644
--- a/packages/blocks/src/database-block/table/components/column-header/column-renderer.ts
+++ b/packages/blocks/src/database-block/data-view/views/table/components/column-header/column-renderer.ts
@@ -5,7 +5,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
 
-import type { DataViewColumnManager } from '../../../common/data-view-manager.js';
+import type { DataViewColumnManager } from '../../../../common/data-view-manager.js';
 import type { DataViewTableManager } from '../../table-view-manager.js';
 
 @customElement('affine-data-view-column-preview')
diff --git a/packages/blocks/src/database-block/table/components/column-header/database-header-column.ts b/packages/blocks/src/database-block/data-view/views/table/components/column-header/database-header-column.ts
similarity index 97%
rename from packages/blocks/src/database-block/table/components/column-header/database-header-column.ts
rename to packages/blocks/src/database-block/data-view/views/table/components/column-header/database-header-column.ts
index e55d70e26748..b939623e6d91 100644
--- a/packages/blocks/src/database-block/table/components/column-header/database-header-column.ts
+++ b/packages/blocks/src/database-block/data-view/views/table/components/column-header/database-header-column.ts
@@ -8,10 +8,6 @@ import { createRef, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
 
-import {
-  popMenu,
-  positionToVRect,
-} from '../../../../_common/components/menu/menu.js';
 import {
   DatabaseDuplicate,
   DatabaseInsertLeft,
@@ -20,12 +16,13 @@ import {
   DatabaseMoveRight,
   DeleteIcon,
   TextIcon,
-} from '../../../../_common/icons/index.js';
-import type { InsertToPosition } from '../../../types.js';
-import { startDrag } from '../../../utils/drag.js';
-import { autoScrollOnBoundary } from '../../../utils/frame-loop.js';
-import { insertPositionToIndex } from '../../../utils/insert.js';
-import { getResultInRange } from '../../../utils/utils.js';
+} from '../../../../common/icons/index.js';
+import type { InsertToPosition } from '../../../../types.js';
+import { startDrag } from '../../../../utils/drag.js';
+import { autoScrollOnBoundary } from '../../../../utils/frame-loop.js';
+import { insertPositionToIndex } from '../../../../utils/insert.js';
+import { popMenu, positionToVRect } from '../../../../utils/menu/index.js';
+import { getResultInRange } from '../../../../utils/utils.js';
 import { DEFAULT_COLUMN_TITLE_HEIGHT } from '../../consts.js';
 import type {
   DataViewTableColumnManager,
diff --git a/packages/blocks/src/database-block/table/components/column-header/styles.ts b/packages/blocks/src/database-block/data-view/views/table/components/column-header/styles.ts
similarity index 100%
rename from packages/blocks/src/database-block/table/components/column-header/styles.ts
rename to packages/blocks/src/database-block/data-view/views/table/components/column-header/styles.ts
diff --git a/packages/blocks/src/database-block/table/components/column-header/vertical-indicator.ts b/packages/blocks/src/database-block/data-view/views/table/components/column-header/vertical-indicator.ts
similarity index 97%
rename from packages/blocks/src/database-block/table/components/column-header/vertical-indicator.ts
rename to packages/blocks/src/database-block/data-view/views/table/components/column-header/vertical-indicator.ts
index a9a5a372c9ec..3c791ef9f0b2 100644
--- a/packages/blocks/src/database-block/table/components/column-header/vertical-indicator.ts
+++ b/packages/blocks/src/database-block/data-view/views/table/components/column-header/vertical-indicator.ts
@@ -5,8 +5,8 @@ import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { startDrag } from '../../../utils/drag.js';
-import { getResultInRange } from '../../../utils/utils.js';
+import { startDrag } from '../../../../utils/drag.js';
+import { getResultInRange } from '../../../../utils/utils.js';
 import { DEFAULT_COLUMN_MIN_WIDTH } from '../../consts.js';
 import type { DataViewTableColumnManager } from '../../table-view-manager.js';
 
diff --git a/packages/blocks/src/database-block/table/components/column-stats-cell.ts b/packages/blocks/src/database-block/data-view/views/table/components/column-stats-cell.ts
similarity index 95%
rename from packages/blocks/src/database-block/table/components/column-stats-cell.ts
rename to packages/blocks/src/database-block/data-view/views/table/components/column-stats-cell.ts
index fc9401116aab..ffa9335bd240 100644
--- a/packages/blocks/src/database-block/table/components/column-stats-cell.ts
+++ b/packages/blocks/src/database-block/data-view/views/table/components/column-stats-cell.ts
@@ -3,9 +3,9 @@ import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { positionToVRect } from '../../../_common/components/menu/menu.js';
-import { ArrowDownIcon } from '../../../_common/icons/text.js';
-import { getRootByElement } from '../../../_common/utils/query.js';
+import { ArrowDownIcon } from '../../../../../_common/icons/index.js';
+import { getRootByElement } from '../../../../../_common/utils/index.js';
+import { positionToVRect } from '../../../utils/index.js';
 import {
   type ColumnDataType,
   getStatCalcOperationFromType,
diff --git a/packages/blocks/src/database-block/table/components/column-stats.ts b/packages/blocks/src/database-block/data-view/views/table/components/column-stats.ts
similarity index 100%
rename from packages/blocks/src/database-block/table/components/column-stats.ts
rename to packages/blocks/src/database-block/data-view/views/table/components/column-stats.ts
diff --git a/packages/blocks/src/database-block/table/components/header-cell.ts b/packages/blocks/src/database-block/data-view/views/table/components/header-cell.ts
similarity index 57%
rename from packages/blocks/src/database-block/table/components/header-cell.ts
rename to packages/blocks/src/database-block/data-view/views/table/components/header-cell.ts
index 1c5cadc93bf6..b816fbf57495 100644
--- a/packages/blocks/src/database-block/table/components/header-cell.ts
+++ b/packages/blocks/src/database-block/data-view/views/table/components/header-cell.ts
@@ -1,10 +1,10 @@
-import { map } from '../../../_common/components/uni-component/operation.js';
-import type { CellRenderProps } from '../../common/columns/manager.js';
-import { createFromBaseCellRenderer } from '../../common/columns/renderer.js';
+import type { CellRenderProps } from '../../../column/index.js';
+import { createFromBaseCellRenderer } from '../../../column/renderer.js';
 import {
   HeaderAreaTextCell,
   HeaderAreaTextCellEditing,
-} from '../../common/header-area/text.js';
+} from '../../../common/header-area/text.js';
+import { map } from '../../../utils/uni-component/operation.js';
 
 export const headerRenderer = {
   view: map(
diff --git a/packages/blocks/src/database-block/table/components/menu.ts b/packages/blocks/src/database-block/data-view/views/table/components/menu.ts
similarity index 88%
rename from packages/blocks/src/database-block/table/components/menu.ts
rename to packages/blocks/src/database-block/data-view/views/table/components/menu.ts
index 8ac3d18d2ac6..bf11666296a8 100644
--- a/packages/blocks/src/database-block/table/components/menu.ts
+++ b/packages/blocks/src/database-block/data-view/views/table/components/menu.ts
@@ -2,18 +2,18 @@ import type { ReferenceElement } from '@floating-ui/dom';
 import { html } from 'lit';
 
 import {
-  type Menu,
-  popFilterableSimpleMenu,
-} from '../../../_common/components/menu/index.js';
-import {
-  DeleteIcon,
   ExpandFullIcon,
   MoveLeftIcon,
   MoveRightIcon,
-} from '../../../_common/icons/index.js';
-import type { RootBlockComponent } from '../../../root-block/types.js';
-import type { DataViewColumnManager } from '../../common/data-view-manager.js';
-import type { DataViewNative } from '../../data-view.js';
+} from '../../../../../_common/icons/index.js';
+import type { RootBlockComponent } from '../../../../../root-block/index.js';
+import type { DataViewColumnManager } from '../../../common/data-view-manager.js';
+import { DeleteIcon } from '../../../common/icons/index.js';
+import type { DataViewRenderer } from '../../../data-view.js';
+import {
+  type Menu,
+  popFilterableSimpleMenu,
+} from '../../../utils/menu/index.js';
 import type { TableSelectionController } from '../controller/selection.js';
 import {
   checkboxCalcOps,
@@ -24,7 +24,7 @@ import {
 } from '../stat-ops.js';
 
 export const openDetail = (
-  dataViewEle: DataViewNative,
+  dataViewEle: DataViewRenderer,
   rowId: string,
   selection: TableSelectionController
 ) => {
@@ -40,7 +40,7 @@ export const openDetail = (
 };
 
 export const popRowMenu = (
-  dataViewEle: DataViewNative,
+  dataViewEle: DataViewRenderer,
   ele: ReferenceElement,
   rowId: string,
   selection: TableSelectionController
diff --git a/packages/blocks/src/database-block/table/components/row.ts b/packages/blocks/src/database-block/data-view/views/table/components/row.ts
similarity index 94%
rename from packages/blocks/src/database-block/table/components/row.ts
rename to packages/blocks/src/database-block/data-view/views/table/components/row.ts
index 1d0983dfbafe..48369893f2a1 100644
--- a/packages/blocks/src/database-block/table/components/row.ts
+++ b/packages/blocks/src/database-block/data-view/views/table/components/row.ts
@@ -5,15 +5,13 @@ import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
 
-import { positionToVRect } from '../../../_common/components/menu/index.js';
-import {
-  MoreHorizontalIcon,
-  NewEditIcon,
-} from '../../../_common/icons/index.js';
-import { type TableViewSelection } from '../../../_common/utils/index.js';
-import type { DataViewNative } from '../../data-view.js';
+import { NewEditIcon } from '../../../../../_common/icons/index.js';
+import { MoreHorizontalIcon } from '../../../common/icons/index.js';
+import type { DataViewRenderer } from '../../../data-view.js';
+import { eventToVRect } from '../../../utils/menu/index.js';
 import { DEFAULT_COLUMN_MIN_WIDTH } from '../consts.js';
 import type { DataViewTableManager } from '../table-view-manager.js';
+import type { TableViewSelection } from '../types.js';
 import { openDetail, popRowMenu } from './menu.js';
 
 @customElement('data-view-table-row')
@@ -98,7 +96,7 @@ export class TableRow extends WithDisposable(ShadowlessElement) {
     return this.closest('affine-database-table')?.selectionController;
   }
   @property({ attribute: false })
-  dataViewEle!: DataViewNative;
+  dataViewEle!: DataViewRenderer;
   @property({ attribute: false })
   view!: DataViewTableManager;
   @property({ attribute: false })
@@ -136,12 +134,7 @@ export class TableRow extends WithDisposable(ShadowlessElement) {
       },
       isEditing: false,
     };
-    popRowMenu(
-      this.dataViewEle,
-      positionToVRect(e.x, e.y),
-      this.rowId,
-      selection
-    );
+    popRowMenu(this.dataViewEle, eventToVRect(e), this.rowId, selection);
   };
 
   public override connectedCallback() {
diff --git a/packages/blocks/src/database-block/table/consts.ts b/packages/blocks/src/database-block/data-view/views/table/consts.ts
similarity index 100%
rename from packages/blocks/src/database-block/table/consts.ts
rename to packages/blocks/src/database-block/data-view/views/table/consts.ts
diff --git a/packages/blocks/src/database-block/table/controller/clipboard.ts b/packages/blocks/src/database-block/data-view/views/table/controller/clipboard.ts
similarity index 99%
rename from packages/blocks/src/database-block/table/controller/clipboard.ts
rename to packages/blocks/src/database-block/data-view/views/table/controller/clipboard.ts
index 7fa729b35557..d65a9e9c3bbc 100644
--- a/packages/blocks/src/database-block/table/controller/clipboard.ts
+++ b/packages/blocks/src/database-block/data-view/views/table/controller/clipboard.ts
@@ -3,10 +3,10 @@ import { assertExists } from '@blocksuite/global/utils';
 import type { Y } from '@blocksuite/store';
 import type { ReactiveController } from 'lit';
 
-import type { TableViewSelection } from '../../../_common/types.js';
 import type { DatabaseCellContainer } from '../components/cell-container.js';
 import type { DataViewTable } from '../table-view.js';
 import type { DataViewTableManager } from '../table-view-manager.js';
+import type { TableViewSelection } from '../types.js';
 
 const BLOCKSUITE_DATABASE = 'blocksuite/database';
 const TEXT = 'text/plain';
diff --git a/packages/blocks/src/database-block/table/controller/drag.ts b/packages/blocks/src/database-block/data-view/views/table/controller/drag.ts
similarity index 98%
rename from packages/blocks/src/database-block/table/controller/drag.ts
rename to packages/blocks/src/database-block/data-view/views/table/controller/drag.ts
index 2834510d9ccb..f673cc42bd7b 100644
--- a/packages/blocks/src/database-block/table/controller/drag.ts
+++ b/packages/blocks/src/database-block/data-view/views/table/controller/drag.ts
@@ -2,8 +2,8 @@
 
 import type { ReactiveController } from 'lit';
 
-import { type InsertToPosition } from '../../types.js';
-import { startDrag } from '../../utils/drag.js';
+import type { InsertToPosition } from '../../../types.js';
+import { startDrag } from '../../../utils/drag.js';
 import { TableRow } from '../components/row.js';
 import type { DataViewTable } from '../table-view.js';
 
diff --git a/packages/blocks/src/database-block/table/controller/hotkeys.ts b/packages/blocks/src/database-block/data-view/views/table/controller/hotkeys.ts
similarity index 100%
rename from packages/blocks/src/database-block/table/controller/hotkeys.ts
rename to packages/blocks/src/database-block/data-view/views/table/controller/hotkeys.ts
diff --git a/packages/blocks/src/database-block/table/controller/selection.ts b/packages/blocks/src/database-block/data-view/views/table/controller/selection.ts
similarity index 99%
rename from packages/blocks/src/database-block/table/controller/selection.ts
rename to packages/blocks/src/database-block/data-view/views/table/controller/selection.ts
index 3cf89392eb2f..c1cc35d9baa6 100644
--- a/packages/blocks/src/database-block/table/controller/selection.ts
+++ b/packages/blocks/src/database-block/data-view/views/table/controller/selection.ts
@@ -6,15 +6,15 @@ import { customElement } from 'lit/decorators.js';
 import type { Ref } from 'lit/directives/ref.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 
+import { startDrag } from '../../../utils/drag.js';
+import { autoScrollOnBoundary } from '../../../utils/frame-loop.js';
+import type { DatabaseCellContainer } from '../components/cell-container.js';
+import type { DataViewTable } from '../table-view.js';
 import type {
   CellFocus,
   MultiSelection,
   TableViewSelection,
-} from '../../../_common/types.js';
-import { startDrag } from '../../utils/drag.js';
-import { autoScrollOnBoundary } from '../../utils/frame-loop.js';
-import type { DatabaseCellContainer } from '../components/cell-container.js';
-import type { DataViewTable } from '../table-view.js';
+} from '../types.js';
 
 export class TableSelectionController implements ReactiveController {
   __selectionElement = new SelectionElement();
diff --git a/packages/blocks/src/database-block/table/define.ts b/packages/blocks/src/database-block/data-view/views/table/define.ts
similarity index 77%
rename from packages/blocks/src/database-block/table/define.ts
rename to packages/blocks/src/database-block/data-view/views/table/define.ts
index 2ec70cc07737..c56577155034 100644
--- a/packages/blocks/src/database-block/table/define.ts
+++ b/packages/blocks/src/database-block/data-view/views/table/define.ts
@@ -1,6 +1,6 @@
-import type { FilterGroup } from '../common/ast.js';
-import { viewManager } from '../common/data-view.js';
-import type { GroupBy, GroupProperty, Sort } from '../common/types.js';
+import type { FilterGroup } from '../../common/ast.js';
+import { viewManager } from '../../common/data-view.js';
+import type { GroupBy, GroupProperty, Sort } from '../../common/types.js';
 
 declare global {
   interface DataViewDataTypeMap {
@@ -26,7 +26,7 @@ export type TableViewData = {
 };
 viewManager.register('table', {
   defaultName: 'Table View',
-  init(model, id, name) {
+  init(_columnMetaMap, model, id, name) {
     return {
       id,
       name,
diff --git a/packages/blocks/src/database-block/table/group.ts b/packages/blocks/src/database-block/data-view/views/table/group.ts
similarity index 93%
rename from packages/blocks/src/database-block/table/group.ts
rename to packages/blocks/src/database-block/data-view/views/table/group.ts
index e0373d48c312..5372120dee3a 100644
--- a/packages/blocks/src/database-block/table/group.ts
+++ b/packages/blocks/src/database-block/data-view/views/table/group.ts
@@ -7,11 +7,11 @@ import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
-import { popFilterableSimpleMenu } from '../../_common/components/menu/index.js';
-import { PlusIcon } from '../../_common/icons/index.js';
-import { GroupTitle } from '../common/group-by/group-title.js';
-import type { GroupData } from '../common/group-by/helper.js';
-import type { DataViewNative } from '../data-view.js';
+import { GroupTitle } from '../../common/group-by/group-title.js';
+import type { GroupData } from '../../common/group-by/helper.js';
+import { PlusIcon } from '../../common/icons/index.js';
+import type { DataViewRenderer } from '../../data-view.js';
+import { popFilterableSimpleMenu } from '../../utils/menu/index.js';
 import { LEFT_TOOL_BAR_WIDTH } from './consts.js';
 import type { DataViewTable } from './table-view.js';
 import type { DataViewTableManager } from './table-view-manager.js';
@@ -57,7 +57,7 @@ export class TableGroup extends WithDisposable(ShadowlessElement) {
   static override styles = styles;
 
   @property({ attribute: false })
-  dataViewEle!: DataViewNative;
+  dataViewEle!: DataViewRenderer;
   @property({ attribute: false })
   view!: DataViewTableManager;
   @property({ attribute: false })
diff --git a/packages/blocks/src/database-block/data-view/views/table/renderer.ts b/packages/blocks/src/database-block/data-view/views/table/renderer.ts
new file mode 100644
index 000000000000..c5bab0c9c4e0
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/views/table/renderer.ts
@@ -0,0 +1,21 @@
+import { viewRendererManager } from '../../common/data-view.js';
+import { DataViewHeaderToolsAddRow } from '../../common/header/tools/add-row/add-row.js';
+import { ExpandDatabaseBlockModal } from '../../common/header/tools/expand/index.js';
+import { DataViewHeaderToolsFilter } from '../../common/header/tools/filter.js';
+import { DataViewHeaderToolsSearch } from '../../common/header/tools/search.js';
+import { DataViewHeaderToolsViewOptions } from '../../common/header/tools/view-options.js';
+import { createUniComponentFromWebComponent } from '../../utils/uni-component/uni-component.js';
+import { createIcon } from '../../utils/uni-icon.js';
+import { DataViewTable } from './table-view.js';
+
+viewRendererManager.register('table', {
+  view: createUniComponentFromWebComponent(DataViewTable),
+  icon: createIcon('DatabaseTableViewIcon'),
+  tools: [
+    createUniComponentFromWebComponent(DataViewHeaderToolsFilter),
+    createUniComponentFromWebComponent(ExpandDatabaseBlockModal),
+    createUniComponentFromWebComponent(DataViewHeaderToolsSearch),
+    createUniComponentFromWebComponent(DataViewHeaderToolsViewOptions),
+    createUniComponentFromWebComponent(DataViewHeaderToolsAddRow),
+  ],
+});
diff --git a/packages/blocks/src/database-block/table/stat-ops.ts b/packages/blocks/src/database-block/data-view/views/table/stat-ops.ts
similarity index 100%
rename from packages/blocks/src/database-block/table/stat-ops.ts
rename to packages/blocks/src/database-block/data-view/views/table/stat-ops.ts
diff --git a/packages/blocks/src/database-block/table/table-view-manager.ts b/packages/blocks/src/database-block/data-view/views/table/table-view-manager.ts
similarity index 90%
rename from packages/blocks/src/database-block/table/table-view-manager.ts
rename to packages/blocks/src/database-block/data-view/views/table/table-view-manager.ts
index a8ba8eef19c9..b51d2c664646 100644
--- a/packages/blocks/src/database-block/table/table-view-manager.ts
+++ b/packages/blocks/src/database-block/data-view/views/table/table-view-manager.ts
@@ -1,19 +1,19 @@
-import type { FilterGroup } from '../common/ast.js';
-import type { CellRenderer } from '../common/columns/manager.js';
-import type { RealDataViewDataTypeMap } from '../common/data-view.js';
+import type { CellRenderer } from '../../column/index.js';
+import type { FilterGroup } from '../../common/ast.js';
+import type { RealDataViewDataTypeMap } from '../../common/data-view.js';
 import {
   BaseDataViewColumnManager,
   BaseDataViewManager,
-} from '../common/data-view-manager.js';
-import type { DataSource } from '../common/datasource/base.js';
-import { GroupHelper, sortByManually } from '../common/group-by/helper.js';
-import { groupByMatcher } from '../common/group-by/matcher.js';
-import { defaultGroupBy } from '../common/group-by/util.js';
-import type { SingleViewSource } from '../common/view-source.js';
-import { evalFilter } from '../logical/eval-filter.js';
-import type { TType } from '../logical/typesystem.js';
-import type { InsertToPosition } from '../types.js';
-import { insertPositionToIndex } from '../utils/insert.js';
+} from '../../common/data-view-manager.js';
+import type { DataSource } from '../../common/datasource/base.js';
+import { GroupHelper, sortByManually } from '../../common/group-by/helper.js';
+import { groupByMatcher } from '../../common/group-by/matcher.js';
+import { defaultGroupBy } from '../../common/view-manager.js';
+import type { SingleViewSource } from '../../common/view-source.js';
+import { evalFilter } from '../../logical/eval-filter.js';
+import type { TType } from '../../logical/typesystem.js';
+import type { InsertToPosition } from '../../types.js';
+import { insertPositionToIndex } from '../../utils/insert.js';
 import { headerRenderer } from './components/header-cell.js';
 
 type TableViewData = RealDataViewDataTypeMap['table'];
@@ -255,7 +255,11 @@ export class DataViewTableManager extends BaseDataViewManager {
     const column = this.columnGet(columnId);
     this.updateView(_view => {
       return {
-        groupBy: defaultGroupBy(column.id, column.type, column.data),
+        groupBy: defaultGroupBy(
+          this.columnGetMeta(column.type),
+          column.id,
+          column.data
+        ),
       };
     });
   }
diff --git a/packages/blocks/src/database-block/table/table-view.ts b/packages/blocks/src/database-block/data-view/views/table/table-view.ts
similarity index 93%
rename from packages/blocks/src/database-block/table/table-view.ts
rename to packages/blocks/src/database-block/data-view/views/table/table-view.ts
index 476b35e9a802..e31d008b9eeb 100644
--- a/packages/blocks/src/database-block/table/table-view.ts
+++ b/packages/blocks/src/database-block/data-view/views/table/table-view.ts
@@ -8,20 +8,20 @@ import { css } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import { popMenu } from '../../_common/components/menu/index.js';
-import { renderUniLit } from '../../_common/components/uni-component/uni-component.js';
-import { AddCursorIcon } from '../../_common/icons/index.js';
-import type { TableViewSelection } from '../../_common/utils/index.js';
-import { BaseDataView } from '../common/base-data-view.js';
-import type { GroupHelper } from '../common/group-by/helper.js';
-import type { InsertToPosition } from '../types.js';
-import { insertPositionToIndex } from '../utils/insert.js';
+import { AddCursorIcon } from '../../../../_common/icons/index.js';
+import { BaseDataView } from '../../common/base-data-view.js';
+import type { GroupHelper } from '../../common/group-by/helper.js';
+import type { InsertToPosition } from '../../types.js';
+import { insertPositionToIndex } from '../../utils/insert.js';
+import { popMenu } from '../../utils/menu/index.js';
+import { renderUniLit } from '../../utils/uni-component/uni-component.js';
 import { LEFT_TOOL_BAR_WIDTH } from './consts.js';
 import { TableClipboardController } from './controller/clipboard.js';
 import { TableDragController } from './controller/drag.js';
 import { TableHotkeysController } from './controller/hotkeys.js';
 import { TableSelectionController } from './controller/selection.js';
 import type { DataViewTableManager } from './table-view-manager.js';
+import type { TableViewSelection } from './types.js';
 
 const styles = css`
   affine-database-table {
diff --git a/packages/blocks/src/database-block/table/types.ts b/packages/blocks/src/database-block/data-view/views/table/types.ts
similarity index 78%
rename from packages/blocks/src/database-block/table/types.ts
rename to packages/blocks/src/database-block/data-view/views/table/types.ts
index 89c9d3866995..df073144f280 100644
--- a/packages/blocks/src/database-block/table/types.ts
+++ b/packages/blocks/src/database-block/data-view/views/table/types.ts
@@ -56,3 +56,20 @@ export const getTableContainer = (ele: HTMLElement) => {
   assertExists(element);
   return element;
 };
+export type CellFocus = {
+  rowIndex: number;
+  columnIndex: number;
+};
+export type MultiSelection = {
+  start: number;
+  end: number;
+};
+export type TableViewSelection = {
+  viewId: string;
+  type: 'table';
+  groupKey?: string;
+  rowsSelection?: MultiSelection;
+  columnsSelection?: MultiSelection;
+  focus: CellFocus;
+  isEditing: boolean;
+};
diff --git a/packages/blocks/src/database-block/database-block.ts b/packages/blocks/src/database-block/database-block.ts
index a11a567fa54e..79ea00863ce8 100644
--- a/packages/blocks/src/database-block/database-block.ts
+++ b/packages/blocks/src/database-block/database-block.ts
@@ -1,28 +1,16 @@
-// related component
-import './common/group-by/define.js';
-import './common/header/views.js';
-import './common/header/title.js';
-import './common/header/tools/tools.js';
-import './common/filter/filter-bar.js';
-import './data-view.js';
-
 import { BlockElement, PathFinder, RangeManager } from '@blocksuite/block-std';
 import { Slot } from '@blocksuite/global/utils';
 import { Slice } from '@blocksuite/store';
 import { css, nothing, unsafeCSS } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import { createRef, ref } from 'lit/directives/ref.js';
 import { html } from 'lit/static-html.js';
 
 import { DragIndicator } from '../_common/components/index.js';
-import { popMenu } from '../_common/components/menu/index.js';
-import { defineUniComponent } from '../_common/components/uni-component/uni-component.js';
 import {
   CopyIcon,
   DeleteIcon,
   MoreHorizontalIcon,
 } from '../_common/icons/index.js';
-import type { DataViewSelection } from '../_common/utils/index.js';
 import { Rect } from '../_common/utils/index.js';
 import type { NoteBlockComponent } from '../note-block/note-block.js';
 import { EdgelessRootBlockComponent } from '../root-block/edgeless/edgeless-root-block.js';
@@ -33,21 +21,26 @@ import {
 } from '../root-block/widgets/drag-handle/utils.js';
 import type { AffineInnerModalWidget } from '../root-block/widgets/inner-modal/inner-modal.js';
 import { AFFINE_INNER_MODAL_WIDGET } from '../root-block/widgets/inner-modal/inner-modal.js';
-import { dataViewCommonStyle } from './common/css-variable.js';
-import type { DataViewProps, DataViewTypes } from './common/data-view.js';
-import { type DataViewExpose } from './common/data-view.js';
-import type { DataViewManager } from './common/data-view-manager.js';
-import type { DataSource } from './common/datasource/base.js';
-import { DatabaseBlockDataSource } from './common/datasource/database-block-datasource.js';
-import { renderFilterBar } from './common/filter/filter-bar.js';
-import { renderTools } from './common/header/tools/tools.js';
-import { DatabaseSelection } from './common/selection.js';
-import type { SingleViewSource, ViewSource } from './common/view-source.js';
-import type { DataViewNative, DataViewNativeConfig } from './data-view.js';
+import { Datasource } from './data-source.js';
+import { dataViewCommonStyle } from './data-view/common/css-variable.js';
+import type { DataViewProps } from './data-view/common/data-view.js';
+import { type DataViewExpose } from './data-view/common/data-view.js';
+import type { DataViewManager } from './data-view/common/data-view-manager.js';
+import type { DataSource } from './data-view/common/datasource/base.js';
+import { renderFilterBar } from './data-view/common/filter/filter-bar.js';
+import { renderTools } from './data-view/common/header/tools/tools.js';
+import {
+  DatabaseSelection,
+  DataView,
+  type DataViewSelection,
+  defineUniComponent,
+  popMenu,
+  type ViewSource,
+} from './data-view/index.js';
 import type { DatabaseBlockModel } from './database-model.js';
 import { DatabaseBlockSchema } from './database-model.js';
 import type { DatabaseService } from './database-service.js';
-import type { InsertToPosition } from './types.js';
+import { DatabaseBlockViewSource } from './view-source.js';
 
 @customElement('affine-database')
 export class DatabaseBlockComponent extends BlockElement<
@@ -259,16 +252,16 @@ export class DatabaseBlockComponent extends BlockElement<
     );
   }
 
-  private _view = createRef<DataViewNative>();
+  private dataView = new DataView();
 
   get view() {
-    return this._view.value?.expose;
+    return this.dataView.expose;
   }
 
   private _dataSource?: DataSource;
   public get dataSource(): DataSource {
     if (!this._dataSource) {
-      this._dataSource = new DatabaseBlockDataSource(this.host, {
+      this._dataSource = new Datasource(this.host, {
         type: 'database-block',
         pageId: this.host.doc.id,
         blockId: this.model.id,
@@ -277,10 +270,6 @@ export class DatabaseBlockComponent extends BlockElement<
     return this._dataSource;
   }
 
-  public focusFirstCell = () => {
-    this._view.value?.focusFirstCell();
-  };
-
   private renderViews = () => {
     return html` <data-view-header-views
       style="flex:1"
@@ -371,27 +360,23 @@ export class DatabaseBlockComponent extends BlockElement<
   }
 
   override renderBlock() {
-    const config: DataViewNativeConfig = {
-      bindHotkey: this._bindHotkey,
-      handleEvent: this._handleEvent,
-      getFlag: this.getFlag,
-      selectionUpdated: this.selectionUpdated,
-      setSelection: this.setSelection,
-      dataSource: this.dataSource,
-      viewSource: this.viewSource,
-      headerComponent: this.headerComponent,
-      onDrag: this.onDrag,
-      std: this.std,
-      detailPanelConfig: {
-        target: () => this.innerModalWidget.target,
-      },
-    };
     return html`
       <div contenteditable="false" style="position: relative">
-        <affine-data-view-native
-          ${ref(this._view)}
-          .config="${config}"
-        ></affine-data-view-native>
+        ${this.dataView.render({
+          bindHotkey: this._bindHotkey,
+          handleEvent: this._handleEvent,
+          getFlag: this.getFlag,
+          selectionUpdated: this.selectionUpdated,
+          setSelection: this.setSelection,
+          dataSource: this.dataSource,
+          viewSource: this.viewSource,
+          headerComponent: this.headerComponent,
+          onDrag: this.onDrag,
+          std: this.std,
+          detailPanelConfig: {
+            target: () => this.innerModalWidget.target,
+          },
+        })}
 
         <affine-block-selection
           .block="${this}"
@@ -407,102 +392,3 @@ declare global {
     'affine-database': DatabaseBlockComponent;
   }
 }
-
-class DatabaseBlockViewSource implements ViewSource {
-  constructor(private model: DatabaseBlockModel) {}
-
-  get currentViewId(): string {
-    return this.currentId ?? this.model.views[0].id;
-  }
-
-  private viewMap = new Map<string, SingleViewSource>();
-  private currentId?: string;
-
-  public selectView(id: string): void {
-    this.currentId = id;
-    this.updateSlot.emit();
-  }
-
-  public updateSlot = new Slot();
-
-  public get views(): SingleViewSource[] {
-    return this.model.views.map(v => this.viewGet(v.id));
-  }
-
-  public get currentView(): SingleViewSource {
-    return this.viewGet(this.currentViewId);
-  }
-
-  public get readonly(): boolean {
-    return this.model.doc.readonly;
-  }
-
-  public viewAdd(type: DataViewTypes): string {
-    this.model.doc.captureSync();
-    const view = this.model.addView(type);
-    this.model.applyViewsUpdate();
-    return view.id;
-  }
-
-  public viewGet(id: string): SingleViewSource {
-    let result = this.viewMap.get(id);
-    if (!result) {
-      const getView = () => {
-        return this.model.views.find(v => v.id === id);
-      };
-      const view = getView();
-      if (!view) {
-        throw new Error('view not found');
-      }
-      // eslint-disable-next-line @typescript-eslint/no-this-alias
-      const self = this;
-      const slot = new Slot();
-      this.updateSlot.pipe(slot);
-      result = {
-        duplicate(): void {
-          self.duplicate(id);
-        },
-        get view() {
-          const view = getView();
-          if (!view) {
-            throw new Error('view not found');
-          }
-          return view;
-        },
-        updateView: updater => {
-          this.model.doc.captureSync();
-          this.model.updateView(id, updater);
-          this.model.applyViewsUpdate();
-        },
-        delete: () => {
-          this.model.doc.captureSync();
-          if (this.model.getViewList().length === 1) {
-            this.model.doc.deleteBlock(this.model);
-            return;
-          }
-          this.model.deleteView(id);
-          this.currentId = undefined;
-          this.model.applyViewsUpdate();
-        },
-        get readonly() {
-          return self.model.doc.readonly;
-        },
-        updateSlot: slot,
-        isDeleted() {
-          return self.model.views.every(v => v.id !== id);
-        },
-      };
-      this.viewMap.set(id, result);
-    }
-    return result;
-  }
-
-  public duplicate(id: string): void {
-    const newId = this.model.duplicateView(id);
-    this.selectView(newId);
-  }
-
-  public moveTo(id: string, position: InsertToPosition): void {
-    this.model.moveViewTo(id, position);
-  }
-}
diff --git a/packages/blocks/src/database-block/database-model.ts b/packages/blocks/src/database-block/database-model.ts
index 18f9c5481dc8..cd92c296a6a4 100644
--- a/packages/blocks/src/database-block/database-model.ts
+++ b/packages/blocks/src/database-block/database-model.ts
@@ -1,15 +1,19 @@
 import type { MigrationRunner, Text } from '@blocksuite/store';
 import { BlockModel, defineBlockSchema, nanoid } from '@blocksuite/store';
 
-import { getTagColor } from '../_common/components/tags/colors.js';
-import { multiSelectPureColumnConfig } from './common/columns/multi-select/define.js';
-import { selectPureColumnConfig } from './common/columns/select/define.js';
-import { titlePureColumnConfig } from './common/columns/title/define.js';
-import type { DataViewDataType, DataViewTypes } from './common/data-view.js';
-import { viewManager } from './common/data-view.js';
-import type { Column } from './table/types.js';
-import type { Cell, ColumnUpdater, InsertToPosition } from './types.js';
-import { arrayMove, insertPositionToIndex } from './utils/insert.js';
+import { databaseBlockColumnMap } from './columns/index.js';
+import { titlePureColumnConfig } from './columns/title/define.js';
+import { multiSelectPureColumnConfig } from './data-view/column/presets/multi-select/define.js';
+import { selectColumnModelConfig } from './data-view/column/presets/select/define.js';
+import {
+  type DataViewDataType,
+  type DataViewTypes,
+  viewManager,
+} from './data-view/common/data-view.js';
+import type { InsertToPosition } from './data-view/types.js';
+import { arrayMove, insertPositionToIndex } from './data-view/utils/insert.js';
+import { getTagColor } from './data-view/utils/tags/colors.js';
+import type { Cell, Column, ColumnUpdater } from './types.js';
 
 export type DatabaseBlockProps = {
   views: DataViewDataType[];
@@ -34,7 +38,7 @@ export class DatabaseBlockModel extends BlockModel<DatabaseBlockProps> {
   initEmpty(viewType: DataViewTypes) {
     this.addColumn(
       'start',
-      titlePureColumnConfig.create(titlePureColumnConfig.name)
+      titlePureColumnConfig.create(titlePureColumnConfig.model.name)
     );
     this.addView(viewType);
   }
@@ -42,7 +46,7 @@ export class DatabaseBlockModel extends BlockModel<DatabaseBlockProps> {
   initConvert(viewType: DataViewTypes) {
     this.addColumn(
       'end',
-      multiSelectPureColumnConfig.create('Tag', { options: [] })
+      multiSelectPureColumnConfig.model.create('Tag', { options: [] })
     );
     this.initEmpty(viewType);
   }
@@ -51,7 +55,7 @@ export class DatabaseBlockModel extends BlockModel<DatabaseBlockProps> {
     const ids = [nanoid(), nanoid(), nanoid()];
     const statusId = this.addColumn(
       'end',
-      selectPureColumnConfig.create('Status', {
+      selectColumnModelConfig.model.create('Status', {
         options: [
           {
             id: ids[0],
@@ -90,7 +94,12 @@ export class DatabaseBlockModel extends BlockModel<DatabaseBlockProps> {
   addView(type: DataViewTypes) {
     const id = this.doc.generateBlockId();
     const viewConfig = viewManager.getView(type);
-    const view = viewConfig.init(this, id, viewConfig.defaultName);
+    const view = viewConfig.init(
+      databaseBlockColumnMap,
+      this,
+      id,
+      viewConfig.defaultName
+    );
     this.doc.transact(() => {
       this.views.push(view);
     });
diff --git a/packages/blocks/src/database-block/database-service.ts b/packages/blocks/src/database-block/database-service.ts
index 4d4f75dc94f2..e356f13e10ba 100644
--- a/packages/blocks/src/database-block/database-service.ts
+++ b/packages/blocks/src/database-block/database-service.ts
@@ -9,8 +9,8 @@ import {
 } from '../_common/inline/presets/affine-inline-specs.js';
 import { affineInlineMarkdownMatches } from '../_common/inline/presets/markdown.js';
 import { ReferenceNodeConfig } from '../_common/inline/presets/nodes/reference-node/reference-config.js';
-import type { DataViewTypes } from './common/data-view.js';
-import { DatabaseSelection } from './common/selection.js';
+import type { DataViewTypes } from './data-view/common/data-view.js';
+import { DatabaseSelection } from './data-view/common/selection.js';
 import type { DatabaseBlockModel } from './database-model.js';
 
 export class DatabaseService<
diff --git a/packages/blocks/src/database-block/common/datasource/block-renderer.ts b/packages/blocks/src/database-block/detail-panel/block-renderer.ts
similarity index 88%
rename from packages/blocks/src/database-block/common/datasource/block-renderer.ts
rename to packages/blocks/src/database-block/detail-panel/block-renderer.ts
index 01a985be249c..079fa3bd4282 100644
--- a/packages/blocks/src/database-block/common/datasource/block-renderer.ts
+++ b/packages/blocks/src/database-block/detail-panel/block-renderer.ts
@@ -3,10 +3,10 @@ import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import type { DatabaseBlockComponent } from '../../database-block.js';
-import type { DataViewKanbanManager } from '../../kanban/kanban-view-manager.js';
-import type { DataViewTableManager } from '../../table/table-view-manager.js';
-import type { DetailSlotProps } from './base.js';
+import type { DetailSlotProps } from '../data-view/common/datasource/base.js';
+import type { DataViewKanbanManager } from '../data-view/views/kanban/kanban-view-manager.js';
+import type { DataViewTableManager } from '../data-view/views/table/table-view-manager.js';
+import type { DatabaseBlockComponent } from '../database-block.js';
 
 @customElement('database-datasource-block-renderer')
 export class BlockRenderer
diff --git a/packages/blocks/src/database-block/index.ts b/packages/blocks/src/database-block/index.ts
index 2fde4a616b08..f8fa426e6fbd 100644
--- a/packages/blocks/src/database-block/index.ts
+++ b/packages/blocks/src/database-block/index.ts
@@ -1,19 +1,19 @@
+export { richTextColumnModelConfig } from './columns/rich-text/define.js';
 import type { DatabaseBlockModel } from './database-model.js';
 import type { DatabaseService } from './database-service.js';
 
-export { checkboxPureColumnConfig } from './common/columns/checkbox/define.js';
-export { datePureColumnConfig } from './common/columns/date/define.js';
-export { linkPureColumnConfig } from './common/columns/link/define.js';
-export { multiSelectColumnConfig } from './common/columns/multi-select/cell-renderer.js';
-export { multiSelectPureColumnConfig } from './common/columns/multi-select/define.js';
-export { numberPureColumnConfig } from './common/columns/number/define.js';
-export { progressPureColumnConfig } from './common/columns/progress/define.js';
-export { richTextPureColumnConfig } from './common/columns/rich-text/define.js';
+export { checkboxColumnModelConfig } from './data-view/column/presets/checkbox/define.js';
+export { dateColumnModelConfig } from './data-view/column/presets/date/define.js';
+export { linkPureColumnConfig } from './data-view/column/presets/link/define.js';
+export { multiSelectColumnConfig } from './data-view/column/presets/multi-select/cell-renderer.js';
+export { multiSelectPureColumnConfig } from './data-view/column/presets/multi-select/define.js';
+export { numberPureColumnConfig } from './data-view/column/presets/number/define.js';
+export { progressPureColumnConfig } from './data-view/column/presets/progress/define.js';
+export { insertPositionToIndex } from './data-view/utils/insert.js';
 export * from './database-block.js';
 export * from './database-model.js';
 export * from './database-service.js';
 export * from './types.js';
-export { insertPositionToIndex } from './utils/insert.js';
 
 declare global {
   namespace BlockSuite {
@@ -25,3 +25,5 @@ declare global {
     }
   }
 }
+export type { ColumnDataUpdater, InsertToPosition } from './data-view/types.js';
+export { DatabaseBlockViewSource } from './view-source.js';
diff --git a/packages/blocks/src/database-block/kanban/renderer.ts b/packages/blocks/src/database-block/kanban/renderer.ts
deleted file mode 100644
index c655b58e1476..000000000000
--- a/packages/blocks/src/database-block/kanban/renderer.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { createIcon } from '../../_common/components/icon/uni-icon.js';
-import { createUniComponentFromWebComponent } from '../../_common/components/uni-component/uni-component.js';
-import { viewRendererManager } from '../common/data-view.js';
-import { ExpandDatabaseBlockModal } from '../common/header/tools/expand/index.js';
-import { DataViewHeaderToolsFilter } from '../common/header/tools/filter.js';
-import { DataViewHeaderToolsSearch } from '../common/header/tools/search.js';
-import { DataViewHeaderToolsViewOptions } from '../common/header/tools/view-options.js';
-import { DataViewKanban } from './kanban-view.js';
-
-viewRendererManager.register('kanban', {
-  icon: createIcon('DatabaseKanbanViewIcon'),
-  view: createUniComponentFromWebComponent(DataViewKanban),
-  tools: [
-    createUniComponentFromWebComponent(DataViewHeaderToolsFilter),
-    createUniComponentFromWebComponent(ExpandDatabaseBlockModal),
-    createUniComponentFromWebComponent(DataViewHeaderToolsSearch),
-    createUniComponentFromWebComponent(DataViewHeaderToolsViewOptions),
-  ],
-});
diff --git a/packages/blocks/src/database-block/table/renderer.ts b/packages/blocks/src/database-block/table/renderer.ts
deleted file mode 100644
index f8cfc63864aa..000000000000
--- a/packages/blocks/src/database-block/table/renderer.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { createIcon } from '../../_common/components/icon/uni-icon.js';
-import { createUniComponentFromWebComponent } from '../../_common/components/uni-component/uni-component.js';
-import { viewRendererManager } from '../common/data-view.js';
-import { DataViewHeaderToolsAddRow } from '../common/header/tools/add-row/add-row.js';
-import { ExpandDatabaseBlockModal } from '../common/header/tools/expand/index.js';
-import { DataViewHeaderToolsFilter } from '../common/header/tools/filter.js';
-import { DataViewHeaderToolsSearch } from '../common/header/tools/search.js';
-import { DataViewHeaderToolsViewOptions } from '../common/header/tools/view-options.js';
-import { DataViewTable } from './table-view.js';
-
-viewRendererManager.register('table', {
-  view: createUniComponentFromWebComponent(DataViewTable),
-  icon: createIcon('DatabaseTableViewIcon'),
-  tools: [
-    createUniComponentFromWebComponent(DataViewHeaderToolsFilter),
-    createUniComponentFromWebComponent(ExpandDatabaseBlockModal),
-    createUniComponentFromWebComponent(DataViewHeaderToolsSearch),
-    createUniComponentFromWebComponent(DataViewHeaderToolsViewOptions),
-    createUniComponentFromWebComponent(DataViewHeaderToolsAddRow),
-  ],
-});
diff --git a/packages/blocks/src/database-block/types.ts b/packages/blocks/src/database-block/types.ts
index 84ade0549d71..62a151d3041d 100644
--- a/packages/blocks/src/database-block/types.ts
+++ b/packages/blocks/src/database-block/types.ts
@@ -1,17 +1,7 @@
-import type { Column } from './table/types.js';
+import type { Column } from './data-view/views/table/types.js';
 
-export type * from './table/types.js';
+export type { Column } from './data-view/views/table/types.js';
 export type ColumnUpdater<T extends Column = Column> = (data: T) => Partial<T>;
-export type ColumnDataUpdater<
-  Data extends Record<string, unknown> = Record<string, unknown>,
-> = (data: Data) => Partial<Data>;
-export type InsertToPosition =
-  | 'end'
-  | 'start'
-  | {
-      id: string;
-      before: boolean;
-    };
 export type Cell<ValueType = unknown> = {
   columnId: Column['id'];
   value: ValueType;
diff --git a/packages/blocks/src/database-block/view-source.ts b/packages/blocks/src/database-block/view-source.ts
new file mode 100644
index 000000000000..b115cdb3c3a2
--- /dev/null
+++ b/packages/blocks/src/database-block/view-source.ts
@@ -0,0 +1,108 @@
+import { Slot } from '@blocksuite/global/utils';
+
+import type { DataViewTypes } from './data-view/common/data-view.js';
+import type {
+  SingleViewSource,
+  ViewSource,
+} from './data-view/common/view-source.js';
+import type { InsertToPosition } from './data-view/types.js';
+import type { DatabaseBlockModel } from './database-model.js';
+
+export class DatabaseBlockViewSource implements ViewSource {
+  constructor(private model: DatabaseBlockModel) {}
+
+  get currentViewId(): string {
+    return this.currentId ?? this.model.views[0].id;
+  }
+
+  private viewMap = new Map<string, SingleViewSource>();
+  private currentId?: string;
+
+  public selectView(id: string): void {
+    this.currentId = id;
+    this.updateSlot.emit();
+  }
+
+  public updateSlot = new Slot();
+
+  public get views(): SingleViewSource[] {
+    return this.model.views.map(v => this.viewGet(v.id));
+  }
+
+  public get currentView(): SingleViewSource {
+    return this.viewGet(this.currentViewId);
+  }
+
+  public get readonly(): boolean {
+    return this.model.doc.readonly;
+  }
+
+  public viewAdd(type: DataViewTypes): string {
+    this.model.doc.captureSync();
+    const view = this.model.addView(type);
+    this.model.applyViewsUpdate();
+    return view.id;
+  }
+
+  public viewGet(id: string): SingleViewSource {
+    let result = this.viewMap.get(id);
+    if (!result) {
+      const getView = () => {
+        return this.model.views.find(v => v.id === id);
+      };
+      const view = getView();
+      if (!view) {
+        throw new Error('view not found');
+      }
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      const self = this;
+      const slot = new Slot();
+      this.updateSlot.pipe(slot);
+      result = {
+        duplicate(): void {
+          self.duplicate(id);
+        },
+        get view() {
+          const view = getView();
+          if (!view) {
+            throw new Error('view not found');
+          }
+          return view;
+        },
+        updateView: updater => {
+          this.model.doc.captureSync();
+          this.model.updateView(id, updater);
+          this.model.applyViewsUpdate();
+        },
+        delete: () => {
+          this.model.doc.captureSync();
+          if (this.model.getViewList().length === 1) {
+            this.model.doc.deleteBlock(this.model);
+            return;
+          }
+          this.model.deleteView(id);
+          this.currentId = undefined;
+          this.model.applyViewsUpdate();
+        },
+        get readonly() {
+          return self.model.doc.readonly;
+        },
+        updateSlot: slot,
+        isDeleted() {
+          return self.model.views.every(v => v.id !== id);
+        },
+      };
+      this.viewMap.set(id, result);
+    }
+    return result;
+  }
+
+  public duplicate(id: string): void {
+    const newId = this.model.duplicateView(id);
+    this.selectView(newId);
+  }
+
+  public moveTo(id: string, position: InsertToPosition): void {
+    this.model.moveViewTo(id, position);
+  }
+}
diff --git a/packages/blocks/src/root-block/widgets/slash-menu/config.ts b/packages/blocks/src/root-block/widgets/slash-menu/config.ts
index 1bcd739abf7e..94c214860017 100644
--- a/packages/blocks/src/root-block/widgets/slash-menu/config.ts
+++ b/packages/blocks/src/root-block/widgets/slash-menu/config.ts
@@ -17,7 +17,6 @@ import {
   DualLinkIcon,
   DuplicateIcon,
   FrameIcon,
-  GroupingIcon,
   ImageIcon20,
   NewDocIcon,
   NowIcon,
@@ -35,6 +34,7 @@ import {
 } from '../../../_common/utils/index.js';
 import { clearMarksOnDiscontinuousInput } from '../../../_common/utils/inline-editor.js';
 import { addSiblingAttachmentBlocks } from '../../../attachment-block/utils.js';
+import { GroupingIcon } from '../../../database-block/data-view/common/icons/index.js';
 import { FigmaIcon } from '../../../embed-figma-block/styles.js';
 import { GithubIcon } from '../../../embed-github-block/styles.js';
 import { LoomIcon } from '../../../embed-loom-block/styles.js';
diff --git a/packages/playground/apps/starter/data/database.ts b/packages/playground/apps/starter/data/database.ts
index 2ee5133b7125..103f642cda64 100644
--- a/packages/playground/apps/starter/data/database.ts
+++ b/packages/playground/apps/starter/data/database.ts
@@ -1,16 +1,15 @@
-import type {
-  DatabaseBlockModel,
-  ListType,
-  ParagraphType,
-} from '@blocksuite/blocks';
 import {
-  checkboxPureColumnConfig,
-  datePureColumnConfig,
+  checkboxColumnModelConfig,
+  type DatabaseBlockModel,
+  dateColumnModelConfig,
   linkPureColumnConfig,
+  type ListType,
   multiSelectColumnConfig,
+  multiSelectPureColumnConfig,
   numberPureColumnConfig,
+  type ParagraphType,
   progressPureColumnConfig,
-  richTextPureColumnConfig,
+  richTextColumnModelConfig,
 } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
 import { type DocCollection, Text } from '@blocksuite/store';
@@ -50,31 +49,31 @@ export const database: InitFn = (collection: DocCollection, id: string) => {
         const database = doc.getBlockById(databaseId) as DatabaseBlockModel;
         database.addColumn(
           'end',
-          numberPureColumnConfig.create(numberPureColumnConfig.name)
+          numberPureColumnConfig.create(numberPureColumnConfig.model.name)
         );
         const richTextId = database.addColumn(
           'end',
-          richTextPureColumnConfig.create(richTextPureColumnConfig.name)
+          richTextColumnModelConfig.create(richTextColumnModelConfig.model.name)
         );
         database.addColumn(
           'end',
-          datePureColumnConfig.create(datePureColumnConfig.name)
+          dateColumnModelConfig.create(dateColumnModelConfig.model.name)
         );
         database.addColumn(
           'end',
-          linkPureColumnConfig.create(linkPureColumnConfig.name)
+          linkPureColumnConfig.create(linkPureColumnConfig.model.name)
         );
         database.addColumn(
           'end',
-          progressPureColumnConfig.create(progressPureColumnConfig.name)
+          progressPureColumnConfig.create(progressPureColumnConfig.model.name)
         );
         database.addColumn(
           'end',
-          checkboxPureColumnConfig.create(checkboxPureColumnConfig.name)
+          checkboxColumnModelConfig.create(checkboxColumnModelConfig.model.name)
         );
         database.addColumn(
           'end',
-          multiSelectColumnConfig.create(multiSelectColumnConfig.name)
+          multiSelectPureColumnConfig.create(multiSelectColumnConfig.model.name)
         );
         database.updateView(database.views[0].id, () => {
           return {
diff --git a/packages/presets/src/fragments/doc-meta-tags/doc-meta-tags.ts b/packages/presets/src/fragments/doc-meta-tags/doc-meta-tags.ts
index 421a8c1d08fd..3c0aa3286452 100644
--- a/packages/presets/src/fragments/doc-meta-tags/doc-meta-tags.ts
+++ b/packages/presets/src/fragments/doc-meta-tags/doc-meta-tags.ts
@@ -1,14 +1,12 @@
 import { WithDisposable } from '@blocksuite/block-std';
 import {
+  ArrowDownSmallIcon,
   DocIcon,
+  DualLinkIcon16,
   LinkedDocIcon,
+  PlusIcon,
   popTagSelect,
   type SelectTag,
-} from '@blocksuite/blocks';
-import {
-  ArrowDownSmallIcon,
-  DualLinkIcon16,
-  PlusIcon,
   TagsIcon,
 } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';

From 1d3c845cb7a27872d6bfc996774ab234d0ebe741 Mon Sep 17 00:00:00 2001
From: zzj3720 <zuozijian1994@gmail.com>
Date: Thu, 11 Apr 2024 03:15:29 +0800
Subject: [PATCH 02/15] refactor(database): support for configuring views from
 out of data-view

---
 .../__tests__/database/database.unit.spec.ts  |  12 +-
 .../quick-action/database-convert-view.ts     |   2 +-
 .../src/data-view-block/data-view-model.ts    |   2 +-
 .../blocks/src/database-block/data-source.ts  |   4 +-
 .../data-view/column/base-cell.ts             |   2 +-
 .../data-view/column/column-config.ts         |   2 +-
 .../data-view/column/manager.ts               |   4 +-
 .../column/presets/link/cell-renderer.ts      |   4 +-
 .../data-view/column/presets/link/define.ts   |   4 +-
 .../presets/multi-select/cell-renderer.ts     |   9 +-
 .../column/presets/multi-select/define.ts     |   8 +-
 .../column/presets/number/cell-renderer.ts    |   4 +-
 .../data-view/column/presets/number/define.ts |   6 +-
 .../column/presets/progress/cell-renderer.ts  |   4 +-
 .../column/presets/progress/define.ts         |  32 +--
 .../{datasource => data-source}/base.ts       |   8 +-
 .../data-view/common/data-stats.ts            |   2 +-
 .../common/datasource/all-doc-datasource.ts   | 168 ---------------
 .../common/datasource/datasource-manager.ts   |  55 -----
 .../common/datasource/tags-datasource.ts      | 201 ------------------
 .../data-view/common/detail/detail.ts         |   4 +-
 .../data-view/common/detail/field.ts          |   2 +-
 .../data-view/common/detail/layout.ts         |   2 +-
 .../data-view/common/detail/selection.ts      |   6 +-
 .../data-view/common/filter/filter-bar.ts     |   2 +-
 .../data-view/common/group-by/helper.ts       |   2 +-
 .../data-view/common/group-by/setting.ts      |   4 +-
 .../data-view/common/header-area/text.ts      |   4 +-
 .../common/header/tools/base-tool.ts          |   7 +-
 .../data-view/common/header/tools/search.ts   |   4 +-
 .../data-view/common/header/tools/tools.ts    |   7 +-
 .../common/header/tools/view-options.ts       |   4 +-
 .../data-view/common/header/views.ts          |  37 ++--
 .../data-view/common/properties.ts            |   2 +-
 .../data-view/common/view-source.ts           |   8 +-
 .../src/database-block/data-view/data-view.ts |  48 ++---
 .../src/database-block/data-view/index.ts     |   6 +-
 .../src/database-block/data-view/types.ts     |   4 +-
 .../data-view-base.ts}                        |   4 +-
 .../{common => view}/data-view-manager.ts     |  41 ++--
 .../data-view/{common => view}/data-view.ts   |  95 ++++-----
 .../database-block/data-view/view/index.ts    |   7 +
 .../{views => view/presets}/kanban/card.ts    |   8 +-
 .../{views => view/presets}/kanban/cell.ts    |   4 +-
 .../presets}/kanban/controller/clipboard.ts   |   0
 .../presets}/kanban/controller/drag.ts        |   8 +-
 .../presets}/kanban/controller/hotkeys.ts     |   0
 .../presets}/kanban/controller/selection.ts   |   0
 .../{views => view/presets}/kanban/define.ts  |  37 ++--
 .../{views => view/presets}/kanban/group.ts   |  10 +-
 .../presets/kanban}/header-cell.ts            |   4 +-
 .../{views => view/presets}/kanban/header.ts  |   2 +-
 .../presets}/kanban/kanban-view-manager.ts    |  52 ++---
 .../presets}/kanban/kanban-view.ts            |  14 +-
 .../{views => view/presets}/kanban/menu.ts    |   8 +-
 .../data-view/view/presets/kanban/renderer.ts |  19 ++
 .../{views => view/presets}/kanban/types.ts   |   0
 .../table/components/cell-container.ts        |   6 +-
 .../components/column-header/column-header.ts |   4 +-
 .../column-header/column-renderer.ts          |   2 +-
 .../column-header/database-header-column.ts   |  14 +-
 .../table/components/column-header/styles.ts  |   0
 .../column-header/vertical-indicator.ts       |   4 +-
 .../table/components/column-stats-cell.ts     |   6 +-
 .../presets}/table/components/column-stats.ts |   0
 .../presets/table/components/header-cell.ts   |  18 ++
 .../presets}/table/components/menu.ts         |  15 +-
 .../presets}/table/components/row.ts          |   8 +-
 .../{views => view/presets}/table/consts.ts   |   0
 .../presets}/table/controller/clipboard.ts    |   0
 .../presets}/table/controller/drag.ts         |   4 +-
 .../presets}/table/controller/hotkeys.ts      |   0
 .../presets}/table/controller/selection.ts    |   4 +-
 .../{views => view/presets}/table/define.ts   |  20 +-
 .../{views => view/presets}/table/group.ts    |  14 +-
 .../data-view/view/presets/table/renderer.ts  |  21 ++
 .../{views => view/presets}/table/stat-ops.ts |   0
 .../presets}/table/table-view-manager.ts      |  54 ++---
 .../presets}/table/table-view.ts              |  16 +-
 .../{views => view/presets}/table/types.ts    |   0
 .../data-view/views/kanban/header-cell.ts     |  18 --
 .../data-view/views/kanban/renderer.ts        |  19 --
 .../data-view/views/table/renderer.ts         |  21 --
 .../src/database-block/database-block.ts      |  15 +-
 .../src/database-block/database-model.ts      |  20 +-
 .../src/database-block/database-service.ts    |   2 +-
 .../detail-panel/block-renderer.ts            |   6 +-
 packages/blocks/src/database-block/index.ts   |   8 +-
 packages/blocks/src/database-block/types.ts   |   4 +-
 .../blocks/src/database-block/view-source.ts  |  18 +-
 .../blocks/src/database-block/views/index.ts  |  11 +
 .../playground/apps/starter/data/database.ts  |  18 +-
 92 files changed, 473 insertions(+), 896 deletions(-)
 rename packages/blocks/src/database-block/data-view/common/{datasource => data-source}/base.ts (94%)
 delete mode 100644 packages/blocks/src/database-block/data-view/common/datasource/all-doc-datasource.ts
 delete mode 100644 packages/blocks/src/database-block/data-view/common/datasource/datasource-manager.ts
 delete mode 100644 packages/blocks/src/database-block/data-view/common/datasource/tags-datasource.ts
 rename packages/blocks/src/database-block/data-view/{common/base-data-view.ts => view/data-view-base.ts} (94%)
 rename packages/blocks/src/database-block/data-view/{common => view}/data-view-manager.ts (91%)
 rename packages/blocks/src/database-block/data-view/{common => view}/data-view.ts (66%)
 create mode 100644 packages/blocks/src/database-block/data-view/view/index.ts
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/kanban/card.ts (96%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/kanban/cell.ts (97%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/kanban/controller/clipboard.ts (100%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/kanban/controller/drag.ts (96%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/kanban/controller/hotkeys.ts (100%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/kanban/controller/selection.ts (100%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/kanban/define.ts (59%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/kanban/group.ts (93%)
 rename packages/blocks/src/database-block/data-view/{views/table/components => view/presets/kanban}/header-cell.ts (79%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/kanban/header.ts (96%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/kanban/kanban-view-manager.ts (84%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/kanban/kanban-view.ts (93%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/kanban/menu.ts (92%)
 create mode 100644 packages/blocks/src/database-block/data-view/view/presets/kanban/renderer.ts
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/kanban/types.ts (100%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/components/cell-container.ts (94%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/components/column-header/column-header.ts (96%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/components/column-header/column-renderer.ts (96%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/components/column-header/database-header-column.ts (97%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/components/column-header/styles.ts (100%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/components/column-header/vertical-indicator.ts (97%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/components/column-stats-cell.ts (95%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/components/column-stats.ts (100%)
 create mode 100644 packages/blocks/src/database-block/data-view/view/presets/table/components/header-cell.ts
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/components/menu.ts (89%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/components/row.ts (96%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/consts.ts (100%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/controller/clipboard.ts (100%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/controller/drag.ts (97%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/controller/hotkeys.ts (100%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/controller/selection.ts (99%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/define.ts (56%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/group.ts (93%)
 create mode 100644 packages/blocks/src/database-block/data-view/view/presets/table/renderer.ts
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/stat-ops.ts (100%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/table-view-manager.ts (85%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/table-view.ts (93%)
 rename packages/blocks/src/database-block/data-view/{views => view/presets}/table/types.ts (100%)
 delete mode 100644 packages/blocks/src/database-block/data-view/views/kanban/header-cell.ts
 delete mode 100644 packages/blocks/src/database-block/data-view/views/kanban/renderer.ts
 delete mode 100644 packages/blocks/src/database-block/data-view/views/table/renderer.ts
 create mode 100644 packages/blocks/src/database-block/views/index.ts

diff --git a/packages/blocks/src/__tests__/database/database.unit.spec.ts b/packages/blocks/src/__tests__/database/database.unit.spec.ts
index 3fe703c0b3df..99294feb5aaf 100644
--- a/packages/blocks/src/__tests__/database/database.unit.spec.ts
+++ b/packages/blocks/src/__tests__/database/database.unit.spec.ts
@@ -12,7 +12,7 @@ import { DatabaseBlockSchema } from '../../database-block/database-model.js';
 import {
   type Cell,
   type Column,
-  numberPureColumnConfig,
+  numberColumnModelConfig,
   richTextColumnModelConfig,
 } from '../../database-block/index.js';
 import { NoteBlockSchema } from '../../note-block/note-model.js';
@@ -82,7 +82,7 @@ describe('DatabaseManager', () => {
     ) as DatabaseBlockModel;
     db = databaseModel;
 
-    col1 = db.addColumn('end', numberPureColumnConfig.create('Number'));
+    col1 = db.addColumn('end', numberColumnModelConfig.create('Number'));
     col2 = db.addColumn(
       'end',
       selectColumnModelConfig.create('Single Select', { options: selection })
@@ -120,7 +120,7 @@ describe('DatabaseManager', () => {
 
   test('getColumn', () => {
     const column = {
-      ...numberPureColumnConfig.create('testColumnId'),
+      ...numberColumnModelConfig.create('testColumnId'),
       id: 'testColumnId',
     };
     db.addColumn('end', column);
@@ -130,7 +130,7 @@ describe('DatabaseManager', () => {
   });
 
   test('addColumn', () => {
-    const column = numberPureColumnConfig.create('Test Column');
+    const column = numberColumnModelConfig.create('Test Column');
     const id = db.addColumn('end', column);
     const result = db.getColumn(id);
 
@@ -140,7 +140,7 @@ describe('DatabaseManager', () => {
 
   test('deleteColumn', () => {
     const column = {
-      ...numberPureColumnConfig.create('Test Column'),
+      ...numberColumnModelConfig.create('Test Column'),
       id: 'testColumnId',
     };
     db.addColumn('end', column);
@@ -159,7 +159,7 @@ describe('DatabaseManager', () => {
       noteBlockId
     );
     const column = {
-      ...numberPureColumnConfig.create('Test Column'),
+      ...numberColumnModelConfig.create('Test Column'),
       id: 'testColumnId',
     };
     const cell: Cell = {
diff --git a/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts b/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts
index ea5e5221f99f..f452bcf3f256 100644
--- a/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts
+++ b/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts
@@ -4,8 +4,8 @@ import { assertExists } from '@blocksuite/global/utils';
 import { css, html, LitElement, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import type { DataViewTypes } from '../../../database-block/data-view/common/data-view.js';
 import { DatabaseSearchClose } from '../../../database-block/data-view/common/icons/index.js';
+import type { DataViewTypes } from '../../../database-block/data-view/view/data-view.js';
 import type { DatabaseBlockModel } from '../../../database-block/database-model.js';
 import {
   DatabaseKanbanViewIcon,
diff --git a/packages/blocks/src/data-view-block/data-view-model.ts b/packages/blocks/src/data-view-block/data-view-model.ts
index b9fa2793b35a..36e3206e3e7c 100644
--- a/packages/blocks/src/data-view-block/data-view-model.ts
+++ b/packages/blocks/src/data-view-block/data-view-model.ts
@@ -1,7 +1,7 @@
 import { BlockModel, defineBlockSchema } from '@blocksuite/store';
 
 import type { FilterGroup } from '../database-block/data-view/common/ast.js';
-import type { DataSourceConfig } from '../database-block/data-view/common/datasource/base.js';
+import type { DataSourceConfig } from '../database-block/data-view/common/data-source/base.js';
 
 export type DataProperty = {
   id: string;
diff --git a/packages/blocks/src/database-block/data-source.ts b/packages/blocks/src/database-block/data-source.ts
index 32a55e40f9c0..516f3efe73e2 100644
--- a/packages/blocks/src/database-block/data-source.ts
+++ b/packages/blocks/src/database-block/data-source.ts
@@ -22,8 +22,8 @@ import {
 import { type DatabaseBlockModel } from './database-model.js';
 import { BlockRenderer } from './detail-panel/block-renderer.js';
 
-export class Datasource extends BaseDataSource {
-  private _model: DatabaseBlockModel;
+export class DatabaseBlockDataSource extends BaseDataSource {
+  private readonly _model: DatabaseBlockModel;
   private _batch = 0;
 
   get doc() {
diff --git a/packages/blocks/src/database-block/data-view/column/base-cell.ts b/packages/blocks/src/database-block/data-view/column/base-cell.ts
index 29154f92f5b5..ab05c3830f92 100644
--- a/packages/blocks/src/database-block/data-view/column/base-cell.ts
+++ b/packages/blocks/src/database-block/data-view/column/base-cell.ts
@@ -4,7 +4,7 @@ import { property } from 'lit/decorators.js';
 import type {
   DataViewColumnManager,
   DataViewManager,
-} from '../common/data-view-manager.js';
+} from '../view/data-view-manager.js';
 import type { CellRenderProps, DataViewCellLifeCycle } from './manager.js';
 
 export abstract class BaseCellRenderer<
diff --git a/packages/blocks/src/database-block/data-view/column/column-config.ts b/packages/blocks/src/database-block/data-view/column/column-config.ts
index 5a19817f9975..8ff79ca9c5e9 100644
--- a/packages/blocks/src/database-block/data-view/column/column-config.ts
+++ b/packages/blocks/src/database-block/data-view/column/column-config.ts
@@ -1,5 +1,5 @@
 import type { TType } from '../logical/typesystem.js';
-import type { StatCalcOpType } from '../views/table/types.js';
+import type { StatCalcOpType } from '../view/presets/table/types.js';
 import type {
   GetCellDataFromConfig,
   GetColumnDataFromConfig,
diff --git a/packages/blocks/src/database-block/data-view/column/manager.ts b/packages/blocks/src/database-block/data-view/column/manager.ts
index 0d2963140ec4..1f64e7a8a072 100644
--- a/packages/blocks/src/database-block/data-view/column/manager.ts
+++ b/packages/blocks/src/database-block/data-view/column/manager.ts
@@ -1,8 +1,8 @@
+import type { UniComponent } from '../utils/uni-component/index.js';
 import type {
   DataViewColumnManager,
   DataViewManager,
-} from '../common/data-view-manager.js';
-import type { UniComponent } from '../utils/uni-component/index.js';
+} from '../view/data-view-manager.js';
 import type { ColumnConfig } from './column-config.js';
 
 export interface CellRenderProps<
diff --git a/packages/blocks/src/database-block/data-view/column/presets/link/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/link/cell-renderer.ts
index 7e31012c667f..3bd082e36d38 100644
--- a/packages/blocks/src/database-block/data-view/column/presets/link/cell-renderer.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/link/cell-renderer.ts
@@ -11,7 +11,7 @@ import { stopPropagation } from '../../../utils/event.js';
 import { createIcon } from '../../../utils/uni-icon.js';
 import { BaseCellRenderer } from '../../base-cell.js';
 import { createFromBaseCellRenderer } from '../../renderer.js';
-import { linkPureColumnConfig } from './define.js';
+import { linkColumnModelConfig } from './define.js';
 
 @customElement('affine-database-link-cell')
 export class LinkCell extends BaseCellRenderer<string> {
@@ -182,7 +182,7 @@ export class LinkCellEditing extends BaseCellRenderer<string> {
   }
 }
 
-export const linkColumnConfig = linkPureColumnConfig.renderConfig({
+export const linkColumnConfig = linkColumnModelConfig.renderConfig({
   icon: createIcon('LinkIcon'),
   cellRenderer: {
     view: createFromBaseCellRenderer(LinkCell),
diff --git a/packages/blocks/src/database-block/data-view/column/presets/link/define.ts b/packages/blocks/src/database-block/data-view/column/presets/link/define.ts
index 54c65dcb5183..10d046780071 100644
--- a/packages/blocks/src/database-block/data-view/column/presets/link/define.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/link/define.ts
@@ -4,10 +4,10 @@ import { columnType } from '../../column-config.js';
 export const linkColumnType = columnType('link');
 declare global {
   interface ColumnConfigMap {
-    [linkColumnType.type]: typeof linkPureColumnConfig.model;
+    [linkColumnType.type]: typeof linkColumnModelConfig.model;
   }
 }
-export const linkPureColumnConfig = linkColumnType.modelConfig<string>({
+export const linkColumnModelConfig = linkColumnType.modelConfig<string>({
   name: 'Link',
   type: () => tString.create(),
   defaultData: () => ({}),
diff --git a/packages/blocks/src/database-block/data-view/column/presets/multi-select/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/multi-select/cell-renderer.ts
index 406685f0f80a..2acb9830ddf9 100644
--- a/packages/blocks/src/database-block/data-view/column/presets/multi-select/cell-renderer.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/multi-select/cell-renderer.ts
@@ -12,7 +12,7 @@ import { createIcon } from '../../../utils/uni-icon.js';
 import { BaseCellRenderer } from '../../base-cell.js';
 import { createFromBaseCellRenderer } from '../../renderer.js';
 import type { SelectColumnData } from '../../types.js';
-import { multiSelectPureColumnConfig } from './define.js';
+import { multiSelectColumnModelConfig } from './define.js';
 
 @customElement('affine-database-multi-select-cell')
 export class MultiSelectCell extends BaseCellRenderer<
@@ -89,12 +89,11 @@ export class MultiSelectCellEditing extends BaseCellRenderer<
   }
 }
 
-export const multiSelectColumnConfig = multiSelectPureColumnConfig.renderConfig(
-  {
+export const multiSelectColumnConfig =
+  multiSelectColumnModelConfig.renderConfig({
     icon: createIcon('DatabaseMultiSelect'),
     cellRenderer: {
       view: createFromBaseCellRenderer(MultiSelectCell),
       edit: createFromBaseCellRenderer(MultiSelectCellEditing),
     },
-  }
-);
+  });
diff --git a/packages/blocks/src/database-block/data-view/column/presets/multi-select/define.ts b/packages/blocks/src/database-block/data-view/column/presets/multi-select/define.ts
index f63e108ab107..075799635489 100644
--- a/packages/blocks/src/database-block/data-view/column/presets/multi-select/define.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/multi-select/define.ts
@@ -10,10 +10,10 @@ import type { SelectColumnData } from '../../types.js';
 export const multiSelectColumnType = columnType('multi-select');
 declare global {
   interface ColumnConfigMap {
-    [multiSelectColumnType.type]: typeof multiSelectPureColumnConfig.model;
+    [multiSelectColumnType.type]: typeof multiSelectColumnModelConfig.model;
   }
 }
-export const multiSelectPureColumnConfig = multiSelectColumnType.modelConfig<
+export const multiSelectColumnModelConfig = multiSelectColumnType.modelConfig<
   string[],
   SelectColumnData
 >({
@@ -69,11 +69,11 @@ export const multiSelectPureColumnConfig = multiSelectColumnType.modelConfig<
   },
   cellToJson: data => data ?? null,
 });
-multiSelectPureColumnConfig.addConvert('select', (column, cells) => ({
+multiSelectColumnModelConfig.addConvert('select', (column, cells) => ({
   column,
   cells: cells.map(v => v?.[0]),
 }));
-multiSelectPureColumnConfig.addConvert('rich-text', (column, cells) => {
+multiSelectColumnModelConfig.addConvert('rich-text', (column, cells) => {
   const optionMap = Object.fromEntries(column.options.map(v => [v.id, v]));
   return {
     column: {},
diff --git a/packages/blocks/src/database-block/data-view/column/presets/number/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/number/cell-renderer.ts
index 410797077ecb..3a695ff13532 100644
--- a/packages/blocks/src/database-block/data-view/column/presets/number/cell-renderer.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/number/cell-renderer.ts
@@ -6,7 +6,7 @@ import { stopPropagation } from '../../../utils/event.js';
 import { createIcon } from '../../../utils/uni-icon.js';
 import { BaseCellRenderer } from '../../base-cell.js';
 import { createFromBaseCellRenderer } from '../../renderer.js';
-import { numberPureColumnConfig } from './define.js';
+import { numberColumnModelConfig } from './define.js';
 
 @customElement('affine-database-number-cell')
 export class NumberCell extends BaseCellRenderer<number> {
@@ -129,7 +129,7 @@ export class NumberCellEditing extends BaseCellRenderer<number> {
   }
 }
 
-export const numberColumnConfig = numberPureColumnConfig.renderConfig({
+export const numberColumnConfig = numberColumnModelConfig.renderConfig({
   icon: createIcon('DatabaseNumber'),
   cellRenderer: {
     view: createFromBaseCellRenderer(NumberCell),
diff --git a/packages/blocks/src/database-block/data-view/column/presets/number/define.ts b/packages/blocks/src/database-block/data-view/column/presets/number/define.ts
index c813f138b4c9..c48705aeb190 100644
--- a/packages/blocks/src/database-block/data-view/column/presets/number/define.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/number/define.ts
@@ -7,10 +7,10 @@ export const numberColumnType = columnType('number');
 
 declare global {
   interface ColumnConfigMap {
-    [numberColumnType.type]: typeof numberPureColumnConfig.model;
+    [numberColumnType.type]: typeof numberColumnModelConfig.model;
   }
 }
-export const numberPureColumnConfig = numberColumnType.modelConfig<
+export const numberColumnModelConfig = numberColumnType.modelConfig<
   number,
   {
     decimal: number;
@@ -28,7 +28,7 @@ export const numberPureColumnConfig = numberColumnType.modelConfig<
   },
   cellToJson: data => data ?? null,
 });
-numberPureColumnConfig.addConvert('rich-text', (_column, cells) => ({
+numberColumnModelConfig.addConvert('rich-text', (_column, cells) => ({
   column: {},
   cells: cells.map(v => new Text(v?.toString()).yText),
 }));
diff --git a/packages/blocks/src/database-block/data-view/column/presets/progress/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/progress/cell-renderer.ts
index 59dfe27fc850..4e1f37f667d4 100644
--- a/packages/blocks/src/database-block/data-view/column/presets/progress/cell-renderer.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/progress/cell-renderer.ts
@@ -6,7 +6,7 @@ import { startDrag } from '../../../utils/drag.js';
 import { createIcon } from '../../../utils/uni-icon.js';
 import { BaseCellRenderer } from '../../base-cell.js';
 import { createFromBaseCellRenderer } from '../../renderer.js';
-import { progressPureColumnConfig } from './define.js';
+import { progressColumnModelConfig } from './define.js';
 
 const styles = css`
   affine-database-progress-cell-editing {
@@ -230,7 +230,7 @@ export class ProgressCellEditing extends BaseCellRenderer<number> {
   }
 }
 
-export const progressColumnConfig = progressPureColumnConfig.renderConfig({
+export const progressColumnConfig = progressColumnModelConfig.renderConfig({
   icon: createIcon('DatabaseProgress'),
   cellRenderer: {
     view: createFromBaseCellRenderer(ProgressCell),
diff --git a/packages/blocks/src/database-block/data-view/column/presets/progress/define.ts b/packages/blocks/src/database-block/data-view/column/presets/progress/define.ts
index 5ceb22a4440c..b2b6b85e9eed 100644
--- a/packages/blocks/src/database-block/data-view/column/presets/progress/define.ts
+++ b/packages/blocks/src/database-block/data-view/column/presets/progress/define.ts
@@ -7,23 +7,25 @@ export const progressColumnType = columnType('progress');
 
 declare global {
   interface ColumnConfigMap {
-    [progressColumnType.type]: typeof progressPureColumnConfig.model;
+    [progressColumnType.type]: typeof progressColumnModelConfig.model;
   }
 }
-export const progressPureColumnConfig = progressColumnType.modelConfig<number>({
-  name: 'Progress',
-  type: () => tNumber.create(),
-  defaultData: () => ({}),
-  cellToString: data => data?.toString() ?? '',
-  cellFromString: data => {
-    const num = data ? Number(data) : NaN;
-    return {
-      value: isNaN(num) ? null : num,
-    };
-  },
-  cellToJson: data => data ?? null,
-});
-progressPureColumnConfig.addConvert('rich-text', (_column, cells) => ({
+export const progressColumnModelConfig = progressColumnType.modelConfig<number>(
+  {
+    name: 'Progress',
+    type: () => tNumber.create(),
+    defaultData: () => ({}),
+    cellToString: data => data?.toString() ?? '',
+    cellFromString: data => {
+      const num = data ? Number(data) : NaN;
+      return {
+        value: isNaN(num) ? null : num,
+      };
+    },
+    cellToJson: data => data ?? null,
+  }
+);
+progressColumnModelConfig.addConvert('rich-text', (_column, cells) => ({
   column: {},
   cells: cells.map(v => new Text(v?.toString()).yText),
 }));
diff --git a/packages/blocks/src/database-block/data-view/common/datasource/base.ts b/packages/blocks/src/database-block/data-view/common/data-source/base.ts
similarity index 94%
rename from packages/blocks/src/database-block/data-view/common/datasource/base.ts
rename to packages/blocks/src/database-block/data-view/common/data-source/base.ts
index 7a0769ccf769..879b5d63b557 100644
--- a/packages/blocks/src/database-block/data-view/common/datasource/base.ts
+++ b/packages/blocks/src/database-block/data-view/common/data-source/base.ts
@@ -3,10 +3,10 @@ import type { Disposable, Slot } from '@blocksuite/global/utils';
 import type { ColumnMeta } from '../../column/column-config.js';
 import type { ColumnConfig } from '../../column/index.js';
 import type { InsertToPosition } from '../../types.js';
-import type { UniComponent } from '../../utils/uni-component/uni-component.js';
-import { DEFAULT_COLUMN_WIDTH } from '../../views/table/consts.js';
-import type { StatCalcOpType } from '../../views/table/types.js';
-import type { DataViewManager } from '../data-view-manager.js';
+import type { UniComponent } from '../../utils/uni-component/index.js';
+import type { DataViewManager } from '../../view/data-view-manager.js';
+import { DEFAULT_COLUMN_WIDTH } from '../../view/presets/table/consts.js';
+import type { StatCalcOpType } from '../../view/presets/table/types.js';
 
 export type DetailSlotProps = { view: DataViewManager; rowId: string };
 
diff --git a/packages/blocks/src/database-block/data-view/common/data-stats.ts b/packages/blocks/src/database-block/data-view/common/data-stats.ts
index 7889b29fd9c8..3885273a69fa 100644
--- a/packages/blocks/src/database-block/data-view/common/data-stats.ts
+++ b/packages/blocks/src/database-block/data-view/common/data-stats.ts
@@ -1,7 +1,7 @@
 import { assertEquals } from '@blocksuite/global/utils';
 
 import type { SelectTag } from '../utils/tags/multi-tag-select.js';
-import type { DataViewColumnManager } from './data-view-manager.js';
+import type { DataViewColumnManager } from '../view/data-view-manager.js';
 
 /**
  * Class for computing statistics on a DataViewColumnManager column.
diff --git a/packages/blocks/src/database-block/data-view/common/datasource/all-doc-datasource.ts b/packages/blocks/src/database-block/data-view/common/datasource/all-doc-datasource.ts
deleted file mode 100644
index 9017dd745bbc..000000000000
--- a/packages/blocks/src/database-block/data-view/common/datasource/all-doc-datasource.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-import { type EditorHost } from '@blocksuite/block-std';
-import { assertExists, Slot } from '@blocksuite/global/utils';
-import { type Doc, type DocCollection } from '@blocksuite/store';
-
-import type { ColumnMeta } from '../../column/column-config.js';
-import { type ColumnConfig } from '../../column/index.js';
-import { multiSelectPureColumnConfig } from '../../column/presets/multi-select/define.js';
-import { numberPureColumnConfig } from '../../column/presets/number/define.js';
-import { textColumnModelConfig } from '../../column/presets/text/define.js';
-import type { InsertToPosition } from '../../types.js';
-import type { StatCalcOpType } from '../../views/table/types.js';
-import { type AllDocDataSourceConfig, BaseDataSource } from './base.js';
-
-export class AllDocDataSource extends BaseDataSource {
-  private collection: DocCollection;
-
-  public get rows(): string[] {
-    return Array.from(this.collection.docs.keys());
-  }
-
-  private propertiesMap: Record<
-    string,
-    {
-      type: string;
-      getValue: (doc: Doc) => unknown;
-      setValue?: (doc: Doc, value: unknown) => void;
-      getData?: () => Record<string, unknown>;
-      changeData?: (data: Record<string, unknown>) => void;
-    }
-  > = {
-    title: {
-      type: textColumnModelConfig.type,
-      getValue: doc => doc.meta?.title,
-      setValue: (doc, value) => {
-        assertExists(doc.meta);
-        doc.meta.title = `${value ?? ''}`;
-      },
-    },
-    tags: {
-      type: multiSelectPureColumnConfig.type,
-      getValue: doc => doc.meta?.tags,
-      setValue: (doc, value) => {
-        assertExists(doc.meta);
-        doc.meta.tags = value as string[];
-      },
-      getData: () => ({
-        options: this.collection.meta.properties.tags?.options ?? [],
-      }),
-      changeData: data => {
-        this.collection.meta.setProperties({
-          ...this.collection.meta.properties,
-          tags: data as never,
-        });
-      },
-    },
-    createDate: {
-      type: numberPureColumnConfig.type,
-      getValue: doc => doc.meta?.createDate,
-    },
-  };
-
-  public get properties(): string[] {
-    return Object.keys(this.propertiesMap);
-  }
-
-  constructor(host: EditorHost, _config: AllDocDataSourceConfig) {
-    super();
-    this.collection = host.doc.collection;
-    host.doc.collection.meta.docMetaUpdated.pipe(this.slots.update);
-  }
-
-  public cellChangeValue(
-    rowId: string,
-    propertyId: string,
-    value: unknown
-  ): void {
-    const doc = this.collection.getDoc(rowId);
-    assertExists(doc);
-    this.propertiesMap[propertyId]?.setValue?.(doc, value);
-  }
-
-  public override cellGetRenderValue(
-    rowId: string,
-    propertyId: string
-  ): unknown {
-    return this.cellGetValue(rowId, propertyId);
-  }
-
-  public cellGetValue(rowId: string, propertyId: string): unknown {
-    const doc = this.collection.getDoc(rowId);
-    assertExists(doc);
-    return this.propertiesMap[propertyId]?.getValue(doc);
-  }
-
-  public propertyAdd(_insertPosition: InsertToPosition | number): string {
-    throw new Error('not support');
-  }
-
-  public propertyChangeData(
-    propertyId: string,
-    data: Record<string, unknown>
-  ): void {
-    this.propertiesMap[propertyId]?.changeData?.(data);
-  }
-
-  public propertyChangeName(_propertyId: string, _name: string): void {
-    // not support
-  }
-
-  public propertyChangeStatCalcOp(
-    _propertyId: string,
-    _type: StatCalcOpType
-  ): void {
-    // no support
-  }
-
-  public propertyChangeType(_propertyId: string, _type: string): void {
-    // not support
-  }
-
-  public propertyDelete(_id: string): void {
-    // not support
-  }
-
-  public propertyDuplicate(_columnId: string): string {
-    throw new Error('not support');
-  }
-
-  public propertyGetData(propertyId: string): Record<string, unknown> {
-    return this.propertiesMap[propertyId]?.getData?.() ?? {};
-  }
-
-  public propertyGetName(propertyId: string): string {
-    return propertyId;
-  }
-
-  public propertyGetType(propertyId: string): string {
-    return this.propertiesMap[propertyId].type;
-  }
-
-  public propertyGetStatCalcOp(_propertyId: string): StatCalcOpType {
-    return 'none';
-  }
-
-  public rowAdd(_insertPosition: InsertToPosition | number): string {
-    return this.collection.createDoc().id;
-  }
-
-  public rowDelete(ids: string[]): void {
-    ids.forEach(id => this.collection.removeDoc(id));
-  }
-
-  public slots = {
-    update: new Slot(),
-  };
-
-  public allPropertyConfig: ColumnConfig[] = [];
-
-  public rowMove(rowId: string, position: InsertToPosition): void {
-    // not support
-    rowId;
-    position;
-  }
-
-  public getPropertyMeta(_type: string): ColumnMeta {
-    throw new Error('not support');
-  }
-}
diff --git a/packages/blocks/src/database-block/data-view/common/datasource/datasource-manager.ts b/packages/blocks/src/database-block/data-view/common/datasource/datasource-manager.ts
deleted file mode 100644
index 128c6f779f08..000000000000
--- a/packages/blocks/src/database-block/data-view/common/datasource/datasource-manager.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { EditorHost } from '@blocksuite/block-std';
-
-import { Datasource } from '../../../data-source.js';
-import type { DatabaseBlockModel } from '../../../database-model.js';
-import { AllDocDataSource } from './all-doc-datasource.js';
-import type {
-  AllDocDataSourceConfig,
-  DatabaseBlockDataSourceConfig,
-  DataSource,
-  DataSourceConfig,
-  GetConfig,
-  TagsDataSourceConfig,
-} from './base.js';
-import { TagsDataSource } from './tags-datasource.js';
-
-const dataSourceMap: {
-  [K in DataSourceConfig['type']]: {
-    title: (host: EditorHost, config: GetConfig<K>) => string;
-    constructor: new (host: EditorHost, config: GetConfig<K>) => DataSource;
-  };
-} = {
-  'database-block': {
-    title: (host: EditorHost, config: DatabaseBlockDataSourceConfig) => {
-      const dbBlock = host.doc.collection
-        .getDoc(config.pageId)
-        ?.getBlockById(config.blockId) as DatabaseBlockModel;
-      return dbBlock?.title.toString() ?? '';
-    },
-    constructor: Datasource,
-  },
-  'all-pages': {
-    title: (_host: EditorHost, _config: AllDocDataSourceConfig) => {
-      return 'All Pages';
-    },
-    constructor: AllDocDataSource,
-  },
-  tags: {
-    title: (_host: EditorHost, _config: TagsDataSourceConfig) => {
-      return 'Tags';
-    },
-    constructor: TagsDataSource,
-  },
-};
-export const createDataSource = (
-  host: EditorHost,
-  config: DataSourceConfig
-): DataSource => {
-  return new dataSourceMap[config.type].constructor(host, config as never);
-};
-export const getDataSourceTitle = (
-  host: EditorHost,
-  config: DataSourceConfig
-): string => {
-  return dataSourceMap[config.type].title(host, config as never);
-};
diff --git a/packages/blocks/src/database-block/data-view/common/datasource/tags-datasource.ts b/packages/blocks/src/database-block/data-view/common/datasource/tags-datasource.ts
deleted file mode 100644
index f58f0a89d262..000000000000
--- a/packages/blocks/src/database-block/data-view/common/datasource/tags-datasource.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-import { type EditorHost } from '@blocksuite/block-std';
-import { assertExists, Slot } from '@blocksuite/global/utils';
-import { type DocCollection, nanoid } from '@blocksuite/store';
-
-import type { ColumnMeta } from '../../column/column-config.js';
-import { type ColumnConfig } from '../../column/index.js';
-import { selectColumnModelConfig } from '../../column/presets/select/define.js';
-import { textColumnModelConfig } from '../../column/presets/text/define.js';
-import type { InsertToPosition } from '../../types.js';
-import { getTagColor, selectOptionColors } from '../../utils/tags/colors.js';
-import type { SelectTag } from '../../utils/tags/multi-tag-select.js';
-import type { StatCalcOpType } from '../../views/table/types.js';
-import { BaseDataSource, type TagsDataSourceConfig } from './base.js';
-
-export class TagsDataSource extends BaseDataSource {
-  private meta: DocCollection['meta'];
-
-  public rowMove(rowId: string, position: InsertToPosition): void {
-    // not support
-    rowId;
-    position;
-  }
-
-  public get rows(): string[] {
-    return this.tags.map(v => v.id);
-  }
-
-  private propertiesMap: Record<
-    string,
-    {
-      type: string;
-      getValue: (tag: SelectTag) => unknown;
-      setValue?: (tag: SelectTag, value: unknown) => void;
-      getData?: () => Record<string, unknown>;
-      changeData?: (data: Record<string, unknown>) => void;
-    }
-  > = {
-    value: {
-      type: textColumnModelConfig.type,
-      getValue: tag => tag.value,
-      setValue: (tag, value) => {
-        this.changeTag({
-          ...tag,
-          value: `${value ?? ''}`,
-        });
-      },
-    },
-    color: {
-      type: selectColumnModelConfig.type,
-      getValue: tag => tag.color,
-      setValue: (tag, value) => {
-        this.changeTag({
-          ...tag,
-          color: `${value ?? ''}`,
-        });
-      },
-      getData: () => ({
-        options: selectOptionColors.map(v => ({
-          id: v.color,
-          value: v.name,
-          color: v.color,
-        })),
-      }),
-    },
-    parent: {
-      type: selectColumnModelConfig.type,
-      getData: () => ({ options: this.meta.properties.tags?.options ?? [] }),
-      getValue: tag => tag.parentId,
-      setValue: (tag, value) => {
-        this.changeTag({
-          ...tag,
-          parentId: `${value ?? ''}`,
-        });
-      },
-    },
-  };
-
-  public get properties(): string[] {
-    return Object.keys(this.propertiesMap);
-  }
-
-  constructor(host: EditorHost, _config: TagsDataSourceConfig) {
-    super();
-    this.meta = host.doc.collection.meta;
-    host.doc.collection.meta.docMetaUpdated.pipe(this.slots.update);
-  }
-
-  public cellChangeValue(
-    rowId: string,
-    propertyId: string,
-    value: unknown
-  ): void {
-    const tag = this.tags.find(v => v.id === rowId);
-    if (tag) {
-      this.propertiesMap[propertyId]?.setValue?.(tag, value);
-    }
-  }
-
-  public override cellGetRenderValue(
-    rowId: string,
-    propertyId: string
-  ): unknown {
-    return this.cellGetValue(rowId, propertyId);
-  }
-
-  public cellGetValue(rowId: string, propertyId: string): unknown {
-    const tag = this.tags.find(v => v.id === rowId);
-    assertExists(tag);
-    return this.propertiesMap[propertyId]?.getValue(tag);
-  }
-
-  public propertyAdd(_insertPosition: InsertToPosition | number): string {
-    throw new Error('not support');
-  }
-
-  public propertyChangeData(
-    propertyId: string,
-    data: Record<string, unknown>
-  ): void {
-    this.propertiesMap[propertyId]?.changeData?.(data);
-  }
-
-  public propertyChangeName(_propertyId: string, _name: string): void {
-    // not support
-  }
-
-  public propertyChangeStatCalcOp(
-    _propertyId: string,
-    _type: StatCalcOpType
-  ): void {
-    // no support
-  }
-
-  public propertyChangeType(_propertyId: string, _type: string): void {
-    // not support
-  }
-
-  public propertyDelete(_id: string): void {
-    // not support
-  }
-
-  public propertyDuplicate(_columnId: string): string {
-    throw new Error('not support');
-  }
-
-  public propertyGetData(propertyId: string): Record<string, unknown> {
-    return this.propertiesMap[propertyId]?.getData?.() ?? {};
-  }
-
-  public propertyGetName(propertyId: string): string {
-    return propertyId;
-  }
-
-  public override propertyGetStatCalcOp(_propertyId: string): StatCalcOpType {
-    return 'none';
-  }
-
-  public propertyGetType(propertyId: string): string {
-    return this.propertiesMap[propertyId].type;
-  }
-
-  public rowAdd(_insertPosition: InsertToPosition | number): string {
-    const id = nanoid();
-    this.changeTags([
-      ...this.tags,
-      {
-        id,
-        value: '',
-        color: getTagColor(),
-      },
-    ]);
-    return id;
-  }
-
-  public rowDelete(ids: string[]): void {
-    this.changeTags(this.tags.filter(v => !ids.includes(v.id)));
-  }
-
-  public slots = {
-    update: new Slot(),
-  };
-
-  private get tags() {
-    return this.meta.properties.tags?.options ?? [];
-  }
-
-  private changeTags = (tags: SelectTag[]) => {
-    this.meta.setProperties({
-      ...this.meta.properties,
-      tags: { options: tags },
-    });
-  };
-  private changeTag = (tag: SelectTag) => {
-    this.changeTags(this.tags.map(v => (v.id === tag.id ? tag : v)));
-  };
-  public allPropertyConfig: ColumnConfig[] = [];
-
-  public getPropertyMeta(_type: string): ColumnMeta {
-    throw new Error('not support');
-  }
-}
diff --git a/packages/blocks/src/database-block/data-view/common/detail/detail.ts b/packages/blocks/src/database-block/data-view/common/detail/detail.ts
index 7c1aea6b90c8..361385381419 100644
--- a/packages/blocks/src/database-block/data-view/common/detail/detail.ts
+++ b/packages/blocks/src/database-block/data-view/common/detail/detail.ts
@@ -8,9 +8,9 @@ import { html } from 'lit/static-html.js';
 
 import { popFilterableSimpleMenu } from '../../utils/menu/index.js';
 import { renderUniLit } from '../../utils/uni-component/uni-component.js';
+import type { DataViewManager } from '../../view/data-view-manager.js';
 import { dataViewCommonStyle } from '../css-variable.js';
-import type { DataViewManager } from '../data-view-manager.js';
-import type { DetailSlotProps } from '../datasource/base.js';
+import type { DetailSlotProps } from '../data-source/base.js';
 import { PlusIcon } from '../icons/index.js';
 import { DetailSelection } from './selection.js';
 
diff --git a/packages/blocks/src/database-block/data-view/common/detail/field.ts b/packages/blocks/src/database-block/data-view/common/detail/field.ts
index 2e954ad6f34c..aa975f6d7453 100644
--- a/packages/blocks/src/database-block/data-view/common/detail/field.ts
+++ b/packages/blocks/src/database-block/data-view/common/detail/field.ts
@@ -14,7 +14,7 @@ import { renderUniLit } from '../../utils/uni-component/uni-component.js';
 import type {
   DataViewColumnManager,
   DataViewManager,
-} from '../data-view-manager.js';
+} from '../../view/data-view-manager.js';
 import {
   DatabaseDuplicate,
   DatabaseMoveLeft,
diff --git a/packages/blocks/src/database-block/data-view/common/detail/layout.ts b/packages/blocks/src/database-block/data-view/common/detail/layout.ts
index 3e2784075d85..470b7d0369f7 100644
--- a/packages/blocks/src/database-block/data-view/common/detail/layout.ts
+++ b/packages/blocks/src/database-block/data-view/common/detail/layout.ts
@@ -10,7 +10,7 @@ import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import { createModal } from '../../utils/menu/index.js';
-import type { DataViewManager } from '../data-view-manager.js';
+import type { DataViewManager } from '../../view/data-view-manager.js';
 import { CrossIcon } from '../icons/index.js';
 import { RecordDetail } from './detail.js';
 
diff --git a/packages/blocks/src/database-block/data-view/common/detail/selection.ts b/packages/blocks/src/database-block/data-view/common/detail/selection.ts
index 647be786b225..1c0465520d6b 100644
--- a/packages/blocks/src/database-block/data-view/common/detail/selection.ts
+++ b/packages/blocks/src/database-block/data-view/common/detail/selection.ts
@@ -1,6 +1,6 @@
-import type { KanbanCard } from '../../views/kanban/card.js';
-import { KanbanCell } from '../../views/kanban/cell.js';
-import type { KanbanCardSelection } from '../../views/kanban/types.js';
+import type { KanbanCard } from '../../view/presets/kanban/card.js';
+import { KanbanCell } from '../../view/presets/kanban/cell.js';
+import type { KanbanCardSelection } from '../../view/presets/kanban/types.js';
 import type { RecordDetail } from './detail.js';
 import { RecordField } from './field.js';
 
diff --git a/packages/blocks/src/database-block/data-view/common/filter/filter-bar.ts b/packages/blocks/src/database-block/data-view/common/filter/filter-bar.ts
index 2e170635d49d..f6b9b4c76f4c 100644
--- a/packages/blocks/src/database-block/data-view/common/filter/filter-bar.ts
+++ b/packages/blocks/src/database-block/data-view/common/filter/filter-bar.ts
@@ -6,8 +6,8 @@ import { repeat } from 'lit/directives/repeat.js';
 import { AddCursorIcon } from '../../../../_common/icons/index.js';
 import { createPopup, eventToVRect } from '../../utils/menu/index.js';
 import { renderTemplate } from '../../utils/uni-component/render-template.js';
+import type { DataViewManager } from '../../view/data-view-manager.js';
 import type { Filter, FilterGroup, Variable } from '../ast.js';
-import type { DataViewManager } from '../data-view-manager.js';
 import { CrossIcon, FilterIcon } from '../icons/index.js';
 import { popCreateFilter } from '../ref/ref.js';
 import { popFilterModal } from './filter-modal.js';
diff --git a/packages/blocks/src/database-block/data-view/common/group-by/helper.ts b/packages/blocks/src/database-block/data-view/common/group-by/helper.ts
index 26c29e00464a..685664ce5aea 100644
--- a/packages/blocks/src/database-block/data-view/common/group-by/helper.ts
+++ b/packages/blocks/src/database-block/data-view/common/group-by/helper.ts
@@ -1,7 +1,7 @@
 import type { TType } from '../../logical/typesystem.js';
 import type { InsertToPosition } from '../../types.js';
 import { insertPositionToIndex } from '../../utils/insert.js';
-import type { DataViewManager } from '../data-view-manager.js';
+import type { DataViewManager } from '../../view/data-view-manager.js';
 import type { GroupBy, GroupProperty } from '../types.js';
 import type { GroupByConfig } from './matcher.js';
 import { groupByMatcher } from './matcher.js';
diff --git a/packages/blocks/src/database-block/data-view/common/group-by/setting.ts b/packages/blocks/src/database-block/data-view/common/group-by/setting.ts
index 835e98dcfed0..ad57336c886f 100644
--- a/packages/blocks/src/database-block/data-view/common/group-by/setting.ts
+++ b/packages/blocks/src/database-block/data-view/common/group-by/setting.ts
@@ -14,8 +14,8 @@ import {
 } from '../../utils/menu/index.js';
 import { menuTitleItem } from '../../utils/menu/title.js';
 import { renderUniLit } from '../../utils/uni-component/uni-component.js';
-import { DataViewKanbanManager } from '../../views/kanban/kanban-view-manager.js';
-import { DataViewTableManager } from '../../views/table/table-view-manager.js';
+import { DataViewKanbanManager } from '../../view/presets/kanban/kanban-view-manager.js';
+import { DataViewTableManager } from '../../view/presets/table/table-view-manager.js';
 import { dataViewCssVariable } from '../css-variable.js';
 import { DeleteIcon } from '../icons/index.js';
 import type { GroupRenderProps } from './matcher.js';
diff --git a/packages/blocks/src/database-block/data-view/common/header-area/text.ts b/packages/blocks/src/database-block/data-view/common/header-area/text.ts
index 4da5e0c73e65..3a01574cd3e4 100644
--- a/packages/blocks/src/database-block/data-view/common/header-area/text.ts
+++ b/packages/blocks/src/database-block/data-view/common/header-area/text.ts
@@ -10,8 +10,8 @@ import type { RichText } from '../../../../_common/components/index.js';
 import type { DatabaseBlockComponent } from '../../../database-block.js';
 import { BaseCellRenderer } from '../../column/index.js';
 import { tRichText } from '../../logical/data-type.js';
-import type { DataViewKanbanManager } from '../../views/kanban/kanban-view-manager.js';
-import type { DataViewTableManager } from '../../views/table/table-view-manager.js';
+import type { DataViewKanbanManager } from '../../view/presets/kanban/kanban-view-manager.js';
+import type { DataViewTableManager } from '../../view/presets/table/table-view-manager.js';
 
 const styles = css`
   data-view-header-area-text {
diff --git a/packages/blocks/src/database-block/data-view/common/header/tools/base-tool.ts b/packages/blocks/src/database-block/data-view/common/header/tools/base-tool.ts
index a38314141fc6..41bc6903e5b5 100644
--- a/packages/blocks/src/database-block/data-view/common/header/tools/base-tool.ts
+++ b/packages/blocks/src/database-block/data-view/common/header/tools/base-tool.ts
@@ -1,8 +1,11 @@
 import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
 import { property } from 'lit/decorators.js';
 
-import type { DataViewExpose, DataViewToolsProps } from '../../data-view.js';
-import type { DataViewManager } from '../../data-view-manager.js';
+import type {
+  DataViewExpose,
+  DataViewToolsProps,
+} from '../../../view/data-view.js';
+import type { DataViewManager } from '../../../view/data-view-manager.js';
 
 export class BaseTool<Manager extends DataViewManager = DataViewManager>
   extends WithDisposable(ShadowlessElement)
diff --git a/packages/blocks/src/database-block/data-view/common/header/tools/search.ts b/packages/blocks/src/database-block/data-view/common/header/tools/search.ts
index 355e502d9564..3267abc52139 100644
--- a/packages/blocks/src/database-block/data-view/common/header/tools/search.ts
+++ b/packages/blocks/src/database-block/data-view/common/header/tools/search.ts
@@ -7,8 +7,8 @@ import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { stopPropagation } from '../../../utils/event.js';
-import type { DataViewKanbanManager } from '../../../views/kanban/kanban-view-manager.js';
-import type { DataViewTableManager } from '../../../views/table/table-view-manager.js';
+import type { DataViewKanbanManager } from '../../../view/presets/kanban/kanban-view-manager.js';
+import type { DataViewTableManager } from '../../../view/presets/table/table-view-manager.js';
 import { DatabaseSearchClose, DatabaseSearchIcon } from '../../icons/index.js';
 import { BaseTool } from './base-tool.js';
 
diff --git a/packages/blocks/src/database-block/data-view/common/header/tools/tools.ts b/packages/blocks/src/database-block/data-view/common/header/tools/tools.ts
index 46bf66b88aa6..82c4d2f22dae 100644
--- a/packages/blocks/src/database-block/data-view/common/header/tools/tools.ts
+++ b/packages/blocks/src/database-block/data-view/common/header/tools/tools.ts
@@ -10,8 +10,11 @@ import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 import { renderUniLit } from '../../../utils/uni-component/uni-component.js';
-import { type DataViewExpose, viewRendererManager } from '../../data-view.js';
-import type { DataViewManager } from '../../data-view-manager.js';
+import {
+  type DataViewExpose,
+  viewRendererManager,
+} from '../../../view/data-view.js';
+import type { DataViewManager } from '../../../view/data-view-manager.js';
 
 const styles = css`
   .affine-database-toolbar {
diff --git a/packages/blocks/src/database-block/data-view/common/header/tools/view-options.ts b/packages/blocks/src/database-block/data-view/common/header/tools/view-options.ts
index 87e58813eb52..959e332bedc4 100644
--- a/packages/blocks/src/database-block/data-view/common/header/tools/view-options.ts
+++ b/packages/blocks/src/database-block/data-view/common/header/tools/view-options.ts
@@ -9,8 +9,8 @@ import {
   MoreHorizontalIcon,
 } from '../../../../../_common/icons/index.js';
 import { eventToVRect, popMenu } from '../../../utils/menu/index.js';
-import type { DataViewKanbanManager } from '../../../views/kanban/kanban-view-manager.js';
-import type { DataViewTableManager } from '../../../views/table/table-view-manager.js';
+import type { DataViewKanbanManager } from '../../../view/presets/kanban/kanban-view-manager.js';
+import type { DataViewTableManager } from '../../../view/presets/table/table-view-manager.js';
 import { popFilterModal } from '../../filter/filter-modal.js';
 import {
   popGroupSetting,
diff --git a/packages/blocks/src/database-block/data-view/common/header/views.ts b/packages/blocks/src/database-block/data-view/common/header/views.ts
index 5abc1084eefa..a547ff395d04 100644
--- a/packages/blocks/src/database-block/data-view/common/header/views.ts
+++ b/packages/blocks/src/database-block/data-view/common/header/views.ts
@@ -19,9 +19,8 @@ import {
   popMenu,
 } from '../../utils/menu/index.js';
 import { renderUniLit } from '../../utils/uni-component/uni-component.js';
-import { viewManager, viewRendererManager } from '../data-view.js';
 import { DeleteIcon } from '../icons/index.js';
-import type { ViewSource } from '../view-source.js';
+import type { SingleViewSource, ViewSource } from '../view-source.js';
 
 @customElement('data-view-header-views')
 export class DataViewHeaderViews extends WithDisposable(ShadowlessElement) {
@@ -80,13 +79,11 @@ export class DataViewHeaderViews extends WithDisposable(ShadowlessElement) {
   _addViewMenu = (event: MouseEvent) => {
     popFilterableSimpleMenu(
       event.target as HTMLElement,
-      viewManager.all.map(v => {
+      this.viewSource.allViewMeta.map(v => {
         return {
           type: 'action',
-          name: v.defaultName,
-          icon: html`<uni-lit
-            .uni=${viewRendererManager.getView(v.type).icon}
-          ></uni-lit>`,
+          name: v.model.defaultName,
+          icon: html`<uni-lit .uni=${v.renderer.icon}></uni-lit>`,
           select: () => {
             const id = this.viewSource.viewAdd(v.type);
             this.viewSource.selectView(id);
@@ -106,9 +103,7 @@ export class DataViewHeaderViews extends WithDisposable(ShadowlessElement) {
         };
         return {
           type: 'action' as const,
-          icon: html`<uni-lit
-            .uni=${viewRendererManager.getView(v.view.mode).icon}
-          ></uni-lit>`,
+          icon: html`<uni-lit .uni=${this.getRenderer(v).icon}></uni-lit>`,
           name: v.view.name,
           isSelected: this.viewSource.currentViewId === v.view.id,
           select: () => {
@@ -128,13 +123,11 @@ export class DataViewHeaderViews extends WithDisposable(ShadowlessElement) {
         name: '',
         hide: () => this.readonly,
         children: () =>
-          viewManager.all.map(v => {
+          this.viewSource.allViewMeta.map(v => {
             return {
               type: 'action',
-              name: `Create ${v.defaultName}`,
-              icon: html`<uni-lit
-                .uni=${viewRendererManager.getView(v.type).icon}
-              ></uni-lit>`,
+              name: `Create ${v.model.defaultName}`,
+              icon: html`<uni-lit .uni=${v.renderer.icon}></uni-lit>`,
               select: () => {
                 const id = this.viewSource.viewAdd(v.type);
                 this.viewSource.selectView(id);
@@ -168,10 +161,7 @@ export class DataViewHeaderViews extends WithDisposable(ShadowlessElement) {
           {
             type: 'action',
             name: 'Edit View',
-            icon: renderUniLit(
-              viewRendererManager.getView(view.view.mode).icon,
-              {}
-            ),
+            icon: renderUniLit(this.getRenderer(view).icon, {}),
             select: () => {
               this.closest('affine-data-view-renderer')
                 ?.querySelector('data-view-header-tools-view-options')
@@ -283,16 +273,17 @@ export class DataViewHeaderViews extends WithDisposable(ShadowlessElement) {
           @click="${(event: MouseEvent) =>
             this._clickView(event, view.view.id)}"
         >
-          <uni-lit
-            class="icon"
-            .uni="${viewRendererManager.getView(view.view.mode).icon}"
-          ></uni-lit>
+          <uni-lit class="icon" .uni="${this.getRenderer(view).icon}"></uni-lit>
           <div class="name">${view.view.name}</div>
         </div>
       `;
     });
   };
 
+  private getRenderer(view: SingleViewSource) {
+    return this.viewSource.getViewMeta(view.view.mode).renderer;
+  }
+
   override render() {
     return html`
       <component-overflow
diff --git a/packages/blocks/src/database-block/data-view/common/properties.ts b/packages/blocks/src/database-block/data-view/common/properties.ts
index 57a15b88e438..a231c180fbab 100644
--- a/packages/blocks/src/database-block/data-view/common/properties.ts
+++ b/packages/blocks/src/database-block/data-view/common/properties.ts
@@ -11,7 +11,7 @@ import { createPopup } from '../utils/menu/index.js';
 import type {
   DataViewColumnManager,
   DataViewManager,
-} from './data-view-manager.js';
+} from '../view/data-view-manager.js';
 
 const show = html`<svg
   width="24"
diff --git a/packages/blocks/src/database-block/data-view/common/view-source.ts b/packages/blocks/src/database-block/data-view/common/view-source.ts
index 4aa62ebb86f2..ea60318ba60d 100644
--- a/packages/blocks/src/database-block/data-view/common/view-source.ts
+++ b/packages/blocks/src/database-block/data-view/common/view-source.ts
@@ -1,7 +1,11 @@
 import type { Slot } from '@blocksuite/global/utils';
 
 import type { InsertToPosition } from '../types.js';
-import type { DataViewDataType, DataViewTypes } from './data-view.js';
+import type {
+  DataViewDataType,
+  DataViewTypes,
+  ViewMeta,
+} from '../view/data-view.js';
 
 export interface SingleViewSource<
   View extends DataViewDataType = DataViewDataType,
@@ -20,6 +24,8 @@ export interface SingleViewSource<
 }
 
 export interface ViewSource {
+  allViewMeta: ViewMeta[];
+  getViewMeta(type: string): ViewMeta;
   get readonly(): boolean;
   get currentViewId(): string;
   get currentView(): SingleViewSource;
diff --git a/packages/blocks/src/database-block/data-view/data-view.ts b/packages/blocks/src/database-block/data-view/data-view.ts
index dddca6701d56..7c55226756c5 100644
--- a/packages/blocks/src/database-block/data-view/data-view.ts
+++ b/packages/blocks/src/database-block/data-view/data-view.ts
@@ -3,10 +3,6 @@ import './common/header/views.js';
 import './common/header/title.js';
 import './common/header/tools/tools.js';
 import './common/filter/filter-bar.js';
-import './views/table/define';
-import './views/table/renderer';
-import './views/kanban/define';
-import './views/kanban/renderer';
 
 import type { BlockStdScope } from '@blocksuite/block-std';
 import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
@@ -19,41 +15,23 @@ import { keyed } from 'lit/directives/keyed.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { html } from 'lit/static-html.js';
 
-import type { BaseDataView } from './common/base-data-view.js';
 import { dataViewCommonStyle } from './common/css-variable.js';
-import type {
-  DataViewExpose,
-  DataViewProps,
-  DataViewTypes,
-} from './common/data-view.js';
-import { viewRendererManager } from './common/data-view.js';
-import type { DataViewManager } from './common/data-view-manager.js';
-import type { DataSource } from './common/datasource/base.js';
+import type { DataSource } from './common/data-source/base.js';
 import { popSideDetail } from './common/detail/layout.js';
-import type { SingleViewSource, ViewSource } from './common/view-source.js';
+import type { ViewSource } from './common/index.js';
 import type { DataViewSelection, DataViewSelectionState } from './types.js';
-import { renderUniLit } from './utils/uni-component/uni-component.js';
-import { DataViewKanbanManager } from './views/kanban/kanban-view-manager.js';
-import { DataViewTableManager } from './views/table/table-view-manager.js';
+import { renderUniLit } from './utils/uni-component/index.js';
+import type { DataViewExpose, DataViewProps } from './view/data-view.js';
+import type { DataViewBase } from './view/data-view-base.js';
+import type { DataViewManager } from './view/data-view-manager.js';
 
 type ViewProps = {
   view: DataViewManager;
   viewUpdated: Slot;
   selectionUpdated: Slot<DataViewSelectionState>;
   setSelection: (selection?: DataViewSelectionState) => void;
-  bindHotkey: BaseDataView['bindHotkey'];
-  handleEvent: BaseDataView['handleEvent'];
-};
-const ViewManagerMap: Record<
-  DataViewTypes,
-  new (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    viewSource: SingleViewSource<any>,
-    dataSource: DataSource
-  ) => DataViewManager
-> = {
-  table: DataViewTableManager,
-  kanban: DataViewKanbanManager,
+  bindHotkey: DataViewBase['bindHotkey'];
+  handleEvent: DataViewBase['handleEvent'];
 };
 
 export type DataViewRendererConfig = {
@@ -126,10 +104,10 @@ export class DataViewRenderer extends WithDisposable(ShadowlessElement) {
     if (!this.viewMap[id]) {
       const singleViewSource = this.config.viewSource.viewGet(id);
 
-      const view = new ViewManagerMap[singleViewSource.view.mode](
-        singleViewSource,
-        this.config.dataSource
-      );
+      const view = new (this.config.viewSource.getViewMeta(
+        singleViewSource.view.mode
+      ).model.dataViewManager)();
+      view.init(this.config.dataSource, singleViewSource);
       this.viewMap[id] = {
         view: view,
         viewUpdated: singleViewSource.updateSlot,
@@ -194,7 +172,7 @@ export class DataViewRenderer extends WithDisposable(ShadowlessElement) {
     return keyed(
       viewData.view.id,
       renderUniLit(
-        viewRendererManager.getView(viewData.view.type).view,
+        this.config.viewSource.getViewMeta(viewData.view.type).renderer.view,
         props,
         { ref: this._view }
       )
diff --git a/packages/blocks/src/database-block/data-view/index.ts b/packages/blocks/src/database-block/data-view/index.ts
index 202699055fbe..ad3cd332c2c2 100644
--- a/packages/blocks/src/database-block/data-view/index.ts
+++ b/packages/blocks/src/database-block/data-view/index.ts
@@ -1,11 +1,11 @@
 export type { ColumnMeta } from './column/column-config.js';
 export { ColumnConfig } from './column/index.js';
 export { columnPresets } from './column/presets/index.js';
-export type { DetailSlots } from './common/datasource/base.js';
+export type { DetailSlots } from './common/data-source/base.js';
 export {
   BaseDataSource,
   type DatabaseBlockDataSourceConfig,
-} from './common/datasource/base.js';
+} from './common/data-source/base.js';
 export type { ViewSource } from './common/index.js';
 export { DatabaseSelection } from './common/selection.js';
 export { DataView } from './data-view.js';
@@ -15,4 +15,4 @@ export { popMenu } from './utils/index.js';
 export { insertPositionToIndex } from './utils/insert.js';
 export { createUniComponentFromWebComponent } from './utils/uni-component/index.js';
 export { defineUniComponent } from './utils/uni-component/index.js';
-export type { StatCalcOpType } from './views/table/types.js';
+export type { StatCalcOpType } from './view/presets/table/types.js';
diff --git a/packages/blocks/src/database-block/data-view/types.ts b/packages/blocks/src/database-block/data-view/types.ts
index 88b360f84f47..335298f0430f 100644
--- a/packages/blocks/src/database-block/data-view/types.ts
+++ b/packages/blocks/src/database-block/data-view/types.ts
@@ -1,5 +1,5 @@
-import type { KanbanViewSelectionWithType } from './views/kanban/types.js';
-import type { TableViewSelection } from './views/table/types.js';
+import type { KanbanViewSelectionWithType } from './view/presets/kanban/types.js';
+import type { TableViewSelection } from './view/presets/table/types.js';
 
 export type DataViewSelection =
   | TableViewSelection
diff --git a/packages/blocks/src/database-block/data-view/common/base-data-view.ts b/packages/blocks/src/database-block/data-view/view/data-view-base.ts
similarity index 94%
rename from packages/blocks/src/database-block/data-view/common/base-data-view.ts
rename to packages/blocks/src/database-block/data-view/view/data-view-base.ts
index bbaaef0eb270..4fb3fa6e9c01 100644
--- a/packages/blocks/src/database-block/data-view/common/base-data-view.ts
+++ b/packages/blocks/src/database-block/data-view/view/data-view-base.ts
@@ -10,11 +10,11 @@ import { property } from 'lit/decorators.js';
 
 import type { DataViewRenderer } from '../data-view.js';
 import type { DataViewSelection, InsertToPosition } from '../types.js';
-import type { UniComponent } from '../utils/uni-component/uni-component.js';
+import type { UniComponent } from '../utils/uni-component/index.js';
 import type { DataViewExpose, DataViewProps } from './data-view.js';
 import type { DataViewManager } from './data-view-manager.js';
 
-export abstract class BaseDataView<
+export abstract class DataViewBase<
     T extends DataViewManager = DataViewManager,
     Selection extends DataViewSelection = DataViewSelection,
   >
diff --git a/packages/blocks/src/database-block/data-view/common/data-view-manager.ts b/packages/blocks/src/database-block/data-view/view/data-view-manager.ts
similarity index 91%
rename from packages/blocks/src/database-block/data-view/common/data-view-manager.ts
rename to packages/blocks/src/database-block/data-view/view/data-view-manager.ts
index b52423af8064..ffcb269e077b 100644
--- a/packages/blocks/src/database-block/data-view/common/data-view-manager.ts
+++ b/packages/blocks/src/database-block/data-view/view/data-view-manager.ts
@@ -1,16 +1,17 @@
-import type { Disposable } from '@blocksuite/global/utils';
-import { Slot } from '@blocksuite/global/utils';
+import { assertExists, type Disposable, Slot } from '@blocksuite/global/utils';
 
-import type { ColumnMeta } from '../column/column-config.js';
+import { type ColumnMeta } from '../column/column-config.js';
 import type { ColumnConfig } from '../column/index.js';
 import { type CellRenderer } from '../column/index.js';
+import type { FilterGroup, Variable } from '../common/ast.js';
+import type { DataSource, DetailSlots } from '../common/data-source/base.js';
+import { ColumnDataStats } from '../common/data-stats.js';
+import type { SingleViewSource } from '../common/index.js';
 import type { TType } from '../logical/typesystem.js';
 import type { ColumnDataUpdater, InsertToPosition } from '../types.js';
-import type { UniComponent } from '../utils/uni-component/uni-component.js';
-import type { StatCalcOpType } from '../views/table/types.js';
-import type { FilterGroup, Variable } from './ast.js';
-import { ColumnDataStats } from './data-stats.js';
-import type { DataSource, DetailSlots } from './datasource/base.js';
+import type { UniComponent } from '../utils/uni-component/index.js';
+import type { DataViewDataType } from './data-view.js';
+import type { StatCalcOpType } from './presets/table/types.js';
 
 export interface DataViewManager {
   get id(): string;
@@ -201,7 +202,20 @@ export interface DataViewColumnManager<
   captureSync(): void;
 }
 
-export abstract class BaseDataViewManager implements DataViewManager {
+export abstract class DataViewManagerBase<ViewData extends DataViewDataType>
+  implements DataViewManager
+{
+  protected get dataSource(): DataSource {
+    assertExists(this._dataSource, 'data source is not set');
+    return this._dataSource;
+  }
+  protected get viewSource(): SingleViewSource<ViewData> {
+    assertExists(this._viewSource, 'view source is not set');
+    return this._viewSource;
+  }
+  private _viewSource?: SingleViewSource<ViewData>;
+  private _dataSource?: DataSource;
+
   private searchString = '';
   private _filterVisible?: boolean;
 
@@ -209,8 +223,11 @@ export abstract class BaseDataViewManager implements DataViewManager {
     return this.filteredRows(this.searchString);
   }
 
-  protected constructor(protected dataSource: DataSource) {
-    this.dataSource.slots.update.pipe(this.slots.update);
+  init(dataSource: DataSource, viewSource: SingleViewSource<ViewData>) {
+    this._dataSource = dataSource;
+    this._viewSource = viewSource;
+    this._dataSource.slots.update.pipe(this.slots.update);
+    this._viewSource.updateSlot.pipe(this.slots.update);
   }
 
   setSearch(str: string): void {
@@ -490,7 +507,7 @@ export abstract class BaseDataViewManager implements DataViewManager {
   public abstract duplicateView(): void;
 }
 
-export abstract class BaseDataViewColumnManager
+export abstract class DataViewColumnManagerBase
   implements DataViewColumnManager
 {
   public readonly stats = new ColumnDataStats(this);
diff --git a/packages/blocks/src/database-block/data-view/common/data-view.ts b/packages/blocks/src/database-block/data-view/view/data-view.ts
similarity index 66%
rename from packages/blocks/src/database-block/data-view/common/data-view.ts
rename to packages/blocks/src/database-block/data-view/view/data-view.ts
index 6d282e0059c6..8f9486cddad0 100644
--- a/packages/blocks/src/database-block/data-view/common/data-view.ts
+++ b/packages/blocks/src/database-block/data-view/view/data-view.ts
@@ -10,8 +10,9 @@ import type { DatabaseBlockModel } from '../../database-model.js';
 import type { ColumnMeta } from '../column/column-config.js';
 import type { DataViewRenderer } from '../data-view.js';
 import type { DataViewSelection, InsertToPosition } from '../types.js';
-import type { UniComponent } from '../utils/uni-component/uni-component.js';
-import type { DataViewManager } from './data-view-manager.js';
+import type { UniComponent } from '../utils/uni-component/index.js';
+import type { DataViewManagerBase } from './data-view-manager.js';
+import { type DataViewManager } from './data-view-manager.js';
 
 export type DataViewHeaderComponentProp<
   T extends DataViewManager = DataViewManager,
@@ -60,29 +61,31 @@ declare global {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
   export interface DataViewDataTypeMap {}
 }
-type CommonViewDataType = {
+export type BasicViewDataType<
+  Type extends string = string,
+  T = NonNullable<unknown>,
+> = {
   id: string;
   name: string;
+  mode: Type;
+} & T;
+export type _DataViewDataTypeMap = {
+  [K in keyof DataViewDataTypeMap]: BasicViewDataType<
+    Extract<K, string>,
+    DataViewDataTypeMap[K]
+  >;
 };
-export type RealDataViewDataTypeMap = {
-  [K in keyof DataViewDataTypeMap]: DataViewDataTypeMap[K] &
-    CommonViewDataType & {
-      mode: K;
-    };
-};
-export type DefaultViewDataType = CommonViewDataType & { mode: string };
+export type DefaultViewDataType = BasicViewDataType & { mode: string };
 type FallBack<T> = [T] extends [never] ? DefaultViewDataType : T;
 export type DataViewDataType = FallBack<
-  RealDataViewDataTypeMap[keyof RealDataViewDataTypeMap]
+  _DataViewDataTypeMap[keyof _DataViewDataTypeMap]
 >;
-export type DataViewTypes = DataViewDataType['mode'];
-
+export type DataViewTypes = keyof DataViewDataTypeMap;
 export interface DataViewConfig<
   Data extends DataViewDataType = DataViewDataType,
 > {
-  type: DataViewTypes;
   defaultName: string;
-
+  dataViewManager: new () => DataViewManagerBase<Data>;
   init(
     columnMetaMap: Record<string, ColumnMeta>,
     model: DatabaseBlockModel,
@@ -98,43 +101,35 @@ export type DataViewToolsProps<
   viewMethod: DataViewExpose;
 };
 
-export interface DataViewRendererConfig<
-  _Data extends DataViewDataType = DataViewDataType,
-> {
-  type: DataViewTypes;
+export interface DataViewRendererConfig {
   view: UniComponent<DataViewProps, DataViewExpose>;
   icon: UniComponent;
   tools?: UniComponent<DataViewToolsProps>[];
 }
 
-export class ViewManager {
+export type ViewMeta<
+  Type extends string = DataViewTypes,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private map = new Map<string, DataViewConfig>();
-
-  getView(type: string): DataViewConfig {
-    const view = this.map.get(type);
-    if (!view) {
-      throw new Error(`${type} is not exist`);
-    }
-    return view;
-  }
-
-  register<Type extends keyof RealDataViewDataTypeMap>(
-    type: Type,
-    config: Omit<DataViewConfig<RealDataViewDataTypeMap[Type]>, 'type'>
-  ) {
-    this.map.set(type, {
-      ...config,
+  Data extends DataViewDataType = any,
+> = {
+  type: Type;
+  model: DataViewConfig<Data>;
+  renderer: DataViewRendererConfig;
+};
+export const viewType = <Type extends string>(type: Type) => ({
+  type,
+  modelConfig: <Data extends DataViewDataType>(
+    model: DataViewConfig<Data>
+  ) => ({
+    type,
+    model,
+    rendererConfig: (renderer: DataViewRendererConfig) => ({
       type,
-    });
-  }
-
-  get all() {
-    return Array.from(this.map.values());
-  }
-}
-
-export const viewManager = new ViewManager();
+      model,
+      renderer,
+    }),
+  }),
+});
 
 export class ViewRendererManager {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -148,16 +143,6 @@ export class ViewRendererManager {
     return view;
   }
 
-  register<Type extends keyof RealDataViewDataTypeMap>(
-    type: Type,
-    config: Omit<DataViewRendererConfig<RealDataViewDataTypeMap[Type]>, 'type'>
-  ) {
-    this.map.set(type, {
-      ...config,
-      type,
-    });
-  }
-
   get all() {
     return Array.from(this.map.values());
   }
diff --git a/packages/blocks/src/database-block/data-view/view/index.ts b/packages/blocks/src/database-block/data-view/view/index.ts
new file mode 100644
index 000000000000..eb63f99a68c1
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/view/index.ts
@@ -0,0 +1,7 @@
+import { kanbanViewConfig } from './presets/kanban/renderer.js';
+import { tableViewConfig } from './presets/table/renderer.js';
+
+export const viewPresets = {
+  tableViewConfig,
+  kanbanViewConfig,
+};
diff --git a/packages/blocks/src/database-block/data-view/views/kanban/card.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/card.ts
similarity index 96%
rename from packages/blocks/src/database-block/data-view/views/kanban/card.ts
rename to packages/blocks/src/database-block/data-view/view/presets/kanban/card.ts
index c422cf9444fd..12c2b2613060 100644
--- a/packages/blocks/src/database-block/data-view/views/kanban/card.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/card.ts
@@ -7,10 +7,10 @@ import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
 
-import { NewEditIcon } from '../../../../_common/icons/index.js';
-import { MoreHorizontalIcon } from '../../common/icons/index.js';
-import type { DataViewRenderer } from '../../data-view.js';
-import { positionToVRect } from '../../utils/menu/index.js';
+import { NewEditIcon } from '../../../../../_common/icons/index.js';
+import { MoreHorizontalIcon } from '../../../common/icons/index.js';
+import type { DataViewRenderer } from '../../../data-view.js';
+import { positionToVRect } from '../../../utils/menu/index.js';
 import type {
   DataViewKanbanColumnManager,
   DataViewKanbanManager,
diff --git a/packages/blocks/src/database-block/data-view/views/kanban/cell.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/cell.ts
similarity index 97%
rename from packages/blocks/src/database-block/data-view/views/kanban/cell.ts
rename to packages/blocks/src/database-block/data-view/view/presets/kanban/cell.ts
index 54a478029cfe..e47af82ef383 100644
--- a/packages/blocks/src/database-block/data-view/views/kanban/cell.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/cell.ts
@@ -9,8 +9,8 @@ import { html } from 'lit/static-html.js';
 import type {
   CellRenderProps,
   DataViewCellLifeCycle,
-} from '../../column/index.js';
-import { renderUniLit } from '../../utils/uni-component/uni-component.js';
+} from '../../../column/index.js';
+import { renderUniLit } from '../../../utils/uni-component/uni-component.js';
 import type {
   DataViewKanbanColumnManager,
   DataViewKanbanManager,
diff --git a/packages/blocks/src/database-block/data-view/views/kanban/controller/clipboard.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/controller/clipboard.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/views/kanban/controller/clipboard.ts
rename to packages/blocks/src/database-block/data-view/view/presets/kanban/controller/clipboard.ts
diff --git a/packages/blocks/src/database-block/data-view/views/kanban/controller/drag.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/controller/drag.ts
similarity index 96%
rename from packages/blocks/src/database-block/data-view/views/kanban/controller/drag.ts
rename to packages/blocks/src/database-block/data-view/view/presets/kanban/controller/drag.ts
index 293d32faabab..e85d1b77ec4d 100644
--- a/packages/blocks/src/database-block/data-view/views/kanban/controller/drag.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/controller/drag.ts
@@ -1,10 +1,10 @@
 import { assertExists } from '@blocksuite/global/utils';
 import type { ReactiveController } from 'lit';
 
-import { Point, Rect } from '../../../../../_common/utils/index.js';
-import type { InsertToPosition } from '../../../types.js';
-import { startDrag } from '../../../utils/drag.js';
-import { autoScrollOnBoundary } from '../../../utils/frame-loop.js';
+import { Point, Rect } from '../../../../../../_common/utils/index.js';
+import type { InsertToPosition } from '../../../../types.js';
+import { startDrag } from '../../../../utils/drag.js';
+import { autoScrollOnBoundary } from '../../../../utils/frame-loop.js';
 import { KanbanCard } from '../card.js';
 import { KanbanGroup } from '../group.js';
 import type { DataViewKanban } from '../kanban-view.js';
diff --git a/packages/blocks/src/database-block/data-view/views/kanban/controller/hotkeys.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/controller/hotkeys.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/views/kanban/controller/hotkeys.ts
rename to packages/blocks/src/database-block/data-view/view/presets/kanban/controller/hotkeys.ts
diff --git a/packages/blocks/src/database-block/data-view/views/kanban/controller/selection.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/controller/selection.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/views/kanban/controller/selection.ts
rename to packages/blocks/src/database-block/data-view/view/presets/kanban/controller/selection.ts
diff --git a/packages/blocks/src/database-block/data-view/views/kanban/define.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/define.ts
similarity index 59%
rename from packages/blocks/src/database-block/data-view/views/kanban/define.ts
rename to packages/blocks/src/database-block/data-view/view/presets/kanban/define.ts
index 424c5e326494..a200a4b3deb6 100644
--- a/packages/blocks/src/database-block/data-view/views/kanban/define.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/define.ts
@@ -1,17 +1,20 @@
-import { multiSelectPureColumnConfig } from '../../column/presets/multi-select/define.js';
-import { numberPureColumnConfig } from '../../column/presets/number/define.js';
-import { selectColumnModelConfig } from '../../column/presets/select/define.js';
-import { textColumnModelConfig } from '../../column/presets/text/define.js';
-import type { FilterGroup } from '../../common/ast.js';
-import { viewManager } from '../../common/data-view.js';
-import { groupByMatcher } from '../../common/group-by/matcher.js';
-import type { GroupBy, GroupProperty, Sort } from '../../common/types.js';
-import { defaultGroupBy } from '../../common/view-manager.js';
+import { multiSelectColumnModelConfig } from '../../../column/presets/multi-select/define.js';
+import { numberColumnModelConfig } from '../../../column/presets/number/define.js';
+import { selectColumnModelConfig } from '../../../column/presets/select/define.js';
+import { textColumnModelConfig } from '../../../column/presets/text/define.js';
+import type { FilterGroup } from '../../../common/ast.js';
+import { groupByMatcher } from '../../../common/group-by/matcher.js';
+import type { GroupBy, GroupProperty, Sort } from '../../../common/types.js';
+import { defaultGroupBy } from '../../../common/view-manager.js';
+import { type BasicViewDataType, viewType } from '../../data-view.js';
 import type { Column } from '../table/types.js';
+import { DataViewKanbanManager } from './kanban-view-manager.js';
+
+export const kanbanViewType = viewType('kanban');
 
 declare global {
   interface DataViewDataTypeMap {
-    kanban: KanbanViewData;
+    kanban: DataType;
   }
 }
 export type KanbanViewColumn = {
@@ -19,7 +22,7 @@ export type KanbanViewColumn = {
   hide?: boolean;
 };
 
-export type KanbanViewData = {
+type DataType = {
   columns: KanbanViewColumn[];
   filter: FilterGroup;
   groupBy?: GroupBy;
@@ -31,9 +34,13 @@ export type KanbanViewData = {
   };
   groupProperties: GroupProperty[];
 };
-
-viewManager.register('kanban', {
+export type KanbanViewData = BasicViewDataType<
+  typeof kanbanViewType.type,
+  DataType
+>;
+export const kanbanViewModel = kanbanViewType.modelConfig<KanbanViewData>({
   defaultName: 'Kanban View',
+  dataViewManager: DataViewKanbanManager,
   init(columnMetaMap, model, id, name) {
     const allowList = model.columns.filter(column => {
       const type = columnMetaMap[column.type].model.dataType(column.data);
@@ -43,14 +50,14 @@ viewManager.register('kanban', {
       if (
         [
           selectColumnModelConfig.type as string,
-          multiSelectPureColumnConfig.type,
+          multiSelectColumnModelConfig.type,
         ].includes(column.type)
       ) {
         return 3;
       }
       if (
         [
-          numberPureColumnConfig.type as string,
+          numberColumnModelConfig.type as string,
           textColumnModelConfig.type,
         ].includes(column.type)
       ) {
diff --git a/packages/blocks/src/database-block/data-view/views/kanban/group.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/group.ts
similarity index 93%
rename from packages/blocks/src/database-block/data-view/views/kanban/group.ts
rename to packages/blocks/src/database-block/data-view/view/presets/kanban/group.ts
index 2464f9e8c442..66c9435b3241 100644
--- a/packages/blocks/src/database-block/data-view/views/kanban/group.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/group.ts
@@ -6,11 +6,11 @@ import { customElement, property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
 
-import { AddCursorIcon } from '../../../../_common/icons/index.js';
-import { GroupTitle } from '../../common/group-by/group-title.js';
-import type { GroupData } from '../../common/group-by/helper.js';
-import type { DataViewRenderer } from '../../data-view.js';
-import { popFilterableSimpleMenu } from '../../utils/menu/index.js';
+import { AddCursorIcon } from '../../../../../_common/icons/index.js';
+import { GroupTitle } from '../../../common/group-by/group-title.js';
+import type { GroupData } from '../../../common/group-by/helper.js';
+import type { DataViewRenderer } from '../../../data-view.js';
+import { popFilterableSimpleMenu } from '../../../utils/menu/index.js';
 import type { DataViewKanbanManager } from './kanban-view-manager.js';
 
 const styles = css`
diff --git a/packages/blocks/src/database-block/data-view/views/table/components/header-cell.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/header-cell.ts
similarity index 79%
rename from packages/blocks/src/database-block/data-view/views/table/components/header-cell.ts
rename to packages/blocks/src/database-block/data-view/view/presets/kanban/header-cell.ts
index b816fbf57495..baa976376637 100644
--- a/packages/blocks/src/database-block/data-view/views/table/components/header-cell.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/header-cell.ts
@@ -9,10 +9,10 @@ import { map } from '../../../utils/uni-component/operation.js';
 export const headerRenderer = {
   view: map(
     createFromBaseCellRenderer(HeaderAreaTextCell),
-    (props: CellRenderProps) => ({ ...props, showIcon: true })
+    (props: CellRenderProps) => ({ ...props, showIcon: false })
   ),
   edit: map(
     createFromBaseCellRenderer(HeaderAreaTextCellEditing),
-    (props: CellRenderProps) => ({ ...props, showIcon: true })
+    (props: CellRenderProps) => ({ ...props, showIcon: false })
   ),
 };
diff --git a/packages/blocks/src/database-block/data-view/views/kanban/header.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/header.ts
similarity index 96%
rename from packages/blocks/src/database-block/data-view/views/kanban/header.ts
rename to packages/blocks/src/database-block/data-view/view/presets/kanban/header.ts
index 4372887f952f..567580eeedbb 100644
--- a/packages/blocks/src/database-block/data-view/views/kanban/header.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/header.ts
@@ -5,7 +5,7 @@ import { css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import { popMenu } from '../../utils/menu/index.js';
+import { popMenu } from '../../../utils/menu/index.js';
 import type { DataViewKanbanManager } from './kanban-view-manager.js';
 
 const styles = css`
diff --git a/packages/blocks/src/database-block/data-view/views/kanban/kanban-view-manager.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/kanban-view-manager.ts
similarity index 84%
rename from packages/blocks/src/database-block/data-view/views/kanban/kanban-view-manager.ts
rename to packages/blocks/src/database-block/data-view/view/presets/kanban/kanban-view-manager.ts
index 803a408e4881..e55d6e6861f9 100644
--- a/packages/blocks/src/database-block/data-view/views/kanban/kanban-view-manager.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/kanban-view-manager.ts
@@ -1,38 +1,28 @@
-import type { CellRenderer } from '../../column/index.js';
-import type { FilterGroup } from '../../common/ast.js';
-import type { RealDataViewDataTypeMap } from '../../common/data-view.js';
+import type { CellRenderer } from '../../../column/index.js';
+import type { FilterGroup } from '../../../common/ast.js';
 import {
-  BaseDataViewColumnManager,
-  BaseDataViewManager,
-} from '../../common/data-view-manager.js';
-import type { DataSource } from '../../common/datasource/base.js';
-import { GroupHelper, sortByManually } from '../../common/group-by/helper.js';
-import { groupByMatcher } from '../../common/group-by/matcher.js';
-import { defaultGroupBy } from '../../common/view-manager.js';
-import type { SingleViewSource } from '../../common/view-source.js';
-import { evalFilter } from '../../logical/eval-filter.js';
-import type { TType } from '../../logical/typesystem.js';
-import type { InsertToPosition } from '../../types.js';
-import { insertPositionToIndex } from '../../utils/insert.js';
+  GroupHelper,
+  sortByManually,
+} from '../../../common/group-by/helper.js';
+import { groupByMatcher } from '../../../common/group-by/matcher.js';
+import { defaultGroupBy } from '../../../common/view-manager.js';
+import { evalFilter } from '../../../logical/eval-filter.js';
+import type { TType } from '../../../logical/typesystem.js';
+import type { InsertToPosition } from '../../../types.js';
+import { insertPositionToIndex } from '../../../utils/insert.js';
+import {
+  DataViewColumnManagerBase,
+  DataViewManagerBase,
+} from '../../data-view-manager.js';
+import type { KanbanViewData } from './define.js';
 import { headerRenderer } from './header-cell.js';
 
-type KanbanViewData = RealDataViewDataTypeMap['kanban'];
-
-export class DataViewKanbanManager extends BaseDataViewManager {
-  private readonly updateView: (
+export class DataViewKanbanManager extends DataViewManagerBase<KanbanViewData> {
+  private updateView(
     updater: (view: KanbanViewData) => Partial<KanbanViewData>
-  ) => void;
-
-  constructor(
-    private viewSource: SingleViewSource<KanbanViewData>,
-    dataSource: DataSource
   ) {
-    super(dataSource);
-    this.updateView = updater => {
-      this.syncView();
-      viewSource.updateView(updater);
-    };
-    viewSource.updateSlot.pipe(this.slots.update);
+    this.syncView();
+    this.viewSource.updateView(updater);
   }
 
   get view() {
@@ -335,7 +325,7 @@ export class DataViewKanbanManager extends BaseDataViewManager {
   }
 }
 
-export class DataViewKanbanColumnManager extends BaseDataViewColumnManager {
+export class DataViewKanbanColumnManager extends DataViewColumnManagerBase {
   constructor(
     propertyId: string,
     override dataViewManager: DataViewKanbanManager
diff --git a/packages/blocks/src/database-block/data-view/views/kanban/kanban-view.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/kanban-view.ts
similarity index 93%
rename from packages/blocks/src/database-block/data-view/views/kanban/kanban-view.ts
rename to packages/blocks/src/database-block/data-view/view/presets/kanban/kanban-view.ts
index 3dcad02de716..b74888b21cd8 100644
--- a/packages/blocks/src/database-block/data-view/views/kanban/kanban-view.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/kanban-view.ts
@@ -1,7 +1,7 @@
 import './group.js';
 import './header.js';
 import './controller/drag.js';
-import '../../common/group-by/define.js';
+import '../../../common/group-by/define.js';
 
 import { css } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
@@ -9,11 +9,11 @@ import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
 import Sortable from 'sortablejs';
 
-import { AddCursorIcon } from '../../../../_common/icons/index.js';
-import { BaseDataView } from '../../common/base-data-view.js';
-import type { GroupHelper } from '../../common/group-by/helper.js';
-import { popMenu } from '../../utils/menu/index.js';
-import { renderUniLit } from '../../utils/uni-component/uni-component.js';
+import { AddCursorIcon } from '../../../../../_common/icons/index.js';
+import type { GroupHelper } from '../../../common/group-by/helper.js';
+import { popMenu } from '../../../utils/menu/index.js';
+import { renderUniLit } from '../../../utils/uni-component/uni-component.js';
+import { DataViewBase } from '../../data-view-base.js';
 import { KanbanClipboardController } from './controller/clipboard.js';
 import { KanbanDragController } from './controller/drag.js';
 import { KanbanHotkeysController } from './controller/hotkeys.js';
@@ -93,7 +93,7 @@ const styles = css`
 `;
 
 @customElement('affine-data-view-kanban')
-export class DataViewKanban extends BaseDataView<
+export class DataViewKanban extends DataViewBase<
   DataViewKanbanManager,
   KanbanViewSelectionWithType
 > {
diff --git a/packages/blocks/src/database-block/data-view/views/kanban/menu.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/menu.ts
similarity index 92%
rename from packages/blocks/src/database-block/data-view/views/kanban/menu.ts
rename to packages/blocks/src/database-block/data-view/view/presets/kanban/menu.ts
index 3ebd3f3eb007..b547fde1060c 100644
--- a/packages/blocks/src/database-block/data-view/views/kanban/menu.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/menu.ts
@@ -6,10 +6,10 @@ import {
   ExpandFullIcon,
   MoveLeftIcon,
   MoveRightIcon,
-} from '../../../../_common/icons/index.js';
-import { DeleteIcon } from '../../common/icons/index.js';
-import type { DataViewRenderer } from '../../data-view.js';
-import { popFilterableSimpleMenu } from '../../utils/menu/index.js';
+} from '../../../../../_common/icons/index.js';
+import { DeleteIcon } from '../../../common/icons/index.js';
+import type { DataViewRenderer } from '../../../data-view.js';
+import { popFilterableSimpleMenu } from '../../../utils/menu/index.js';
 import type { KanbanSelectionController } from './controller/selection.js';
 
 export const openDetail = (
diff --git a/packages/blocks/src/database-block/data-view/view/presets/kanban/renderer.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/renderer.ts
new file mode 100644
index 000000000000..c4c36645a21f
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/renderer.ts
@@ -0,0 +1,19 @@
+import { ExpandDatabaseBlockModal } from '../../../common/header/tools/expand/index.js';
+import { DataViewHeaderToolsFilter } from '../../../common/header/tools/filter.js';
+import { DataViewHeaderToolsSearch } from '../../../common/header/tools/search.js';
+import { DataViewHeaderToolsViewOptions } from '../../../common/header/tools/view-options.js';
+import { createUniComponentFromWebComponent } from '../../../utils/uni-component/index.js';
+import { createIcon } from '../../../utils/uni-icon.js';
+import { kanbanViewModel } from './define.js';
+import { DataViewKanban } from './kanban-view.js';
+
+export const kanbanViewConfig = kanbanViewModel.rendererConfig({
+  icon: createIcon('DatabaseKanbanViewIcon'),
+  view: createUniComponentFromWebComponent(DataViewKanban),
+  tools: [
+    createUniComponentFromWebComponent(DataViewHeaderToolsFilter),
+    createUniComponentFromWebComponent(ExpandDatabaseBlockModal),
+    createUniComponentFromWebComponent(DataViewHeaderToolsSearch),
+    createUniComponentFromWebComponent(DataViewHeaderToolsViewOptions),
+  ],
+});
diff --git a/packages/blocks/src/database-block/data-view/views/kanban/types.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/types.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/views/kanban/types.ts
rename to packages/blocks/src/database-block/data-view/view/presets/kanban/types.ts
diff --git a/packages/blocks/src/database-block/data-view/views/table/components/cell-container.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/cell-container.ts
similarity index 94%
rename from packages/blocks/src/database-block/data-view/views/table/components/cell-container.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/components/cell-container.ts
index a14e46a072d6..742cc9feeaf0 100644
--- a/packages/blocks/src/database-block/data-view/views/table/components/cell-container.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/table/components/cell-container.ts
@@ -7,9 +7,9 @@ import { createRef } from 'lit/directives/ref.js';
 import type {
   CellRenderProps,
   DataViewCellLifeCycle,
-} from '../../../column/index.js';
-import type { DataViewManager } from '../../../common/data-view-manager.js';
-import { renderUniLit } from '../../../utils/uni-component/uni-component.js';
+} from '../../../../column/index.js';
+import { renderUniLit } from '../../../../utils/uni-component/index.js';
+import type { DataViewManager } from '../../../data-view-manager.js';
 import type { DataViewTableColumnManager } from '../table-view-manager.js';
 
 @customElement('affine-database-cell-container')
diff --git a/packages/blocks/src/database-block/data-view/views/table/components/column-header/column-header.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/column-header.ts
similarity index 96%
rename from packages/blocks/src/database-block/data-view/views/table/components/column-header/column-header.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/column-header.ts
index 97e3c20bf486..c54edd28d486 100644
--- a/packages/blocks/src/database-block/data-view/views/table/components/column-header/column-header.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/column-header.ts
@@ -9,8 +9,8 @@ import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
 
-import { AddCursorIcon } from '../../../../../../_common/icons/index.js';
-import { renderTemplate } from '../../../../utils/uni-component/render-template.js';
+import { AddCursorIcon } from '../../../../../../../_common/icons/index.js';
+import { renderTemplate } from '../../../../../utils/uni-component/render-template.js';
 import type { DataViewTableManager } from '../../table-view-manager.js';
 import { styles } from './styles.js';
 
diff --git a/packages/blocks/src/database-block/data-view/views/table/components/column-header/column-renderer.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/column-renderer.ts
similarity index 96%
rename from packages/blocks/src/database-block/data-view/views/table/components/column-header/column-renderer.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/column-renderer.ts
index 02b713ec3457..3bf04c55c81f 100644
--- a/packages/blocks/src/database-block/data-view/views/table/components/column-header/column-renderer.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/column-renderer.ts
@@ -5,7 +5,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
 
-import type { DataViewColumnManager } from '../../../../common/data-view-manager.js';
+import type { DataViewColumnManager } from '../../../../data-view-manager.js';
 import type { DataViewTableManager } from '../../table-view-manager.js';
 
 @customElement('affine-data-view-column-preview')
diff --git a/packages/blocks/src/database-block/data-view/views/table/components/column-header/database-header-column.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/database-header-column.ts
similarity index 97%
rename from packages/blocks/src/database-block/data-view/views/table/components/column-header/database-header-column.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/database-header-column.ts
index b939623e6d91..d1c27e4e1be0 100644
--- a/packages/blocks/src/database-block/data-view/views/table/components/column-header/database-header-column.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/database-header-column.ts
@@ -16,13 +16,13 @@ import {
   DatabaseMoveRight,
   DeleteIcon,
   TextIcon,
-} from '../../../../common/icons/index.js';
-import type { InsertToPosition } from '../../../../types.js';
-import { startDrag } from '../../../../utils/drag.js';
-import { autoScrollOnBoundary } from '../../../../utils/frame-loop.js';
-import { insertPositionToIndex } from '../../../../utils/insert.js';
-import { popMenu, positionToVRect } from '../../../../utils/menu/index.js';
-import { getResultInRange } from '../../../../utils/utils.js';
+} from '../../../../../common/icons/index.js';
+import type { InsertToPosition } from '../../../../../types.js';
+import { startDrag } from '../../../../../utils/drag.js';
+import { autoScrollOnBoundary } from '../../../../../utils/frame-loop.js';
+import { popMenu, positionToVRect } from '../../../../../utils/index.js';
+import { insertPositionToIndex } from '../../../../../utils/insert.js';
+import { getResultInRange } from '../../../../../utils/utils.js';
 import { DEFAULT_COLUMN_TITLE_HEIGHT } from '../../consts.js';
 import type {
   DataViewTableColumnManager,
diff --git a/packages/blocks/src/database-block/data-view/views/table/components/column-header/styles.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/styles.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/views/table/components/column-header/styles.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/styles.ts
diff --git a/packages/blocks/src/database-block/data-view/views/table/components/column-header/vertical-indicator.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/vertical-indicator.ts
similarity index 97%
rename from packages/blocks/src/database-block/data-view/views/table/components/column-header/vertical-indicator.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/vertical-indicator.ts
index 3c791ef9f0b2..6d04a094f15e 100644
--- a/packages/blocks/src/database-block/data-view/views/table/components/column-header/vertical-indicator.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/vertical-indicator.ts
@@ -5,8 +5,8 @@ import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { startDrag } from '../../../../utils/drag.js';
-import { getResultInRange } from '../../../../utils/utils.js';
+import { startDrag } from '../../../../../utils/drag.js';
+import { getResultInRange } from '../../../../../utils/utils.js';
 import { DEFAULT_COLUMN_MIN_WIDTH } from '../../consts.js';
 import type { DataViewTableColumnManager } from '../../table-view-manager.js';
 
diff --git a/packages/blocks/src/database-block/data-view/views/table/components/column-stats-cell.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-stats-cell.ts
similarity index 95%
rename from packages/blocks/src/database-block/data-view/views/table/components/column-stats-cell.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/components/column-stats-cell.ts
index ffa9335bd240..b81eda1aa258 100644
--- a/packages/blocks/src/database-block/data-view/views/table/components/column-stats-cell.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-stats-cell.ts
@@ -3,9 +3,9 @@ import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { ArrowDownIcon } from '../../../../../_common/icons/index.js';
-import { getRootByElement } from '../../../../../_common/utils/index.js';
-import { positionToVRect } from '../../../utils/index.js';
+import { ArrowDownIcon } from '../../../../../../_common/icons/index.js';
+import { getRootByElement } from '../../../../../../_common/utils/index.js';
+import { positionToVRect } from '../../../../utils/index.js';
 import {
   type ColumnDataType,
   getStatCalcOperationFromType,
diff --git a/packages/blocks/src/database-block/data-view/views/table/components/column-stats.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-stats.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/views/table/components/column-stats.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/components/column-stats.ts
diff --git a/packages/blocks/src/database-block/data-view/view/presets/table/components/header-cell.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/header-cell.ts
new file mode 100644
index 000000000000..3271bf187dbc
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/view/presets/table/components/header-cell.ts
@@ -0,0 +1,18 @@
+import type { CellRenderProps } from '../../../../column/index.js';
+import { createFromBaseCellRenderer } from '../../../../column/renderer.js';
+import {
+  HeaderAreaTextCell,
+  HeaderAreaTextCellEditing,
+} from '../../../../common/header-area/text.js';
+import { map } from '../../../../utils/uni-component/operation.js';
+
+export const headerRenderer = {
+  view: map(
+    createFromBaseCellRenderer(HeaderAreaTextCell),
+    (props: CellRenderProps) => ({ ...props, showIcon: true })
+  ),
+  edit: map(
+    createFromBaseCellRenderer(HeaderAreaTextCellEditing),
+    (props: CellRenderProps) => ({ ...props, showIcon: true })
+  ),
+};
diff --git a/packages/blocks/src/database-block/data-view/views/table/components/menu.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/menu.ts
similarity index 89%
rename from packages/blocks/src/database-block/data-view/views/table/components/menu.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/components/menu.ts
index bf11666296a8..b1c8f56c54a9 100644
--- a/packages/blocks/src/database-block/data-view/views/table/components/menu.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/table/components/menu.ts
@@ -5,15 +5,12 @@ import {
   ExpandFullIcon,
   MoveLeftIcon,
   MoveRightIcon,
-} from '../../../../../_common/icons/index.js';
-import type { RootBlockComponent } from '../../../../../root-block/index.js';
-import type { DataViewColumnManager } from '../../../common/data-view-manager.js';
-import { DeleteIcon } from '../../../common/icons/index.js';
-import type { DataViewRenderer } from '../../../data-view.js';
-import {
-  type Menu,
-  popFilterableSimpleMenu,
-} from '../../../utils/menu/index.js';
+} from '../../../../../../_common/icons/index.js';
+import type { RootBlockComponent } from '../../../../../../root-block/index.js';
+import { DeleteIcon } from '../../../../common/icons/index.js';
+import type { DataViewRenderer } from '../../../../data-view.js';
+import { type Menu, popFilterableSimpleMenu } from '../../../../utils/index.js';
+import type { DataViewColumnManager } from '../../../data-view-manager.js';
 import type { TableSelectionController } from '../controller/selection.js';
 import {
   checkboxCalcOps,
diff --git a/packages/blocks/src/database-block/data-view/views/table/components/row.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/row.ts
similarity index 96%
rename from packages/blocks/src/database-block/data-view/views/table/components/row.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/components/row.ts
index 48369893f2a1..9c5422cfb3e3 100644
--- a/packages/blocks/src/database-block/data-view/views/table/components/row.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/table/components/row.ts
@@ -5,10 +5,10 @@ import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
 
-import { NewEditIcon } from '../../../../../_common/icons/index.js';
-import { MoreHorizontalIcon } from '../../../common/icons/index.js';
-import type { DataViewRenderer } from '../../../data-view.js';
-import { eventToVRect } from '../../../utils/menu/index.js';
+import { NewEditIcon } from '../../../../../../_common/icons/index.js';
+import { MoreHorizontalIcon } from '../../../../common/icons/index.js';
+import type { DataViewRenderer } from '../../../../data-view.js';
+import { eventToVRect } from '../../../../utils/index.js';
 import { DEFAULT_COLUMN_MIN_WIDTH } from '../consts.js';
 import type { DataViewTableManager } from '../table-view-manager.js';
 import type { TableViewSelection } from '../types.js';
diff --git a/packages/blocks/src/database-block/data-view/views/table/consts.ts b/packages/blocks/src/database-block/data-view/view/presets/table/consts.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/views/table/consts.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/consts.ts
diff --git a/packages/blocks/src/database-block/data-view/views/table/controller/clipboard.ts b/packages/blocks/src/database-block/data-view/view/presets/table/controller/clipboard.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/views/table/controller/clipboard.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/controller/clipboard.ts
diff --git a/packages/blocks/src/database-block/data-view/views/table/controller/drag.ts b/packages/blocks/src/database-block/data-view/view/presets/table/controller/drag.ts
similarity index 97%
rename from packages/blocks/src/database-block/data-view/views/table/controller/drag.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/controller/drag.ts
index f673cc42bd7b..07ecb92cdc3c 100644
--- a/packages/blocks/src/database-block/data-view/views/table/controller/drag.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/table/controller/drag.ts
@@ -2,8 +2,8 @@
 
 import type { ReactiveController } from 'lit';
 
-import type { InsertToPosition } from '../../../types.js';
-import { startDrag } from '../../../utils/drag.js';
+import type { InsertToPosition } from '../../../../types.js';
+import { startDrag } from '../../../../utils/drag.js';
 import { TableRow } from '../components/row.js';
 import type { DataViewTable } from '../table-view.js';
 
diff --git a/packages/blocks/src/database-block/data-view/views/table/controller/hotkeys.ts b/packages/blocks/src/database-block/data-view/view/presets/table/controller/hotkeys.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/views/table/controller/hotkeys.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/controller/hotkeys.ts
diff --git a/packages/blocks/src/database-block/data-view/views/table/controller/selection.ts b/packages/blocks/src/database-block/data-view/view/presets/table/controller/selection.ts
similarity index 99%
rename from packages/blocks/src/database-block/data-view/views/table/controller/selection.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/controller/selection.ts
index c1cc35d9baa6..eeb5c66d42b8 100644
--- a/packages/blocks/src/database-block/data-view/views/table/controller/selection.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/table/controller/selection.ts
@@ -6,8 +6,8 @@ import { customElement } from 'lit/decorators.js';
 import type { Ref } from 'lit/directives/ref.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 
-import { startDrag } from '../../../utils/drag.js';
-import { autoScrollOnBoundary } from '../../../utils/frame-loop.js';
+import { startDrag } from '../../../../utils/drag.js';
+import { autoScrollOnBoundary } from '../../../../utils/frame-loop.js';
 import type { DatabaseCellContainer } from '../components/cell-container.js';
 import type { DataViewTable } from '../table-view.js';
 import type {
diff --git a/packages/blocks/src/database-block/data-view/views/table/define.ts b/packages/blocks/src/database-block/data-view/view/presets/table/define.ts
similarity index 56%
rename from packages/blocks/src/database-block/data-view/views/table/define.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/define.ts
index c56577155034..07fa1ca8641b 100644
--- a/packages/blocks/src/database-block/data-view/views/table/define.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/table/define.ts
@@ -1,10 +1,13 @@
-import type { FilterGroup } from '../../common/ast.js';
-import { viewManager } from '../../common/data-view.js';
-import type { GroupBy, GroupProperty, Sort } from '../../common/types.js';
+import type { FilterGroup } from '../../../common/ast.js';
+import type { GroupBy, GroupProperty, Sort } from '../../../common/types.js';
+import { type BasicViewDataType, viewType } from '../../data-view.js';
+import { DataViewTableManager } from './table-view-manager.js';
+
+export const tableViewType = viewType('table');
 
 declare global {
   interface DataViewDataTypeMap {
-    table: TableViewData;
+    table: DataType;
   }
 }
 export type TableViewColumn = {
@@ -12,7 +15,7 @@ export type TableViewColumn = {
   width: number;
   hide?: boolean;
 };
-export type TableViewData = {
+type DataType = {
   columns: TableViewColumn[];
   filter: FilterGroup;
   groupBy?: GroupBy;
@@ -24,8 +27,13 @@ export type TableViewData = {
     imageColumn?: string;
   };
 };
-viewManager.register('table', {
+export type TableViewData = BasicViewDataType<
+  typeof tableViewType.type,
+  DataType
+>;
+export const tableViewModel = tableViewType.modelConfig<TableViewData>({
   defaultName: 'Table View',
+  dataViewManager: DataViewTableManager,
   init(_columnMetaMap, model, id, name) {
     return {
       id,
diff --git a/packages/blocks/src/database-block/data-view/views/table/group.ts b/packages/blocks/src/database-block/data-view/view/presets/table/group.ts
similarity index 93%
rename from packages/blocks/src/database-block/data-view/views/table/group.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/group.ts
index 5372120dee3a..795ef5fd4cfa 100644
--- a/packages/blocks/src/database-block/data-view/views/table/group.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/table/group.ts
@@ -1,5 +1,5 @@
-import './components/column-stats.js';
-import './components/column-stats-cell.js';
+import './components/column-stats';
+import './components/column-stats-cell';
 
 import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
 import type { PropertyValues } from 'lit';
@@ -7,11 +7,11 @@ import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
-import { GroupTitle } from '../../common/group-by/group-title.js';
-import type { GroupData } from '../../common/group-by/helper.js';
-import { PlusIcon } from '../../common/icons/index.js';
-import type { DataViewRenderer } from '../../data-view.js';
-import { popFilterableSimpleMenu } from '../../utils/menu/index.js';
+import { GroupTitle } from '../../../common/group-by/group-title.js';
+import type { GroupData } from '../../../common/group-by/helper.js';
+import { PlusIcon } from '../../../common/icons/index.js';
+import type { DataViewRenderer } from '../../../data-view.js';
+import { popFilterableSimpleMenu } from '../../../utils/index.js';
 import { LEFT_TOOL_BAR_WIDTH } from './consts.js';
 import type { DataViewTable } from './table-view.js';
 import type { DataViewTableManager } from './table-view-manager.js';
diff --git a/packages/blocks/src/database-block/data-view/view/presets/table/renderer.ts b/packages/blocks/src/database-block/data-view/view/presets/table/renderer.ts
new file mode 100644
index 000000000000..cc1a8fc33787
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/view/presets/table/renderer.ts
@@ -0,0 +1,21 @@
+import { DataViewHeaderToolsAddRow } from '../../../common/header/tools/add-row/add-row.js';
+import { ExpandDatabaseBlockModal } from '../../../common/header/tools/expand/index.js';
+import { DataViewHeaderToolsFilter } from '../../../common/header/tools/filter.js';
+import { DataViewHeaderToolsSearch } from '../../../common/header/tools/search.js';
+import { DataViewHeaderToolsViewOptions } from '../../../common/header/tools/view-options.js';
+import { createUniComponentFromWebComponent } from '../../../utils/uni-component/index.js';
+import { createIcon } from '../../../utils/uni-icon.js';
+import { tableViewModel } from './define.js';
+import { DataViewTable } from './table-view.js';
+
+export const tableViewConfig = tableViewModel.rendererConfig({
+  view: createUniComponentFromWebComponent(DataViewTable),
+  icon: createIcon('DatabaseTableViewIcon'),
+  tools: [
+    createUniComponentFromWebComponent(DataViewHeaderToolsFilter),
+    createUniComponentFromWebComponent(ExpandDatabaseBlockModal),
+    createUniComponentFromWebComponent(DataViewHeaderToolsSearch),
+    createUniComponentFromWebComponent(DataViewHeaderToolsViewOptions),
+    createUniComponentFromWebComponent(DataViewHeaderToolsAddRow),
+  ],
+});
diff --git a/packages/blocks/src/database-block/data-view/views/table/stat-ops.ts b/packages/blocks/src/database-block/data-view/view/presets/table/stat-ops.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/views/table/stat-ops.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/stat-ops.ts
diff --git a/packages/blocks/src/database-block/data-view/views/table/table-view-manager.ts b/packages/blocks/src/database-block/data-view/view/presets/table/table-view-manager.ts
similarity index 85%
rename from packages/blocks/src/database-block/data-view/views/table/table-view-manager.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/table-view-manager.ts
index b51d2c664646..5e930a0de7fb 100644
--- a/packages/blocks/src/database-block/data-view/views/table/table-view-manager.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/table/table-view-manager.ts
@@ -1,42 +1,32 @@
-import type { CellRenderer } from '../../column/index.js';
-import type { FilterGroup } from '../../common/ast.js';
-import type { RealDataViewDataTypeMap } from '../../common/data-view.js';
+import type { CellRenderer } from '../../../column/index.js';
+import type { FilterGroup } from '../../../common/ast.js';
 import {
-  BaseDataViewColumnManager,
-  BaseDataViewManager,
-} from '../../common/data-view-manager.js';
-import type { DataSource } from '../../common/datasource/base.js';
-import { GroupHelper, sortByManually } from '../../common/group-by/helper.js';
-import { groupByMatcher } from '../../common/group-by/matcher.js';
-import { defaultGroupBy } from '../../common/view-manager.js';
-import type { SingleViewSource } from '../../common/view-source.js';
-import { evalFilter } from '../../logical/eval-filter.js';
-import type { TType } from '../../logical/typesystem.js';
-import type { InsertToPosition } from '../../types.js';
-import { insertPositionToIndex } from '../../utils/insert.js';
+  GroupHelper,
+  sortByManually,
+} from '../../../common/group-by/helper.js';
+import { groupByMatcher } from '../../../common/group-by/matcher.js';
+import { defaultGroupBy } from '../../../common/view-manager.js';
+import { evalFilter } from '../../../logical/eval-filter.js';
+import type { TType } from '../../../logical/typesystem.js';
+import type { InsertToPosition } from '../../../types.js';
+import { insertPositionToIndex } from '../../../utils/insert.js';
+import type { _DataViewDataTypeMap } from '../../data-view.js';
+import {
+  DataViewColumnManagerBase,
+  DataViewManagerBase,
+} from '../../data-view-manager.js';
 import { headerRenderer } from './components/header-cell.js';
 
-type TableViewData = RealDataViewDataTypeMap['table'];
+type TableViewData = _DataViewDataTypeMap['table'];
 
-export class DataViewTableManager extends BaseDataViewManager {
+export class DataViewTableManager extends DataViewManagerBase<TableViewData> {
   public override get type(): string {
     return this.view.mode;
   }
 
-  private readonly updateView: (
-    updater: (view: TableViewData) => Partial<TableViewData>
-  ) => void;
-
-  constructor(
-    private viewSource: SingleViewSource<TableViewData>,
-    dataSource: DataSource
-  ) {
-    super(dataSource);
-    this.updateView = updater => {
-      this.syncView();
-      viewSource.updateView(updater);
-    };
-    viewSource.updateSlot.pipe(this.slots.update);
+  private updateView(updater: (view: TableViewData) => Partial<TableViewData>) {
+    this.syncView();
+    this.viewSource.updateView(updater);
   }
 
   get view() {
@@ -353,7 +343,7 @@ export class DataViewTableManager extends BaseDataViewManager {
   }
 }
 
-export class DataViewTableColumnManager extends BaseDataViewColumnManager {
+export class DataViewTableColumnManager extends DataViewColumnManagerBase {
   constructor(
     propertyId: string,
     override dataViewManager: DataViewTableManager
diff --git a/packages/blocks/src/database-block/data-view/views/table/table-view.ts b/packages/blocks/src/database-block/data-view/view/presets/table/table-view.ts
similarity index 93%
rename from packages/blocks/src/database-block/data-view/views/table/table-view.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/table-view.ts
index e31d008b9eeb..cc23f339e435 100644
--- a/packages/blocks/src/database-block/data-view/views/table/table-view.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/table/table-view.ts
@@ -8,13 +8,13 @@ import { css } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import { AddCursorIcon } from '../../../../_common/icons/index.js';
-import { BaseDataView } from '../../common/base-data-view.js';
-import type { GroupHelper } from '../../common/group-by/helper.js';
-import type { InsertToPosition } from '../../types.js';
-import { insertPositionToIndex } from '../../utils/insert.js';
-import { popMenu } from '../../utils/menu/index.js';
-import { renderUniLit } from '../../utils/uni-component/uni-component.js';
+import { AddCursorIcon } from '../../../../../_common/icons/index.js';
+import type { GroupHelper } from '../../../common/group-by/helper.js';
+import type { InsertToPosition } from '../../../types.js';
+import { popMenu } from '../../../utils/index.js';
+import { insertPositionToIndex } from '../../../utils/insert.js';
+import { renderUniLit } from '../../../utils/uni-component/index.js';
+import { DataViewBase } from '../../data-view-base.js';
 import { LEFT_TOOL_BAR_WIDTH } from './consts.js';
 import { TableClipboardController } from './controller/clipboard.js';
 import { TableDragController } from './controller/drag.js';
@@ -128,7 +128,7 @@ const styles = css`
 `;
 
 @customElement('affine-database-table')
-export class DataViewTable extends BaseDataView<
+export class DataViewTable extends DataViewBase<
   DataViewTableManager,
   TableViewSelection
 > {
diff --git a/packages/blocks/src/database-block/data-view/views/table/types.ts b/packages/blocks/src/database-block/data-view/view/presets/table/types.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/views/table/types.ts
rename to packages/blocks/src/database-block/data-view/view/presets/table/types.ts
diff --git a/packages/blocks/src/database-block/data-view/views/kanban/header-cell.ts b/packages/blocks/src/database-block/data-view/views/kanban/header-cell.ts
deleted file mode 100644
index 9f62b0a8f0f2..000000000000
--- a/packages/blocks/src/database-block/data-view/views/kanban/header-cell.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { CellRenderProps } from '../../column/index.js';
-import { createFromBaseCellRenderer } from '../../column/renderer.js';
-import {
-  HeaderAreaTextCell,
-  HeaderAreaTextCellEditing,
-} from '../../common/header-area/text.js';
-import { map } from '../../utils/uni-component/operation.js';
-
-export const headerRenderer = {
-  view: map(
-    createFromBaseCellRenderer(HeaderAreaTextCell),
-    (props: CellRenderProps) => ({ ...props, showIcon: false })
-  ),
-  edit: map(
-    createFromBaseCellRenderer(HeaderAreaTextCellEditing),
-    (props: CellRenderProps) => ({ ...props, showIcon: false })
-  ),
-};
diff --git a/packages/blocks/src/database-block/data-view/views/kanban/renderer.ts b/packages/blocks/src/database-block/data-view/views/kanban/renderer.ts
deleted file mode 100644
index 9baf9e0c678c..000000000000
--- a/packages/blocks/src/database-block/data-view/views/kanban/renderer.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { viewRendererManager } from '../../common/data-view.js';
-import { ExpandDatabaseBlockModal } from '../../common/header/tools/expand/index.js';
-import { DataViewHeaderToolsFilter } from '../../common/header/tools/filter.js';
-import { DataViewHeaderToolsSearch } from '../../common/header/tools/search.js';
-import { DataViewHeaderToolsViewOptions } from '../../common/header/tools/view-options.js';
-import { createUniComponentFromWebComponent } from '../../utils/uni-component/uni-component.js';
-import { createIcon } from '../../utils/uni-icon.js';
-import { DataViewKanban } from './kanban-view.js';
-
-viewRendererManager.register('kanban', {
-  icon: createIcon('DatabaseKanbanViewIcon'),
-  view: createUniComponentFromWebComponent(DataViewKanban),
-  tools: [
-    createUniComponentFromWebComponent(DataViewHeaderToolsFilter),
-    createUniComponentFromWebComponent(ExpandDatabaseBlockModal),
-    createUniComponentFromWebComponent(DataViewHeaderToolsSearch),
-    createUniComponentFromWebComponent(DataViewHeaderToolsViewOptions),
-  ],
-});
diff --git a/packages/blocks/src/database-block/data-view/views/table/renderer.ts b/packages/blocks/src/database-block/data-view/views/table/renderer.ts
deleted file mode 100644
index c5bab0c9c4e0..000000000000
--- a/packages/blocks/src/database-block/data-view/views/table/renderer.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { viewRendererManager } from '../../common/data-view.js';
-import { DataViewHeaderToolsAddRow } from '../../common/header/tools/add-row/add-row.js';
-import { ExpandDatabaseBlockModal } from '../../common/header/tools/expand/index.js';
-import { DataViewHeaderToolsFilter } from '../../common/header/tools/filter.js';
-import { DataViewHeaderToolsSearch } from '../../common/header/tools/search.js';
-import { DataViewHeaderToolsViewOptions } from '../../common/header/tools/view-options.js';
-import { createUniComponentFromWebComponent } from '../../utils/uni-component/uni-component.js';
-import { createIcon } from '../../utils/uni-icon.js';
-import { DataViewTable } from './table-view.js';
-
-viewRendererManager.register('table', {
-  view: createUniComponentFromWebComponent(DataViewTable),
-  icon: createIcon('DatabaseTableViewIcon'),
-  tools: [
-    createUniComponentFromWebComponent(DataViewHeaderToolsFilter),
-    createUniComponentFromWebComponent(ExpandDatabaseBlockModal),
-    createUniComponentFromWebComponent(DataViewHeaderToolsSearch),
-    createUniComponentFromWebComponent(DataViewHeaderToolsViewOptions),
-    createUniComponentFromWebComponent(DataViewHeaderToolsAddRow),
-  ],
-});
diff --git a/packages/blocks/src/database-block/database-block.ts b/packages/blocks/src/database-block/database-block.ts
index 79ea00863ce8..539b0572d59e 100644
--- a/packages/blocks/src/database-block/database-block.ts
+++ b/packages/blocks/src/database-block/database-block.ts
@@ -21,12 +21,8 @@ import {
 } from '../root-block/widgets/drag-handle/utils.js';
 import type { AffineInnerModalWidget } from '../root-block/widgets/inner-modal/inner-modal.js';
 import { AFFINE_INNER_MODAL_WIDGET } from '../root-block/widgets/inner-modal/inner-modal.js';
-import { Datasource } from './data-source.js';
+import { DatabaseBlockDataSource } from './data-source.js';
 import { dataViewCommonStyle } from './data-view/common/css-variable.js';
-import type { DataViewProps } from './data-view/common/data-view.js';
-import { type DataViewExpose } from './data-view/common/data-view.js';
-import type { DataViewManager } from './data-view/common/data-view-manager.js';
-import type { DataSource } from './data-view/common/datasource/base.js';
 import { renderFilterBar } from './data-view/common/filter/filter-bar.js';
 import { renderTools } from './data-view/common/header/tools/tools.js';
 import {
@@ -37,6 +33,9 @@ import {
   popMenu,
   type ViewSource,
 } from './data-view/index.js';
+import type { DataViewProps } from './data-view/view/data-view.js';
+import { type DataViewExpose } from './data-view/view/data-view.js';
+import type { DataViewManager } from './data-view/view/data-view-manager.js';
 import type { DatabaseBlockModel } from './database-model.js';
 import { DatabaseBlockSchema } from './database-model.js';
 import type { DatabaseService } from './database-service.js';
@@ -258,10 +257,10 @@ export class DatabaseBlockComponent extends BlockElement<
     return this.dataView.expose;
   }
 
-  private _dataSource?: DataSource;
-  public get dataSource(): DataSource {
+  private _dataSource?: DatabaseBlockDataSource;
+  public get dataSource(): DatabaseBlockDataSource {
     if (!this._dataSource) {
-      this._dataSource = new Datasource(this.host, {
+      this._dataSource = new DatabaseBlockDataSource(this.host, {
         type: 'database-block',
         pageId: this.host.doc.id,
         blockId: this.model.id,
diff --git a/packages/blocks/src/database-block/database-model.ts b/packages/blocks/src/database-block/database-model.ts
index cd92c296a6a4..1e3c516ae257 100644
--- a/packages/blocks/src/database-block/database-model.ts
+++ b/packages/blocks/src/database-block/database-model.ts
@@ -3,17 +3,17 @@ import { BlockModel, defineBlockSchema, nanoid } from '@blocksuite/store';
 
 import { databaseBlockColumnMap } from './columns/index.js';
 import { titlePureColumnConfig } from './columns/title/define.js';
-import { multiSelectPureColumnConfig } from './data-view/column/presets/multi-select/define.js';
+import { multiSelectColumnModelConfig } from './data-view/column/presets/multi-select/define.js';
 import { selectColumnModelConfig } from './data-view/column/presets/select/define.js';
-import {
-  type DataViewDataType,
-  type DataViewTypes,
-  viewManager,
-} from './data-view/common/data-view.js';
 import type { InsertToPosition } from './data-view/types.js';
 import { arrayMove, insertPositionToIndex } from './data-view/utils/insert.js';
 import { getTagColor } from './data-view/utils/tags/colors.js';
+import {
+  type DataViewDataType,
+  type DataViewTypes,
+} from './data-view/view/data-view.js';
 import type { Cell, Column, ColumnUpdater } from './types.js';
+import { databaseBlockViewMap } from './views/index.js';
 
 export type DatabaseBlockProps = {
   views: DataViewDataType[];
@@ -46,7 +46,7 @@ export class DatabaseBlockModel extends BlockModel<DatabaseBlockProps> {
   initConvert(viewType: DataViewTypes) {
     this.addColumn(
       'end',
-      multiSelectPureColumnConfig.model.create('Tag', { options: [] })
+      multiSelectColumnModelConfig.model.create('Tag', { options: [] })
     );
     this.initEmpty(viewType);
   }
@@ -93,12 +93,12 @@ export class DatabaseBlockModel extends BlockModel<DatabaseBlockProps> {
 
   addView(type: DataViewTypes) {
     const id = this.doc.generateBlockId();
-    const viewConfig = viewManager.getView(type);
-    const view = viewConfig.init(
+    const viewConfig = databaseBlockViewMap[type];
+    const view = viewConfig.model.init(
       databaseBlockColumnMap,
       this,
       id,
-      viewConfig.defaultName
+      viewConfig.model.defaultName
     );
     this.doc.transact(() => {
       this.views.push(view);
diff --git a/packages/blocks/src/database-block/database-service.ts b/packages/blocks/src/database-block/database-service.ts
index e356f13e10ba..cee1c9268af1 100644
--- a/packages/blocks/src/database-block/database-service.ts
+++ b/packages/blocks/src/database-block/database-service.ts
@@ -9,8 +9,8 @@ import {
 } from '../_common/inline/presets/affine-inline-specs.js';
 import { affineInlineMarkdownMatches } from '../_common/inline/presets/markdown.js';
 import { ReferenceNodeConfig } from '../_common/inline/presets/nodes/reference-node/reference-config.js';
-import type { DataViewTypes } from './data-view/common/data-view.js';
 import { DatabaseSelection } from './data-view/common/selection.js';
+import type { DataViewTypes } from './data-view/view/data-view.js';
 import type { DatabaseBlockModel } from './database-model.js';
 
 export class DatabaseService<
diff --git a/packages/blocks/src/database-block/detail-panel/block-renderer.ts b/packages/blocks/src/database-block/detail-panel/block-renderer.ts
index 079fa3bd4282..69d67015c069 100644
--- a/packages/blocks/src/database-block/detail-panel/block-renderer.ts
+++ b/packages/blocks/src/database-block/detail-panel/block-renderer.ts
@@ -3,9 +3,9 @@ import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import type { DetailSlotProps } from '../data-view/common/datasource/base.js';
-import type { DataViewKanbanManager } from '../data-view/views/kanban/kanban-view-manager.js';
-import type { DataViewTableManager } from '../data-view/views/table/table-view-manager.js';
+import type { DetailSlotProps } from '../data-view/common/data-source/base.js';
+import type { DataViewKanbanManager } from '../data-view/view/presets/kanban/kanban-view-manager.js';
+import type { DataViewTableManager } from '../data-view/view/presets/table/table-view-manager.js';
 import type { DatabaseBlockComponent } from '../database-block.js';
 
 @customElement('database-datasource-block-renderer')
diff --git a/packages/blocks/src/database-block/index.ts b/packages/blocks/src/database-block/index.ts
index f8fa426e6fbd..1b4c2817d765 100644
--- a/packages/blocks/src/database-block/index.ts
+++ b/packages/blocks/src/database-block/index.ts
@@ -4,11 +4,11 @@ import type { DatabaseService } from './database-service.js';
 
 export { checkboxColumnModelConfig } from './data-view/column/presets/checkbox/define.js';
 export { dateColumnModelConfig } from './data-view/column/presets/date/define.js';
-export { linkPureColumnConfig } from './data-view/column/presets/link/define.js';
+export { linkColumnModelConfig } from './data-view/column/presets/link/define.js';
 export { multiSelectColumnConfig } from './data-view/column/presets/multi-select/cell-renderer.js';
-export { multiSelectPureColumnConfig } from './data-view/column/presets/multi-select/define.js';
-export { numberPureColumnConfig } from './data-view/column/presets/number/define.js';
-export { progressPureColumnConfig } from './data-view/column/presets/progress/define.js';
+export { multiSelectColumnModelConfig } from './data-view/column/presets/multi-select/define.js';
+export { numberColumnModelConfig } from './data-view/column/presets/number/define.js';
+export { progressColumnModelConfig } from './data-view/column/presets/progress/define.js';
 export { insertPositionToIndex } from './data-view/utils/insert.js';
 export * from './database-block.js';
 export * from './database-model.js';
diff --git a/packages/blocks/src/database-block/types.ts b/packages/blocks/src/database-block/types.ts
index 62a151d3041d..810ac43c591d 100644
--- a/packages/blocks/src/database-block/types.ts
+++ b/packages/blocks/src/database-block/types.ts
@@ -1,6 +1,6 @@
-import type { Column } from './data-view/views/table/types.js';
+import type { Column } from './data-view/view/presets/table/types.js';
 
-export type { Column } from './data-view/views/table/types.js';
+export type { Column } from './data-view/view/presets/table/types.js';
 export type ColumnUpdater<T extends Column = Column> = (data: T) => Partial<T>;
 export type Cell<ValueType = unknown> = {
   columnId: Column['id'];
diff --git a/packages/blocks/src/database-block/view-source.ts b/packages/blocks/src/database-block/view-source.ts
index b115cdb3c3a2..a80d2141ed52 100644
--- a/packages/blocks/src/database-block/view-source.ts
+++ b/packages/blocks/src/database-block/view-source.ts
@@ -1,12 +1,10 @@
 import { Slot } from '@blocksuite/global/utils';
 
-import type { DataViewTypes } from './data-view/common/data-view.js';
-import type {
-  SingleViewSource,
-  ViewSource,
-} from './data-view/common/view-source.js';
+import type { SingleViewSource, ViewSource } from './data-view/common/index.js';
 import type { InsertToPosition } from './data-view/types.js';
-import type { DatabaseBlockModel } from './database-model.js';
+import type { DataViewTypes, ViewMeta } from './data-view/view/data-view.js';
+import { type DatabaseBlockModel } from './database-model.js';
+import { databaseBlockViewMap, databaseBlockViews } from './views/index.js';
 
 export class DatabaseBlockViewSource implements ViewSource {
   constructor(private model: DatabaseBlockModel) {}
@@ -105,4 +103,12 @@ export class DatabaseBlockViewSource implements ViewSource {
   public moveTo(id: string, position: InsertToPosition): void {
     this.model.moveViewTo(id, position);
   }
+
+  public get allViewMeta(): ViewMeta[] {
+    return databaseBlockViews;
+  }
+
+  public getViewMeta(type: string): ViewMeta {
+    return databaseBlockViewMap[type];
+  }
 }
diff --git a/packages/blocks/src/database-block/views/index.ts b/packages/blocks/src/database-block/views/index.ts
new file mode 100644
index 000000000000..af311e07c681
--- /dev/null
+++ b/packages/blocks/src/database-block/views/index.ts
@@ -0,0 +1,11 @@
+import type { ViewMeta } from '../data-view/view/data-view.js';
+import { viewPresets } from '../data-view/view/index.js';
+
+export const databaseBlockViews: ViewMeta[] = [
+  viewPresets.tableViewConfig,
+  viewPresets.kanbanViewConfig,
+];
+
+export const databaseBlockViewMap = Object.fromEntries(
+  databaseBlockViews.map(view => [view.type, view])
+);
diff --git a/packages/playground/apps/starter/data/database.ts b/packages/playground/apps/starter/data/database.ts
index 103f642cda64..091730fc4a81 100644
--- a/packages/playground/apps/starter/data/database.ts
+++ b/packages/playground/apps/starter/data/database.ts
@@ -2,13 +2,13 @@ import {
   checkboxColumnModelConfig,
   type DatabaseBlockModel,
   dateColumnModelConfig,
-  linkPureColumnConfig,
+  linkColumnModelConfig,
   type ListType,
   multiSelectColumnConfig,
-  multiSelectPureColumnConfig,
-  numberPureColumnConfig,
+  multiSelectColumnModelConfig,
+  numberColumnModelConfig,
   type ParagraphType,
-  progressPureColumnConfig,
+  progressColumnModelConfig,
   richTextColumnModelConfig,
 } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
@@ -49,7 +49,7 @@ export const database: InitFn = (collection: DocCollection, id: string) => {
         const database = doc.getBlockById(databaseId) as DatabaseBlockModel;
         database.addColumn(
           'end',
-          numberPureColumnConfig.create(numberPureColumnConfig.model.name)
+          numberColumnModelConfig.create(numberColumnModelConfig.model.name)
         );
         const richTextId = database.addColumn(
           'end',
@@ -61,11 +61,11 @@ export const database: InitFn = (collection: DocCollection, id: string) => {
         );
         database.addColumn(
           'end',
-          linkPureColumnConfig.create(linkPureColumnConfig.model.name)
+          linkColumnModelConfig.create(linkColumnModelConfig.model.name)
         );
         database.addColumn(
           'end',
-          progressPureColumnConfig.create(progressPureColumnConfig.model.name)
+          progressColumnModelConfig.create(progressColumnModelConfig.model.name)
         );
         database.addColumn(
           'end',
@@ -73,7 +73,9 @@ export const database: InitFn = (collection: DocCollection, id: string) => {
         );
         database.addColumn(
           'end',
-          multiSelectPureColumnConfig.create(multiSelectColumnConfig.model.name)
+          multiSelectColumnModelConfig.create(
+            multiSelectColumnConfig.model.name
+          )
         );
         database.updateView(database.views[0].id, () => {
           return {

From ac78c1e1103bca452e40cd65f446ba427bde18e0 Mon Sep 17 00:00:00 2001
From: zzj3720 <zuozijian1994@gmail.com>
Date: Thu, 11 Apr 2024 11:57:11 +0800
Subject: [PATCH 03/15] refactor(database): support for configuring data-view
 widget from out of data-view

---
 .../title.ts => components/title/index.ts}    |  4 +-
 .../database-block/data-view/common/ast.ts    |  2 +-
 .../data-view/common/header/reference.ts      |  0
 .../common/header/tools/base-tool.ts          | 18 -----
 .../src/database-block/data-view/data-view.ts | 14 ++--
 .../src/database-block/data-view/index.ts     |  1 +
 .../data-view/logical/eval-filter.ts          |  2 +-
 .../data-view/view/data-view-base.ts          | 11 +++-
 .../data-view/view/data-view-manager.ts       |  5 +-
 .../data-view/view/data-view.ts               | 14 ++--
 .../view/presets/kanban/kanban-view.ts        |  7 +-
 .../data-view/view/presets/kanban/renderer.ts | 10 ---
 .../data-view/view/presets/table/renderer.ts  | 12 ----
 .../view/presets/table/table-view.ts          |  7 +-
 .../{common/header => widget}/consts.ts       |  0
 .../{common => widget}/filter/condition.ts    | 18 ++---
 .../{common => widget}/filter/filter-bar.ts   | 17 +----
 .../{common => widget}/filter/filter-group.ts | 14 ++--
 .../{common => widget}/filter/filter-modal.ts |  2 +-
 .../{common => widget}/filter/filter-root.ts  | 14 ++--
 .../data-view/widget/filter/index.ts          | 18 +++++
 .../filter/matcher/boolean.ts                 |  0
 .../{common => widget}/filter/matcher/date.ts |  0
 .../filter/matcher/matcher.ts                 |  0
 .../filter/matcher/multi-tag.ts               |  0
 .../filter/matcher/number.ts                  |  0
 .../filter/matcher/string.ts                  |  0
 .../{common => widget}/filter/matcher/tag.ts  |  0
 .../filter/matcher/unknown.ts                 |  0
 .../database-block/data-view/widget/index.ts  | 10 +++
 .../data-view/widget/tools/index.ts           | 30 +++++++++
 .../tools/presets/filter}/filter.ts           | 14 ++--
 .../tools/presets/search}/search.ts           | 21 +++---
 .../tools/presets/table-add-row}/add-row.ts   | 10 +--
 .../table-add-row}/new-record-preview.ts      |  0
 .../presets/view-options}/view-options.ts     | 28 ++++----
 .../tools/tools-renderer.ts}                  | 44 ++++++-------
 .../database-block/data-view/widget/types.ts  | 13 ++++
 .../data-view/widget/views-bar/index.ts       |  5 ++
 .../header => widget/views-bar}/views.ts      | 18 +++--
 .../data-view/widget/widget-base.ts           | 22 +++++++
 .../src/database-block/database-block.ts      | 66 +++++++++++--------
 .../header/tools => widgets}/expand/index.ts  | 24 +++----
 .../header/tools => widgets}/expand/styles.ts |  0
 .../expand/table-full-screen-modal.ts         |  4 +-
 .../src/database-block/widgets/index.ts       |  1 +
 46 files changed, 286 insertions(+), 214 deletions(-)
 rename packages/blocks/src/database-block/{data-view/common/header/title.ts => components/title/index.ts} (96%)
 delete mode 100644 packages/blocks/src/database-block/data-view/common/header/reference.ts
 delete mode 100644 packages/blocks/src/database-block/data-view/common/header/tools/base-tool.ts
 rename packages/blocks/src/database-block/data-view/{common/header => widget}/consts.ts (100%)
 rename packages/blocks/src/database-block/data-view/{common => widget}/filter/condition.ts (95%)
 rename packages/blocks/src/database-block/data-view/{common => widget}/filter/filter-bar.ts (91%)
 rename packages/blocks/src/database-block/data-view/{common => widget}/filter/filter-group.ts (98%)
 rename packages/blocks/src/database-block/data-view/{common => widget}/filter/filter-modal.ts (98%)
 rename packages/blocks/src/database-block/data-view/{common => widget}/filter/filter-root.ts (98%)
 create mode 100644 packages/blocks/src/database-block/data-view/widget/filter/index.ts
 rename packages/blocks/src/database-block/data-view/{common => widget}/filter/matcher/boolean.ts (100%)
 rename packages/blocks/src/database-block/data-view/{common => widget}/filter/matcher/date.ts (100%)
 rename packages/blocks/src/database-block/data-view/{common => widget}/filter/matcher/matcher.ts (100%)
 rename packages/blocks/src/database-block/data-view/{common => widget}/filter/matcher/multi-tag.ts (100%)
 rename packages/blocks/src/database-block/data-view/{common => widget}/filter/matcher/number.ts (100%)
 rename packages/blocks/src/database-block/data-view/{common => widget}/filter/matcher/string.ts (100%)
 rename packages/blocks/src/database-block/data-view/{common => widget}/filter/matcher/tag.ts (100%)
 rename packages/blocks/src/database-block/data-view/{common => widget}/filter/matcher/unknown.ts (100%)
 create mode 100644 packages/blocks/src/database-block/data-view/widget/index.ts
 create mode 100644 packages/blocks/src/database-block/data-view/widget/tools/index.ts
 rename packages/blocks/src/database-block/data-view/{common/header/tools => widget/tools/presets/filter}/filter.ts (83%)
 rename packages/blocks/src/database-block/data-view/{common/header/tools => widget/tools/presets/search}/search.ts (88%)
 rename packages/blocks/src/database-block/data-view/{common/header/tools/add-row => widget/tools/presets/table-add-row}/add-row.ts (95%)
 rename packages/blocks/src/database-block/data-view/{common/header/tools/add-row => widget/tools/presets/table-add-row}/new-record-preview.ts (100%)
 rename packages/blocks/src/database-block/data-view/{common/header/tools => widget/tools/presets/view-options}/view-options.ts (83%)
 rename packages/blocks/src/database-block/data-view/{common/header/tools/tools.ts => widget/tools/tools-renderer.ts} (59%)
 create mode 100644 packages/blocks/src/database-block/data-view/widget/types.ts
 create mode 100644 packages/blocks/src/database-block/data-view/widget/views-bar/index.ts
 rename packages/blocks/src/database-block/data-view/{common/header => widget/views-bar}/views.ts (93%)
 create mode 100644 packages/blocks/src/database-block/data-view/widget/widget-base.ts
 rename packages/blocks/src/database-block/{data-view/common/header/tools => widgets}/expand/index.ts (88%)
 rename packages/blocks/src/database-block/{data-view/common/header/tools => widgets}/expand/styles.ts (100%)
 rename packages/blocks/src/database-block/{data-view/common/header/tools => widgets}/expand/table-full-screen-modal.ts (93%)
 create mode 100644 packages/blocks/src/database-block/widgets/index.ts

diff --git a/packages/blocks/src/database-block/data-view/common/header/title.ts b/packages/blocks/src/database-block/components/title/index.ts
similarity index 96%
rename from packages/blocks/src/database-block/data-view/common/header/title.ts
rename to packages/blocks/src/database-block/components/title/index.ts
index 257200d8c266..7d61186ed2b1 100644
--- a/packages/blocks/src/database-block/data-view/common/header/title.ts
+++ b/packages/blocks/src/database-block/components/title/index.ts
@@ -6,8 +6,8 @@ import { css, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import type { RichText } from '../../../../_common/components/index.js';
-import type { DatabaseBlockComponent } from '../../../database-block.js';
+import type { RichText } from '../../../_common/components/index.js';
+import type { DatabaseBlockComponent } from '../../database-block.js';
 
 @customElement('affine-database-title')
 export class DatabaseTitle extends WithDisposable(ShadowlessElement) {
diff --git a/packages/blocks/src/database-block/data-view/common/ast.ts b/packages/blocks/src/database-block/data-view/common/ast.ts
index 21c6b19978e3..e4c6669b257a 100644
--- a/packages/blocks/src/database-block/data-view/common/ast.ts
+++ b/packages/blocks/src/database-block/data-view/common/ast.ts
@@ -1,7 +1,7 @@
 import { propertyMatcher } from '../logical/property-matcher.js';
 import type { TType } from '../logical/typesystem.js';
 import type { UniComponent } from '../utils/uni-component/uni-component.js';
-import { filterMatcher } from './filter/matcher/matcher.js';
+import { filterMatcher } from '../widget/filter/matcher/matcher.js';
 
 export type Variable = {
   name: string;
diff --git a/packages/blocks/src/database-block/data-view/common/header/reference.ts b/packages/blocks/src/database-block/data-view/common/header/reference.ts
deleted file mode 100644
index e69de29bb2d1..000000000000
diff --git a/packages/blocks/src/database-block/data-view/common/header/tools/base-tool.ts b/packages/blocks/src/database-block/data-view/common/header/tools/base-tool.ts
deleted file mode 100644
index 41bc6903e5b5..000000000000
--- a/packages/blocks/src/database-block/data-view/common/header/tools/base-tool.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
-import { property } from 'lit/decorators.js';
-
-import type {
-  DataViewExpose,
-  DataViewToolsProps,
-} from '../../../view/data-view.js';
-import type { DataViewManager } from '../../../view/data-view-manager.js';
-
-export class BaseTool<Manager extends DataViewManager = DataViewManager>
-  extends WithDisposable(ShadowlessElement)
-  implements DataViewToolsProps<Manager>
-{
-  @property({ attribute: false })
-  public view!: Manager;
-  @property({ attribute: false })
-  public viewMethod!: DataViewExpose;
-}
diff --git a/packages/blocks/src/database-block/data-view/data-view.ts b/packages/blocks/src/database-block/data-view/data-view.ts
index 7c55226756c5..20fc3c31eda2 100644
--- a/packages/blocks/src/database-block/data-view/data-view.ts
+++ b/packages/blocks/src/database-block/data-view/data-view.ts
@@ -1,8 +1,8 @@
 import './common/group-by/define.js';
-import './common/header/views.js';
-import './common/header/title.js';
-import './common/header/tools/tools.js';
-import './common/filter/filter-bar.js';
+import './widget/views-bar/views.js';
+import '../components/title/index.js';
+import './widget/tools/tools-renderer.js';
+import './widget/filter/filter-bar.js';
 
 import type { BlockStdScope } from '@blocksuite/block-std';
 import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
@@ -45,7 +45,7 @@ export type DataViewRendererConfig = {
   detailPanelConfig?: {
     target?: () => ReferenceElement;
   };
-  headerComponent: DataViewProps['header'];
+  headerWidget: DataViewProps['headerWidget'];
   onDrag?: DataViewProps['onDrag'];
   std: BlockStdScope;
 };
@@ -160,7 +160,7 @@ export class DataViewRenderer extends WithDisposable(ShadowlessElement) {
     const props: DataViewProps = {
       dataViewEle: this,
       view: viewData.view,
-      header: this.config.headerComponent,
+      headerWidget: this.config.headerWidget,
       selectionUpdated: viewData.selectionUpdated,
       setSelection: viewData.setSelection,
       bindHotkey: viewData.bindHotkey,
@@ -168,6 +168,8 @@ export class DataViewRenderer extends WithDisposable(ShadowlessElement) {
       getFlag: this.config.getFlag,
       onDrag: this.config.onDrag,
       std: this.config.std,
+      viewSource: this.config.viewSource,
+      dataSource: this.config.dataSource,
     };
     return keyed(
       viewData.view.id,
diff --git a/packages/blocks/src/database-block/data-view/index.ts b/packages/blocks/src/database-block/data-view/index.ts
index ad3cd332c2c2..1c9a503b4257 100644
--- a/packages/blocks/src/database-block/data-view/index.ts
+++ b/packages/blocks/src/database-block/data-view/index.ts
@@ -16,3 +16,4 @@ export { insertPositionToIndex } from './utils/insert.js';
 export { createUniComponentFromWebComponent } from './utils/uni-component/index.js';
 export { defineUniComponent } from './utils/uni-component/index.js';
 export type { StatCalcOpType } from './view/presets/table/types.js';
+export { widgetPresets } from './widget/index.js';
diff --git a/packages/blocks/src/database-block/data-view/logical/eval-filter.ts b/packages/blocks/src/database-block/data-view/logical/eval-filter.ts
index ff5fe82b678e..6d798a774f9f 100644
--- a/packages/blocks/src/database-block/data-view/logical/eval-filter.ts
+++ b/packages/blocks/src/database-block/data-view/logical/eval-filter.ts
@@ -1,5 +1,5 @@
 import type { Filter, Value, VariableOrProperty } from '../common/ast.js';
-import { filterMatcher } from '../common/filter/matcher/matcher.js';
+import { filterMatcher } from '../widget/filter/matcher/matcher.js';
 import { propertyMatcher } from './property-matcher.js';
 
 const evalRef = (
diff --git a/packages/blocks/src/database-block/data-view/view/data-view-base.ts b/packages/blocks/src/database-block/data-view/view/data-view-base.ts
index 4fb3fa6e9c01..9a1189815e4b 100644
--- a/packages/blocks/src/database-block/data-view/view/data-view-base.ts
+++ b/packages/blocks/src/database-block/data-view/view/data-view-base.ts
@@ -8,9 +8,11 @@ import type { Disposable, Slot } from '@blocksuite/global/utils';
 import type { Doc } from '@blocksuite/store';
 import { property } from 'lit/decorators.js';
 
+import type { DataSource } from '../common/data-source/base.js';
+import type { ViewSource } from '../common/index.js';
 import type { DataViewRenderer } from '../data-view.js';
 import type { DataViewSelection, InsertToPosition } from '../types.js';
-import type { UniComponent } from '../utils/uni-component/index.js';
+import type { DataViewWidget } from '../widget/types.js';
 import type { DataViewExpose, DataViewProps } from './data-view.js';
 import type { DataViewManager } from './data-view-manager.js';
 
@@ -25,12 +27,17 @@ export abstract class DataViewBase<
   std!: BlockStdScope;
 
   @property({ attribute: false })
-  header!: UniComponent<{ viewMethods: DataViewExpose; view: T }>;
+  headerWidget!: DataViewWidget;
 
   @property({ attribute: false })
   dataViewEle!: DataViewRenderer;
+
   @property({ attribute: false })
   view!: T;
+  @property({ attribute: false })
+  viewSource!: ViewSource;
+  @property({ attribute: false })
+  dataSource!: DataSource;
 
   @property({ attribute: false })
   bindHotkey!: (hotkeys: Record<string, UIEventHandler>) => Disposable;
diff --git a/packages/blocks/src/database-block/data-view/view/data-view-manager.ts b/packages/blocks/src/database-block/data-view/view/data-view-manager.ts
index ffcb269e077b..68810a98d07a 100644
--- a/packages/blocks/src/database-block/data-view/view/data-view-manager.ts
+++ b/packages/blocks/src/database-block/data-view/view/data-view-manager.ts
@@ -480,12 +480,11 @@ export abstract class DataViewManagerBase<ViewData extends DataViewDataType>
   get vars(): Variable[] {
     return this.columnsWithoutFilter.map(id => {
       const v = this.columnGet(id);
+      const propertyMeta = this.dataSource.getPropertyMeta(v.type);
       return {
         id: v.id,
         name: v.name,
-        type: this.dataSource
-          .getPropertyMeta(this.columnGetType(v.type))
-          .model.dataType(v.data),
+        type: propertyMeta.model.dataType(v.data),
         icon: v.icon,
       };
     });
diff --git a/packages/blocks/src/database-block/data-view/view/data-view.ts b/packages/blocks/src/database-block/data-view/view/data-view.ts
index 8f9486cddad0..f9acae144c34 100644
--- a/packages/blocks/src/database-block/data-view/view/data-view.ts
+++ b/packages/blocks/src/database-block/data-view/view/data-view.ts
@@ -8,25 +8,26 @@ import type { Doc } from '@blocksuite/store';
 
 import type { DatabaseBlockModel } from '../../database-model.js';
 import type { ColumnMeta } from '../column/column-config.js';
+import type { DataSource } from '../common/data-source/base.js';
+import type { ViewSource } from '../common/index.js';
 import type { DataViewRenderer } from '../data-view.js';
 import type { DataViewSelection, InsertToPosition } from '../types.js';
 import type { UniComponent } from '../utils/uni-component/index.js';
+import type { DataViewWidget } from '../widget/types.js';
 import type { DataViewManagerBase } from './data-view-manager.js';
 import { type DataViewManager } from './data-view-manager.js';
 
-export type DataViewHeaderComponentProp<
-  T extends DataViewManager = DataViewManager,
-> = UniComponent<{ viewMethods: DataViewExpose; view: T }>;
-
 export interface DataViewProps<
   T extends DataViewManager = DataViewManager,
   Selection extends DataViewSelection = DataViewSelection,
 > {
   dataViewEle: DataViewRenderer;
 
-  header?: DataViewHeaderComponentProp<T>;
+  headerWidget?: DataViewWidget;
 
   view: T;
+  viewSource: ViewSource;
+  dataSource: DataSource;
 
   bindHotkey: (hotkeys: Record<string, UIEventHandler>) => Disposable;
 
@@ -98,13 +99,12 @@ export type DataViewToolsProps<
   Manager extends DataViewManager = DataViewManager,
 > = {
   view: Manager;
-  viewMethod: DataViewExpose;
+  viewMethods: DataViewExpose;
 };
 
 export interface DataViewRendererConfig {
   view: UniComponent<DataViewProps, DataViewExpose>;
   icon: UniComponent;
-  tools?: UniComponent<DataViewToolsProps>[];
 }
 
 export type ViewMeta<
diff --git a/packages/blocks/src/database-block/data-view/view/presets/kanban/kanban-view.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/kanban-view.ts
index b74888b21cd8..6f01ffa55808 100644
--- a/packages/blocks/src/database-block/data-view/view/presets/kanban/kanban-view.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/kanban-view.ts
@@ -202,7 +202,12 @@ export class DataViewKanban extends DataViewBase<
     }
 
     return html`
-      ${renderUniLit(this.header, { view: this.view, viewMethods: this })}
+      ${renderUniLit(this.headerWidget, {
+        view: this.view,
+        viewMethods: this,
+        viewSource: this.viewSource,
+        dataSource: this.dataSource,
+      })}
       <div class="affine-data-view-kanban-groups" @wheel="${this.onWheel}">
         ${repeat(
           groups,
diff --git a/packages/blocks/src/database-block/data-view/view/presets/kanban/renderer.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/renderer.ts
index c4c36645a21f..f6a507eaa6eb 100644
--- a/packages/blocks/src/database-block/data-view/view/presets/kanban/renderer.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/renderer.ts
@@ -1,7 +1,3 @@
-import { ExpandDatabaseBlockModal } from '../../../common/header/tools/expand/index.js';
-import { DataViewHeaderToolsFilter } from '../../../common/header/tools/filter.js';
-import { DataViewHeaderToolsSearch } from '../../../common/header/tools/search.js';
-import { DataViewHeaderToolsViewOptions } from '../../../common/header/tools/view-options.js';
 import { createUniComponentFromWebComponent } from '../../../utils/uni-component/index.js';
 import { createIcon } from '../../../utils/uni-icon.js';
 import { kanbanViewModel } from './define.js';
@@ -10,10 +6,4 @@ import { DataViewKanban } from './kanban-view.js';
 export const kanbanViewConfig = kanbanViewModel.rendererConfig({
   icon: createIcon('DatabaseKanbanViewIcon'),
   view: createUniComponentFromWebComponent(DataViewKanban),
-  tools: [
-    createUniComponentFromWebComponent(DataViewHeaderToolsFilter),
-    createUniComponentFromWebComponent(ExpandDatabaseBlockModal),
-    createUniComponentFromWebComponent(DataViewHeaderToolsSearch),
-    createUniComponentFromWebComponent(DataViewHeaderToolsViewOptions),
-  ],
 });
diff --git a/packages/blocks/src/database-block/data-view/view/presets/table/renderer.ts b/packages/blocks/src/database-block/data-view/view/presets/table/renderer.ts
index cc1a8fc33787..b5a310e92de1 100644
--- a/packages/blocks/src/database-block/data-view/view/presets/table/renderer.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/table/renderer.ts
@@ -1,8 +1,3 @@
-import { DataViewHeaderToolsAddRow } from '../../../common/header/tools/add-row/add-row.js';
-import { ExpandDatabaseBlockModal } from '../../../common/header/tools/expand/index.js';
-import { DataViewHeaderToolsFilter } from '../../../common/header/tools/filter.js';
-import { DataViewHeaderToolsSearch } from '../../../common/header/tools/search.js';
-import { DataViewHeaderToolsViewOptions } from '../../../common/header/tools/view-options.js';
 import { createUniComponentFromWebComponent } from '../../../utils/uni-component/index.js';
 import { createIcon } from '../../../utils/uni-icon.js';
 import { tableViewModel } from './define.js';
@@ -11,11 +6,4 @@ import { DataViewTable } from './table-view.js';
 export const tableViewConfig = tableViewModel.rendererConfig({
   view: createUniComponentFromWebComponent(DataViewTable),
   icon: createIcon('DatabaseTableViewIcon'),
-  tools: [
-    createUniComponentFromWebComponent(DataViewHeaderToolsFilter),
-    createUniComponentFromWebComponent(ExpandDatabaseBlockModal),
-    createUniComponentFromWebComponent(DataViewHeaderToolsSearch),
-    createUniComponentFromWebComponent(DataViewHeaderToolsViewOptions),
-    createUniComponentFromWebComponent(DataViewHeaderToolsAddRow),
-  ],
 });
diff --git a/packages/blocks/src/database-block/data-view/view/presets/table/table-view.ts b/packages/blocks/src/database-block/data-view/view/presets/table/table-view.ts
index cc23f339e435..cccae05578f2 100644
--- a/packages/blocks/src/database-block/data-view/view/presets/table/table-view.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/table/table-view.ts
@@ -270,7 +270,12 @@ export class DataViewTable extends DataViewBase<
 
   override render() {
     return html`
-      ${renderUniLit(this.header, { view: this.view, viewMethods: this })}
+      ${renderUniLit(this.headerWidget, {
+        view: this.view,
+        viewMethods: this,
+        viewSource: this.viewSource,
+        dataSource: this.dataSource,
+      })}
       <div class="affine-database-table">
         <div class="affine-database-block-table" @wheel="${this.onWheel}">
           <div class="affine-database-table-container">
diff --git a/packages/blocks/src/database-block/data-view/common/header/consts.ts b/packages/blocks/src/database-block/data-view/widget/consts.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/common/header/consts.ts
rename to packages/blocks/src/database-block/data-view/widget/consts.ts
diff --git a/packages/blocks/src/database-block/data-view/common/filter/condition.ts b/packages/blocks/src/database-block/data-view/widget/filter/condition.ts
similarity index 95%
rename from packages/blocks/src/database-block/data-view/common/filter/condition.ts
rename to packages/blocks/src/database-block/data-view/widget/filter/condition.ts
index 2f197baf9c8b..672a2632fd72 100644
--- a/packages/blocks/src/database-block/data-view/common/filter/condition.ts
+++ b/packages/blocks/src/database-block/data-view/widget/filter/condition.ts
@@ -1,5 +1,5 @@
-import '../ref/ref.js';
-import '../literal/define.js';
+import '../../common/ref/ref.js';
+import '../../common/literal/define.js';
 
 import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
 import type { ReferenceElement } from '@floating-ui/dom';
@@ -7,23 +7,23 @@ import { css, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
-import { tBoolean } from '../../logical/data-type.js';
-import { typesystem } from '../../logical/typesystem.js';
-import { popFilterableSimpleMenu } from '../../utils/menu/index.js';
 import type {
   FilterGroup,
   SingleFilter,
   Variable,
   VariableOrProperty,
-} from '../ast.js';
+} from '../../common/ast.js';
 import {
   firstFilter,
   firstFilterByRef,
   firstFilterInGroup,
   getRefType,
-} from '../ast.js';
-import { CrossIcon } from '../icons/index.js';
-import { popLiteralEdit, renderLiteral } from '../literal/matcher.js';
+} from '../../common/ast.js';
+import { CrossIcon } from '../../common/icons/index.js';
+import { popLiteralEdit, renderLiteral } from '../../common/literal/matcher.js';
+import { tBoolean } from '../../logical/data-type.js';
+import { typesystem } from '../../logical/typesystem.js';
+import { popFilterableSimpleMenu } from '../../utils/menu/index.js';
 import { filterMatcher } from './matcher/matcher.js';
 
 @customElement('filter-condition-view')
diff --git a/packages/blocks/src/database-block/data-view/common/filter/filter-bar.ts b/packages/blocks/src/database-block/data-view/widget/filter/filter-bar.ts
similarity index 91%
rename from packages/blocks/src/database-block/data-view/common/filter/filter-bar.ts
rename to packages/blocks/src/database-block/data-view/widget/filter/filter-bar.ts
index f6b9b4c76f4c..5c255f6ea539 100644
--- a/packages/blocks/src/database-block/data-view/common/filter/filter-bar.ts
+++ b/packages/blocks/src/database-block/data-view/widget/filter/filter-bar.ts
@@ -4,12 +4,11 @@ import { customElement, property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 import { AddCursorIcon } from '../../../../_common/icons/index.js';
+import type { Filter, FilterGroup, Variable } from '../../common/ast.js';
+import { CrossIcon, FilterIcon } from '../../common/icons/index.js';
+import { popCreateFilter } from '../../common/ref/ref.js';
 import { createPopup, eventToVRect } from '../../utils/menu/index.js';
 import { renderTemplate } from '../../utils/uni-component/render-template.js';
-import type { DataViewManager } from '../../view/data-view-manager.js';
-import type { Filter, FilterGroup, Variable } from '../ast.js';
-import { CrossIcon, FilterIcon } from '../icons/index.js';
-import { popCreateFilter } from '../ref/ref.js';
 import { popFilterModal } from './filter-modal.js';
 
 @customElement('filter-bar')
@@ -211,13 +210,3 @@ declare global {
     'filter-bar': FilterBar;
   }
 }
-export const renderFilterBar = (view?: DataViewManager) => {
-  if (!view || !view.filterVisible) {
-    return;
-  }
-  return html`<filter-bar
-    .vars=${view.vars}
-    .data=${view.filter}
-    .setData=${view.updateFilter.bind(view)}
-  ></filter-bar>`;
-};
diff --git a/packages/blocks/src/database-block/data-view/common/filter/filter-group.ts b/packages/blocks/src/database-block/data-view/widget/filter/filter-group.ts
similarity index 98%
rename from packages/blocks/src/database-block/data-view/common/filter/filter-group.ts
rename to packages/blocks/src/database-block/data-view/widget/filter/filter-group.ts
index 560b85dff6d5..85dd92eee888 100644
--- a/packages/blocks/src/database-block/data-view/common/filter/filter-group.ts
+++ b/packages/blocks/src/database-block/data-view/widget/filter/filter-group.ts
@@ -12,18 +12,18 @@ import {
   ArrowDownSmallIcon,
   DuplicateIcon,
 } from '../../../../_common/icons/index.js';
-import {
-  eventToVRect,
-  popFilterableSimpleMenu,
-} from '../../utils/menu/index.js';
-import type { Filter, FilterGroup, Variable } from '../ast.js';
-import { firstFilter } from '../ast.js';
+import type { Filter, FilterGroup, Variable } from '../../common/ast.js';
+import { firstFilter } from '../../common/ast.js';
 import {
   ConvertIcon,
   DeleteIcon,
   MoreHorizontalIcon,
   PlusIcon,
-} from '../icons/index.js';
+} from '../../common/icons/index.js';
+import {
+  eventToVRect,
+  popFilterableSimpleMenu,
+} from '../../utils/menu/index.js';
 import { popAddNewFilter } from './condition.js';
 
 @customElement('filter-group-view')
diff --git a/packages/blocks/src/database-block/data-view/common/filter/filter-modal.ts b/packages/blocks/src/database-block/data-view/widget/filter/filter-modal.ts
similarity index 98%
rename from packages/blocks/src/database-block/data-view/common/filter/filter-modal.ts
rename to packages/blocks/src/database-block/data-view/widget/filter/filter-modal.ts
index 830ded9b4f76..fedcdda374af 100644
--- a/packages/blocks/src/database-block/data-view/common/filter/filter-modal.ts
+++ b/packages/blocks/src/database-block/data-view/widget/filter/filter-modal.ts
@@ -6,8 +6,8 @@ import type { ReferenceElement } from '@floating-ui/dom';
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
+import type { FilterGroup, Variable } from '../../common/ast.js';
 import { createPopup } from '../../utils/menu/index.js';
-import type { FilterGroup, Variable } from '../ast.js';
 
 @customElement('advanced-filter-modal')
 export class AdvancedFilterModal extends WithDisposable(ShadowlessElement) {
diff --git a/packages/blocks/src/database-block/data-view/common/filter/filter-root.ts b/packages/blocks/src/database-block/data-view/widget/filter/filter-root.ts
similarity index 98%
rename from packages/blocks/src/database-block/data-view/common/filter/filter-root.ts
rename to packages/blocks/src/database-block/data-view/widget/filter/filter-root.ts
index b4fbe810eb40..d98a40ea8b17 100644
--- a/packages/blocks/src/database-block/data-view/common/filter/filter-root.ts
+++ b/packages/blocks/src/database-block/data-view/widget/filter/filter-root.ts
@@ -11,19 +11,19 @@ import {
   ArrowDownSmallIcon,
   DuplicateIcon,
 } from '../../../../_common/icons/index.js';
+import type { Filter, FilterGroup, Variable } from '../../common/ast.js';
+import {
+  ConvertIcon,
+  DeleteIcon,
+  MoreHorizontalIcon,
+  PlusIcon,
+} from '../../common/icons/index.js';
 import {
   eventToVRect,
   popFilterableSimpleMenu,
   positionToVRect,
 } from '../../utils/menu/index.js';
 import { menuTitle } from '../../utils/menu/title.js';
-import type { Filter, FilterGroup, Variable } from '../ast.js';
-import {
-  ConvertIcon,
-  DeleteIcon,
-  MoreHorizontalIcon,
-  PlusIcon,
-} from '../icons/index.js';
 import { popAddNewFilter } from './condition.js';
 import type { FilterGroupView } from './filter-group.js';
 import { getDepth } from './filter-group.js';
diff --git a/packages/blocks/src/database-block/data-view/widget/filter/index.ts b/packages/blocks/src/database-block/data-view/widget/filter/index.ts
new file mode 100644
index 000000000000..231be2804a10
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/widget/filter/index.ts
@@ -0,0 +1,18 @@
+import { html } from 'lit';
+
+import { defineUniComponent } from '../../utils/uni-component/index.js';
+import type { DataViewWidgetProps } from '../types.js';
+
+export const widgetFilterBar = defineUniComponent(
+  (props: DataViewWidgetProps) => {
+    const view = props.view;
+    if (!view.filterVisible) {
+      return html``;
+    }
+    return html`<filter-bar
+      .vars=${view.vars}
+      .data=${view.filter}
+      .setData=${view.updateFilter.bind(view)}
+    ></filter-bar>`;
+  }
+);
diff --git a/packages/blocks/src/database-block/data-view/common/filter/matcher/boolean.ts b/packages/blocks/src/database-block/data-view/widget/filter/matcher/boolean.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/common/filter/matcher/boolean.ts
rename to packages/blocks/src/database-block/data-view/widget/filter/matcher/boolean.ts
diff --git a/packages/blocks/src/database-block/data-view/common/filter/matcher/date.ts b/packages/blocks/src/database-block/data-view/widget/filter/matcher/date.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/common/filter/matcher/date.ts
rename to packages/blocks/src/database-block/data-view/widget/filter/matcher/date.ts
diff --git a/packages/blocks/src/database-block/data-view/common/filter/matcher/matcher.ts b/packages/blocks/src/database-block/data-view/widget/filter/matcher/matcher.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/common/filter/matcher/matcher.ts
rename to packages/blocks/src/database-block/data-view/widget/filter/matcher/matcher.ts
diff --git a/packages/blocks/src/database-block/data-view/common/filter/matcher/multi-tag.ts b/packages/blocks/src/database-block/data-view/widget/filter/matcher/multi-tag.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/common/filter/matcher/multi-tag.ts
rename to packages/blocks/src/database-block/data-view/widget/filter/matcher/multi-tag.ts
diff --git a/packages/blocks/src/database-block/data-view/common/filter/matcher/number.ts b/packages/blocks/src/database-block/data-view/widget/filter/matcher/number.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/common/filter/matcher/number.ts
rename to packages/blocks/src/database-block/data-view/widget/filter/matcher/number.ts
diff --git a/packages/blocks/src/database-block/data-view/common/filter/matcher/string.ts b/packages/blocks/src/database-block/data-view/widget/filter/matcher/string.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/common/filter/matcher/string.ts
rename to packages/blocks/src/database-block/data-view/widget/filter/matcher/string.ts
diff --git a/packages/blocks/src/database-block/data-view/common/filter/matcher/tag.ts b/packages/blocks/src/database-block/data-view/widget/filter/matcher/tag.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/common/filter/matcher/tag.ts
rename to packages/blocks/src/database-block/data-view/widget/filter/matcher/tag.ts
diff --git a/packages/blocks/src/database-block/data-view/common/filter/matcher/unknown.ts b/packages/blocks/src/database-block/data-view/widget/filter/matcher/unknown.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/common/filter/matcher/unknown.ts
rename to packages/blocks/src/database-block/data-view/widget/filter/matcher/unknown.ts
diff --git a/packages/blocks/src/database-block/data-view/widget/index.ts b/packages/blocks/src/database-block/data-view/widget/index.ts
new file mode 100644
index 000000000000..c3fe5954fb5f
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/widget/index.ts
@@ -0,0 +1,10 @@
+import { widgetFilterBar } from './filter/index.js';
+import { createWidgetTools, toolsWidgetPresets } from './tools/index.js';
+import { widgetViewsBar } from './views-bar/index.js';
+
+export const widgetPresets = {
+  viewBar: widgetViewsBar,
+  filterBar: widgetFilterBar,
+  createTools: createWidgetTools,
+  tools: toolsWidgetPresets,
+};
diff --git a/packages/blocks/src/database-block/data-view/widget/tools/index.ts b/packages/blocks/src/database-block/data-view/widget/tools/index.ts
new file mode 100644
index 000000000000..cc114d961f12
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/widget/tools/index.ts
@@ -0,0 +1,30 @@
+import { ExpandDatabaseBlockModal } from '../../../widgets/expand/index.js';
+import { createUniComponentFromWebComponent } from '../../utils/uni-component/index.js';
+import { map } from '../../utils/uni-component/operation.js';
+import type { DataViewWidget, DataViewWidgetProps } from '../types.js';
+import { DataViewHeaderToolsFilter } from './presets/filter/filter.js';
+import { DataViewHeaderToolsSearch } from './presets/search/search.js';
+import { DataViewHeaderToolsAddRow } from './presets/table-add-row/add-row.js';
+import { DataViewHeaderToolsViewOptions } from './presets/view-options/view-options.js';
+import { DataViewHeaderTools } from './tools-renderer.js';
+
+export const toolsWidgetPresets = {
+  filter: createUniComponentFromWebComponent(DataViewHeaderToolsFilter),
+  expand: createUniComponentFromWebComponent(ExpandDatabaseBlockModal),
+  search: createUniComponentFromWebComponent(DataViewHeaderToolsSearch),
+  viewOptions: createUniComponentFromWebComponent(
+    DataViewHeaderToolsViewOptions
+  ),
+  tableAddRow: createUniComponentFromWebComponent(DataViewHeaderToolsAddRow),
+};
+export const createWidgetTools = (
+  toolsMap: Record<string, DataViewWidget[]>
+) => {
+  return map(
+    createUniComponentFromWebComponent(DataViewHeaderTools),
+    (props: DataViewWidgetProps) => ({
+      ...props,
+      toolsMap,
+    })
+  );
+};
diff --git a/packages/blocks/src/database-block/data-view/common/header/tools/filter.ts b/packages/blocks/src/database-block/data-view/widget/tools/presets/filter/filter.ts
similarity index 83%
rename from packages/blocks/src/database-block/data-view/common/header/tools/filter.ts
rename to packages/blocks/src/database-block/data-view/widget/tools/presets/filter/filter.ts
index d69dbdee7cca..906f389da369 100644
--- a/packages/blocks/src/database-block/data-view/common/header/tools/filter.ts
+++ b/packages/blocks/src/database-block/data-view/widget/tools/presets/filter/filter.ts
@@ -1,13 +1,13 @@
-import '../../../common/filter/filter-group.js';
+import '../../../filter/filter-group.js';
 
 import { css, html, nothing } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import type { FilterGroup } from '../../../common/ast.js';
-import { popCreateFilter } from '../../../common/ref/ref.js';
-import { eventToVRect } from '../../../utils/menu/index.js';
-import { FilterIcon } from '../../icons/index.js';
-import { BaseTool } from './base-tool.js';
+import type { FilterGroup } from '../../../../common/ast.js';
+import { FilterIcon } from '../../../../common/icons/index.js';
+import { popCreateFilter } from '../../../../common/ref/ref.js';
+import { eventToVRect } from '../../../../utils/menu/index.js';
+import { WidgetBase } from '../../../widget-base.js';
 
 const styles = css`
   .affine-database-filter-button {
@@ -32,7 +32,7 @@ const styles = css`
 `;
 
 @customElement('data-view-header-tools-filter')
-export class DataViewHeaderToolsFilter extends BaseTool {
+export class DataViewHeaderToolsFilter extends WidgetBase {
   static override styles = styles;
 
   private get readonly() {
diff --git a/packages/blocks/src/database-block/data-view/common/header/tools/search.ts b/packages/blocks/src/database-block/data-view/widget/tools/presets/search/search.ts
similarity index 88%
rename from packages/blocks/src/database-block/data-view/common/header/tools/search.ts
rename to packages/blocks/src/database-block/data-view/widget/tools/presets/search/search.ts
index 3267abc52139..4fdb638e9d35 100644
--- a/packages/blocks/src/database-block/data-view/common/header/tools/search.ts
+++ b/packages/blocks/src/database-block/data-view/widget/tools/presets/search/search.ts
@@ -1,4 +1,4 @@
-import '../../../common/filter/filter-group.js';
+import '../../../filter/filter-group.js';
 
 import { baseTheme } from '@toeverything/theme';
 import { css, html, unsafeCSS } from 'lit';
@@ -6,11 +6,14 @@ import { customElement, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { stopPropagation } from '../../../utils/event.js';
-import type { DataViewKanbanManager } from '../../../view/presets/kanban/kanban-view-manager.js';
-import type { DataViewTableManager } from '../../../view/presets/table/table-view-manager.js';
-import { DatabaseSearchClose, DatabaseSearchIcon } from '../../icons/index.js';
-import { BaseTool } from './base-tool.js';
+import {
+  DatabaseSearchClose,
+  DatabaseSearchIcon,
+} from '../../../../common/icons/index.js';
+import { stopPropagation } from '../../../../utils/event.js';
+import type { DataViewKanbanManager } from '../../../../view/presets/kanban/kanban-view-manager.js';
+import type { DataViewTableManager } from '../../../../view/presets/table/table-view-manager.js';
+import { WidgetBase } from '../../../widget-base.js';
 
 const styles = css`
   .affine-database-search-container {
@@ -91,9 +94,9 @@ const styles = css`
 `;
 
 @customElement('data-view-header-tools-search')
-export class DataViewHeaderToolsSearch extends BaseTool<
-  DataViewTableManager | DataViewKanbanManager
-> {
+export class DataViewHeaderToolsSearch extends WidgetBase {
+  public override view!: DataViewTableManager | DataViewKanbanManager;
+
   get showSearch(): boolean {
     return this._showSearch;
   }
diff --git a/packages/blocks/src/database-block/data-view/common/header/tools/add-row/add-row.ts b/packages/blocks/src/database-block/data-view/widget/tools/presets/table-add-row/add-row.ts
similarity index 95%
rename from packages/blocks/src/database-block/data-view/common/header/tools/add-row/add-row.ts
rename to packages/blocks/src/database-block/data-view/widget/tools/presets/table-add-row/add-row.ts
index 61cc61f4cb51..21d25f8bfaf1 100644
--- a/packages/blocks/src/database-block/data-view/common/header/tools/add-row/add-row.ts
+++ b/packages/blocks/src/database-block/data-view/widget/tools/presets/table-add-row/add-row.ts
@@ -4,7 +4,7 @@ import { customElement, state } from 'lit/decorators.js';
 import { PlusIcon } from '../../../../../../_common/icons/index.js';
 import type { InsertToPosition } from '../../../../types.js';
 import { startDrag } from '../../../../utils/drag.js';
-import { BaseTool } from '../base-tool.js';
+import { WidgetBase } from '../../../widget-base.js';
 import { NewRecordPreview } from './new-record-preview.js';
 
 const styles = css`
@@ -31,7 +31,7 @@ const styles = css`
 `;
 
 @customElement('data-view-header-tools-add-row')
-export class DataViewHeaderToolsAddRow extends BaseTool {
+export class DataViewHeaderToolsAddRow extends WidgetBase {
   static override styles = styles;
 
   @state()
@@ -115,7 +115,7 @@ export class DataViewHeaderToolsAddRow extends BaseTool {
       },
       onDrop: data => {
         if (data.position) {
-          this.viewMethod.addRow?.(data.position);
+          this.viewMethods.addRow?.(data.position);
         }
       },
       onClear: () => {
@@ -126,12 +126,12 @@ export class DataViewHeaderToolsAddRow extends BaseTool {
   };
 
   addRow = (position: InsertToPosition | number) => {
-    this.viewMethod.addRow?.(position);
+    this.viewMethods.addRow?.(position);
   };
 
   private _onAddNewRecord = () => {
     if (this.readonly) return;
-    const selection = this.viewMethod.getSelection?.();
+    const selection = this.viewMethods.getSelection?.();
     if (!selection) {
       this.addRow('start');
     } else if (selection.type === 'table') {
diff --git a/packages/blocks/src/database-block/data-view/common/header/tools/add-row/new-record-preview.ts b/packages/blocks/src/database-block/data-view/widget/tools/presets/table-add-row/new-record-preview.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/common/header/tools/add-row/new-record-preview.ts
rename to packages/blocks/src/database-block/data-view/widget/tools/presets/table-add-row/new-record-preview.ts
diff --git a/packages/blocks/src/database-block/data-view/common/header/tools/view-options.ts b/packages/blocks/src/database-block/data-view/widget/tools/presets/view-options/view-options.ts
similarity index 83%
rename from packages/blocks/src/database-block/data-view/common/header/tools/view-options.ts
rename to packages/blocks/src/database-block/data-view/widget/tools/presets/view-options/view-options.ts
index 959e332bedc4..2be4286dcb60 100644
--- a/packages/blocks/src/database-block/data-view/common/header/tools/view-options.ts
+++ b/packages/blocks/src/database-block/data-view/widget/tools/presets/view-options/view-options.ts
@@ -7,18 +7,22 @@ import {
   DeleteIcon,
   DuplicateIcon,
   MoreHorizontalIcon,
-} from '../../../../../_common/icons/index.js';
-import { eventToVRect, popMenu } from '../../../utils/menu/index.js';
-import type { DataViewKanbanManager } from '../../../view/presets/kanban/kanban-view-manager.js';
-import type { DataViewTableManager } from '../../../view/presets/table/table-view-manager.js';
-import { popFilterModal } from '../../filter/filter-modal.js';
+} from '../../../../../../_common/icons/index.js';
 import {
   popGroupSetting,
   popSelectGroupByProperty,
-} from '../../group-by/setting.js';
-import { FilterIcon, GroupingIcon, InfoIcon } from '../../icons/index.js';
-import { popPropertiesSetting } from '../../properties.js';
-import { BaseTool } from './base-tool.js';
+} from '../../../../common/group-by/setting.js';
+import {
+  FilterIcon,
+  GroupingIcon,
+  InfoIcon,
+} from '../../../../common/icons/index.js';
+import { popPropertiesSetting } from '../../../../common/properties.js';
+import { eventToVRect, popMenu } from '../../../../utils/menu/index.js';
+import type { DataViewKanbanManager } from '../../../../view/presets/kanban/kanban-view-manager.js';
+import type { DataViewTableManager } from '../../../../view/presets/table/table-view-manager.js';
+import { popFilterModal } from '../../../filter/filter-modal.js';
+import { WidgetBase } from '../../../widget-base.js';
 
 const styles = css`
   .affine-database-toolbar-item.more-action {
@@ -45,11 +49,9 @@ const styles = css`
 `;
 
 @customElement('data-view-header-tools-view-options')
-export class DataViewHeaderToolsViewOptions extends BaseTool<
-  DataViewKanbanManager | DataViewTableManager
-> {
+export class DataViewHeaderToolsViewOptions extends WidgetBase {
   static override styles = styles;
-
+  public override view!: DataViewTableManager | DataViewKanbanManager;
   showToolBar(show: boolean) {
     const tools = this.closest('data-view-header-tools');
     if (tools) {
diff --git a/packages/blocks/src/database-block/data-view/common/header/tools/tools.ts b/packages/blocks/src/database-block/data-view/widget/tools/tools-renderer.ts
similarity index 59%
rename from packages/blocks/src/database-block/data-view/common/header/tools/tools.ts
rename to packages/blocks/src/database-block/data-view/widget/tools/tools-renderer.ts
index 82c4d2f22dae..afae55797ad1 100644
--- a/packages/blocks/src/database-block/data-view/common/header/tools/tools.ts
+++ b/packages/blocks/src/database-block/data-view/widget/tools/tools-renderer.ts
@@ -1,20 +1,19 @@
-import './search.js';
-import './filter.js';
-import './view-options.js';
-import './add-row/add-row.js';
+import './presets/search/search.js';
+import './presets/filter/filter.js';
+import './presets/view-options/view-options.js';
+import './presets/table-add-row/add-row.js';
 
-import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
 import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 
-import { renderUniLit } from '../../../utils/uni-component/uni-component.js';
-import {
-  type DataViewExpose,
-  viewRendererManager,
-} from '../../../view/data-view.js';
-import type { DataViewManager } from '../../../view/data-view-manager.js';
+import type { ViewSource } from '../../common/index.js';
+import { renderUniLit } from '../../utils/uni-component/index.js';
+import { type DataViewExpose } from '../../view/data-view.js';
+import type { DataViewManager } from '../../view/data-view-manager.js';
+import type { DataViewWidget, DataViewWidgetProps } from '../types.js';
+import { WidgetBase } from '../widget-base.js';
 
 const styles = css`
   .affine-database-toolbar {
@@ -44,15 +43,10 @@ const styles = css`
 `;
 
 @customElement('data-view-header-tools')
-export class DataViewHeaderTools extends WithDisposable(ShadowlessElement) {
+export class DataViewHeaderTools extends WidgetBase {
   static override styles = styles;
-
-  @property({ attribute: false })
-  viewMethod!: DataViewExpose;
-
   @property({ attribute: false })
-  view!: DataViewManager;
-
+  toolsMap!: Record<string, DataViewWidget[]>;
   @state()
   public showToolBar = false;
 
@@ -64,12 +58,14 @@ export class DataViewHeaderTools extends WithDisposable(ShadowlessElement) {
       'show-toolbar': this.showToolBar,
       'affine-database-toolbar': true,
     });
-    const tools = viewRendererManager.getView(this.view.type).tools;
+    const tools = this.toolsMap[this.view.type];
     return html` <div class="${classList}">
       ${repeat(tools ?? [], uni => {
-        const props = {
+        const props: DataViewWidgetProps = {
           view: this.view,
-          viewMethod: this.viewMethod,
+          viewMethods: this.viewMethods,
+          viewSource: this.viewSource,
+          dataSource: this.dataSource,
         };
         return renderUniLit(uni, props);
       })}
@@ -84,10 +80,12 @@ declare global {
 }
 export const renderTools = (
   view: DataViewManager,
-  viewMethod: DataViewExpose
+  viewMethods: DataViewExpose,
+  viewSource: ViewSource
 ) => {
   return html` <data-view-header-tools
-    .viewMethod="${viewMethod}"
+    .viewMethods="${viewMethods}"
     .view="${view}"
+    .viewSource="${viewSource}"
   ></data-view-header-tools>`;
 };
diff --git a/packages/blocks/src/database-block/data-view/widget/types.ts b/packages/blocks/src/database-block/data-view/widget/types.ts
new file mode 100644
index 000000000000..3601867a6e3b
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/widget/types.ts
@@ -0,0 +1,13 @@
+import type { DataSource } from '../common/data-source/base.js';
+import type { ViewSource } from '../common/index.js';
+import type { UniComponent } from '../utils/uni-component/index.js';
+import type { DataViewExpose } from '../view/data-view.js';
+import type { DataViewManager } from '../view/data-view-manager.js';
+
+export type DataViewWidgetProps = {
+  dataSource: DataSource;
+  viewSource: ViewSource;
+  view: DataViewManager;
+  viewMethods: DataViewExpose;
+};
+export type DataViewWidget = UniComponent<DataViewWidgetProps>;
diff --git a/packages/blocks/src/database-block/data-view/widget/views-bar/index.ts b/packages/blocks/src/database-block/data-view/widget/views-bar/index.ts
new file mode 100644
index 000000000000..870c9bfe987d
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/widget/views-bar/index.ts
@@ -0,0 +1,5 @@
+import { createUniComponentFromWebComponent } from '../../utils/uni-component/index.js';
+import { DataViewHeaderViews } from './views.js';
+
+export const widgetViewsBar =
+  createUniComponentFromWebComponent(DataViewHeaderViews);
diff --git a/packages/blocks/src/database-block/data-view/common/header/views.ts b/packages/blocks/src/database-block/data-view/widget/views-bar/views.ts
similarity index 93%
rename from packages/blocks/src/database-block/data-view/common/header/views.ts
rename to packages/blocks/src/database-block/data-view/widget/views-bar/views.ts
index a547ff395d04..918b31100697 100644
--- a/packages/blocks/src/database-block/data-view/common/header/views.ts
+++ b/packages/blocks/src/database-block/data-view/widget/views-bar/views.ts
@@ -1,9 +1,8 @@
-import '../component/overflow/overflow.js';
+import '../../common/component/overflow/overflow.js';
 
-import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
 import type { ReferenceElement } from '@floating-ui/dom';
 import { css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
 import {
@@ -13,17 +12,18 @@ import {
   MoveLeftIcon,
   MoveRightIcon,
 } from '../../../../_common/icons/index.js';
+import { DeleteIcon } from '../../common/icons/index.js';
+import type { SingleViewSource } from '../../common/index.js';
 import {
   eventToVRect,
   popFilterableSimpleMenu,
   popMenu,
-} from '../../utils/menu/index.js';
-import { renderUniLit } from '../../utils/uni-component/uni-component.js';
-import { DeleteIcon } from '../icons/index.js';
-import type { SingleViewSource, ViewSource } from '../view-source.js';
+} from '../../utils/index.js';
+import { renderUniLit } from '../../utils/uni-component/index.js';
+import { WidgetBase } from '../widget-base.js';
 
 @customElement('data-view-header-views')
-export class DataViewHeaderViews extends WithDisposable(ShadowlessElement) {
+export class DataViewHeaderViews extends WidgetBase {
   static override styles = css`
     data-view-header-views {
       height: 32px;
@@ -70,8 +70,6 @@ export class DataViewHeaderViews extends WithDisposable(ShadowlessElement) {
       background-color: var(--affine-hover-color-filled);
     }
   `;
-  @property({ attribute: false })
-  viewSource!: ViewSource;
   get readonly() {
     return this.viewSource.readonly;
   }
diff --git a/packages/blocks/src/database-block/data-view/widget/widget-base.ts b/packages/blocks/src/database-block/data-view/widget/widget-base.ts
new file mode 100644
index 000000000000..eea6e443ca9a
--- /dev/null
+++ b/packages/blocks/src/database-block/data-view/widget/widget-base.ts
@@ -0,0 +1,22 @@
+import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
+import { property } from 'lit/decorators.js';
+
+import type { DataSource } from '../common/data-source/base.js';
+import type { ViewSource } from '../common/index.js';
+import type { DataViewExpose } from '../view/data-view.js';
+import type { DataViewManager } from '../view/data-view-manager.js';
+import type { DataViewWidgetProps } from './types.js';
+
+export class WidgetBase
+  extends WithDisposable(ShadowlessElement)
+  implements DataViewWidgetProps
+{
+  @property({ attribute: false })
+  public view!: DataViewManager;
+  @property({ attribute: false })
+  public viewMethods!: DataViewExpose;
+  @property({ attribute: false })
+  public viewSource!: ViewSource;
+  @property({ attribute: false })
+  public dataSource!: DataSource;
+}
diff --git a/packages/blocks/src/database-block/database-block.ts b/packages/blocks/src/database-block/database-block.ts
index 539b0572d59e..22a40c5ad831 100644
--- a/packages/blocks/src/database-block/database-block.ts
+++ b/packages/blocks/src/database-block/database-block.ts
@@ -12,19 +12,19 @@ import {
   MoreHorizontalIcon,
 } from '../_common/icons/index.js';
 import { Rect } from '../_common/utils/index.js';
-import type { NoteBlockComponent } from '../note-block/note-block.js';
-import { EdgelessRootBlockComponent } from '../root-block/edgeless/edgeless-root-block.js';
-import { AffineDragHandleWidget } from '../root-block/widgets/drag-handle/drag-handle.js';
+import type { NoteBlockComponent } from '../note-block/index.js';
+import type { AffineInnerModalWidget } from '../root-block/index.js';
+import {
+  AffineDragHandleWidget,
+  EdgelessRootBlockComponent,
+} from '../root-block/index.js';
 import {
   captureEventTarget,
   getDropResult,
 } from '../root-block/widgets/drag-handle/utils.js';
-import type { AffineInnerModalWidget } from '../root-block/widgets/inner-modal/inner-modal.js';
 import { AFFINE_INNER_MODAL_WIDGET } from '../root-block/widgets/inner-modal/inner-modal.js';
 import { DatabaseBlockDataSource } from './data-source.js';
 import { dataViewCommonStyle } from './data-view/common/css-variable.js';
-import { renderFilterBar } from './data-view/common/filter/filter-bar.js';
-import { renderTools } from './data-view/common/header/tools/tools.js';
 import {
   DatabaseSelection,
   DataView,
@@ -32,10 +32,15 @@ import {
   defineUniComponent,
   popMenu,
   type ViewSource,
+  widgetPresets,
 } from './data-view/index.js';
+import { renderUniLit } from './data-view/utils/uni-component/index.js';
 import type { DataViewProps } from './data-view/view/data-view.js';
 import { type DataViewExpose } from './data-view/view/data-view.js';
-import type { DataViewManager } from './data-view/view/data-view-manager.js';
+import type {
+  DataViewWidget,
+  DataViewWidgetProps,
+} from './data-view/widget/types.js';
 import type { DatabaseBlockModel } from './database-model.js';
 import { DatabaseBlockSchema } from './database-model.js';
 import type { DatabaseService } from './database-service.js';
@@ -269,12 +274,6 @@ export class DatabaseBlockComponent extends BlockElement<
     return this._dataSource;
   }
 
-  private renderViews = () => {
-    return html` <data-view-header-views
-      style="flex:1"
-      .viewSource="${this._viewSource}"
-    ></data-view-header-views>`;
-  };
   private renderTitle = (dataViewMethod: DataViewExpose) => {
     const addRow = () => dataViewMethod.addRow?.('start');
     return html` <affine-database-title
@@ -284,30 +283,39 @@ export class DatabaseBlockComponent extends BlockElement<
       .onPressEnterKey="${addRow}"
     ></affine-database-title>`;
   };
-  private renderReference = () => {
-    return html` <div></div>`;
-  };
 
-  headerComponent = defineUniComponent(
-    ({
-      view,
-      viewMethods,
-    }: {
-      view: DataViewManager;
-      viewMethods: DataViewExpose;
-    }) => {
+  toolsWidget: DataViewWidget = widgetPresets.createTools({
+    table: [
+      widgetPresets.tools.filter,
+      widgetPresets.tools.expand,
+      widgetPresets.tools.search,
+      widgetPresets.tools.viewOptions,
+      widgetPresets.tools.tableAddRow,
+    ],
+    kanban: [
+      widgetPresets.tools.filter,
+      widgetPresets.tools.expand,
+      widgetPresets.tools.search,
+      widgetPresets.tools.viewOptions,
+    ],
+  });
+
+  headerWidget: DataViewWidget = defineUniComponent(
+    (props: DataViewWidgetProps) => {
       return html`
         <div style="margin-bottom: 16px;display:flex;flex-direction: column">
           <div style="display:flex;gap:8px;padding: 0 6px;margin-bottom: 8px;">
-            ${this.renderTitle(viewMethods)} ${this.renderDatabaseOps()}
-            ${this.renderReference()}
+            ${this.renderTitle(props.viewMethods)} ${this.renderDatabaseOps()}
           </div>
           <div
             style="display:flex;align-items:center;justify-content: space-between;gap: 12px"
           >
-            ${this.renderViews()} ${renderTools(view, viewMethods)}
+            <div style="flex:1">
+              ${renderUniLit(widgetPresets.viewBar, props)}
+            </div>
+            ${renderUniLit(this.toolsWidget, props)}
           </div>
-          ${renderFilterBar(view)}
+          ${renderUniLit(widgetPresets.filterBar, props)}
         </div>
       `;
     }
@@ -369,7 +377,7 @@ export class DatabaseBlockComponent extends BlockElement<
           setSelection: this.setSelection,
           dataSource: this.dataSource,
           viewSource: this.viewSource,
-          headerComponent: this.headerComponent,
+          headerWidget: this.headerWidget,
           onDrag: this.onDrag,
           std: this.std,
           detailPanelConfig: {
diff --git a/packages/blocks/src/database-block/data-view/common/header/tools/expand/index.ts b/packages/blocks/src/database-block/widgets/expand/index.ts
similarity index 88%
rename from packages/blocks/src/database-block/data-view/common/header/tools/expand/index.ts
rename to packages/blocks/src/database-block/widgets/expand/index.ts
index 2bd53fa7c3ef..21bbe89e9fa5 100644
--- a/packages/blocks/src/database-block/data-view/common/header/tools/expand/index.ts
+++ b/packages/blocks/src/database-block/widgets/expand/index.ts
@@ -10,16 +10,14 @@ import type { PropertyValues } from 'lit';
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import {
-  CrossIcon,
-  ExpandWideIcon,
-} from '../../../../../../_common/icons/index.js';
-import type { DatabaseBlockComponent } from '../../../../../database-block.js';
-import type { DataViewRendererConfig } from '../../../../data-view.js';
-import type { DataViewSelection } from '../../../../types.js';
-import { createModal } from '../../../../utils/menu/index.js';
-import { renderTemplate } from '../../../../utils/uni-component/render-template.js';
-import { DatabaseSelection } from '../../../selection.js';
+import { CrossIcon, ExpandWideIcon } from '../../../_common/icons/index.js';
+import { DatabaseSelection } from '../../data-view/common/selection.js';
+import type { DataViewRendererConfig } from '../../data-view/data-view.js';
+import type { DataViewSelection } from '../../data-view/types.js';
+import { createModal } from '../../data-view/utils/menu/index.js';
+import { renderTemplate } from '../../data-view/utils/uni-component/render-template.js';
+import { WidgetBase } from '../../data-view/widget/widget-base.js';
+import type { DatabaseBlockComponent } from '../../database-block.js';
 
 export function showDatabasePreviewModal(database: DatabaseBlockComponent) {
   const viewComponent = new DatabaseBlockModalPreview();
@@ -84,9 +82,7 @@ export function showDatabasePreviewModal(database: DatabaseBlockComponent) {
 }
 
 @customElement('expand-database-block-modal')
-export class ExpandDatabaseBlockModal extends WithDisposable(
-  ShadowlessElement
-) {
+export class ExpandDatabaseBlockModal extends WidgetBase {
   expandDatabase = () => {
     const database = this.closest('affine-database');
     if (database) {
@@ -188,7 +184,7 @@ export class DatabaseBlockModalPreview extends WithDisposable(
       setSelection: this.setSelection,
       dataSource: this.database.dataSource,
       viewSource: this.database.viewSource,
-      headerComponent: this.database.headerComponent,
+      headerWidget: this.database.headerWidget,
       std: this.database.std,
     };
     return html`
diff --git a/packages/blocks/src/database-block/data-view/common/header/tools/expand/styles.ts b/packages/blocks/src/database-block/widgets/expand/styles.ts
similarity index 100%
rename from packages/blocks/src/database-block/data-view/common/header/tools/expand/styles.ts
rename to packages/blocks/src/database-block/widgets/expand/styles.ts
diff --git a/packages/blocks/src/database-block/data-view/common/header/tools/expand/table-full-screen-modal.ts b/packages/blocks/src/database-block/widgets/expand/table-full-screen-modal.ts
similarity index 93%
rename from packages/blocks/src/database-block/data-view/common/header/tools/expand/table-full-screen-modal.ts
rename to packages/blocks/src/database-block/widgets/expand/table-full-screen-modal.ts
index c07d7540a229..6bbc3f463098 100644
--- a/packages/blocks/src/database-block/data-view/common/header/tools/expand/table-full-screen-modal.ts
+++ b/packages/blocks/src/database-block/widgets/expand/table-full-screen-modal.ts
@@ -2,11 +2,11 @@ import { BlockElement } from '@blocksuite/block-std';
 import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import type { DatabaseBlockModel } from '../../../../../database-model.js';
 import {
   DatabaseTableViewClose,
   DatabaseTableViewIcon,
-} from '../../../icons/index.js';
+} from '../../data-view/common/icons/index.js';
+import type { DatabaseBlockModel } from '../../database-model.js';
 import { fullScreenStyles } from './styles.js';
 
 @customElement('affine-database-table-view-full-screen')
diff --git a/packages/blocks/src/database-block/widgets/index.ts b/packages/blocks/src/database-block/widgets/index.ts
new file mode 100644
index 000000000000..75e9c52b6c7b
--- /dev/null
+++ b/packages/blocks/src/database-block/widgets/index.ts
@@ -0,0 +1 @@
+export const commonTools = [];

From 47a25c647a90a5a85fcbefbe2dc4c1f27a54017a Mon Sep 17 00:00:00 2001
From: zzj3720 <zuozijian1994@gmail.com>
Date: Thu, 11 Apr 2024 14:03:01 +0800
Subject: [PATCH 04/15] fix(database): ci

---
 packages/blocks/src/database-block/data-source.ts         | 2 +-
 .../database-block/data-view/common/group-by/define.ts    | 1 +
 tests/database/actions.ts                                 | 8 +++-----
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/blocks/src/database-block/data-source.ts b/packages/blocks/src/database-block/data-source.ts
index 516f3efe73e2..0c0558e0f563 100644
--- a/packages/blocks/src/database-block/data-source.ts
+++ b/packages/blocks/src/database-block/data-source.ts
@@ -189,7 +189,7 @@ export class DatabaseBlockDataSource extends BaseDataSource {
       currentData,
       currentCells
     ) ?? {
-      column: databaseBlockColumnMap[currentType].model.defaultData(),
+      column: databaseBlockColumnMap[toType].model.defaultData(),
       cells: currentCells.map(() => undefined),
     };
     this.doc.captureSync();
diff --git a/packages/blocks/src/database-block/data-view/common/group-by/define.ts b/packages/blocks/src/database-block/data-view/common/group-by/define.ts
index 98402955ca28..e65c36ecbdcb 100644
--- a/packages/blocks/src/database-block/data-view/common/group-by/define.ts
+++ b/packages/blocks/src/database-block/data-view/common/group-by/define.ts
@@ -52,6 +52,7 @@ groupByMatcher.register(tArray(tTag.create()), {
     return '';
   },
   defaultKeys: type => {
+    console.log(type);
     if (isTArray(type) && tTag.is(type.ele) && type.ele.data) {
       return [
         ungroups,
diff --git a/tests/database/actions.ts b/tests/database/actions.ts
index 3fbbcf8b7d1c..dfa8d98b37dc 100644
--- a/tests/database/actions.ts
+++ b/tests/database/actions.ts
@@ -1,8 +1,6 @@
-import type {
-  RichTextCell,
-  RichTextCellEditing,
-} from '@blocks/database-block/common/columns/rich-text/cell-renderer.js';
-import type { ColumnType } from '@blocks/index.js';
+import type { RichTextCell } from '@blocks/database-block/columns/rich-text/cell-renderer.js';
+import { type RichTextCellEditing } from '@blocks/database-block/columns/rich-text/cell-renderer.js';
+import type { ColumnType } from '@blocks/database-block/data-view/view/presets/table/types.js';
 import { ZERO_WIDTH_SPACE } from '@inline/consts.js';
 import { expect, type Locator, type Page } from '@playwright/test';
 

From f085e6ba61d03cca78dfa8843384b3dee7e5c1c2 Mon Sep 17 00:00:00 2001
From: zzj3720 <zuozijian1994@gmail.com>
Date: Thu, 11 Apr 2024 14:07:05 +0800
Subject: [PATCH 05/15] fix(database): ci

---
 packages/blocks/src/__tests__/database/database.unit.spec.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/blocks/src/__tests__/database/database.unit.spec.ts b/packages/blocks/src/__tests__/database/database.unit.spec.ts
index 99294feb5aaf..13e099a68632 100644
--- a/packages/blocks/src/__tests__/database/database.unit.spec.ts
+++ b/packages/blocks/src/__tests__/database/database.unit.spec.ts
@@ -1,7 +1,3 @@
-/* eslint-disable @typescript-eslint/no-restricted-imports */
-import '../../database-block/kanban/define.js';
-import '../../database-block/table/define.js';
-
 import type { BlockModel, Doc } from '@blocksuite/store';
 import { DocCollection, Generator, Schema } from '@blocksuite/store';
 import { beforeEach, describe, expect, test } from 'vitest';

From ed47d82d25122abddd1ee10c4cba1d30da6fb43c Mon Sep 17 00:00:00 2001
From: zzj3720 <zuozijian1994@gmail.com>
Date: Thu, 11 Apr 2024 14:53:30 +0800
Subject: [PATCH 06/15] fix(database): ci

---
 .../quick-action/database-convert-view.ts     | 20 ++--
 .../src/database-block/data-view/index.ts     |  1 +
 .../src/database-block/database-model.ts      | 82 +----------------
 .../src/database-block/database-service.ts    |  7 +-
 packages/blocks/src/database-block/index.ts   | 15 ++-
 packages/blocks/src/database-block/utils.ts   | 91 +++++++++++++++++++
 .../blocks/src/database-block/view-source.ts  |  8 +-
 .../blocks/src/database-block/views/models.ts | 11 +++
 .../widgets/block-hub/components/block-hub.ts | 15 ++-
 .../root-block/widgets/slash-menu/config.ts   | 11 ++-
 .../playground/apps/starter/data/database.ts  | 60 +++++-------
 tests/utils/actions/misc.ts                   | 10 +-
 12 files changed, 184 insertions(+), 147 deletions(-)
 create mode 100644 packages/blocks/src/database-block/utils.ts
 create mode 100644 packages/blocks/src/database-block/views/models.ts

diff --git a/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts b/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts
index f452bcf3f256..4cf45f4ef651 100644
--- a/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts
+++ b/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts
@@ -5,15 +5,19 @@ import { css, html, LitElement, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import { DatabaseSearchClose } from '../../../database-block/data-view/common/icons/index.js';
-import type { DataViewTypes } from '../../../database-block/data-view/view/data-view.js';
+import type { ViewMeta } from '../../../database-block/data-view/view/data-view.js';
 import type { DatabaseBlockModel } from '../../../database-block/database-model.js';
+import {
+  databaseViewInitConvert,
+  viewPresets,
+} from '../../../database-block/index.js';
 import {
   DatabaseKanbanViewIcon,
   DatabaseTableViewIcon,
 } from '../../icons/text.js';
 
 interface DatabaseView {
-  type: DataViewTypes;
+  meta: ViewMeta;
   text: string;
   icon: TemplateResult;
   description?: string;
@@ -22,12 +26,12 @@ interface DatabaseView {
 
 const databaseViews: DatabaseView[] = [
   {
-    type: 'table',
+    meta: viewPresets.tableViewConfig,
     text: 'Table view',
     icon: DatabaseTableViewIcon,
   },
   {
-    type: 'kanban',
+    meta: viewPresets.kanbanViewConfig,
     text: 'Kanban view',
     icon: DatabaseKanbanViewIcon,
   },
@@ -161,7 +165,7 @@ export class DatabaseConvertView extends WithDisposable(LitElement) {
     return this.host.doc;
   }
 
-  private _convertToDatabase(viewType: DataViewTypes) {
+  private _convertToDatabase(viewMeta: ViewMeta) {
     const [_, ctx] = this.host.std.command
       .chain()
       .getSelectedModels({
@@ -184,7 +188,7 @@ export class DatabaseConvertView extends WithDisposable(LitElement) {
     );
     const databaseModel = this.doc.getBlockById(id) as DatabaseBlockModel;
     assertExists(databaseModel);
-    databaseModel.initConvert(viewType);
+    databaseViewInitConvert(databaseModel, viewMeta);
     databaseModel.applyColumnUpdate();
     this.doc.moveBlocks(selectedModels, databaseModel);
 
@@ -216,13 +220,13 @@ export class DatabaseConvertView extends WithDisposable(LitElement) {
             ${databaseViews.map(view => {
               return html`
                 <div
-                  class="modal-view-item ${view.type}"
+                  class="modal-view-item ${view.meta.type}"
                   @mousedown="${(e: Event) => {
                     // prevent range reset
                     e.preventDefault();
                   }}"
                   @click="${() => {
-                    this._convertToDatabase(view.type);
+                    this._convertToDatabase(view.meta);
                   }}"
                 >
                   <div class="modal-view-item-content">
diff --git a/packages/blocks/src/database-block/data-view/index.ts b/packages/blocks/src/database-block/data-view/index.ts
index 1c9a503b4257..a07b3633e677 100644
--- a/packages/blocks/src/database-block/data-view/index.ts
+++ b/packages/blocks/src/database-block/data-view/index.ts
@@ -15,5 +15,6 @@ export { popMenu } from './utils/index.js';
 export { insertPositionToIndex } from './utils/insert.js';
 export { createUniComponentFromWebComponent } from './utils/uni-component/index.js';
 export { defineUniComponent } from './utils/uni-component/index.js';
+export { viewPresets } from './view/index.js';
 export type { StatCalcOpType } from './view/presets/table/types.js';
 export { widgetPresets } from './widget/index.js';
diff --git a/packages/blocks/src/database-block/database-model.ts b/packages/blocks/src/database-block/database-model.ts
index 1e3c516ae257..58ce8f1afe06 100644
--- a/packages/blocks/src/database-block/database-model.ts
+++ b/packages/blocks/src/database-block/database-model.ts
@@ -1,19 +1,10 @@
 import type { MigrationRunner, Text } from '@blocksuite/store';
 import { BlockModel, defineBlockSchema, nanoid } from '@blocksuite/store';
 
-import { databaseBlockColumnMap } from './columns/index.js';
-import { titlePureColumnConfig } from './columns/title/define.js';
-import { multiSelectColumnModelConfig } from './data-view/column/presets/multi-select/define.js';
-import { selectColumnModelConfig } from './data-view/column/presets/select/define.js';
 import type { InsertToPosition } from './data-view/types.js';
 import { arrayMove, insertPositionToIndex } from './data-view/utils/insert.js';
-import { getTagColor } from './data-view/utils/tags/colors.js';
-import {
-  type DataViewDataType,
-  type DataViewTypes,
-} from './data-view/view/data-view.js';
+import type { DataViewDataType } from './data-view/view/data-view.js';
 import type { Cell, Column, ColumnUpdater } from './types.js';
-import { databaseBlockViewMap } from './views/index.js';
 
 export type DatabaseBlockProps = {
   views: DataViewDataType[];
@@ -34,77 +25,6 @@ export class DatabaseBlockModel extends BlockModel<DatabaseBlockProps> {
   getViewList() {
     return this.views;
   }
-
-  initEmpty(viewType: DataViewTypes) {
-    this.addColumn(
-      'start',
-      titlePureColumnConfig.create(titlePureColumnConfig.model.name)
-    );
-    this.addView(viewType);
-  }
-
-  initConvert(viewType: DataViewTypes) {
-    this.addColumn(
-      'end',
-      multiSelectColumnModelConfig.model.create('Tag', { options: [] })
-    );
-    this.initEmpty(viewType);
-  }
-
-  initTemplate(viewType: DataViewTypes) {
-    const ids = [nanoid(), nanoid(), nanoid()];
-    const statusId = this.addColumn(
-      'end',
-      selectColumnModelConfig.model.create('Status', {
-        options: [
-          {
-            id: ids[0],
-            color: getTagColor(),
-            value: 'TODO',
-          },
-          {
-            id: ids[1],
-            color: getTagColor(),
-            value: 'In Progress',
-          },
-          {
-            id: ids[2],
-            color: getTagColor(),
-            value: 'Done',
-          },
-        ],
-      })
-    );
-    for (let i = 0; i < 4; i++) {
-      const rowId = this.doc.addBlock(
-        'affine:paragraph',
-        {
-          text: new this.doc.Text(`Task ${i + 1}`),
-        },
-        this.id
-      );
-      this.updateCell(rowId, {
-        columnId: statusId,
-        value: ids[i],
-      });
-    }
-    this.initEmpty(viewType);
-  }
-
-  addView(type: DataViewTypes) {
-    const id = this.doc.generateBlockId();
-    const viewConfig = databaseBlockViewMap[type];
-    const view = viewConfig.model.init(
-      databaseBlockColumnMap,
-      this,
-      id,
-      viewConfig.model.defaultName
-    );
-    this.doc.transact(() => {
-      this.views.push(view);
-    });
-    return view;
-  }
   duplicateView(id: string): string {
     const newId = this.doc.generateBlockId();
     this.doc.transact(() => {
diff --git a/packages/blocks/src/database-block/database-service.ts b/packages/blocks/src/database-block/database-service.ts
index cee1c9268af1..9f093089c397 100644
--- a/packages/blocks/src/database-block/database-service.ts
+++ b/packages/blocks/src/database-block/database-service.ts
@@ -10,8 +10,9 @@ import {
 import { affineInlineMarkdownMatches } from '../_common/inline/presets/markdown.js';
 import { ReferenceNodeConfig } from '../_common/inline/presets/nodes/reference-node/reference-config.js';
 import { DatabaseSelection } from './data-view/common/selection.js';
-import type { DataViewTypes } from './data-view/view/data-view.js';
+import type { ViewMeta } from './data-view/view/data-view.js';
 import type { DatabaseBlockModel } from './database-model.js';
+import { databaseViewInitTemplate } from './utils.js';
 
 export class DatabaseService<
   TextAttributes extends AffineTextAttributes = AffineTextAttributes,
@@ -36,12 +37,12 @@ export class DatabaseService<
     doc: Doc,
     model: BlockModel,
     databaseId: string,
-    viewType: DataViewTypes,
+    viewMeta: ViewMeta,
     isAppendNewRow = true
   ) {
     const blockModel = doc.getBlockById(databaseId) as DatabaseBlockModel;
     assertExists(blockModel);
-    blockModel.initTemplate(viewType);
+    databaseViewInitTemplate(blockModel, viewMeta);
     if (isAppendNewRow) {
       // Add a paragraph after database
       const parent = doc.getParent(model);
diff --git a/packages/blocks/src/database-block/index.ts b/packages/blocks/src/database-block/index.ts
index 1b4c2817d765..17172b6cfa4a 100644
--- a/packages/blocks/src/database-block/index.ts
+++ b/packages/blocks/src/database-block/index.ts
@@ -1,20 +1,19 @@
+export { richTextColumnConfig } from './columns/rich-text/cell-renderer.js';
 export { richTextColumnModelConfig } from './columns/rich-text/define.js';
 import type { DatabaseBlockModel } from './database-model.js';
 import type { DatabaseService } from './database-service.js';
 
-export { checkboxColumnModelConfig } from './data-view/column/presets/checkbox/define.js';
-export { dateColumnModelConfig } from './data-view/column/presets/date/define.js';
-export { linkColumnModelConfig } from './data-view/column/presets/link/define.js';
-export { multiSelectColumnConfig } from './data-view/column/presets/multi-select/cell-renderer.js';
-export { multiSelectColumnModelConfig } from './data-view/column/presets/multi-select/define.js';
-export { numberColumnModelConfig } from './data-view/column/presets/number/define.js';
-export { progressColumnModelConfig } from './data-view/column/presets/progress/define.js';
+export {
+  columnPresets,
+  viewPresets,
+  widgetPresets,
+} from './data-view/index.js';
 export { insertPositionToIndex } from './data-view/utils/insert.js';
 export * from './database-block.js';
 export * from './database-model.js';
 export * from './database-service.js';
 export * from './types.js';
-
+export * from './utils.js';
 declare global {
   namespace BlockSuite {
     interface BlockServices {
diff --git a/packages/blocks/src/database-block/utils.ts b/packages/blocks/src/database-block/utils.ts
new file mode 100644
index 000000000000..5e08b671ed50
--- /dev/null
+++ b/packages/blocks/src/database-block/utils.ts
@@ -0,0 +1,91 @@
+import { nanoid } from '@blocksuite/store';
+
+import { databaseBlockColumnMap } from './columns/index.js';
+import { titlePureColumnConfig } from './columns/title/define.js';
+import { multiSelectColumnModelConfig } from './data-view/column/presets/multi-select/define.js';
+import { selectColumnModelConfig } from './data-view/column/presets/select/define.js';
+import { getTagColor } from './data-view/utils/tags/colors.js';
+import type { ViewMeta } from './data-view/view/data-view.js';
+import type { DatabaseBlockModel } from './database-model.js';
+
+export const databaseViewInitEmpty = (
+  model: DatabaseBlockModel,
+  viewMeta: ViewMeta
+) => {
+  model.addColumn(
+    'start',
+    titlePureColumnConfig.create(titlePureColumnConfig.model.name)
+  );
+  databaseViewAddView(model, viewMeta);
+};
+
+export const databaseViewInitConvert = (
+  model: DatabaseBlockModel,
+  viewMeta: ViewMeta
+) => {
+  model.addColumn(
+    'end',
+    multiSelectColumnModelConfig.model.create('Tag', { options: [] })
+  );
+  databaseViewInitEmpty(model, viewMeta);
+};
+
+export const databaseViewInitTemplate = (
+  model: DatabaseBlockModel,
+  viewMeta: ViewMeta
+) => {
+  const ids = [nanoid(), nanoid(), nanoid()];
+  const statusId = model.addColumn(
+    'end',
+    selectColumnModelConfig.model.create('Status', {
+      options: [
+        {
+          id: ids[0],
+          color: getTagColor(),
+          value: 'TODO',
+        },
+        {
+          id: ids[1],
+          color: getTagColor(),
+          value: 'In Progress',
+        },
+        {
+          id: ids[2],
+          color: getTagColor(),
+          value: 'Done',
+        },
+      ],
+    })
+  );
+  for (let i = 0; i < 4; i++) {
+    const rowId = model.doc.addBlock(
+      'affine:paragraph',
+      {
+        text: new model.doc.Text(`Task ${i + 1}`),
+      },
+      model.id
+    );
+    model.updateCell(rowId, {
+      columnId: statusId,
+      value: ids[i],
+    });
+  }
+  databaseViewInitEmpty(model, viewMeta);
+};
+
+export const databaseViewAddView = (
+  model: DatabaseBlockModel,
+  viewMeta: ViewMeta
+) => {
+  const id = model.doc.generateBlockId();
+  const view = viewMeta.model.init(
+    databaseBlockColumnMap,
+    model,
+    id,
+    viewMeta.model.defaultName
+  );
+  model.doc.transact(() => {
+    model.views.push(view);
+  });
+  return view;
+};
diff --git a/packages/blocks/src/database-block/view-source.ts b/packages/blocks/src/database-block/view-source.ts
index a80d2141ed52..f1632d875622 100644
--- a/packages/blocks/src/database-block/view-source.ts
+++ b/packages/blocks/src/database-block/view-source.ts
@@ -4,6 +4,7 @@ import type { SingleViewSource, ViewSource } from './data-view/common/index.js';
 import type { InsertToPosition } from './data-view/types.js';
 import type { DataViewTypes, ViewMeta } from './data-view/view/data-view.js';
 import { type DatabaseBlockModel } from './database-model.js';
+import { databaseViewAddView } from './utils.js';
 import { databaseBlockViewMap, databaseBlockViews } from './views/index.js';
 
 export class DatabaseBlockViewSource implements ViewSource {
@@ -35,9 +36,12 @@ export class DatabaseBlockViewSource implements ViewSource {
     return this.model.doc.readonly;
   }
 
-  public viewAdd(type: DataViewTypes): string {
+  public viewAdd(viewType: DataViewTypes): string {
     this.model.doc.captureSync();
-    const view = this.model.addView(type);
+    const view = databaseViewAddView(
+      this.model,
+      databaseBlockViewMap[viewType]
+    );
     this.model.applyViewsUpdate();
     return view.id;
   }
diff --git a/packages/blocks/src/database-block/views/models.ts b/packages/blocks/src/database-block/views/models.ts
new file mode 100644
index 000000000000..af311e07c681
--- /dev/null
+++ b/packages/blocks/src/database-block/views/models.ts
@@ -0,0 +1,11 @@
+import type { ViewMeta } from '../data-view/view/data-view.js';
+import { viewPresets } from '../data-view/view/index.js';
+
+export const databaseBlockViews: ViewMeta[] = [
+  viewPresets.tableViewConfig,
+  viewPresets.kanbanViewConfig,
+];
+
+export const databaseBlockViewMap = Object.fromEntries(
+  databaseBlockViews.map(view => [view.type, view])
+);
diff --git a/packages/blocks/src/root-block/widgets/block-hub/components/block-hub.ts b/packages/blocks/src/root-block/widgets/block-hub/components/block-hub.ts
index 748a3dee65d7..b8616f37917e 100644
--- a/packages/blocks/src/root-block/widgets/block-hub/components/block-hub.ts
+++ b/packages/blocks/src/root-block/widgets/block-hub/components/block-hub.ts
@@ -26,6 +26,7 @@ import {
   Rect,
   stopPropagation,
 } from '../../../../_common/utils/index.js';
+import { viewPresets } from '../../../../database-block/index.js';
 import {
   addImageBlocks,
   addSiblingImageBlock,
@@ -517,7 +518,12 @@ export class BlockHub extends WithDisposable(ShadowlessElement) {
       if (isDatabase) {
         const service =
           this._rootElement.std.spec?.getService('affine:database');
-        service.initDatabaseBlock(doc, model, model.id, 'table');
+        service.initDatabaseBlock(
+          doc,
+          model,
+          model.id,
+          viewPresets.tableViewConfig
+        );
       }
     }
 
@@ -552,7 +558,12 @@ export class BlockHub extends WithDisposable(ShadowlessElement) {
       assertExists(model);
       if (isDatabase) {
         const service = rootElement.std.spec?.getService('affine:database');
-        service.initDatabaseBlock(doc, model, model.id, 'table');
+        service.initDatabaseBlock(
+          doc,
+          model,
+          model.id,
+          viewPresets.kanbanViewConfig
+        );
       }
     }
     rootElement.setSelection(noteId, true, focusId, point);
diff --git a/packages/blocks/src/root-block/widgets/slash-menu/config.ts b/packages/blocks/src/root-block/widgets/slash-menu/config.ts
index 94c214860017..5c4b9f0740d4 100644
--- a/packages/blocks/src/root-block/widgets/slash-menu/config.ts
+++ b/packages/blocks/src/root-block/widgets/slash-menu/config.ts
@@ -35,6 +35,7 @@ import {
 import { clearMarksOnDiscontinuousInput } from '../../../_common/utils/inline-editor.js';
 import { addSiblingAttachmentBlocks } from '../../../attachment-block/utils.js';
 import { GroupingIcon } from '../../../database-block/data-view/common/icons/index.js';
+import { viewPresets } from '../../../database-block/data-view/view/index.js';
 import { FigmaIcon } from '../../../embed-figma-block/styles.js';
 import { GithubIcon } from '../../../embed-github-block/styles.js';
 import { LoomIcon } from '../../../embed-loom-block/styles.js';
@@ -483,7 +484,13 @@ export const menuGroups: SlashMenuOptions['menus'] = [
             index + 1
           );
           const service = rootElement.std.spec.getService('affine:database');
-          service.initDatabaseBlock(rootElement.doc, model, id, 'table', false);
+          service.initDatabaseBlock(
+            rootElement.doc,
+            model,
+            id,
+            viewPresets.tableViewConfig,
+            false
+          );
           tryRemoveEmptyLine(model);
         },
       },
@@ -518,7 +525,7 @@ export const menuGroups: SlashMenuOptions['menus'] = [
             rootElement.doc,
             model,
             id,
-            'kanban',
+            viewPresets.kanbanViewConfig,
             false
           );
           tryRemoveEmptyLine(model);
diff --git a/packages/playground/apps/starter/data/database.ts b/packages/playground/apps/starter/data/database.ts
index 091730fc4a81..ebc1cf5ab261 100644
--- a/packages/playground/apps/starter/data/database.ts
+++ b/packages/playground/apps/starter/data/database.ts
@@ -1,15 +1,11 @@
 import {
-  checkboxColumnModelConfig,
+  columnPresets,
   type DatabaseBlockModel,
-  dateColumnModelConfig,
-  linkColumnModelConfig,
+  databaseViewAddView,
   type ListType,
-  multiSelectColumnConfig,
-  multiSelectColumnModelConfig,
-  numberColumnModelConfig,
   type ParagraphType,
-  progressColumnModelConfig,
-  richTextColumnModelConfig,
+  richTextColumnConfig,
+  viewPresets,
 } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
 import { type DocCollection, Text } from '@blocksuite/store';
@@ -45,38 +41,28 @@ export const database: InitFn = (collection: DocCollection, id: string) => {
     new Promise(resolve => requestAnimationFrame(resolve))
       .then(() => {
         const service = window.host.std.spec.getService('affine:database');
-        service.initDatabaseBlock(doc, model, databaseId, 'table', true);
-        const database = doc.getBlockById(databaseId) as DatabaseBlockModel;
-        database.addColumn(
-          'end',
-          numberColumnModelConfig.create(numberColumnModelConfig.model.name)
+        service.initDatabaseBlock(
+          doc,
+          model,
+          databaseId,
+          viewPresets.tableViewConfig,
+          true
         );
+        const database = doc.getBlockById(databaseId) as DatabaseBlockModel;
         const richTextId = database.addColumn(
           'end',
-          richTextColumnModelConfig.create(richTextColumnModelConfig.model.name)
-        );
-        database.addColumn(
-          'end',
-          dateColumnModelConfig.create(dateColumnModelConfig.model.name)
-        );
-        database.addColumn(
-          'end',
-          linkColumnModelConfig.create(linkColumnModelConfig.model.name)
-        );
-        database.addColumn(
-          'end',
-          progressColumnModelConfig.create(progressColumnModelConfig.model.name)
-        );
-        database.addColumn(
-          'end',
-          checkboxColumnModelConfig.create(checkboxColumnModelConfig.model.name)
-        );
-        database.addColumn(
-          'end',
-          multiSelectColumnModelConfig.create(
-            multiSelectColumnConfig.model.name
-          )
+          richTextColumnConfig.model.create(richTextColumnConfig.model.name)
         );
+        Object.values([
+          columnPresets.multiSelectColumnConfig,
+          columnPresets.dateColumnConfig,
+          columnPresets.numberColumnConfig,
+          columnPresets.linkColumnConfig,
+          columnPresets.checkboxColumnConfig,
+          columnPresets.progressColumnConfig,
+        ]).forEach(column => {
+          database.addColumn('end', column.model.create(column.model.name));
+        });
         database.updateView(database.views[0].id, () => {
           return {
             groupBy: {
@@ -131,7 +117,7 @@ export const database: InitFn = (collection: DocCollection, id: string) => {
         doc.addBlock('affine:paragraph', {}, noteId);
         doc.addBlock('affine:paragraph', {}, noteId);
         doc.addBlock('affine:paragraph', {}, noteId);
-        database.addView('kanban');
+        databaseViewAddView(database, viewPresets.kanbanViewConfig);
 
         doc.resetHistory();
       })
diff --git a/tests/utils/actions/misc.ts b/tests/utils/actions/misc.ts
index 2725f9a41172..d3227e59c813 100644
--- a/tests/utils/actions/misc.ts
+++ b/tests/utils/actions/misc.ts
@@ -3,10 +3,12 @@ import '../declare-test-window.js';
 
 import type { EditorHost } from '@block-std/view/element/lit-host.js';
 import type { CssVariableName } from '@blocks/_common/theme/css-variables.js';
-import type { RichText } from '@blocks/index.js';
+import { viewPresets } from '@blocks/database-block/data-view/view/index.js';
 import {
   type DatabaseBlockModel,
+  databaseViewInitEmpty,
   type ListType,
+  type RichText,
   type ThemeObserver,
 } from '@blocks/index.js';
 import { assertExists } from '@global/utils.js';
@@ -478,7 +480,7 @@ export async function initEmptyDatabaseState(page: Page, rootId?: string) {
       noteId
     );
     const model = doc.getBlockById(databaseId) as DatabaseBlockModel;
-    model.initEmpty('table');
+    databaseViewInitEmpty(model, viewPresets.tableViewConfig);
     model.applyColumnUpdate();
 
     doc.captureSync();
@@ -540,7 +542,7 @@ export async function initKanbanViewState(
           }
         });
       });
-      model.initEmpty('kanban');
+      databaseViewInitEmpty(model, viewPresets.kanbanViewConfig);
       model.applyColumnUpdate();
       doc.captureSync();
       return { rootId, noteId, databaseId };
@@ -572,7 +574,7 @@ export async function initEmptyDatabaseWithParagraphState(
       noteId
     );
     const model = doc.getBlockById(databaseId) as DatabaseBlockModel;
-    model.initEmpty('table');
+    databaseViewInitEmpty(model, viewPresets.tableViewConfig);
     model.applyColumnUpdate();
     doc.addBlock('affine:paragraph', {}, noteId);
 

From 47118b2058a8917391df281950f3aae2b1ddfa34 Mon Sep 17 00:00:00 2001
From: zzj3720 <zuozijian1994@gmail.com>
Date: Thu, 11 Apr 2024 14:54:13 +0800
Subject: [PATCH 07/15] fix(database): ci

---
 .../src/database-block/data-view/common/group-by/define.ts       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/blocks/src/database-block/data-view/common/group-by/define.ts b/packages/blocks/src/database-block/data-view/common/group-by/define.ts
index e65c36ecbdcb..98402955ca28 100644
--- a/packages/blocks/src/database-block/data-view/common/group-by/define.ts
+++ b/packages/blocks/src/database-block/data-view/common/group-by/define.ts
@@ -52,7 +52,6 @@ groupByMatcher.register(tArray(tTag.create()), {
     return '';
   },
   defaultKeys: type => {
-    console.log(type);
     if (isTArray(type) && tTag.is(type.ele) && type.ele.data) {
       return [
         ungroups,

From 816891dde040d5882aaa7c1b1128a74abf5c399a Mon Sep 17 00:00:00 2001
From: zzj3720 <zuozijian1994@gmail.com>
Date: Thu, 11 Apr 2024 15:15:43 +0800
Subject: [PATCH 08/15] fix(database): ci

---
 .../src/__tests__/database/database.unit.spec.ts  | 15 +++++++++------
 .../configs/quick-action/database-convert-view.ts |  4 ++--
 .../src/database-block/data-view/data-view.ts     |  4 ----
 .../blocks/src/database-block/data-view/index.ts  |  4 ++++
 .../blocks/src/database-block/database-block.ts   | 14 +++++++-------
 packages/blocks/src/database-block/utils.ts       |  9 ++++-----
 .../blocks/src/database-block/views/models.ts     |  4 ++--
 .../src/root-block/widgets/slash-menu/config.ts   |  2 +-
 tests/utils/actions/misc.ts                       |  2 +-
 9 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/packages/blocks/src/__tests__/database/database.unit.spec.ts b/packages/blocks/src/__tests__/database/database.unit.spec.ts
index 13e099a68632..86b70f081540 100644
--- a/packages/blocks/src/__tests__/database/database.unit.spec.ts
+++ b/packages/blocks/src/__tests__/database/database.unit.spec.ts
@@ -8,7 +8,7 @@ import { DatabaseBlockSchema } from '../../database-block/database-model.js';
 import {
   type Cell,
   type Column,
-  numberColumnModelConfig,
+  columnPresets,
   richTextColumnModelConfig,
 } from '../../database-block/index.js';
 import { NoteBlockSchema } from '../../note-block/note-model.js';
@@ -78,7 +78,10 @@ describe('DatabaseManager', () => {
     ) as DatabaseBlockModel;
     db = databaseModel;
 
-    col1 = db.addColumn('end', numberColumnModelConfig.create('Number'));
+    col1 = db.addColumn(
+      'end',
+      columnPresets.numberColumnConfig.model.create('Number')
+    );
     col2 = db.addColumn(
       'end',
       selectColumnModelConfig.create('Single Select', { options: selection })
@@ -116,7 +119,7 @@ describe('DatabaseManager', () => {
 
   test('getColumn', () => {
     const column = {
-      ...numberColumnModelConfig.create('testColumnId'),
+      ...columnPresets.numberColumnConfig.model.create('testColumnId'),
       id: 'testColumnId',
     };
     db.addColumn('end', column);
@@ -126,7 +129,7 @@ describe('DatabaseManager', () => {
   });
 
   test('addColumn', () => {
-    const column = numberColumnModelConfig.create('Test Column');
+    const column = columnPresets.numberColumnConfig.model.create('Test Column');
     const id = db.addColumn('end', column);
     const result = db.getColumn(id);
 
@@ -136,7 +139,7 @@ describe('DatabaseManager', () => {
 
   test('deleteColumn', () => {
     const column = {
-      ...numberColumnModelConfig.create('Test Column'),
+      ...columnPresets.numberColumnConfig.model.create('Test Column'),
       id: 'testColumnId',
     };
     db.addColumn('end', column);
@@ -155,7 +158,7 @@ describe('DatabaseManager', () => {
       noteBlockId
     );
     const column = {
-      ...numberColumnModelConfig.create('Test Column'),
+      ...columnPresets.numberColumnConfig.model.create('Test Column'),
       id: 'testColumnId',
     };
     const cell: Cell = {
diff --git a/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts b/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts
index 4cf45f4ef651..29484df3a661 100644
--- a/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts
+++ b/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts
@@ -5,8 +5,8 @@ import { css, html, LitElement, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import { DatabaseSearchClose } from '../../../database-block/data-view/common/icons/index.js';
-import type { ViewMeta } from '../../../database-block/data-view/view/data-view.js';
-import type { DatabaseBlockModel } from '../../../database-block/database-model.js';
+import type { ViewMeta } from '../../../database-block/data-view/index.js';
+import type { DatabaseBlockModel } from '../../../database-block/index.js';
 import {
   databaseViewInitConvert,
   viewPresets,
diff --git a/packages/blocks/src/database-block/data-view/data-view.ts b/packages/blocks/src/database-block/data-view/data-view.ts
index 20fc3c31eda2..ec56deaf8241 100644
--- a/packages/blocks/src/database-block/data-view/data-view.ts
+++ b/packages/blocks/src/database-block/data-view/data-view.ts
@@ -1,8 +1,4 @@
 import './common/group-by/define.js';
-import './widget/views-bar/views.js';
-import '../components/title/index.js';
-import './widget/tools/tools-renderer.js';
-import './widget/filter/filter-bar.js';
 
 import type { BlockStdScope } from '@blocksuite/block-std';
 import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
diff --git a/packages/blocks/src/database-block/data-view/index.ts b/packages/blocks/src/database-block/data-view/index.ts
index a07b3633e677..84c30a22cee2 100644
--- a/packages/blocks/src/database-block/data-view/index.ts
+++ b/packages/blocks/src/database-block/data-view/index.ts
@@ -13,8 +13,12 @@ export type { InsertToPosition } from './types.js';
 export type { DataViewSelection } from './types.js';
 export { popMenu } from './utils/index.js';
 export { insertPositionToIndex } from './utils/insert.js';
+export { renderUniLit } from './utils/uni-component/index.js';
 export { createUniComponentFromWebComponent } from './utils/uni-component/index.js';
 export { defineUniComponent } from './utils/uni-component/index.js';
+export type { DataViewExpose, DataViewProps } from './view/data-view.js';
+export type { ViewMeta } from './view/data-view.js';
 export { viewPresets } from './view/index.js';
 export type { StatCalcOpType } from './view/presets/table/types.js';
 export { widgetPresets } from './widget/index.js';
+export type { DataViewWidget, DataViewWidgetProps } from './widget/types.js';
diff --git a/packages/blocks/src/database-block/database-block.ts b/packages/blocks/src/database-block/database-block.ts
index 22a40c5ad831..885780cc4d78 100644
--- a/packages/blocks/src/database-block/database-block.ts
+++ b/packages/blocks/src/database-block/database-block.ts
@@ -1,3 +1,5 @@
+import './components/title/index.js';
+
 import { BlockElement, PathFinder, RangeManager } from '@blocksuite/block-std';
 import { Slot } from '@blocksuite/global/utils';
 import { Slice } from '@blocksuite/store';
@@ -28,19 +30,17 @@ import { dataViewCommonStyle } from './data-view/common/css-variable.js';
 import {
   DatabaseSelection,
   DataView,
+  type DataViewExpose,
+  type DataViewProps,
   type DataViewSelection,
+  type DataViewWidget,
+  type DataViewWidgetProps,
   defineUniComponent,
   popMenu,
+  renderUniLit,
   type ViewSource,
   widgetPresets,
 } from './data-view/index.js';
-import { renderUniLit } from './data-view/utils/uni-component/index.js';
-import type { DataViewProps } from './data-view/view/data-view.js';
-import { type DataViewExpose } from './data-view/view/data-view.js';
-import type {
-  DataViewWidget,
-  DataViewWidgetProps,
-} from './data-view/widget/types.js';
 import type { DatabaseBlockModel } from './database-model.js';
 import { DatabaseBlockSchema } from './database-model.js';
 import type { DatabaseService } from './database-service.js';
diff --git a/packages/blocks/src/database-block/utils.ts b/packages/blocks/src/database-block/utils.ts
index 5e08b671ed50..a762bb374ec3 100644
--- a/packages/blocks/src/database-block/utils.ts
+++ b/packages/blocks/src/database-block/utils.ts
@@ -2,10 +2,9 @@ import { nanoid } from '@blocksuite/store';
 
 import { databaseBlockColumnMap } from './columns/index.js';
 import { titlePureColumnConfig } from './columns/title/define.js';
-import { multiSelectColumnModelConfig } from './data-view/column/presets/multi-select/define.js';
-import { selectColumnModelConfig } from './data-view/column/presets/select/define.js';
+import type { ViewMeta } from './data-view/index.js';
+import { columnPresets } from './data-view/index.js';
 import { getTagColor } from './data-view/utils/tags/colors.js';
-import type { ViewMeta } from './data-view/view/data-view.js';
 import type { DatabaseBlockModel } from './database-model.js';
 
 export const databaseViewInitEmpty = (
@@ -25,7 +24,7 @@ export const databaseViewInitConvert = (
 ) => {
   model.addColumn(
     'end',
-    multiSelectColumnModelConfig.model.create('Tag', { options: [] })
+    columnPresets.multiSelectColumnConfig.model.create('Tag', { options: [] })
   );
   databaseViewInitEmpty(model, viewMeta);
 };
@@ -37,7 +36,7 @@ export const databaseViewInitTemplate = (
   const ids = [nanoid(), nanoid(), nanoid()];
   const statusId = model.addColumn(
     'end',
-    selectColumnModelConfig.model.create('Status', {
+    columnPresets.selectColumnConfig.model.create('Status', {
       options: [
         {
           id: ids[0],
diff --git a/packages/blocks/src/database-block/views/models.ts b/packages/blocks/src/database-block/views/models.ts
index af311e07c681..5ee974798b88 100644
--- a/packages/blocks/src/database-block/views/models.ts
+++ b/packages/blocks/src/database-block/views/models.ts
@@ -1,5 +1,5 @@
-import type { ViewMeta } from '../data-view/view/data-view.js';
-import { viewPresets } from '../data-view/view/index.js';
+import type { ViewMeta } from '../data-view/index.js';
+import { viewPresets } from '../data-view/index.js';
 
 export const databaseBlockViews: ViewMeta[] = [
   viewPresets.tableViewConfig,
diff --git a/packages/blocks/src/root-block/widgets/slash-menu/config.ts b/packages/blocks/src/root-block/widgets/slash-menu/config.ts
index 5c4b9f0740d4..8a2cd915139a 100644
--- a/packages/blocks/src/root-block/widgets/slash-menu/config.ts
+++ b/packages/blocks/src/root-block/widgets/slash-menu/config.ts
@@ -35,7 +35,7 @@ import {
 import { clearMarksOnDiscontinuousInput } from '../../../_common/utils/inline-editor.js';
 import { addSiblingAttachmentBlocks } from '../../../attachment-block/utils.js';
 import { GroupingIcon } from '../../../database-block/data-view/common/icons/index.js';
-import { viewPresets } from '../../../database-block/data-view/view/index.js';
+import { viewPresets } from '../../../database-block/index.js';
 import { FigmaIcon } from '../../../embed-figma-block/styles.js';
 import { GithubIcon } from '../../../embed-github-block/styles.js';
 import { LoomIcon } from '../../../embed-loom-block/styles.js';
diff --git a/tests/utils/actions/misc.ts b/tests/utils/actions/misc.ts
index d3227e59c813..bacbef83e694 100644
--- a/tests/utils/actions/misc.ts
+++ b/tests/utils/actions/misc.ts
@@ -3,13 +3,13 @@ import '../declare-test-window.js';
 
 import type { EditorHost } from '@block-std/view/element/lit-host.js';
 import type { CssVariableName } from '@blocks/_common/theme/css-variables.js';
-import { viewPresets } from '@blocks/database-block/data-view/view/index.js';
 import {
   type DatabaseBlockModel,
   databaseViewInitEmpty,
   type ListType,
   type RichText,
   type ThemeObserver,
+  viewPresets,
 } from '@blocks/index.js';
 import { assertExists } from '@global/utils.js';
 import { type InlineRange, type InlineRootElement } from '@inline/index.js';

From 6172534bdc3e280c56043d85c5f8445beca01a9a Mon Sep 17 00:00:00 2001
From: zzj3720 <zuozijian1994@gmail.com>
Date: Thu, 11 Apr 2024 15:20:45 +0800
Subject: [PATCH 09/15] fix(database): ci

---
 packages/blocks/src/database-block/index.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/blocks/src/database-block/index.ts b/packages/blocks/src/database-block/index.ts
index 17172b6cfa4a..b2603aae4cba 100644
--- a/packages/blocks/src/database-block/index.ts
+++ b/packages/blocks/src/database-block/index.ts
@@ -1,5 +1,4 @@
 export { richTextColumnConfig } from './columns/rich-text/cell-renderer.js';
-export { richTextColumnModelConfig } from './columns/rich-text/define.js';
 import type { DatabaseBlockModel } from './database-model.js';
 import type { DatabaseService } from './database-service.js';
 
@@ -13,7 +12,7 @@ export * from './database-block.js';
 export * from './database-model.js';
 export * from './database-service.js';
 export * from './types.js';
-export * from './utils.js';
+export { databaseViewInitConvert, databaseViewInitEmpty } from './utils.js';
 declare global {
   namespace BlockSuite {
     interface BlockServices {

From 02fa384c287f95904e93c6c0d5666f9cbb535cd5 Mon Sep 17 00:00:00 2001
From: zzj3720 <zuozijian1994@gmail.com>
Date: Thu, 11 Apr 2024 19:10:09 +0800
Subject: [PATCH 10/15] fix(database): ci

---
 .../columns/title/cell-renderer.ts            | 17 +++++++----
 .../header-area => columns/title}/icon.ts     |  2 +-
 .../header-area => columns/title}/text.ts     | 12 ++++----
 .../view/presets/kanban/header-cell.ts        | 18 -----------
 .../presets/kanban/kanban-view-manager.ts     |  9 ------
 .../presets/table/components/header-cell.ts   |  6 ++--
 .../view/presets/table/table-view-manager.ts  |  9 ------
 .../src/database-block/database-service.ts    |  5 +++-
 packages/blocks/src/database-block/index.ts   |  2 +-
 tests/utils/actions/misc.ts                   | 30 +++++++++++++++----
 10 files changed, 50 insertions(+), 60 deletions(-)
 rename packages/blocks/src/database-block/{data-view/common/header-area => columns/title}/icon.ts (88%)
 rename packages/blocks/src/database-block/{data-view/common/header-area => columns/title}/text.ts (93%)
 delete mode 100644 packages/blocks/src/database-block/data-view/view/presets/kanban/header-cell.ts

diff --git a/packages/blocks/src/database-block/columns/title/cell-renderer.ts b/packages/blocks/src/database-block/columns/title/cell-renderer.ts
index ce0b4aed9f93..9ddb5416e7fd 100644
--- a/packages/blocks/src/database-block/columns/title/cell-renderer.ts
+++ b/packages/blocks/src/database-block/columns/title/cell-renderer.ts
@@ -1,15 +1,20 @@
+import type { CellRenderProps } from '../../data-view/column/index.js';
 import { createFromBaseCellRenderer } from '../../data-view/column/renderer.js';
+import { map } from '../../data-view/utils/uni-component/operation.js';
 import { createIcon } from '../../data-view/utils/uni-icon.js';
-import {
-  RichTextCell,
-  RichTextCellEditing,
-} from '../rich-text/cell-renderer.js';
 import { titlePureColumnConfig } from './define.js';
+import { HeaderAreaTextCell, HeaderAreaTextCellEditing } from './text.js';
 
 export const titleColumnConfig = titlePureColumnConfig.renderConfig({
   icon: createIcon('TitleIcon'),
   cellRenderer: {
-    view: createFromBaseCellRenderer(RichTextCell),
-    edit: createFromBaseCellRenderer(RichTextCellEditing),
+    view: map(
+      createFromBaseCellRenderer(HeaderAreaTextCell),
+      (props: CellRenderProps) => ({ ...props, showIcon: true })
+    ),
+    edit: map(
+      createFromBaseCellRenderer(HeaderAreaTextCellEditing),
+      (props: CellRenderProps) => ({ ...props, showIcon: true })
+    ),
   },
 });
diff --git a/packages/blocks/src/database-block/data-view/common/header-area/icon.ts b/packages/blocks/src/database-block/columns/title/icon.ts
similarity index 88%
rename from packages/blocks/src/database-block/data-view/common/header-area/icon.ts
rename to packages/blocks/src/database-block/columns/title/icon.ts
index 8c1a8f7792de..d31d78013b26 100644
--- a/packages/blocks/src/database-block/data-view/common/header-area/icon.ts
+++ b/packages/blocks/src/database-block/columns/title/icon.ts
@@ -1,7 +1,7 @@
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { BaseCellRenderer } from '../../column/index.js';
+import { BaseCellRenderer } from '../../data-view/column/index.js';
 
 @customElement('data-view-header-area-icon')
 export class IconCell extends BaseCellRenderer<string> {
diff --git a/packages/blocks/src/database-block/data-view/common/header-area/text.ts b/packages/blocks/src/database-block/columns/title/text.ts
similarity index 93%
rename from packages/blocks/src/database-block/data-view/common/header-area/text.ts
rename to packages/blocks/src/database-block/columns/title/text.ts
index 3a01574cd3e4..d8384f638768 100644
--- a/packages/blocks/src/database-block/data-view/common/header-area/text.ts
+++ b/packages/blocks/src/database-block/columns/title/text.ts
@@ -6,12 +6,12 @@ import { css } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import type { RichText } from '../../../../_common/components/index.js';
-import type { DatabaseBlockComponent } from '../../../database-block.js';
-import { BaseCellRenderer } from '../../column/index.js';
-import { tRichText } from '../../logical/data-type.js';
-import type { DataViewKanbanManager } from '../../view/presets/kanban/kanban-view-manager.js';
-import type { DataViewTableManager } from '../../view/presets/table/table-view-manager.js';
+import type { RichText } from '../../../_common/components/index.js';
+import { BaseCellRenderer } from '../../data-view/column/index.js';
+import { tRichText } from '../../data-view/logical/data-type.js';
+import type { DataViewKanbanManager } from '../../data-view/view/presets/kanban/kanban-view-manager.js';
+import type { DataViewTableManager } from '../../data-view/view/presets/table/table-view-manager.js';
+import type { DatabaseBlockComponent } from '../../database-block.js';
 
 const styles = css`
   data-view-header-area-text {
diff --git a/packages/blocks/src/database-block/data-view/view/presets/kanban/header-cell.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/header-cell.ts
deleted file mode 100644
index baa976376637..000000000000
--- a/packages/blocks/src/database-block/data-view/view/presets/kanban/header-cell.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { CellRenderProps } from '../../../column/index.js';
-import { createFromBaseCellRenderer } from '../../../column/renderer.js';
-import {
-  HeaderAreaTextCell,
-  HeaderAreaTextCellEditing,
-} from '../../../common/header-area/text.js';
-import { map } from '../../../utils/uni-component/operation.js';
-
-export const headerRenderer = {
-  view: map(
-    createFromBaseCellRenderer(HeaderAreaTextCell),
-    (props: CellRenderProps) => ({ ...props, showIcon: false })
-  ),
-  edit: map(
-    createFromBaseCellRenderer(HeaderAreaTextCellEditing),
-    (props: CellRenderProps) => ({ ...props, showIcon: false })
-  ),
-};
diff --git a/packages/blocks/src/database-block/data-view/view/presets/kanban/kanban-view-manager.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/kanban-view-manager.ts
index e55d6e6861f9..17cefaa6e3e7 100644
--- a/packages/blocks/src/database-block/data-view/view/presets/kanban/kanban-view-manager.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/kanban-view-manager.ts
@@ -1,4 +1,3 @@
-import type { CellRenderer } from '../../../column/index.js';
 import type { FilterGroup } from '../../../common/ast.js';
 import {
   GroupHelper,
@@ -15,7 +14,6 @@ import {
   DataViewManagerBase,
 } from '../../data-view-manager.js';
 import type { KanbanViewData } from './define.js';
-import { headerRenderer } from './header-cell.js';
 
 export class DataViewKanbanManager extends DataViewManagerBase<KanbanViewData> {
   private updateView(
@@ -332,11 +330,4 @@ export class DataViewKanbanColumnManager extends DataViewColumnManagerBase {
   ) {
     super(propertyId, dataViewManager);
   }
-
-  public override get renderer(): CellRenderer {
-    if (this.id === this.dataViewManager.header.titleColumn) {
-      return headerRenderer;
-    }
-    return super.renderer;
-  }
 }
diff --git a/packages/blocks/src/database-block/data-view/view/presets/table/components/header-cell.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/header-cell.ts
index 3271bf187dbc..bcb52669a952 100644
--- a/packages/blocks/src/database-block/data-view/view/presets/table/components/header-cell.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/table/components/header-cell.ts
@@ -1,9 +1,9 @@
-import type { CellRenderProps } from '../../../../column/index.js';
-import { createFromBaseCellRenderer } from '../../../../column/renderer.js';
 import {
   HeaderAreaTextCell,
   HeaderAreaTextCellEditing,
-} from '../../../../common/header-area/text.js';
+} from '../../../../../columns/title/text.js';
+import type { CellRenderProps } from '../../../../column/index.js';
+import { createFromBaseCellRenderer } from '../../../../column/renderer.js';
 import { map } from '../../../../utils/uni-component/operation.js';
 
 export const headerRenderer = {
diff --git a/packages/blocks/src/database-block/data-view/view/presets/table/table-view-manager.ts b/packages/blocks/src/database-block/data-view/view/presets/table/table-view-manager.ts
index 5e930a0de7fb..1b7104e1ca77 100644
--- a/packages/blocks/src/database-block/data-view/view/presets/table/table-view-manager.ts
+++ b/packages/blocks/src/database-block/data-view/view/presets/table/table-view-manager.ts
@@ -1,4 +1,3 @@
-import type { CellRenderer } from '../../../column/index.js';
 import type { FilterGroup } from '../../../common/ast.js';
 import {
   GroupHelper,
@@ -15,7 +14,6 @@ import {
   DataViewColumnManagerBase,
   DataViewManagerBase,
 } from '../../data-view-manager.js';
-import { headerRenderer } from './components/header-cell.js';
 
 type TableViewData = _DataViewDataTypeMap['table'];
 
@@ -358,11 +356,4 @@ export class DataViewTableColumnManager extends DataViewColumnManagerBase {
   updateWidth(width: number): void {
     this.dataViewManager.columnUpdateWidth(this.id, width);
   }
-
-  public override get renderer(): CellRenderer {
-    if (this.id === this.dataViewManager.header.titleColumn) {
-      return headerRenderer;
-    }
-    return super.renderer;
-  }
 }
diff --git a/packages/blocks/src/database-block/database-service.ts b/packages/blocks/src/database-block/database-service.ts
index 9f093089c397..0da64867c7fc 100644
--- a/packages/blocks/src/database-block/database-service.ts
+++ b/packages/blocks/src/database-block/database-service.ts
@@ -10,9 +10,10 @@ import {
 import { affineInlineMarkdownMatches } from '../_common/inline/presets/markdown.js';
 import { ReferenceNodeConfig } from '../_common/inline/presets/nodes/reference-node/reference-config.js';
 import { DatabaseSelection } from './data-view/common/selection.js';
+import { viewPresets } from './data-view/index.js';
 import type { ViewMeta } from './data-view/view/data-view.js';
 import type { DatabaseBlockModel } from './database-model.js';
-import { databaseViewInitTemplate } from './utils.js';
+import { databaseViewInitEmpty, databaseViewInitTemplate } from './utils.js';
 
 export class DatabaseService<
   TextAttributes extends AffineTextAttributes = AffineTextAttributes,
@@ -32,6 +33,8 @@ export class DatabaseService<
     this.inlineManager.registerSpecs(inlineSpecs);
     this.inlineManager.registerMarkdownMatches(affineInlineMarkdownMatches);
   }
+  databaseViewInitEmpty = databaseViewInitEmpty;
+  viewPresets = viewPresets;
 
   initDatabaseBlock(
     doc: Doc,
diff --git a/packages/blocks/src/database-block/index.ts b/packages/blocks/src/database-block/index.ts
index b2603aae4cba..33019fcff18e 100644
--- a/packages/blocks/src/database-block/index.ts
+++ b/packages/blocks/src/database-block/index.ts
@@ -12,7 +12,7 @@ export * from './database-block.js';
 export * from './database-model.js';
 export * from './database-service.js';
 export * from './types.js';
-export { databaseViewInitConvert, databaseViewInitEmpty } from './utils.js';
+export * from './utils.js';
 declare global {
   namespace BlockSuite {
     interface BlockServices {
diff --git a/tests/utils/actions/misc.ts b/tests/utils/actions/misc.ts
index bacbef83e694..8c0e024f13ce 100644
--- a/tests/utils/actions/misc.ts
+++ b/tests/utils/actions/misc.ts
@@ -5,11 +5,9 @@ import type { EditorHost } from '@block-std/view/element/lit-host.js';
 import type { CssVariableName } from '@blocks/_common/theme/css-variables.js';
 import {
   type DatabaseBlockModel,
-  databaseViewInitEmpty,
   type ListType,
   type RichText,
   type ThemeObserver,
-  viewPresets,
 } from '@blocks/index.js';
 import { assertExists } from '@global/utils.js';
 import { type InlineRange, type InlineRootElement } from '@inline/index.js';
@@ -480,7 +478,14 @@ export async function initEmptyDatabaseState(page: Page, rootId?: string) {
       noteId
     );
     const model = doc.getBlockById(databaseId) as DatabaseBlockModel;
-    databaseViewInitEmpty(model, viewPresets.tableViewConfig);
+    const host = document.querySelector('editor-host');
+    const databaseService = host?.std.spec.getService('affine:database');
+    if (databaseService) {
+      databaseService.databaseViewInitEmpty(
+        model,
+        databaseService.viewPresets.tableViewConfig
+      );
+    }
     model.applyColumnUpdate();
 
     doc.captureSync();
@@ -542,7 +547,14 @@ export async function initKanbanViewState(
           }
         });
       });
-      databaseViewInitEmpty(model, viewPresets.kanbanViewConfig);
+      const host = document.querySelector('editor-host');
+      const databaseService = host?.std.spec.getService('affine:database');
+      if (databaseService) {
+        databaseService.databaseViewInitEmpty(
+          model,
+          databaseService.viewPresets.kanbanViewConfig
+        );
+      }
       model.applyColumnUpdate();
       doc.captureSync();
       return { rootId, noteId, databaseId };
@@ -558,7 +570,6 @@ export async function initEmptyDatabaseWithParagraphState(
 ) {
   const ids = await page.evaluate(rootId => {
     const { doc } = window;
-
     doc.captureSync();
     if (!rootId) {
       rootId = doc.addBlock('affine:page', {
@@ -574,7 +585,14 @@ export async function initEmptyDatabaseWithParagraphState(
       noteId
     );
     const model = doc.getBlockById(databaseId) as DatabaseBlockModel;
-    databaseViewInitEmpty(model, viewPresets.tableViewConfig);
+    const host = document.querySelector('editor-host');
+    const databaseService = host?.std.spec.getService('affine:database');
+    if (databaseService) {
+      databaseService.databaseViewInitEmpty(
+        model,
+        databaseService.viewPresets.tableViewConfig
+      );
+    }
     model.applyColumnUpdate();
     doc.addBlock('affine:paragraph', {}, noteId);
 

From d0d5da72a3042409594ec1e7e94ffd980598c2b7 Mon Sep 17 00:00:00 2001
From: zzj3720 <zuozijian1994@gmail.com>
Date: Thu, 11 Apr 2024 19:14:41 +0800
Subject: [PATCH 11/15] fix(database): ci

---
 packages/blocks/src/__tests__/database/database.unit.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/blocks/src/__tests__/database/database.unit.spec.ts b/packages/blocks/src/__tests__/database/database.unit.spec.ts
index 86b70f081540..c8dc4063d1e8 100644
--- a/packages/blocks/src/__tests__/database/database.unit.spec.ts
+++ b/packages/blocks/src/__tests__/database/database.unit.spec.ts
@@ -9,7 +9,7 @@ import {
   type Cell,
   type Column,
   columnPresets,
-  richTextColumnModelConfig,
+  richTextColumnConfig,
 } from '../../database-block/index.js';
 import { NoteBlockSchema } from '../../note-block/note-model.js';
 import { ParagraphBlockSchema } from '../../paragraph-block/paragraph-model.js';
@@ -86,7 +86,7 @@ describe('DatabaseManager', () => {
       'end',
       selectColumnModelConfig.create('Single Select', { options: selection })
     );
-    col3 = db.addColumn('end', richTextColumnModelConfig.create('Rich Text'));
+    col3 = db.addColumn('end', richTextColumnConfig.model.create('Rich Text'));
 
     doc.updateBlock(databaseModel, {
       columns: [col1, col2, col3],

From 7d48e99c466776fd21d50a2ddab5e0b2dd44d71b Mon Sep 17 00:00:00 2001
From: zzj3720 <zuozijian1994@gmail.com>
Date: Thu, 11 Apr 2024 19:40:23 +0800
Subject: [PATCH 12/15] fix(database): ci

---
 tests/utils/actions/misc.ts | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/tests/utils/actions/misc.ts b/tests/utils/actions/misc.ts
index 8c0e024f13ce..5ad8e598de79 100644
--- a/tests/utils/actions/misc.ts
+++ b/tests/utils/actions/misc.ts
@@ -461,7 +461,7 @@ export async function initEmptyEdgelessState(page: Page) {
 }
 
 export async function initEmptyDatabaseState(page: Page, rootId?: string) {
-  const ids = await page.evaluate(rootId => {
+  const ids = await page.evaluate(async rootId => {
     const { doc } = window;
     doc.captureSync();
     if (!rootId) {
@@ -478,8 +478,9 @@ export async function initEmptyDatabaseState(page: Page, rootId?: string) {
       noteId
     );
     const model = doc.getBlockById(databaseId) as DatabaseBlockModel;
-    const host = document.querySelector('editor-host');
-    const databaseService = host?.std.spec.getService('affine:database');
+    await new Promise(resolve => setTimeout(resolve, 100));
+    const databaseBlock = document.querySelector('affine-database');
+    const databaseService = databaseBlock?.service;
     if (databaseService) {
       databaseService.databaseViewInitEmpty(
         model,
@@ -503,7 +504,7 @@ export async function initKanbanViewState(
   rootId?: string
 ) {
   const ids = await page.evaluate(
-    ({ rootId, config }) => {
+    async ({ rootId, config }) => {
       const { doc } = window;
 
       doc.captureSync();
@@ -547,8 +548,9 @@ export async function initKanbanViewState(
           }
         });
       });
-      const host = document.querySelector('editor-host');
-      const databaseService = host?.std.spec.getService('affine:database');
+      await new Promise(resolve => setTimeout(resolve, 100));
+      const databaseBlock = document.querySelector('affine-database');
+      const databaseService = databaseBlock?.service;
       if (databaseService) {
         databaseService.databaseViewInitEmpty(
           model,
@@ -568,7 +570,7 @@ export async function initEmptyDatabaseWithParagraphState(
   page: Page,
   rootId?: string
 ) {
-  const ids = await page.evaluate(rootId => {
+  const ids = await page.evaluate(async rootId => {
     const { doc } = window;
     doc.captureSync();
     if (!rootId) {
@@ -585,8 +587,9 @@ export async function initEmptyDatabaseWithParagraphState(
       noteId
     );
     const model = doc.getBlockById(databaseId) as DatabaseBlockModel;
-    const host = document.querySelector('editor-host');
-    const databaseService = host?.std.spec.getService('affine:database');
+    await new Promise(resolve => setTimeout(resolve, 100));
+    const databaseBlock = document.querySelector('affine-database');
+    const databaseService = databaseBlock?.service;
     if (databaseService) {
       databaseService.databaseViewInitEmpty(
         model,

From cfa8755136e4eaeb6b0d3baf7737556f6543ed1d Mon Sep 17 00:00:00 2001
From: zzj3720 <zuozijian1994@gmail.com>
Date: Thu, 11 Apr 2024 20:03:16 +0800
Subject: [PATCH 13/15] fix(database): ci

---
 .../_common/configs/quick-action/database-convert-view.ts   | 6 ++----
 packages/blocks/src/root-block/widgets/slash-menu/config.ts | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts b/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts
index 29484df3a661..f81c1ab31a5a 100644
--- a/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts
+++ b/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts
@@ -6,11 +6,9 @@ import { customElement, property } from 'lit/decorators.js';
 
 import { DatabaseSearchClose } from '../../../database-block/data-view/common/icons/index.js';
 import type { ViewMeta } from '../../../database-block/data-view/index.js';
+import { viewPresets } from '../../../database-block/data-view/index.js';
 import type { DatabaseBlockModel } from '../../../database-block/index.js';
-import {
-  databaseViewInitConvert,
-  viewPresets,
-} from '../../../database-block/index.js';
+import { databaseViewInitConvert } from '../../../database-block/utils.js';
 import {
   DatabaseKanbanViewIcon,
   DatabaseTableViewIcon,
diff --git a/packages/blocks/src/root-block/widgets/slash-menu/config.ts b/packages/blocks/src/root-block/widgets/slash-menu/config.ts
index 8a2cd915139a..abdf5623fab3 100644
--- a/packages/blocks/src/root-block/widgets/slash-menu/config.ts
+++ b/packages/blocks/src/root-block/widgets/slash-menu/config.ts
@@ -35,7 +35,7 @@ import {
 import { clearMarksOnDiscontinuousInput } from '../../../_common/utils/inline-editor.js';
 import { addSiblingAttachmentBlocks } from '../../../attachment-block/utils.js';
 import { GroupingIcon } from '../../../database-block/data-view/common/icons/index.js';
-import { viewPresets } from '../../../database-block/index.js';
+import { viewPresets } from '../../../database-block/data-view/index.js';
 import { FigmaIcon } from '../../../embed-figma-block/styles.js';
 import { GithubIcon } from '../../../embed-github-block/styles.js';
 import { LoomIcon } from '../../../embed-loom-block/styles.js';

From e10b75e784417896df35e953cafd836982748481 Mon Sep 17 00:00:00 2001
From: zzj3720 <zuozijian1994@gmail.com>
Date: Thu, 11 Apr 2024 20:50:12 +0800
Subject: [PATCH 14/15] fix(database): ci

---
 .../src/root-block/widgets/block-hub/components/block-hub.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/blocks/src/root-block/widgets/block-hub/components/block-hub.ts b/packages/blocks/src/root-block/widgets/block-hub/components/block-hub.ts
index b8616f37917e..d7887d5d4233 100644
--- a/packages/blocks/src/root-block/widgets/block-hub/components/block-hub.ts
+++ b/packages/blocks/src/root-block/widgets/block-hub/components/block-hub.ts
@@ -26,7 +26,7 @@ import {
   Rect,
   stopPropagation,
 } from '../../../../_common/utils/index.js';
-import { viewPresets } from '../../../../database-block/index.js';
+import { viewPresets } from '../../../../database-block/data-view/index.js';
 import {
   addImageBlocks,
   addSiblingImageBlock,

From b51f704275b9c7a55c7e03f75fa2d6656890c768 Mon Sep 17 00:00:00 2001
From: zzj3720 <zuozijian1994@gmail.com>
Date: Thu, 11 Apr 2024 21:07:51 +0800
Subject: [PATCH 15/15] fix(database): detail panel block render

---
 .../blocks/src/database-block/columns/index.ts   | 16 ++++++++++------
 .../blocks/src/database-block/data-source.ts     | 10 +++++-----
 packages/blocks/src/database-block/utils.ts      |  4 ++--
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/blocks/src/database-block/columns/index.ts b/packages/blocks/src/database-block/columns/index.ts
index 714c09e99e7f..d8f72eb325f9 100644
--- a/packages/blocks/src/database-block/columns/index.ts
+++ b/packages/blocks/src/database-block/columns/index.ts
@@ -13,10 +13,14 @@ export const databaseBlockColumns = [
   columnPresets.checkboxColumnConfig,
   richTextColumnConfig,
 ];
-export const databaseBlockHiddenColumns = [titleColumnConfig];
-export const databaseBlockColumnMap = Object.fromEntries(
-  [...databaseBlockColumns, ...databaseBlockHiddenColumns].map(v => [
-    v.type,
-    v as ColumnMeta,
-  ])
+export const databaseBlockHiddenColumns = [
+  columnPresets.imageColumnConfig,
+  titleColumnConfig,
+];
+const databaseBlockAllColumns = [
+  ...databaseBlockColumns,
+  ...databaseBlockHiddenColumns,
+];
+export const databaseBlockAllColumnMap = Object.fromEntries(
+  databaseBlockAllColumns.map(v => [v.type, v as ColumnMeta])
 );
diff --git a/packages/blocks/src/database-block/data-source.ts b/packages/blocks/src/database-block/data-source.ts
index 0c0558e0f563..b9b5592b92dc 100644
--- a/packages/blocks/src/database-block/data-source.ts
+++ b/packages/blocks/src/database-block/data-source.ts
@@ -4,7 +4,7 @@ import { type BlockModel, Text, type Y } from '@blocksuite/store';
 
 import { getIcon } from './block-icons.js';
 import {
-  databaseBlockColumnMap,
+  databaseBlockAllColumnMap,
   databaseBlockColumns,
 } from './columns/index.js';
 import type { StatCalcOpType } from './data-view/index.js';
@@ -155,7 +155,7 @@ export class DatabaseBlockDataSource extends BaseDataSource {
     this.doc.captureSync();
     return this._model.addColumn(
       insertToPosition,
-      databaseBlockColumnMap[
+      databaseBlockAllColumnMap[
         type ?? columnPresets.multiSelectColumnConfig.type
       ].model.create(this.newColumnName())
     );
@@ -184,12 +184,12 @@ export class DatabaseBlockDataSource extends BaseDataSource {
     const currentCells = rows.map(rowId =>
       this.cellGetValue(rowId, propertyId)
     );
-    const result = databaseBlockColumnMap[currentType].model?.convertCell(
+    const result = databaseBlockAllColumnMap[currentType].model?.convertCell(
       toType,
       currentData,
       currentCells
     ) ?? {
-      column: databaseBlockColumnMap[toType].model.defaultData(),
+      column: databaseBlockAllColumnMap[toType].model.defaultData(),
       cells: currentCells.map(() => undefined),
     };
     this.doc.captureSync();
@@ -309,7 +309,7 @@ export class DatabaseBlockDataSource extends BaseDataSource {
   }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public getPropertyMeta(type: string): ColumnMeta<any, any, any> {
-    return databaseBlockColumnMap[type];
+    return databaseBlockAllColumnMap[type];
   }
 
   public override get detailSlots(): DetailSlots {
diff --git a/packages/blocks/src/database-block/utils.ts b/packages/blocks/src/database-block/utils.ts
index a762bb374ec3..9872b06ed11a 100644
--- a/packages/blocks/src/database-block/utils.ts
+++ b/packages/blocks/src/database-block/utils.ts
@@ -1,6 +1,6 @@
 import { nanoid } from '@blocksuite/store';
 
-import { databaseBlockColumnMap } from './columns/index.js';
+import { databaseBlockAllColumnMap } from './columns/index.js';
 import { titlePureColumnConfig } from './columns/title/define.js';
 import type { ViewMeta } from './data-view/index.js';
 import { columnPresets } from './data-view/index.js';
@@ -78,7 +78,7 @@ export const databaseViewAddView = (
 ) => {
   const id = model.doc.generateBlockId();
   const view = viewMeta.model.init(
-    databaseBlockColumnMap,
+    databaseBlockAllColumnMap,
     model,
     id,
     viewMeta.model.defaultName