refactor(editor): support virtual scroll for table view of database block (#11642)

close: BS-3378

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a modular virtualized table view with grouping, selection, drag-and-drop, clipboard support, and batch task management for optimized rendering.
  - Added comprehensive keyboard shortcuts, drag-to-fill functionality, and clipboard operations for efficient table editing.
  - Enabled dynamic column statistics, number formatting controls, and flexible switching between virtual and standard table views via a feature flag.
  - Provided detailed row and group header/footer components with context menus, row management actions, and column reordering/resizing.
  - Added a table view selector component to toggle between virtual and standard table views based on feature flags.
- **Style**
  - Added extensive styling modules for virtual table elements including headers, footers, rows, cells, and interactive controls.
- **Chores**
  - Registered numerous custom elements via modular effect functions to streamline component initialization.
  - Updated feature flag system to include virtual table scrolling toggle.
  - Added new dependencies to support styling and component functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/data-view/src/core/common/dv.css.ts

@@ -0,0 +1,85 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { createVar, style } from '@vanilla-extract/css';
+
+export const dataViewVars = {
+  cellTextSize: createVar(),
+  cellTextLineHeight: createVar(),
+};
+
+export const dataViewRoot = style({
+  vars: {
+    [dataViewVars.cellTextSize]: '14px',
+    [dataViewVars.cellTextLineHeight]: '22px',
+  },
+});
+
+export const withDataViewCssVariable = style({
+  vars: {
+    [dataViewVars.cellTextSize]: '14px',
+    [dataViewVars.cellTextLineHeight]: '22px',
+  },
+  fontFamily: 'var(--affine-font-family)',
+});
+
+export const p2 = style({
+  padding: '2px',
+});
+
+export const p4 = style({
+  padding: '4px',
+});
+
+export const p8 = style({
+  padding: '8px',
+});
+
+export const hover = style({
+  selectors: {
+    '&:hover, &.active': {
+      backgroundColor: 'var(--affine-hover-color)',
+      cursor: 'pointer',
+    },
+  },
+});
+
+export const icon16 = style({
+  fontSize: '16px',
+  color: cssVarV2.icon.primary,
+});
+
+export const icon20 = style({
+  fontSize: '20px',
+  color: cssVarV2.icon.primary,
+});
+
+export const border = style({
+  border: `1px solid ${cssVarV2.layer.insideBorder.border}`,
+});
+
+export const round4 = style({
+  borderRadius: '4px',
+});
+
+export const round8 = style({
+  borderRadius: '8px',
+});
+
+export const color2 = style({
+  color: 'var(--affine-text-secondary-color)',
+});
+
+export const shadow2 = style({
+  boxShadow: 'var(--affine-shadow-2)',
+});
+
+export const dividerH = style({
+  height: '1px',
+  backgroundColor: 'var(--affine-divider-color)',
+  margin: '8px 0',
+});
+
+export const dividerV = style({
+  width: '1px',
+  backgroundColor: 'var(--affine-divider-color)',
+  margin: '0 8px',
+});

blocksuite/affine/data-view/src/core/effect.ts

@@ -0,0 +1,39 @@
+import { DataViewPropertiesSettingView } from './common/properties.js';
+import { Button } from './component/button/button.js';
+import { Overflow } from './component/overflow/overflow.js';
+import { MultiTagSelect, MultiTagView } from './component/tags/index.js';
+import { DataViewRenderer } from './data-view.js';
+import { RecordDetail } from './detail/detail.js';
+import { RecordField } from './detail/field.js';
+import { VariableRefView } from './expression/ref/ref-view.js';
+import { BooleanGroupView } from './group-by/renderer/boolean-group.js';
+import { NumberGroupView } from './group-by/renderer/number-group.js';
+import { SelectGroupView } from './group-by/renderer/select-group.js';
+import { StringGroupView } from './group-by/renderer/string-group.js';
+import { GroupSetting } from './group-by/setting.js';
+import { AffineLitIcon, UniAnyRender, UniLit } from './index.js';
+import { AnyRender } from './utils/uni-component/render-template.js';
+
+export function coreEffects() {
+  customElements.define('affine-data-view-renderer', DataViewRenderer);
+  customElements.define('any-render', AnyRender);
+  customElements.define(
+    'data-view-properties-setting',
+    DataViewPropertiesSettingView
+  );
+  customElements.define('affine-data-view-record-field', RecordField);
+  customElements.define('data-view-component-button', Button);
+  customElements.define('component-overflow', Overflow);
+  customElements.define('data-view-group-title-select-view', SelectGroupView);
+  customElements.define('data-view-group-title-string-view', StringGroupView);
+  customElements.define('data-view-group-title-number-view', NumberGroupView);
+  customElements.define('affine-lit-icon', AffineLitIcon);
+  customElements.define('data-view-group-setting', GroupSetting);
+  customElements.define('affine-multi-tag-select', MultiTagSelect);
+  customElements.define('data-view-group-title-boolean-view', BooleanGroupView);
+  customElements.define('affine-multi-tag-view', MultiTagView);
+  customElements.define('uni-lit', UniLit);
+  customElements.define('uni-any-render', UniAnyRender);
+  customElements.define('variable-ref-view', VariableRefView);
+  customElements.define('affine-data-view-record-detail', RecordDetail);
+}

blocksuite/affine/data-view/src/core/types.ts

@@ -13,4 +13,5 @@ export type PropertyDataUpdater<
 
 export interface DatabaseFlags {
   enable_number_formatting: boolean;
+  enable_table_virtual_scroll: boolean;
 }