npm - @univerjs/sheets-table-ui - Versions diffs - 0.25.0 → 1.0.0-alpha.0 - Mend

@univerjs/sheets-table-ui 0.25.0 → 1.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/lib/cjs/index.js +984 -956
package/lib/es/index.js +985 -957
package/lib/index.js +985 -957
package/lib/types/const.d.ts +0 -1
package/lib/types/controllers/components.controller.d.ts +24 -0
package/lib/types/controllers/sheet-table-component.controller.d.ts +2 -4
package/lib/types/locale/types.d.ts +18 -0
package/lib/types/menu/menu.d.ts +6 -5
package/lib/types/menu/sheet-table-menu.controller.d.ts +3 -3
package/lib/types/views/components/SheetTableConditionPanel.d.ts +1 -1
package/lib/types/views/components/SheetTableFilterPanel.d.ts +1 -1
package/lib/types/views/components/SheetTableItemsFilterPanel.d.ts +1 -1
package/lib/types/views/components/SheetTableRenameDialog.d.ts +1 -1
package/lib/types/views/components/SheetTableSelector.d.ts +1 -1
package/lib/types/views/components/SheetTableThemePanel.d.ts +1 -1
package/lib/types/views/components/util.d.ts +1 -21
package/lib/umd/index.js +1 -1
package/package.json +14 -14

package/lib/index.js CHANGED Viewed

@@ -2,11 +2,11 @@ import { ColorKit, CommandType, DependentOn, Disposable, ErrorService, ICommandS
 import { CURSOR_TYPE, DEFAULT_FONTFACE_PLANE, IRenderManagerService, Rect, Shape } from "@univerjs/engine-render";
 import { AddSheetTableCommand, AddTableThemeCommand, DeleteSheetTableCommand, RemoveTableThemeCommand, SHEET_TABLE_CUSTOM_THEME_PREFIX, SetSheetTableCommand, SetSheetTableFilterCommand, SheetTableInsertColCommand, SheetTableInsertColumnAtCommand, SheetTableInsertRowAtCommand, SheetTableInsertRowCommand, SheetTableRemoveColCommand, SheetTableRemoveColumnAtCommand, SheetTableRemoveRowCommand, SheetTableService, SheetsTableController, SheetsTableSortStateEnum, TABLE_FILTER_EMPTY_VALUE, TableColumnFilterTypeEnum, TableConditionTypeEnum, TableDateCompareTypeEnum, TableManager, TableNumberCompareTypeEnum, TableStringCompareTypeEnum, UniverSheetsTablePlugin, customEmptyThemeWithBorderStyle, getExistingNamesSet, isConditionFilter, isManualTableFilter, processStyleWithBorderStyle, validateSheetTableName } from "@univerjs/sheets-table";
 import { ISheetSelectionRenderService, SHEET_VIEW_KEY, SelectAllCommand, SetScrollOperation, SetZoomRatioOperation, SheetCanvasPopManagerService, SheetSkeletonManagerService, getCoordByCell, getCurrentRangeDisable$, getTransformCoord } from "@univerjs/sheets-ui";
-import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IMenuManagerService, ISidebarService, MenuItemType, RibbonDataGroup, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
+import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IMenuManagerService, ISidebarService, IconManager, MenuItemType, RibbonDataGroup, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
 import { Subject, distinctUntilChanged, filter, map, merge as merge$1, of, startWith, switchMap, takeUntil } from "rxjs";
-import { Button, ButtonGroup, CascaderList, Checkbox, ColorPicker, DatePicker, DateRangePicker, Dropdown, Input, InputNumber, Segmented, Select, borderClassName, clsx, scrollbarClassName } from "@univerjs/design";
-import { AscendingIcon, DeleteColumnDoubleIcon, DescendingIcon, DropdownIcon, LeftInsertColumnDoubleIcon, MoreDownIcon, RightInsertColumnDoubleIcon, TableIcon } from "@univerjs/icons";
 import { INTERCEPTOR_POINT, RangeThemeStyle, SetRangeThemeMutation, SetRangeValuesMutation, SetSelectionsOperation, SetVerticalTextAlignCommand, SheetInterceptorService, SheetRangeThemeModel, SheetsSelectionsService, WorkbookEditablePermission, WorkbookPermissionService, expandToContinuousRange, getPrimaryForRange, getSheetCommandTarget, isSingleCellSelection } from "@univerjs/sheets";
+import { AscendingIcon, DeleteColumnDoubleIcon, DescendingIcon, DropdownIcon, LeftInsertColumnDoubleIcon, MoreDownIcon, RightInsertColumnDoubleIcon, TableIcon } from "@univerjs/icons";
+import { Button, ButtonGroup, CascaderList, Checkbox, ColorPicker, DatePicker, DateRangePicker, Dropdown, Input, InputNumber, Segmented, Select, borderClassName, clsx, scrollbarClassName } from "@univerjs/design";
 import { SortRangeCommand, SortType } from "@univerjs/sheets-sort";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -15,7 +15,7 @@ import { RangeSelector } from "@univerjs/sheets-formula-ui";
 //#region package.json
 var name = "@univerjs/sheets-table-ui";
-var version = "0.25.0";
+var version = "1.0.0-alpha.0";
 //#endregion
 //#region src/const.ts
@@ -37,7 +37,6 @@ var version = "0.25.0";
 const PLUGIN_NAME = "SHEET_TABLE_UI_PLUGIN";
 const SHEETS_TABLE_FILTER_PANEL_OPENED_KEY = "SHEETS_TABLE_FILTER_PANEL_OPENED_KEY";
 const UNIVER_SHEET_TABLE_FILTER_PANEL_ID = "UNIVER_SHEET_Table_FILTER_PANEL_ID";
-const TABLE_TOOLBAR_BUTTON = "TABLE_TOOLBAR_BUTTON";
 const TABLE_SELECTOR_DIALOG = "TABLE_SELECTOR_DIALOG";
 const SHEET_TABLE_RENAME_DIALOG = "SHEET_TABLE_RENAME_DIALOG";
 const SHEET_TABLE_RENAME_DIALOG_ID = "SHEET_TABLE_RENAME_DIALOG_ID";
@@ -50,7 +49,7 @@ const TABLE_BORDER_NONE = "none";
 const TABLE_BORDER_DEFAULT = "1px solid rgb(var(--grey-200))";
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -61,7 +60,7 @@ function _typeof(o) {
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -74,14 +73,14 @@ function toPrimitive(t, r) {
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -92,7 +91,7 @@ function _defineProperty(e, r, t) {
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -100,7 +99,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -108,6 +107,182 @@ function __decorate(decorators, target, key, desc) {
 	return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
+//#endregion
+//#region src/controllers/sheet-table-component.controller.ts
+let SheetsTableComponentController = class SheetsTableComponentController extends Disposable {
+	constructor(_contextService, _sheetCanvasPopupService, _dialogService) {
+		super();
+		this._contextService = _contextService;
+		this._sheetCanvasPopupService = _sheetCanvasPopupService;
+		this._dialogService = _dialogService;
+		_defineProperty(this, "_popupDisposable", void 0);
+		_defineProperty(this, "_currentTableFilterInfo", null);
+		this._initUIPopup();
+	}
+	setCurrentTableFilterInfo(info) {
+		this._currentTableFilterInfo = info;
+	}
+	openOrToggleFilterPanel(info) {
+		const opened = this._contextService.getContextValue(SHEETS_TABLE_FILTER_PANEL_OPENED_KEY);
+		if (opened && this._isSameFilterPanelInfo(this._currentTableFilterInfo, info)) {
+			this.closeFilterPanel();
+			return;
+		}
+		this.setCurrentTableFilterInfo(info);
+		if (opened) {
+			var _this$_popupDisposabl;
+			(_this$_popupDisposabl = this._popupDisposable) === null || _this$_popupDisposabl === void 0 || _this$_popupDisposabl.dispose();
+			this._popupDisposable = null;
+			this._openFilterPopup();
+			return;
+		}
+		this._contextService.setContextValue(SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, true);
+	}
+	clearCurrentTableFilterInfo() {
+		this._currentTableFilterInfo = null;
+	}
+	getCurrentTableFilterInfo() {
+		return this._currentTableFilterInfo;
+	}
+	_initUIPopup() {
+		this.disposeWithMe(this._contextService.subscribeContextValue$(SHEETS_TABLE_FILTER_PANEL_OPENED_KEY).pipe(startWith(void 0), distinctUntilChanged()).subscribe((open) => {
+			if (open) this._openFilterPopup();
+			else if (open === false) this._closeFilterPopup();
+		}));
+	}
+	closeFilterPanel() {
+		this._contextService.setContextValue(SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, false);
+	}
+	_openFilterPopup() {
+		const currentFilterModel = this._currentTableFilterInfo;
+		if (!currentFilterModel) throw new Error("[SheetsFilterUIController]: no filter model when opening filter popup!");
+		const { row: startRow, column: col } = currentFilterModel;
+		this._popupDisposable = this._sheetCanvasPopupService.attachPopupToCell(startRow, col, {
+			componentKey: SHEETS_TABLE_FILTER_PANEL_OPENED_KEY,
+			direction: "horizontal",
+			onClickOutside: () => {
+				this._dialogService.close(UNIVER_SHEET_TABLE_FILTER_PANEL_ID);
+				this._contextService.setContextValue(SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, false);
+			},
+			offset: [5, 0],
+			portal: true
+		});
+	}
+	_closeFilterPopup() {
+		var _this$_popupDisposabl2;
+		(_this$_popupDisposabl2 = this._popupDisposable) === null || _this$_popupDisposabl2 === void 0 || _this$_popupDisposabl2.dispose();
+		this._popupDisposable = null;
+		this.clearCurrentTableFilterInfo();
+	}
+	_isSameFilterPanelInfo(a, b) {
+		return Boolean(a && a.unitId === b.unitId && a.subUnitId === b.subUnitId && a.tableId === b.tableId && a.column === b.column && a.row === b.row);
+	}
+};
+SheetsTableComponentController = __decorate([
+	__decorateParam(0, IContextService),
+	__decorateParam(1, Inject(SheetCanvasPopManagerService)),
+	__decorateParam(2, Inject(IDialogService))
+], SheetsTableComponentController);
+//#endregion
+//#region src/commands/operations/open-table-filter-dialog.opration.ts
+const OpenTableFilterPanelOperation = {
+	type: CommandType.OPERATION,
+	id: "sheet.operation.open-table-filter-panel",
+	async handler(accessor, params) {
+		if (!params) return false;
+		const { row, col, unitId, subUnitId, tableId } = params;
+		const tableManager = accessor.get(TableManager);
+		const sheetsTableComponentController = accessor.get(SheetsTableComponentController);
+		if (!tableManager.getTable(unitId, tableId)) return false;
+		sheetsTableComponentController.openOrToggleFilterPanel({
+			unitId,
+			subUnitId,
+			row,
+			tableId,
+			column: col
+		});
+		return true;
+	}
+};
+//#endregion
+//#region src/commands/operations/open-table-selector.operation.ts
+const OpenTableSelectorOperation = {
+	type: CommandType.OPERATION,
+	id: "sheet.operation.open-table-selector",
+	async handler(accessor) {
+		var _lastSelection$range;
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const commandService = accessor.get(ICommandService);
+		const target = getSheetCommandTarget(univerInstanceService);
+		if (!target) return false;
+		const { unitId, subUnitId, worksheet } = target;
+		const lastSelection = accessor.get(SheetsSelectionsService).getCurrentLastSelection();
+		const range = (_lastSelection$range = lastSelection === null || lastSelection === void 0 ? void 0 : lastSelection.range) !== null && _lastSelection$range !== void 0 ? _lastSelection$range : {
+			startRow: 0,
+			endRow: 0,
+			startColumn: 0,
+			endColumn: 0
+		};
+		const rangeInfo = await openRangeSelector(accessor, unitId, subUnitId, isSingleCellSelection(lastSelection) ? expandToContinuousRange(range, {
+			up: true,
+			left: true,
+			right: true,
+			down: true
+		}, worksheet) : range);
+		if (!rangeInfo) return false;
+		commandService.executeCommand(AddSheetTableCommand.id, { ...rangeInfo });
+		return true;
+	}
+};
+async function openRangeSelector(accessor, unitId, subUnitId, range, tableId) {
+	const dialogService = accessor.get(IDialogService);
+	const localeService = accessor.get(LocaleService);
+	return new Promise((resolve) => {
+		const dialogProps = {
+			unitId,
+			subUnitId,
+			range,
+			tableId,
+			onConfirm: (info) => {
+				resolve(info);
+				dialogService.close(TABLE_SELECTOR_DIALOG);
+			},
+			onCancel: () => {
+				resolve(null);
+				dialogService.close(TABLE_SELECTOR_DIALOG);
+			}
+		};
+		dialogService.open({
+			id: TABLE_SELECTOR_DIALOG,
+			title: { title: localeService.t("sheets-table-ui.selectRange") },
+			draggable: true,
+			destroyOnClose: true,
+			mask: false,
+			maskClosable: false,
+			children: { label: {
+				name: TABLE_SELECTOR_DIALOG,
+				props: dialogProps
+			} },
+			width: 300,
+			onClose: () => {
+				resolve(null);
+				dialogService.close(TABLE_SELECTOR_DIALOG);
+			}
+		});
+	});
+}
+//#endregion
+//#region src/config/config.ts
+const SHEETS_TABLE_UI_PLUGIN_CONFIG_KEY = "sheets-table-ui.config";
+const configSymbol = Symbol(SHEETS_TABLE_UI_PLUGIN_CONFIG_KEY);
+const defaultPluginConfig = {
+	anchorHeight: 24,
+	anchorBackgroundColor: "rgb(134,139,156)"
+};
 //#endregion
 //#region src/services/sheets-table-ui.service.ts
 let SheetsTableUiService = class SheetsTableUiService extends Disposable {
@@ -248,175 +423,175 @@ SheetsTableUiService = __decorate([
 //#endregion
 //#region src/views/components/util.ts
 function getCascaderListOptions(injector) {
-	const t = injector.get(LocaleService).t;
+	const localeService = injector.get(LocaleService);
 	return [
 		{
 			value: TableConditionTypeEnum.String,
-			label: t(`sheets-table-ui.condition.${TableConditionTypeEnum.String}`),
+			label: localeService.t(`sheets-table-ui.condition.${TableConditionTypeEnum.String}`),
 			children: [
 				{
 					value: TableStringCompareTypeEnum.Equal,
-					label: t(`sheets-table-ui.string.compare.${TableStringCompareTypeEnum.Equal}`)
+					label: localeService.t(`sheets-table-ui.string.compare.${TableStringCompareTypeEnum.Equal}`)
 				},
 				{
 					value: TableStringCompareTypeEnum.NotEqual,
-					label: t(`sheets-table-ui.string.compare.${TableStringCompareTypeEnum.NotEqual}`)
+					label: localeService.t(`sheets-table-ui.string.compare.${TableStringCompareTypeEnum.NotEqual}`)
 				},
 				{
 					value: TableStringCompareTypeEnum.Contains,
-					label: t(`sheets-table-ui.string.compare.${TableStringCompareTypeEnum.Contains}`)
+					label: localeService.t(`sheets-table-ui.string.compare.${TableStringCompareTypeEnum.Contains}`)
 				},
 				{
 					value: TableStringCompareTypeEnum.NotContains,
-					label: t(`sheets-table-ui.string.compare.${TableStringCompareTypeEnum.NotContains}`)
+					label: localeService.t(`sheets-table-ui.string.compare.${TableStringCompareTypeEnum.NotContains}`)
 				},
 				{
 					value: TableStringCompareTypeEnum.StartsWith,
-					label: t(`sheets-table-ui.string.compare.${TableStringCompareTypeEnum.StartsWith}`)
+					label: localeService.t(`sheets-table-ui.string.compare.${TableStringCompareTypeEnum.StartsWith}`)
 				},
 				{
 					value: TableStringCompareTypeEnum.EndsWith,
-					label: t(`sheets-table-ui.string.compare.${TableStringCompareTypeEnum.EndsWith}`)
+					label: localeService.t(`sheets-table-ui.string.compare.${TableStringCompareTypeEnum.EndsWith}`)
 				}
 			]
 		},
 		{
 			value: TableConditionTypeEnum.Number,
-			label: t(`sheets-table-ui.condition.${TableConditionTypeEnum.Number}`),
+			label: localeService.t(`sheets-table-ui.condition.${TableConditionTypeEnum.Number}`),
 			children: [
 				{
 					value: TableNumberCompareTypeEnum.Equal,
-					label: t(`sheets-table-ui.number.compare.${TableNumberCompareTypeEnum.Equal}`)
+					label: localeService.t(`sheets-table-ui.number.compare.${TableNumberCompareTypeEnum.Equal}`)
 				},
 				{
 					value: TableNumberCompareTypeEnum.NotEqual,
-					label: t(`sheets-table-ui.number.compare.${TableNumberCompareTypeEnum.NotEqual}`)
+					label: localeService.t(`sheets-table-ui.number.compare.${TableNumberCompareTypeEnum.NotEqual}`)
 				},
 				{
 					value: TableNumberCompareTypeEnum.GreaterThan,
-					label: t(`sheets-table-ui.number.compare.${TableNumberCompareTypeEnum.GreaterThan}`)
+					label: localeService.t(`sheets-table-ui.number.compare.${TableNumberCompareTypeEnum.GreaterThan}`)
 				},
 				{
 					value: TableNumberCompareTypeEnum.GreaterThanOrEqual,
-					label: t(`sheets-table-ui.number.compare.${TableNumberCompareTypeEnum.GreaterThanOrEqual}`)
+					label: localeService.t(`sheets-table-ui.number.compare.${TableNumberCompareTypeEnum.GreaterThanOrEqual}`)
 				},
 				{
 					value: TableNumberCompareTypeEnum.LessThan,
-					label: t(`sheets-table-ui.number.compare.${TableNumberCompareTypeEnum.LessThan}`)
+					label: localeService.t(`sheets-table-ui.number.compare.${TableNumberCompareTypeEnum.LessThan}`)
 				},
 				{
 					value: TableNumberCompareTypeEnum.LessThanOrEqual,
-					label: t(`sheets-table-ui.number.compare.${TableNumberCompareTypeEnum.LessThanOrEqual}`)
+					label: localeService.t(`sheets-table-ui.number.compare.${TableNumberCompareTypeEnum.LessThanOrEqual}`)
 				},
 				{
 					value: TableNumberCompareTypeEnum.Between,
-					label: t(`sheets-table-ui.number.compare.${TableNumberCompareTypeEnum.Between}`)
+					label: localeService.t(`sheets-table-ui.number.compare.${TableNumberCompareTypeEnum.Between}`)
 				},
 				{
 					value: TableNumberCompareTypeEnum.NotBetween,
-					label: t(`sheets-table-ui.number.compare.${TableNumberCompareTypeEnum.NotBetween}`)
+					label: localeService.t(`sheets-table-ui.number.compare.${TableNumberCompareTypeEnum.NotBetween}`)
 				},
 				{
 					value: TableNumberCompareTypeEnum.Above,
-					label: t(`sheets-table-ui.number.compare.${TableNumberCompareTypeEnum.Above}`)
+					label: localeService.t(`sheets-table-ui.number.compare.${TableNumberCompareTypeEnum.Above}`)
 				},
 				{
 					value: TableNumberCompareTypeEnum.Below,
-					label: t(`sheets-table-ui.number.compare.${TableNumberCompareTypeEnum.Below}`)
+					label: localeService.t(`sheets-table-ui.number.compare.${TableNumberCompareTypeEnum.Below}`)
 				}
 			]
 		},
 		{
 			value: TableConditionTypeEnum.Date,
-			label: t(`sheets-table-ui.condition.${TableConditionTypeEnum.Date}`),
+			label: localeService.t(`sheets-table-ui.condition.${TableConditionTypeEnum.Date}`),
 			children: [
 				{
 					value: TableDateCompareTypeEnum.Equal,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Equal}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Equal}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.NotEqual,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.NotEqual}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.NotEqual}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.After,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.After}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.After}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.AfterOrEqual,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.AfterOrEqual}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.AfterOrEqual}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.Before,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Before}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Before}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.BeforeOrEqual,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.BeforeOrEqual}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.BeforeOrEqual}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.Between,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Between}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Between}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.NotBetween,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.NotBetween}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.NotBetween}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.Today,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Today}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Today}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.Yesterday,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Yesterday}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Yesterday}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.Tomorrow,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Tomorrow}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Tomorrow}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.ThisWeek,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.ThisWeek}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.ThisWeek}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.LastWeek,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.LastWeek}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.LastWeek}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.NextWeek,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.NextWeek}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.NextWeek}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.ThisMonth,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.ThisMonth}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.ThisMonth}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.LastMonth,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.LastMonth}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.LastMonth}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.NextMonth,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.NextMonth}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.NextMonth}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.ThisYear,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.ThisYear}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.ThisYear}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.LastYear,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.LastYear}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.LastYear}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.NextYear,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.NextYear}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.NextYear}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.Quarter,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Quarter}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Quarter}`)
 				},
 				{
 					value: TableDateCompareTypeEnum.Month,
-					label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Month}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Month}`)
 				}
 			]
 		}
@@ -424,80 +599,80 @@ function getCascaderListOptions(injector) {
 }
 function getConditionDateSelect(injector, dateType) {
 	if (!dateType) return [];
-	const t = injector.get(LocaleService).t;
+	const localeService = injector.get(LocaleService);
 	switch (dateType) {
 		case TableDateCompareTypeEnum.Quarter: return [
 			{
 				value: TableDateCompareTypeEnum.Q1,
-				label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Q1}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Q1}`)
 			},
 			{
 				value: TableDateCompareTypeEnum.Q2,
-				label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Q2}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Q2}`)
 			},
 			{
 				value: TableDateCompareTypeEnum.Q3,
-				label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Q3}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Q3}`)
 			},
 			{
 				value: TableDateCompareTypeEnum.Q4,
-				label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Q4}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.Q4}`)
 			}
 		];
 		case TableDateCompareTypeEnum.Month: return [
 			{
 				value: TableDateCompareTypeEnum.M1,
-				label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M1}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M1}`)
 			},
 			{
 				value: TableDateCompareTypeEnum.M2,
-				label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M2}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M2}`)
 			},
 			{
 				value: TableDateCompareTypeEnum.M3,
-				label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M3}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M3}`)
 			},
 			{
 				value: TableDateCompareTypeEnum.M4,
-				label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M4}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M4}`)
 			},
 			{
 				value: TableDateCompareTypeEnum.M5,
-				label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M5}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M5}`)
 			},
 			{
 				value: TableDateCompareTypeEnum.M6,
-				label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M6}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M6}`)
 			},
 			{
 				value: TableDateCompareTypeEnum.M7,
-				label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M7}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M7}`)
 			},
 			{
 				value: TableDateCompareTypeEnum.M8,
-				label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M8}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M8}`)
 			},
 			{
 				value: TableDateCompareTypeEnum.M9,
-				label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M9}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M9}`)
 			},
 			{
 				value: TableDateCompareTypeEnum.M10,
-				label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M10}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M10}`)
 			},
 			{
 				value: TableDateCompareTypeEnum.M11,
-				label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M11}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M11}`)
 			},
 			{
 				value: TableDateCompareTypeEnum.M12,
-				label: t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M12}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${TableDateCompareTypeEnum.M12}`)
 			}
 		];
 		default: return [];
 	}
 }
-const datePickerSet = new Set([
+const datePickerSet = /* @__PURE__ */ new Set([
 	TableDateCompareTypeEnum.Equal,
 	TableDateCompareTypeEnum.NotEqual,
 	TableDateCompareTypeEnum.After,
@@ -521,7 +696,7 @@ function getSubComponentType(type, compare) {
 function getInitConditionInfo(tableFilter) {
 	if (!tableFilter || tableFilter.filterType !== "condition") return {
 		type: TableConditionTypeEnum.String,
-		compareType: TableStringCompareTypeEnum.Equal,
+		compare: TableStringCompareTypeEnum.Equal,
 		info: {}
 	};
 	const filterInfo = tableFilter.filterInfo;
@@ -550,12 +725,12 @@ function getInitConditionInfo(tableFilter) {
 			compare: compareType,
 			info: { date }
 		};
-	} else if (new Set([
+	} else if ((/* @__PURE__ */ new Set([
 		TableDateCompareTypeEnum.Q1,
 		TableDateCompareTypeEnum.Q2,
 		TableDateCompareTypeEnum.Q3,
 		TableDateCompareTypeEnum.Q4
-	]).has(compareType)) return {
+	])).has(compareType)) return {
 		type: conditionType,
 		compare: TableDateCompareTypeEnum.Quarter,
 		info: { dateSelect: filterInfo.compareType }
@@ -712,10 +887,11 @@ const SheetTableConditionPanel = (props) => {
 //#endregion
 //#region src/views/components/SheetTableItemsFilterPanel.tsx
-const getCheckedCount = (map) => {
+const getCheckedItemCount = (map, checkedItemSet) => {
 	let count = 0;
-	map.forEach((value) => {
-		count += value;
+	checkedItemSet.forEach((item) => {
+		var _map$get;
+		count += (_map$get = map.get(item)) !== null && _map$get !== void 0 ? _map$get : 0;
 	});
 	return count;
 };
@@ -724,7 +900,7 @@ function SheetTableItemsFilterPanel(props) {
 	const localeService = useDependency(LocaleService);
 	const { data: items, itemsCountMap, allItemsCount } = useDependency(SheetsTableUiService).getTableFilterItems(unitId, subUnitId, tableId, columnIndex);
 	const [allChecked, setAllChecked] = useState(tableFilter === void 0 ? true : checkedItemSet.size === itemsCountMap.size);
-	const [checkedCount, setCheckedCount] = useState(allChecked ? allItemsCount : getCheckedCount(itemsCountMap));
+	const [checkedCount, setCheckedCount] = useState(allChecked ? allItemsCount : getCheckedItemCount(itemsCountMap, checkedItemSet));
 	const indeterminate = !allChecked && checkedItemSet.size > 0;
 	const [searchText, setSearchText] = useState("");
 	const displayItems = useMemo(() => {
@@ -1150,206 +1326,486 @@ function SheetTableRenameDialog(props) {
 }
 //#endregion
-//#region src/controllers/sheet-table-component.controller.ts
-let SheetsTableComponentController = class SheetsTableComponentController extends Disposable {
-	constructor(_componentManager, _contextService, _sheetCanvasPopupService, _dialogService) {
-		super();
-		this._componentManager = _componentManager;
-		this._contextService = _contextService;
-		this._sheetCanvasPopupService = _sheetCanvasPopupService;
-		this._dialogService = _dialogService;
-		_defineProperty(this, "_popupDisposable", void 0);
-		_defineProperty(this, "_currentTableFilterInfo", null);
-		this._initComponents();
-		this._initUIPopup();
-	}
-	setCurrentTableFilterInfo(info) {
-		this._currentTableFilterInfo = info;
-	}
-	openOrToggleFilterPanel(info) {
-		const opened = this._contextService.getContextValue(SHEETS_TABLE_FILTER_PANEL_OPENED_KEY);
-		if (opened && this._isSameFilterPanelInfo(this._currentTableFilterInfo, info)) {
-			this.closeFilterPanel();
-			return;
-		}
-		this.setCurrentTableFilterInfo(info);
-		if (opened) {
-			var _this$_popupDisposabl;
-			(_this$_popupDisposabl = this._popupDisposable) === null || _this$_popupDisposabl === void 0 || _this$_popupDisposabl.dispose();
-			this._popupDisposable = null;
-			this._openFilterPopup();
-			return;
-		}
-		this._contextService.setContextValue(SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, true);
-	}
-	clearCurrentTableFilterInfo() {
-		this._currentTableFilterInfo = null;
-	}
-	getCurrentTableFilterInfo() {
-		return this._currentTableFilterInfo;
-	}
-	_initComponents() {
-		[[SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, SheetTableFilterPanel], [SHEET_TABLE_RENAME_DIALOG, SheetTableRenameDialog]].forEach(([key, comp]) => {
-			this.disposeWithMe(this._componentManager.register(key, comp));
-		});
-	}
-	_initUIPopup() {
-		this.disposeWithMe(this._contextService.subscribeContextValue$(SHEETS_TABLE_FILTER_PANEL_OPENED_KEY).pipe(startWith(void 0), distinctUntilChanged()).subscribe((open) => {
-			if (open) this._openFilterPopup();
-			else if (open === false) this._closeFilterPopup();
-		}));
-	}
-	closeFilterPanel() {
-		this._contextService.setContextValue(SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, false);
-	}
-	_openFilterPopup() {
-		const currentFilterModel = this._currentTableFilterInfo;
-		if (!currentFilterModel) throw new Error("[SheetsFilterUIController]: no filter model when opening filter popup!");
-		const { row: startRow, column: col } = currentFilterModel;
-		this._popupDisposable = this._sheetCanvasPopupService.attachPopupToCell(startRow, col, {
-			componentKey: SHEETS_TABLE_FILTER_PANEL_OPENED_KEY,
-			direction: "horizontal",
-			onClickOutside: () => {
-				this._dialogService.close(UNIVER_SHEET_TABLE_FILTER_PANEL_ID);
-				this._contextService.setContextValue(SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, false);
-			},
-			offset: [5, 0],
-			portal: true
-		});
-	}
-	_closeFilterPopup() {
-		var _this$_popupDisposabl2;
-		(_this$_popupDisposabl2 = this._popupDisposable) === null || _this$_popupDisposabl2 === void 0 || _this$_popupDisposabl2.dispose();
-		this._popupDisposable = null;
-		this.clearCurrentTableFilterInfo();
-	}
-	_isSameFilterPanelInfo(a, b) {
-		return Boolean(a && a.unitId === b.unitId && a.subUnitId === b.subUnitId && a.tableId === b.tableId && a.column === b.column && a.row === b.row);
-	}
-};
-SheetsTableComponentController = __decorate([
-	__decorateParam(0, Inject(ComponentManager)),
-	__decorateParam(1, IContextService),
-	__decorateParam(2, Inject(SheetCanvasPopManagerService)),
-	__decorateParam(3, Inject(IDialogService))
-], SheetsTableComponentController);
-//#endregion
-//#region src/commands/operations/open-table-filter-dialog.opration.ts
-const OpenTableFilterPanelOperation = {
-	type: CommandType.OPERATION,
-	id: "sheet.operation.open-table-filter-panel",
-	async handler(accessor, params) {
-		if (!params) return false;
-		const { row, col, unitId, subUnitId, tableId } = params;
-		const tableManager = accessor.get(TableManager);
-		const sheetsTableComponentController = accessor.get(SheetsTableComponentController);
-		if (!tableManager.getTable(unitId, tableId)) return false;
-		sheetsTableComponentController.openOrToggleFilterPanel({
+//#region src/views/components/SheetTableSelector.tsx
+const SheetTableSelector = (props) => {
+	const { unitId, subUnitId, range, onCancel, onConfirm, tableId } = props;
+	const tableManager = useDependency(TableManager);
+	const [selectedRange, setSelectedRange] = useState(range);
+	const [rangeError, setRangeError] = useState("");
+	const localeService = useDependency(LocaleService);
+	const univerInstanceService = useDependency(IUniverInstanceService);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(RangeSelector, {
+			maxRangeCount: 1,
 			unitId,
 			subUnitId,
-			row,
-			tableId,
-			column: col
-		});
-		return true;
-	}
+			initialValue: serializeRange(range),
+			onChange: (_, text) => {
+				const originValue = serializeRange(range);
+				const newRange = deserializeRangeWithSheet(text).range;
+				const target = getSheetCommandTarget(univerInstanceService, {
+					unitId,
+					subUnitId
+				});
+				if (!target) return;
+				if (target.worksheet.getMergeData().some((merge) => {
+					return Rectangle.intersects(newRange, merge);
+				})) {
+					setRangeError(localeService.t("sheets-table-ui.tableRangeWithMergeError"));
+					return;
+				}
+				if (tableManager.getTablesBySubunitId(unitId, subUnitId).some((table) => {
+					if (table.getId() === tableId) return false;
+					const tableRange = table.getRange();
+					return Rectangle.intersects(newRange, tableRange);
+				})) {
+					setRangeError(localeService.t("sheets-table-ui.tableRangeWithOtherTableError"));
+					return;
+				}
+				const { startRow, endRow } = newRange;
+				if (startRow === endRow) {
+					setRangeError(localeService.t("sheets-table-ui.tableRangeSingleRowError"));
+					return;
+				}
+				if (originValue === text) return;
+				if (tableId) {
+					const table = tableManager.getTableById(unitId, tableId);
+					if (table) {
+						const oldRange = table.getRange();
+						if (Rectangle.intersects(newRange, oldRange) && oldRange.startRow === newRange.startRow) {
+							setSelectedRange(newRange);
+							setRangeError("");
+							onConfirm({
+								unitId,
+								subUnitId,
+								range: newRange
+							});
+							return;
+						} else {
+							setRangeError(localeService.t("sheets-table-ui.updateError"));
+							return;
+						}
+					}
+				}
+				setSelectedRange(newRange);
+				setRangeError("");
+			},
+			supportAcrossSheet: false
+		}),
+		rangeError && /* @__PURE__ */ jsx("div", {
+			className: "univer-mt-1 univer-text-xs univer-text-red-500",
+			children: rangeError
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "univer-mt-4 univer-flex univer-justify-end",
+			children: [/* @__PURE__ */ jsx(Button, {
+				onClick: onCancel,
+				children: localeService.t("sheets-table-ui.cancel")
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				onClick: () => {
+					if (rangeError) return;
+					onConfirm({
+						unitId,
+						subUnitId,
+						range: selectedRange
+					});
+				},
+				className: "univer-ml-2",
+				children: localeService.t("sheets-table-ui.confirm")
+			})]
+		})
+	] });
 };
 //#endregion
-//#region src/commands/operations/open-table-selector.operation.ts
-const OpenTableSelectorOperation = {
-	type: CommandType.OPERATION,
-	id: "sheet.operation.open-table-selector",
-	async handler(accessor) {
-		var _lastSelection$range;
-		const univerInstanceService = accessor.get(IUniverInstanceService);
-		const commandService = accessor.get(ICommandService);
-		const target = getSheetCommandTarget(univerInstanceService);
-		if (!target) return false;
-		const { unitId, subUnitId, worksheet } = target;
-		const lastSelection = accessor.get(SheetsSelectionsService).getCurrentLastSelection();
-		const range = (_lastSelection$range = lastSelection === null || lastSelection === void 0 ? void 0 : lastSelection.range) !== null && _lastSelection$range !== void 0 ? _lastSelection$range : {
-			startRow: 0,
-			endRow: 0,
-			startColumn: 0,
-			endColumn: 0
-		};
-		const rangeInfo = await openRangeSelector(accessor, unitId, subUnitId, isSingleCellSelection(lastSelection) ? expandToContinuousRange(range, {
-			up: true,
-			left: true,
-			right: true,
-			down: true
-		}, worksheet) : range);
-		if (!rangeInfo) return false;
-		commandService.executeCommand(AddSheetTableCommand.id, { ...rangeInfo });
-		return true;
+//#region src/controllers/sheet-table-theme-ui.controller.ts
+let SheetTableThemeUIController = class SheetTableThemeUIController extends Disposable {
+	constructor(_commandService) {
+		super();
+		this._commandService = _commandService;
+		_defineProperty(this, "_refreshTable", new Subject());
+		_defineProperty(this, "refreshTable$", this._refreshTable.asObservable());
+		this._initListener();
+	}
+	_initListener() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id === SetRangeThemeMutation.id) {
+				const { styleName } = command.params;
+				if (styleName.startsWith(SHEET_TABLE_CUSTOM_THEME_PREFIX)) this._refreshTable.next(Math.random());
+			}
+		}));
 	}
 };
-async function openRangeSelector(accessor, unitId, subUnitId, range, tableId) {
-	const dialogService = accessor.get(IDialogService);
-	const localeService = accessor.get(LocaleService);
-	return new Promise((resolve) => {
-		const dialogProps = {
+SheetTableThemeUIController = __decorate([__decorateParam(0, Inject(ICommandService))], SheetTableThemeUIController);
+//#endregion
+//#region src/views/components/SheetTableThemePanel.tsx
+const SheetTableThemePanel = (props) => {
+	var _customStyle$getHeade, _customStyle$getHeade2, _customStyle$getFirst, _customStyle$getFirst2, _customStyle$getSecon, _customStyle$getSecon2, _customStyle$getLastR, _customStyle$getLastR2;
+	const { unitId, subUnitId, tableId } = props;
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const tableManager = useDependency(TableManager);
+	const table = tableManager.getTableById(unitId, tableId);
+	const rangeThemeModel = useDependency(SheetRangeThemeModel);
+	const sheetTableThemeUIController = useDependency(SheetTableThemeUIController);
+	const rangeThemeMapChanged = useObservable(rangeThemeModel.rangeThemeMapChange$);
+	const tableRefresh = useObservable(sheetTableThemeUIController.refreshTable$);
+	const errorService = useDependency(ErrorService);
+	const [, setRefresh] = useState(Math.random());
+	const themeConfig = useObservable(tableManager.tableThemeChanged$, {
+		theme: table === null || table === void 0 ? void 0 : table.getTableStyleId(),
+		oldTheme: table === null || table === void 0 ? void 0 : table.getTableStyleId(),
+		unitId,
+		subUnitId,
+		tableId
+	});
+	const defaultRangeThemes = rangeThemeModel.getRegisteredRangeThemes().filter((item) => item === null || item === void 0 ? void 0 : item.startsWith(TABLE_DEFAULT_NAME_PREFIX));
+	const customRangeThemes = rangeThemeModel.getALLRegisteredTheme(unitId).filter((item) => item === null || item === void 0 ? void 0 : item.startsWith(TABLE_CUSTOM_NAME_PREFIX));
+	const selectedTheme = table === null || table === void 0 ? void 0 : table.getTableStyleId();
+	const customSelected = customRangeThemes.find((item) => item === selectedTheme);
+	const customStyleName = customSelected || customRangeThemes[0];
+	const customStyle = rangeThemeModel.getCustomRangeThemeStyle(unitId, customStyleName);
+	const headerBg = (_customStyle$getHeade = customStyle === null || customStyle === void 0 || (_customStyle$getHeade2 = customStyle.getHeaderRowStyle()) === null || _customStyle$getHeade2 === void 0 || (_customStyle$getHeade2 = _customStyle$getHeade2.bg) === null || _customStyle$getHeade2 === void 0 ? void 0 : _customStyle$getHeade2.rgb) !== null && _customStyle$getHeade !== void 0 ? _customStyle$getHeade : TABLE_DEFAULT_BG_COLOR;
+	const firstRowBg = (_customStyle$getFirst = customStyle === null || customStyle === void 0 || (_customStyle$getFirst2 = customStyle.getFirstRowStyle()) === null || _customStyle$getFirst2 === void 0 || (_customStyle$getFirst2 = _customStyle$getFirst2.bg) === null || _customStyle$getFirst2 === void 0 ? void 0 : _customStyle$getFirst2.rgb) !== null && _customStyle$getFirst !== void 0 ? _customStyle$getFirst : TABLE_DEFAULT_BG_COLOR;
+	const secondRowBg = (_customStyle$getSecon = customStyle === null || customStyle === void 0 || (_customStyle$getSecon2 = customStyle.getSecondRowStyle()) === null || _customStyle$getSecon2 === void 0 || (_customStyle$getSecon2 = _customStyle$getSecon2.bg) === null || _customStyle$getSecon2 === void 0 ? void 0 : _customStyle$getSecon2.rgb) !== null && _customStyle$getSecon !== void 0 ? _customStyle$getSecon : TABLE_DEFAULT_BG_COLOR;
+	const lastRowBg = (_customStyle$getLastR = customStyle === null || customStyle === void 0 || (_customStyle$getLastR2 = customStyle.getLastRowStyle()) === null || _customStyle$getLastR2 === void 0 || (_customStyle$getLastR2 = _customStyle$getLastR2.bg) === null || _customStyle$getLastR2 === void 0 ? void 0 : _customStyle$getLastR2.rgb) !== null && _customStyle$getLastR !== void 0 ? _customStyle$getLastR : TABLE_DEFAULT_BG_COLOR;
+	const [hoverCustomId, setHoverCustomId] = useState(null);
+	const handleThemeChange = (theme) => {
+		commandService.executeCommand(SetSheetTableCommand.id, {
+			unitId,
+			tableId,
+			theme
+		});
+	};
+	const handleAddCustomTheme = () => {
+		if (customRangeThemes.length >= 11) {
+			errorService.emit(localeService.t("sheets-table-ui.customTooMore"));
+			return;
+		}
+		const lastCustomTheme = customRangeThemes[customRangeThemes.length - 1];
+		let newThemeName = `${TABLE_CUSTOM_NAME_PREFIX}1`;
+		if (lastCustomTheme) newThemeName = `${TABLE_CUSTOM_NAME_PREFIX}${Number(lastCustomTheme.split("-")[2]) + 1}`;
+		const newTheme = new RangeThemeStyle(newThemeName, { ...customEmptyThemeWithBorderStyle });
+		commandService.executeCommand(AddTableThemeCommand.id, {
+			unitId,
+			tableId,
+			themeStyle: newTheme
+		});
+	};
+	const setCustomTheme = (themeName, tableThemeStyle) => {
+		commandService.executeCommand(SetRangeThemeMutation.id, {
 			unitId,
 			subUnitId,
-			range,
+			styleName: themeName,
+			style: tableThemeStyle
+		});
+	};
+	const removeCustomTheme = (themeName) => {
+		commandService.executeCommand(RemoveTableThemeCommand.id, {
+			unitId,
 			tableId,
-			onConfirm: (info) => {
-				resolve(info);
-				dialogService.close(TABLE_SELECTOR_DIALOG);
-			},
-			onCancel: () => {
-				resolve(null);
-				dialogService.close(TABLE_SELECTOR_DIALOG);
-			}
-		};
-		dialogService.open({
-			id: TABLE_SELECTOR_DIALOG,
-			title: { title: localeService.t("sheets-table-ui.selectRange") },
-			draggable: true,
-			destroyOnClose: true,
-			mask: false,
-			maskClosable: false,
-			children: { label: {
-				name: TABLE_SELECTOR_DIALOG,
-				props: dialogProps
-			} },
-			width: 300,
-			onClose: () => {
-				resolve(null);
-				dialogService.close(TABLE_SELECTOR_DIALOG);
-			}
+			themeName
 		});
-	});
-}
-//#endregion
-//#region src/config/config.ts
-const SHEETS_TABLE_UI_PLUGIN_CONFIG_KEY = "sheets-table-ui.config";
-const configSymbol = Symbol(SHEETS_TABLE_UI_PLUGIN_CONFIG_KEY);
-const defaultPluginConfig = {
-	anchorHeight: 24,
-	anchorBackgroundColor: "rgb(134,139,156)"
+	};
+	useEffect(() => {
+		setRefresh(Math.random());
+	}, [rangeThemeMapChanged, tableRefresh]);
+	if (!table) return null;
+	const headerBgIsDark = new ColorKit(headerBg).isDark();
+	const firstRowBgIsDark = new ColorKit(firstRowBg).isDark();
+	const secondRowBgIsDark = new ColorKit(secondRowBg).isDark();
+	const lastRowBgIsDark = new ColorKit(lastRowBg).isDark();
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx("h5", { children: localeService.t("sheets-table-ui.defaultStyle") }),
+		/* @__PURE__ */ jsx("div", {
+			className: "univer-flex univer-gap-2",
+			children: defaultRangeThemes.map((item) => {
+				var _rangeThemeItem$getHe, _rangeThemeItem$getFi, _rangeThemeItem$getSe, _rangeThemeItem$getLa;
+				const rangeThemeItem = rangeThemeModel.getDefaultRangeThemeStyle(item);
+				const headerRowBg = (rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getHe = rangeThemeItem.getHeaderRowStyle()) === null || _rangeThemeItem$getHe === void 0 || (_rangeThemeItem$getHe = _rangeThemeItem$getHe.bg) === null || _rangeThemeItem$getHe === void 0 ? void 0 : _rangeThemeItem$getHe.rgb) || "rgb(255, 255, 255)";
+				const firstRowBg = (rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getFi = rangeThemeItem.getFirstRowStyle()) === null || _rangeThemeItem$getFi === void 0 || (_rangeThemeItem$getFi = _rangeThemeItem$getFi.bg) === null || _rangeThemeItem$getFi === void 0 ? void 0 : _rangeThemeItem$getFi.rgb) || "rgb(255, 255, 255)";
+				const secondRowBg = (rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getSe = rangeThemeItem.getSecondRowStyle()) === null || _rangeThemeItem$getSe === void 0 || (_rangeThemeItem$getSe = _rangeThemeItem$getSe.bg) === null || _rangeThemeItem$getSe === void 0 ? void 0 : _rangeThemeItem$getSe.rgb) || "rgb(255, 255, 255)";
+				const lastRowBg = (rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getLa = rangeThemeItem.getLastRowStyle()) === null || _rangeThemeItem$getLa === void 0 || (_rangeThemeItem$getLa = _rangeThemeItem$getLa.bg) === null || _rangeThemeItem$getLa === void 0 ? void 0 : _rangeThemeItem$getLa.rgb) || "rgb(255, 255, 255)";
+				return /* @__PURE__ */ jsxs("div", {
+					className: clsx("univer-h-10 univer-w-8 univer-cursor-pointer univer-border univer-border-solid univer-border-gray-200 univer-p-px [&>div]:univer-box-border [&>div]:univer-h-2.5", { "univer-border-blue-500": item === themeConfig.theme }),
+					onClick: () => handleThemeChange(item),
+					children: [
+						/* @__PURE__ */ jsx("div", { style: {
+							background: headerRowBg,
+							border: `${headerRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
+						} }),
+						/* @__PURE__ */ jsx("div", { style: {
+							background: firstRowBg,
+							border: `${firstRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
+						} }),
+						/* @__PURE__ */ jsx("div", { style: {
+							background: secondRowBg,
+							border: `${secondRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
+						} }),
+						/* @__PURE__ */ jsx("div", { style: {
+							background: lastRowBg,
+							border: `${lastRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
+						} })
+					]
+				}, item);
+			})
+		}),
+		/* @__PURE__ */ jsx("h5", { children: localeService.t("sheets-table-ui.customStyle") }),
+		/* @__PURE__ */ jsxs("div", {
+			className: clsx("univer-w-full univer-rounded-sm", borderClassName),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "univer-flex univer-flex-wrap univer-gap-2 univer-p-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: clsx("univer-h-10 univer-w-8 univer-cursor-pointer univer-p-px univer-text-center univer-leading-10", borderClassName),
+					onClick: handleAddCustomTheme,
+					children: "+"
+				}), customRangeThemes.map((item) => {
+					var _rangeThemeItem$getHe2, _rangeThemeItem$getFi2, _rangeThemeItem$getSe2, _rangeThemeItem$getLa2;
+					const rangeThemeItem = rangeThemeModel.getCustomRangeThemeStyle(unitId, item);
+					const headerRowBg = rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getHe2 = rangeThemeItem.getHeaderRowStyle()) === null || _rangeThemeItem$getHe2 === void 0 || (_rangeThemeItem$getHe2 = _rangeThemeItem$getHe2.bg) === null || _rangeThemeItem$getHe2 === void 0 ? void 0 : _rangeThemeItem$getHe2.rgb;
+					const firstRowBg = rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getFi2 = rangeThemeItem.getFirstRowStyle()) === null || _rangeThemeItem$getFi2 === void 0 || (_rangeThemeItem$getFi2 = _rangeThemeItem$getFi2.bg) === null || _rangeThemeItem$getFi2 === void 0 ? void 0 : _rangeThemeItem$getFi2.rgb;
+					const secondRowBg = rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getSe2 = rangeThemeItem.getSecondRowStyle()) === null || _rangeThemeItem$getSe2 === void 0 || (_rangeThemeItem$getSe2 = _rangeThemeItem$getSe2.bg) === null || _rangeThemeItem$getSe2 === void 0 ? void 0 : _rangeThemeItem$getSe2.rgb;
+					const lastRowBg = rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getLa2 = rangeThemeItem.getLastRowStyle()) === null || _rangeThemeItem$getLa2 === void 0 || (_rangeThemeItem$getLa2 = _rangeThemeItem$getLa2.bg) === null || _rangeThemeItem$getLa2 === void 0 ? void 0 : _rangeThemeItem$getLa2.rgb;
+					return /* @__PURE__ */ jsxs("div", {
+						className: clsx("univer-relative univer-h-10 univer-w-8 univer-cursor-pointer univer-border univer-border-solid univer-border-gray-200 univer-p-px", { "univer-border-blue-500": item === themeConfig.theme }),
+						onClick: () => handleThemeChange(item),
+						onMouseEnter: () => setHoverCustomId(item),
+						onMouseLeave: () => setHoverCustomId(null),
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "univer-box-border univer-h-2.5",
+								style: {
+									background: headerRowBg !== null && headerRowBg !== void 0 ? headerRowBg : TABLE_BORDER_NONE,
+									border: `${headerRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
+								}
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "univer-box-border univer-h-2.5",
+								style: {
+									background: firstRowBg !== null && firstRowBg !== void 0 ? firstRowBg : TABLE_BORDER_NONE,
+									border: `${firstRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
+								}
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "univer-box-border univer-h-2.5",
+								style: {
+									background: secondRowBg !== null && secondRowBg !== void 0 ? secondRowBg : TABLE_BORDER_NONE,
+									border: `${secondRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
+								}
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "univer-box-border univer-h-2.5",
+								style: {
+									background: lastRowBg !== null && lastRowBg !== void 0 ? lastRowBg : TABLE_BORDER_NONE,
+									border: `${lastRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
+								}
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "univer-absolute univer-right-[-3px] univer-top-[-3px] univer-size-3 univer-rounded-md univer-bg-gray-200 univer-text-center univer-text-xs univer-leading-[10px]",
+								style: { display: hoverCustomId === item ? "block" : "none" },
+								onClick: (e) => {
+									e.stopPropagation();
+									removeCustomTheme(item);
+								},
+								children: "x"
+							})
+						]
+					}, item);
+				})]
+			}), customSelected && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: "univer-h-px univer-w-full univer-bg-gray-200" }), /* @__PURE__ */ jsxs("div", {
+				className: "univer-flex univer-flex-col univer-gap-2 univer-p-2",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "univer-flex univer-h-9 univer-gap-2",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: clsx("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", borderClassName, {
+								"univer-text-white": headerBgIsDark,
+								"univer-text-gray-900": !headerBgIsDark
+							}),
+							style: { background: headerBg },
+							children: localeService.t("sheets-table-ui.header")
+						}), /* @__PURE__ */ jsx(Dropdown, {
+							overlay: /* @__PURE__ */ jsx("div", {
+								className: "univer-p-2",
+								children: /* @__PURE__ */ jsx(ColorPicker, {
+									value: headerBg,
+									onChange: (val) => {
+										const headerRowStyle = processStyleWithBorderStyle("headerRowStyle", {
+											bg: { rgb: val },
+											cl: { rgb: new ColorKit(val).isDark() ? "#fff" : "#000" }
+										});
+										setCustomTheme(table.getTableStyleId(), { headerRowStyle });
+									}
+								})
+							}),
+							children: /* @__PURE__ */ jsxs("div", {
+								className: clsx("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", borderClassName),
+								children: [/* @__PURE__ */ jsx("div", {
+									className: clsx("univer-size-4 univer-rounded-lg univer-bg-gray-400", borderClassName, {
+										"univer-text-white": headerBgIsDark,
+										"univer-text-gray-900": !headerBgIsDark
+									}),
+									style: { background: headerBg }
+								}), /* @__PURE__ */ jsx(DropdownIcon, { className: "univer-size-2" })]
+							})
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "univer-flex univer-h-9 univer-gap-2",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: clsx("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", borderClassName, {
+								"univer-text-white": firstRowBgIsDark,
+								"univer-text-gray-900": !firstRowBgIsDark
+							}),
+							style: { background: firstRowBg },
+							children: localeService.t("sheets-table-ui.firstLine")
+						}), /* @__PURE__ */ jsx(Dropdown, {
+							overlay: /* @__PURE__ */ jsx("div", {
+								className: "univer-p-2",
+								children: /* @__PURE__ */ jsx(ColorPicker, {
+									value: firstRowBg,
+									onChange: (val) => {
+										setCustomTheme(table.getTableStyleId(), { firstRowStyle: {
+											bg: { rgb: val },
+											cl: { rgb: new ColorKit(val).isDark() ? "#fff" : "#000" }
+										} });
+									}
+								})
+							}),
+							children: /* @__PURE__ */ jsxs("div", {
+								className: clsx("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", borderClassName),
+								children: [/* @__PURE__ */ jsx("div", {
+									className: clsx("univer-size-4 univer-rounded-lg univer-bg-gray-400", borderClassName),
+									style: { background: firstRowBg }
+								}), /* @__PURE__ */ jsx(DropdownIcon, { className: "univer-size-2" })]
+							})
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "univer-flex univer-h-9 univer-gap-2",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: clsx("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", borderClassName, {
+								"univer-text-white": secondRowBgIsDark,
+								"univer-text-gray-900": !secondRowBgIsDark
+							}),
+							style: { background: secondRowBg },
+							children: localeService.t("sheets-table-ui.secondLine")
+						}), /* @__PURE__ */ jsx(Dropdown, {
+							overlay: /* @__PURE__ */ jsx("div", {
+								className: "univer-p-2",
+								children: /* @__PURE__ */ jsx(ColorPicker, {
+									value: secondRowBg,
+									onChange: (val) => setCustomTheme(table.getTableStyleId(), { secondRowStyle: {
+										bg: { rgb: val },
+										cl: { rgb: new ColorKit(val).isDark() ? "#fff" : "#000" }
+									} })
+								})
+							}),
+							children: /* @__PURE__ */ jsxs("div", {
+								className: clsx("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", borderClassName),
+								children: [/* @__PURE__ */ jsx("div", {
+									className: clsx("univer-size-4 univer-rounded-lg univer-bg-gray-400", borderClassName),
+									style: { background: secondRowBg }
+								}), /* @__PURE__ */ jsx(DropdownIcon, { className: "univer-size-2" })]
+							})
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "univer-flex univer-h-9 univer-gap-2",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: clsx("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", borderClassName, {
+								"univer-text-white": lastRowBgIsDark,
+								"univer-text-gray-900": !lastRowBgIsDark
+							}),
+							style: { background: lastRowBg },
+							children: localeService.t("sheets-table-ui.footer")
+						}), /* @__PURE__ */ jsx(Dropdown, {
+							overlay: /* @__PURE__ */ jsx("div", {
+								className: "univer-p-2",
+								children: /* @__PURE__ */ jsx(ColorPicker, {
+									value: lastRowBg,
+									onChange: (val) => {
+										const lastRowStyle = processStyleWithBorderStyle("lastRowStyle", {
+											bg: { rgb: val },
+											cl: { rgb: new ColorKit(val).isDark() ? "#fff" : "#000" }
+										});
+										setCustomTheme(table.getTableStyleId(), { lastRowStyle });
+									}
+								})
+							}),
+							children: /* @__PURE__ */ jsxs("div", {
+								className: clsx("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", borderClassName),
+								children: [/* @__PURE__ */ jsx("div", {
+									className: clsx("univer-size-4 univer-rounded-lg univer-bg-gray-400", borderClassName),
+									style: { background: lastRowBg }
+								}), /* @__PURE__ */ jsx(DropdownIcon, { className: "univer-size-2" })]
+							})
+						})]
+					})
+				]
+			})] })]
+		})
+	] });
 };
 //#endregion
-//#region src/views/widgets/table-controls-util.ts
-const TABLE_CONTROL_MENU_WIDTH = 168;
-const TABLE_CONTROL_MENU_ITEM_HEIGHT = 32;
-const TABLE_CONTROL_MENU_ACTIONS = [
-	"rename",
-	"update-range",
-	"set-theme",
-	"delete"
-];
-function isPointInTableControlRegion(region, x, y) {
-	return x >= region.left && x <= region.left + region.width && y >= region.top && y <= region.top + region.height;
-}
-function hitTestTableControl(regions, x, y) {
-	for (let i = regions.length - 1; i >= 0; i--) if (isPointInTableControlRegion(regions[i], x, y)) return regions[i];
-	return null;
-}
+//#region src/controllers/components.controller.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+let ComponentsController = class ComponentsController extends Disposable {
+	constructor(_componentManager, _iconManager) {
+		super();
+		this._componentManager = _componentManager;
+		this._iconManager = _iconManager;
+		this._registerComponents();
+		this._registerIcons();
+	}
+	_registerComponents() {
+		[[SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, SheetTableFilterPanel], [SHEET_TABLE_RENAME_DIALOG, SheetTableRenameDialog]].forEach(([key, comp]) => {
+			this.disposeWithMe(this._componentManager.register(key, comp));
+		});
+		[[TABLE_SELECTOR_DIALOG, SheetTableSelector], [SHEET_TABLE_THEME_PANEL, SheetTableThemePanel]].forEach(([key, comp]) => {
+			this.disposeWithMe(this._componentManager.register(key, comp));
+		});
+	}
+	_registerIcons() {
+		this.disposeWithMe(this._iconManager.register({ TableIcon }));
+	}
+};
+ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], ComponentsController);
+//#endregion
+//#region src/views/widgets/table-controls-util.ts
+const TABLE_CONTROL_MENU_WIDTH = 168;
+const TABLE_CONTROL_MENU_ITEM_HEIGHT = 32;
+const TABLE_CONTROL_MENU_ACTIONS = [
+	"rename",
+	"update-range",
+	"set-theme",
+	"delete"
+];
+function isPointInTableControlRegion(region, x, y) {
+	return x >= region.left && x <= region.left + region.width && y >= region.top && y <= region.top + region.height;
+}
+function hitTestTableControl(regions, x, y) {
+	for (let i = regions.length - 1; i >= 0; i--) if (isPointInTableControlRegion(regions[i], x, y)) return regions[i];
+	return null;
+}
 function buildTableMenuRegions(tableId, left, top) {
 	return TABLE_CONTROL_MENU_ACTIONS.map((action, index) => ({
 		type: "menu-item",
@@ -1623,32 +2079,11 @@ var SheetTableControlsShape = class extends Shape {
 	}
 };
-//#endregion
-//#region src/controllers/sheet-table-theme-ui.controller.ts
-let SheetTableThemeUIController = class SheetTableThemeUIController extends Disposable {
-	constructor(_commandService) {
-		super();
-		this._commandService = _commandService;
-		_defineProperty(this, "_refreshTable", new Subject());
-		_defineProperty(this, "refreshTable$", this._refreshTable.asObservable());
-		this._initListener();
-	}
-	_initListener() {
-		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
-			if (command.id === SetRangeThemeMutation.id) {
-				const { styleName } = command.params;
-				if (styleName.startsWith(SHEET_TABLE_CUSTOM_THEME_PREFIX)) this._refreshTable.next(Math.random());
-			}
-		}));
-	}
-};
-SheetTableThemeUIController = __decorate([__decorateParam(0, Inject(ICommandService))], SheetTableThemeUIController);
 //#endregion
 //#region src/controllers/sheet-table-controls-render.controller.ts
 const TABLE_CONTROLS_LAYER_INDEX = 5002;
 const TABLE_CONTROL_GAP_ROW = 0;
-const TABLE_RENDER_REFRESH_COMMANDS = new Set([SetScrollOperation.id, SetZoomRatioOperation.id]);
+const TABLE_RENDER_REFRESH_COMMANDS = /* @__PURE__ */ new Set([SetScrollOperation.id, SetZoomRatioOperation.id]);
 function isSameTopGap(left, right) {
 	if (left === null || right === null) return left === right;
 	return left.size === right.size && left.color === right.color && left.stripeColor === right.stripeColor;
@@ -2097,663 +2532,259 @@ const computeIconTop = (startY, endY, cellHeight, verticalAlign) => {
 };
 let SheetsTableFilterButtonRenderController = class SheetsTableFilterButtonRenderController extends RxDisposable {
 	constructor(_context, _injector, _sheetSkeletonManagerService, _sheetInterceptorService, _tableManager, _rangeThemeModel, _commandService) {
-		super();
-		this._context = _context;
-		this._injector = _injector;
-		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
-		this._sheetInterceptorService = _sheetInterceptorService;
-		this._tableManager = _tableManager;
-		this._rangeThemeModel = _rangeThemeModel;
-		this._commandService = _commandService;
-		_defineProperty(this, "_buttonRenderDisposable", null);
-		_defineProperty(this, "_tableFilterButtonShapes", []);
-		this._initRenderer();
-		this._initCommandExecuted();
-	}
-	dispose() {
-		super.dispose();
-		this._disposeRendering();
-	}
-	_initRenderer() {
-		const tableManager = this._tableManager;
-		this._sheetSkeletonManagerService.currentSkeleton$.pipe(switchMap((skeletonParams) => {
-			var _workbook$getActiveSh;
-			if (!skeletonParams) return of(null);
-			const { unit: workbook, unitId } = this._context;
-			const worksheetId = ((_workbook$getActiveSh = workbook.getActiveSheet()) === null || _workbook$getActiveSh === void 0 ? void 0 : _workbook$getActiveSh.getSheetId()) || "";
-			const getParams = () => ({
-				unitId,
-				worksheetId,
-				tableFilterRanges: this._tableManager.getSheetFilterRangeWithState(workbook.getUnitId(), worksheetId),
-				skeleton: skeletonParams.skeleton
-			});
-			return merge$1(tableManager.tableAdd$, tableManager.tableNameChanged$, tableManager.tableRangeChanged$, tableManager.tableThemeChanged$, tableManager.tableDelete$, tableManager.tableFilterChanged$).pipe(map(() => getParams()), startWith(getParams()));
-		}), takeUntil(this.dispose$)).subscribe((renderParams) => {
-			this._disposeRendering();
-			if (!renderParams || !renderParams.tableFilterRanges) return;
-			this._renderButtons(renderParams);
-		});
-	}
-	_initCommandExecuted() {
-		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
-			var _workbook$getActiveSh2;
-			if (command.id !== SetVerticalTextAlignCommand.id) return;
-			const { unit: workbook, unitId } = this._context;
-			const worksheetId = ((_workbook$getActiveSh2 = workbook.getActiveSheet()) === null || _workbook$getActiveSh2 === void 0 ? void 0 : _workbook$getActiveSh2.getSheetId()) || "";
-			const skeleton = this._sheetSkeletonManagerService.getCurrentSkeleton();
-			if (!skeleton) return;
-			const renderParams = {
-				unitId,
-				worksheetId,
-				tableFilterRanges: this._tableManager.getSheetFilterRangeWithState(workbook.getUnitId(), worksheetId),
-				skeleton
-			};
-			this._disposeRendering();
-			if (!renderParams || !renderParams.tableFilterRanges) return;
-			this._renderButtons(renderParams);
-		}));
-	}
-	_renderButtons(params) {
-		const { tableFilterRanges, unitId, skeleton, worksheetId } = params;
-		const { unit: workbook, scene } = this._context;
-		const worksheet = workbook.getSheetBySheetId(worksheetId);
-		if (!worksheet) return;
-		for (const { range, states, tableId } of tableFilterRanges) {
-			var _this$_rangeThemeMode, _headerStyle$cl$rgb, _headerStyle$cl, _headerStyle$bg$rgb, _headerStyle$bg;
-			const { startRow, startColumn, endColumn } = range;
-			const table = this._tableManager.getTableById(unitId, tableId);
-			const headerStyle = table ? (_this$_rangeThemeMode = this._rangeThemeModel.getRangeThemeStyle(unitId, table.getTableStyleId())) === null || _this$_rangeThemeMode === void 0 ? void 0 : _this$_rangeThemeMode.getHeaderRowStyle() : null;
-			const iconColor = (_headerStyle$cl$rgb = headerStyle === null || headerStyle === void 0 || (_headerStyle$cl = headerStyle.cl) === null || _headerStyle$cl === void 0 ? void 0 : _headerStyle$cl.rgb) !== null && _headerStyle$cl$rgb !== void 0 ? _headerStyle$cl$rgb : "#fff";
-			const hoverIconColor = (_headerStyle$bg$rgb = headerStyle === null || headerStyle === void 0 || (_headerStyle$bg = headerStyle.bg) === null || _headerStyle$bg === void 0 ? void 0 : _headerStyle$bg.rgb) !== null && _headerStyle$bg$rgb !== void 0 ? _headerStyle$bg$rgb : "#202124";
-			this._interceptCellContent(unitId, worksheetId, range);
-			for (let col = startColumn; col <= endColumn; col++) {
-				const key = `sheets-table-filter-button-${startRow}-${col}`;
-				const startPosition = getCoordByCell(startRow, col, scene, skeleton);
-				const cellStyle = worksheet.getCellStyle(startRow, col);
-				const verticalAlign = (cellStyle === null || cellStyle === void 0 ? void 0 : cellStyle.vt) || VerticalAlign.BOTTOM;
-				const { startX, startY, endX, endY } = startPosition;
-				const cellWidth = endX - startX;
-				const cellHeight = endY - startY;
-				if (cellHeight <= 1 || cellWidth <= 1) continue;
-				const state = states[col - startColumn];
-				const props = {
-					left: endX - 16 - 1,
-					top: computeIconTop(startY, endY, cellHeight, verticalAlign),
-					height: 16,
-					width: 16,
-					zIndex: SHEETS_FILTER_BUTTON_Z_INDEX,
-					iconColor,
-					hoverBackground: iconColor,
-					hoverIconColor,
-					cellHeight,
-					cellWidth,
-					filterParams: {
-						unitId,
-						subUnitId: worksheetId,
-						row: startRow,
-						col,
-						buttonState: state,
-						tableId
-					}
-				};
-				const buttonShape = this._injector.createInstance(SheetsTableFilterButtonShape, key, props);
-				this._tableFilterButtonShapes.push(buttonShape);
-			}
-		}
-		scene.addObjects(this._tableFilterButtonShapes);
-		scene.makeDirty();
-	}
-	_interceptCellContent(workbookId, worksheetId, range) {
-		const { startRow, startColumn, endColumn } = range;
-		this._buttonRenderDisposable = this._sheetInterceptorService.intercept(INTERCEPTOR_POINT.CELL_CONTENT, {
-			effect: InterceptorEffectEnum.Style,
-			handler: (cell, pos, next) => {
-				const { row, col, unitId, subUnitId } = pos;
-				if (unitId !== workbookId || subUnitId !== worksheetId || row !== startRow || col < startColumn || col > endColumn) return next(cell);
-				if (!cell || cell === pos.rawData) cell = { ...pos.rawData };
-				cell.fontRenderExtension = {
-					...cell === null || cell === void 0 ? void 0 : cell.fontRenderExtension,
-					rightOffset: 16 + 1 + 2
-				};
-				return next(cell);
-			},
-			priority: 10
-		});
-	}
-	_disposeRendering() {
-		var _this$_buttonRenderDi;
-		this._tableFilterButtonShapes.forEach((s) => s.dispose());
-		(_this$_buttonRenderDi = this._buttonRenderDisposable) === null || _this$_buttonRenderDi === void 0 || _this$_buttonRenderDi.dispose();
-		this._buttonRenderDisposable = null;
-		this._tableFilterButtonShapes = [];
-	}
-};
-SheetsTableFilterButtonRenderController = __decorate([
-	__decorateParam(1, Inject(Injector)),
-	__decorateParam(2, Inject(SheetSkeletonManagerService)),
-	__decorateParam(3, Inject(SheetInterceptorService)),
-	__decorateParam(4, Inject(TableManager)),
-	__decorateParam(5, Inject(SheetRangeThemeModel)),
-	__decorateParam(6, ICommandService)
-], SheetsTableFilterButtonRenderController);
-//#endregion
-//#region src/controllers/sheet-table-render.controller.ts
-let SheetsTableRenderController = class SheetsTableRenderController extends RxDisposable {
-	constructor(_context, _injector, _sheetSkeletonManagerService, _tableManager, _sheetTableThemeUIController) {
-		super();
-		this._context = _context;
-		this._injector = _injector;
-		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
-		this._tableManager = _tableManager;
-		this._sheetTableThemeUIController = _sheetTableThemeUIController;
-		this._initListener();
-	}
-	_dirtySkeleton() {
-		var _this$_context$mainCo;
-		(_this$_context$mainCo = this._context.mainComponent) === null || _this$_context$mainCo === void 0 || _this$_context$mainCo.makeDirty();
-		const currentParam = this._sheetSkeletonManagerService.getCurrentParam();
-		if (currentParam) {
-			const param = {
-				...currentParam,
-				dirty: true
-			};
-			this._sheetSkeletonManagerService.reCalculate(param);
-		}
-	}
-	_initListener() {
-		const tableManager = this._tableManager;
-		const dirtySkeleton = this._dirtySkeleton.bind(this);
-		this.disposeWithMe(merge$1(tableManager.tableAdd$, tableManager.tableDelete$, tableManager.tableNameChanged$, tableManager.tableRangeChanged$, tableManager.tableThemeChanged$, tableManager.tableFilterChanged$, tableManager.tableInitStatus$, this._sheetTableThemeUIController.refreshTable$).subscribe(dirtySkeleton));
-	}
-};
-SheetsTableRenderController = __decorate([
-	__decorateParam(1, Inject(Injector)),
-	__decorateParam(2, Inject(SheetSkeletonManagerService)),
-	__decorateParam(3, Inject(TableManager)),
-	__decorateParam(4, Inject(SheetTableThemeUIController))
-], SheetsTableRenderController);
-//#endregion
-//#region src/controllers/sheet-table-selection.controller.ts
-let SheetTableSelectionController = class SheetTableSelectionController extends Disposable {
-	constructor(_sheetInterceptorService, _univerInstanceService, _tableManager) {
-		super();
-		this._sheetInterceptorService = _sheetInterceptorService;
-		this._univerInstanceService = _univerInstanceService;
-		this._tableManager = _tableManager;
-		this._initSelectionChange();
-	}
-	_initSelectionChange() {
-		this.disposeWithMe(this._sheetInterceptorService.interceptCommand({ getMutations: (command) => {
-			if (command.id === SelectAllCommand.id) {
-				const target = getSheetCommandTarget(this._univerInstanceService);
-				if (!target) return {
-					redos: [],
-					undos: []
-				};
-				const { range } = command.params;
-				const { unitId, subUnitId, worksheet } = target;
-				const overlapTable = this._tableManager.getTablesBySubunitId(unitId, subUnitId).find((table) => {
-					const tableRange = table.getRange();
-					return Rectangle.contains(tableRange, range);
-				});
-				if (overlapTable) {
-					const tableRange = overlapTable.getRange();
-					const tableRangeWithoutHeader = {
-						...tableRange,
-						startRow: tableRange.startRow + 1
-					};
-					if (Rectangle.equals(tableRange, range)) return {
-						undos: [],
-						redos: []
-					};
-					else if (Rectangle.equals(tableRangeWithoutHeader, range)) return {
-						undos: [],
-						redos: [{
-							id: SetSelectionsOperation.id,
-							params: {
-								unitId,
-								subUnitId,
-								selections: [{
-									range: tableRange,
-									primary: getPrimaryForRange(tableRange, worksheet)
-								}]
-							}
-						}]
-					};
-					else return {
-						undos: [],
-						redos: [{
-							id: SetSelectionsOperation.id,
-							params: {
-								unitId,
-								subUnitId,
-								selections: [{
-									range: tableRangeWithoutHeader,
-									primary: getPrimaryForRange(tableRangeWithoutHeader, worksheet)
-								}]
-							}
-						}]
-					};
-				}
-			}
-			return {
-				redos: [],
-				undos: []
-			};
-		} }));
-	}
-};
-SheetTableSelectionController = __decorate([
-	__decorateParam(0, Inject(SheetInterceptorService)),
-	__decorateParam(1, Inject(IUniverInstanceService)),
-	__decorateParam(2, Inject(TableManager))
-], SheetTableSelectionController);
-//#endregion
-//#region src/views/components/SheetTableSelector.tsx
-const SheetTableSelector = (props) => {
-	const { unitId, subUnitId, range, onCancel, onConfirm, tableId } = props;
-	const tableManager = useDependency(TableManager);
-	const [selectedRange, setSelectedRange] = useState(range);
-	const [rangeError, setRangeError] = useState("");
-	const localeService = useDependency(LocaleService);
-	const univerInstanceService = useDependency(IUniverInstanceService);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(RangeSelector, {
-			maxRangeCount: 1,
-			unitId,
-			subUnitId,
-			initialValue: serializeRange(range),
-			onChange: (_, text) => {
-				const originValue = serializeRange(range);
-				const newRange = deserializeRangeWithSheet(text).range;
-				const target = getSheetCommandTarget(univerInstanceService, {
-					unitId,
-					subUnitId
-				});
-				if (!target) return;
-				if (target.worksheet.getMergeData().some((merge) => {
-					return Rectangle.intersects(newRange, merge);
-				})) {
-					setRangeError(localeService.t("sheets-table-ui.tableRangeWithMergeError"));
-					return;
-				}
-				if (tableManager.getTablesBySubunitId(unitId, subUnitId).some((table) => {
-					if (table.getId() === tableId) return false;
-					const tableRange = table.getRange();
-					return Rectangle.intersects(newRange, tableRange);
-				})) {
-					setRangeError(localeService.t("sheets-table-ui.tableRangeWithOtherTableError"));
-					return;
-				}
-				const { startRow, endRow } = newRange;
-				if (startRow === endRow) {
-					setRangeError(localeService.t("sheets-table-ui.tableRangeSingleRowError"));
-					return;
-				}
-				if (originValue === text) return;
-				if (tableId) {
-					const table = tableManager.getTableById(unitId, tableId);
-					if (table) {
-						const oldRange = table.getRange();
-						if (Rectangle.intersects(newRange, oldRange) && oldRange.startRow === newRange.startRow) {
-							setSelectedRange(newRange);
-							setRangeError("");
-							onConfirm({
-								unitId,
-								subUnitId,
-								range: newRange
-							});
-							return;
-						} else {
-							setRangeError(localeService.t("sheets-table-ui.updateError"));
-							return;
-						}
-					}
-				}
-				setSelectedRange(newRange);
-				setRangeError("");
-			},
-			supportAcrossSheet: false
-		}),
-		rangeError && /* @__PURE__ */ jsx("div", {
-			className: "univer-mt-1 univer-text-xs univer-text-red-500",
-			children: rangeError
-		}),
-		/* @__PURE__ */ jsxs("div", {
-			className: "univer-mt-4 univer-flex univer-justify-end",
-			children: [/* @__PURE__ */ jsx(Button, {
-				onClick: onCancel,
-				children: localeService.t("sheets-table-ui.cancel")
-			}), /* @__PURE__ */ jsx(Button, {
-				variant: "primary",
-				onClick: () => {
-					if (rangeError) return;
-					onConfirm({
-						unitId,
-						subUnitId,
-						range: selectedRange
-					});
-				},
-				className: "univer-ml-2",
-				children: localeService.t("sheets-table-ui.confirm")
-			})]
-		})
-	] });
-};
-//#endregion
-//#region src/views/components/SheetTableThemePanel.tsx
-const SheetTableThemePanel = (props) => {
-	var _customStyle$getHeade, _customStyle$getHeade2, _customStyle$getFirst, _customStyle$getFirst2, _customStyle$getSecon, _customStyle$getSecon2, _customStyle$getLastR, _customStyle$getLastR2;
-	const { unitId, subUnitId, tableId } = props;
-	const commandService = useDependency(ICommandService);
-	const localeService = useDependency(LocaleService);
-	const tableManager = useDependency(TableManager);
-	const table = tableManager.getTableById(unitId, tableId);
-	const rangeThemeModel = useDependency(SheetRangeThemeModel);
-	const sheetTableThemeUIController = useDependency(SheetTableThemeUIController);
-	const rangeThemeMapChanged = useObservable(rangeThemeModel.rangeThemeMapChange$);
-	const tableRefresh = useObservable(sheetTableThemeUIController.refreshTable$);
-	const errorService = useDependency(ErrorService);
-	const [, setRefresh] = useState(Math.random());
-	const themeConfig = useObservable(tableManager.tableThemeChanged$, {
-		theme: table === null || table === void 0 ? void 0 : table.getTableStyleId(),
-		oldTheme: table === null || table === void 0 ? void 0 : table.getTableStyleId(),
-		unitId,
-		subUnitId,
-		tableId
-	});
-	const defaultRangeThemes = rangeThemeModel.getRegisteredRangeThemes().filter((item) => item === null || item === void 0 ? void 0 : item.startsWith(TABLE_DEFAULT_NAME_PREFIX));
-	const customRangeThemes = rangeThemeModel.getALLRegisteredTheme(unitId).filter((item) => item === null || item === void 0 ? void 0 : item.startsWith(TABLE_CUSTOM_NAME_PREFIX));
-	const selectedTheme = table === null || table === void 0 ? void 0 : table.getTableStyleId();
-	const customSelected = customRangeThemes.find((item) => item === selectedTheme);
-	const customStyleName = customSelected || customRangeThemes[0];
-	const customStyle = rangeThemeModel.getCustomRangeThemeStyle(unitId, customStyleName);
-	const headerBg = (_customStyle$getHeade = customStyle === null || customStyle === void 0 || (_customStyle$getHeade2 = customStyle.getHeaderRowStyle()) === null || _customStyle$getHeade2 === void 0 || (_customStyle$getHeade2 = _customStyle$getHeade2.bg) === null || _customStyle$getHeade2 === void 0 ? void 0 : _customStyle$getHeade2.rgb) !== null && _customStyle$getHeade !== void 0 ? _customStyle$getHeade : TABLE_DEFAULT_BG_COLOR;
-	const firstRowBg = (_customStyle$getFirst = customStyle === null || customStyle === void 0 || (_customStyle$getFirst2 = customStyle.getFirstRowStyle()) === null || _customStyle$getFirst2 === void 0 || (_customStyle$getFirst2 = _customStyle$getFirst2.bg) === null || _customStyle$getFirst2 === void 0 ? void 0 : _customStyle$getFirst2.rgb) !== null && _customStyle$getFirst !== void 0 ? _customStyle$getFirst : TABLE_DEFAULT_BG_COLOR;
-	const secondRowBg = (_customStyle$getSecon = customStyle === null || customStyle === void 0 || (_customStyle$getSecon2 = customStyle.getSecondRowStyle()) === null || _customStyle$getSecon2 === void 0 || (_customStyle$getSecon2 = _customStyle$getSecon2.bg) === null || _customStyle$getSecon2 === void 0 ? void 0 : _customStyle$getSecon2.rgb) !== null && _customStyle$getSecon !== void 0 ? _customStyle$getSecon : TABLE_DEFAULT_BG_COLOR;
-	const lastRowBg = (_customStyle$getLastR = customStyle === null || customStyle === void 0 || (_customStyle$getLastR2 = customStyle.getLastRowStyle()) === null || _customStyle$getLastR2 === void 0 || (_customStyle$getLastR2 = _customStyle$getLastR2.bg) === null || _customStyle$getLastR2 === void 0 ? void 0 : _customStyle$getLastR2.rgb) !== null && _customStyle$getLastR !== void 0 ? _customStyle$getLastR : TABLE_DEFAULT_BG_COLOR;
-	const [hoverCustomId, setHoverCustomId] = useState(null);
-	const handleThemeChange = (theme) => {
-		commandService.executeCommand(SetSheetTableCommand.id, {
-			unitId,
-			tableId,
-			theme
-		});
-	};
-	const handleAddCustomTheme = () => {
-		if (customRangeThemes.length >= 11) {
-			errorService.emit(localeService.t("sheets-table-ui.customTooMore"));
-			return;
-		}
-		const lastCustomTheme = customRangeThemes[customRangeThemes.length - 1];
-		let newThemeName = `${TABLE_CUSTOM_NAME_PREFIX}1`;
-		if (lastCustomTheme) newThemeName = `${TABLE_CUSTOM_NAME_PREFIX}${Number(lastCustomTheme.split("-")[2]) + 1}`;
-		const newTheme = new RangeThemeStyle(newThemeName, { ...customEmptyThemeWithBorderStyle });
-		commandService.executeCommand(AddTableThemeCommand.id, {
-			unitId,
-			tableId,
-			themeStyle: newTheme
-		});
-	};
-	const setCustomTheme = (themeName, tableThemeStyle) => {
-		commandService.executeCommand(SetRangeThemeMutation.id, {
-			unitId,
-			subUnitId,
-			styleName: themeName,
-			style: tableThemeStyle
-		});
-	};
-	const removeCustomTheme = (themeName) => {
-		commandService.executeCommand(RemoveTableThemeCommand.id, {
-			unitId,
-			tableId,
-			themeName
-		});
-	};
-	useEffect(() => {
-		setRefresh(Math.random());
-	}, [rangeThemeMapChanged, tableRefresh]);
-	if (!table) return null;
-	const headerBgIsDark = new ColorKit(headerBg).isDark();
-	const firstRowBgIsDark = new ColorKit(firstRowBg).isDark();
-	const secondRowBgIsDark = new ColorKit(secondRowBg).isDark();
-	const lastRowBgIsDark = new ColorKit(lastRowBg).isDark();
-	return /* @__PURE__ */ jsxs("div", { children: [
-		/* @__PURE__ */ jsx("h5", { children: localeService.t("sheets-table-ui.defaultStyle") }),
-		/* @__PURE__ */ jsx("div", {
-			className: "univer-flex univer-gap-2",
-			children: defaultRangeThemes.map((item) => {
-				var _rangeThemeItem$getHe, _rangeThemeItem$getFi, _rangeThemeItem$getSe, _rangeThemeItem$getLa;
-				const rangeThemeItem = rangeThemeModel.getDefaultRangeThemeStyle(item);
-				const headerRowBg = (rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getHe = rangeThemeItem.getHeaderRowStyle()) === null || _rangeThemeItem$getHe === void 0 || (_rangeThemeItem$getHe = _rangeThemeItem$getHe.bg) === null || _rangeThemeItem$getHe === void 0 ? void 0 : _rangeThemeItem$getHe.rgb) || "rgb(255, 255, 255)";
-				const firstRowBg = (rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getFi = rangeThemeItem.getFirstRowStyle()) === null || _rangeThemeItem$getFi === void 0 || (_rangeThemeItem$getFi = _rangeThemeItem$getFi.bg) === null || _rangeThemeItem$getFi === void 0 ? void 0 : _rangeThemeItem$getFi.rgb) || "rgb(255, 255, 255)";
-				const secondRowBg = (rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getSe = rangeThemeItem.getSecondRowStyle()) === null || _rangeThemeItem$getSe === void 0 || (_rangeThemeItem$getSe = _rangeThemeItem$getSe.bg) === null || _rangeThemeItem$getSe === void 0 ? void 0 : _rangeThemeItem$getSe.rgb) || "rgb(255, 255, 255)";
-				const lastRowBg = (rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getLa = rangeThemeItem.getLastRowStyle()) === null || _rangeThemeItem$getLa === void 0 || (_rangeThemeItem$getLa = _rangeThemeItem$getLa.bg) === null || _rangeThemeItem$getLa === void 0 ? void 0 : _rangeThemeItem$getLa.rgb) || "rgb(255, 255, 255)";
-				return /* @__PURE__ */ jsxs("div", {
-					className: clsx("univer-h-10 univer-w-8 univer-cursor-pointer univer-border univer-border-solid univer-border-gray-200 univer-p-px [&>div]:univer-box-border [&>div]:univer-h-2.5", { "univer-border-blue-500": item === themeConfig.theme }),
-					onClick: () => handleThemeChange(item),
-					children: [
-						/* @__PURE__ */ jsx("div", { style: {
-							background: headerRowBg,
-							border: `${headerRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-						} }),
-						/* @__PURE__ */ jsx("div", { style: {
-							background: firstRowBg,
-							border: `${firstRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-						} }),
-						/* @__PURE__ */ jsx("div", { style: {
-							background: secondRowBg,
-							border: `${secondRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-						} }),
-						/* @__PURE__ */ jsx("div", { style: {
-							background: lastRowBg,
-							border: `${lastRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-						} })
-					]
-				}, item);
-			})
-		}),
-		/* @__PURE__ */ jsx("h5", { children: localeService.t("sheets-table-ui.customStyle") }),
-		/* @__PURE__ */ jsxs("div", {
-			className: clsx("univer-w-full univer-rounded-sm", borderClassName),
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "univer-flex univer-flex-wrap univer-gap-2 univer-p-2",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: clsx("univer-h-10 univer-w-8 univer-cursor-pointer univer-p-px univer-text-center univer-leading-10", borderClassName),
-					onClick: handleAddCustomTheme,
-					children: "+"
-				}), customRangeThemes.map((item) => {
-					var _rangeThemeItem$getHe2, _rangeThemeItem$getFi2, _rangeThemeItem$getSe2, _rangeThemeItem$getLa2;
-					const rangeThemeItem = rangeThemeModel.getCustomRangeThemeStyle(unitId, item);
-					const headerRowBg = rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getHe2 = rangeThemeItem.getHeaderRowStyle()) === null || _rangeThemeItem$getHe2 === void 0 || (_rangeThemeItem$getHe2 = _rangeThemeItem$getHe2.bg) === null || _rangeThemeItem$getHe2 === void 0 ? void 0 : _rangeThemeItem$getHe2.rgb;
-					const firstRowBg = rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getFi2 = rangeThemeItem.getFirstRowStyle()) === null || _rangeThemeItem$getFi2 === void 0 || (_rangeThemeItem$getFi2 = _rangeThemeItem$getFi2.bg) === null || _rangeThemeItem$getFi2 === void 0 ? void 0 : _rangeThemeItem$getFi2.rgb;
-					const secondRowBg = rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getSe2 = rangeThemeItem.getSecondRowStyle()) === null || _rangeThemeItem$getSe2 === void 0 || (_rangeThemeItem$getSe2 = _rangeThemeItem$getSe2.bg) === null || _rangeThemeItem$getSe2 === void 0 ? void 0 : _rangeThemeItem$getSe2.rgb;
-					const lastRowBg = rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getLa2 = rangeThemeItem.getLastRowStyle()) === null || _rangeThemeItem$getLa2 === void 0 || (_rangeThemeItem$getLa2 = _rangeThemeItem$getLa2.bg) === null || _rangeThemeItem$getLa2 === void 0 ? void 0 : _rangeThemeItem$getLa2.rgb;
-					return /* @__PURE__ */ jsxs("div", {
-						className: clsx("univer-relative univer-h-10 univer-w-8 univer-cursor-pointer univer-border univer-border-solid univer-border-gray-200 univer-p-px", { "univer-border-blue-500": item === themeConfig.theme }),
-						onClick: () => handleThemeChange(item),
-						onMouseEnter: () => setHoverCustomId(item),
-						onMouseLeave: () => setHoverCustomId(null),
-						children: [
-							/* @__PURE__ */ jsx("div", {
-								className: "univer-box-border univer-h-2.5",
-								style: {
-									background: headerRowBg !== null && headerRowBg !== void 0 ? headerRowBg : TABLE_BORDER_NONE,
-									border: `${headerRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-								}
-							}),
-							/* @__PURE__ */ jsx("div", {
-								className: "univer-box-border univer-h-2.5",
-								style: {
-									background: firstRowBg !== null && firstRowBg !== void 0 ? firstRowBg : TABLE_BORDER_NONE,
-									border: `${firstRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-								}
-							}),
-							/* @__PURE__ */ jsx("div", {
-								className: "univer-box-border univer-h-2.5",
-								style: {
-									background: secondRowBg !== null && secondRowBg !== void 0 ? secondRowBg : TABLE_BORDER_NONE,
-									border: `${secondRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-								}
-							}),
-							/* @__PURE__ */ jsx("div", {
-								className: "univer-box-border univer-h-2.5",
-								style: {
-									background: lastRowBg !== null && lastRowBg !== void 0 ? lastRowBg : TABLE_BORDER_NONE,
-									border: `${lastRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-								}
-							}),
-							/* @__PURE__ */ jsx("div", {
-								className: "univer-absolute univer-right-[-3px] univer-top-[-3px] univer-size-3 univer-rounded-md univer-bg-gray-200 univer-text-center univer-text-xs univer-leading-[10px]",
-								style: { display: hoverCustomId === item ? "block" : "none" },
-								onClick: (e) => {
-									e.stopPropagation();
-									removeCustomTheme(item);
-								},
-								children: "x"
-							})
-						]
-					}, item);
-				})]
-			}), customSelected && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: "univer-h-px univer-w-full univer-bg-gray-200" }), /* @__PURE__ */ jsxs("div", {
-				className: "univer-flex univer-flex-col univer-gap-2 univer-p-2",
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "univer-flex univer-h-9 univer-gap-2",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: clsx("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", borderClassName, {
-								"univer-text-white": headerBgIsDark,
-								"univer-text-gray-900": !headerBgIsDark
-							}),
-							style: { background: headerBg },
-							children: localeService.t("sheets-table-ui.header")
-						}), /* @__PURE__ */ jsx(Dropdown, {
-							overlay: /* @__PURE__ */ jsx("div", {
-								className: "univer-p-2",
-								children: /* @__PURE__ */ jsx(ColorPicker, {
-									value: headerBg,
-									onChange: (val) => {
-										const headerRowStyle = processStyleWithBorderStyle("headerRowStyle", {
-											bg: { rgb: val },
-											cl: { rgb: new ColorKit(val).isDark() ? "#fff" : "#000" }
-										});
-										setCustomTheme(table.getTableStyleId(), { headerRowStyle });
-									}
-								})
-							}),
-							children: /* @__PURE__ */ jsxs("div", {
-								className: clsx("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", borderClassName),
-								children: [/* @__PURE__ */ jsx("div", {
-									className: clsx("univer-size-4 univer-rounded-lg univer-bg-gray-400", borderClassName, {
-										"univer-text-white": headerBgIsDark,
-										"univer-text-gray-900": !headerBgIsDark
-									}),
-									style: { background: headerBg }
-								}), /* @__PURE__ */ jsx(DropdownIcon, { className: "univer-size-2" })]
-							})
-						})]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "univer-flex univer-h-9 univer-gap-2",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: clsx("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", borderClassName, {
-								"univer-text-white": firstRowBgIsDark,
-								"univer-text-gray-900": !firstRowBgIsDark
-							}),
-							style: { background: firstRowBg },
-							children: localeService.t("sheets-table-ui.firstLine")
-						}), /* @__PURE__ */ jsx(Dropdown, {
-							overlay: /* @__PURE__ */ jsx("div", {
-								className: "univer-p-2",
-								children: /* @__PURE__ */ jsx(ColorPicker, {
-									value: firstRowBg,
-									onChange: (val) => {
-										setCustomTheme(table.getTableStyleId(), { firstRowStyle: {
-											bg: { rgb: val },
-											cl: { rgb: new ColorKit(val).isDark() ? "#fff" : "#000" }
-										} });
-									}
-								})
-							}),
-							children: /* @__PURE__ */ jsxs("div", {
-								className: clsx("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", borderClassName),
-								children: [/* @__PURE__ */ jsx("div", {
-									className: clsx("univer-size-4 univer-rounded-lg univer-bg-gray-400", borderClassName),
-									style: { background: firstRowBg }
-								}), /* @__PURE__ */ jsx(DropdownIcon, { className: "univer-size-2" })]
-							})
-						})]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "univer-flex univer-h-9 univer-gap-2",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: clsx("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", borderClassName, {
-								"univer-text-white": secondRowBgIsDark,
-								"univer-text-gray-900": !secondRowBgIsDark
-							}),
-							style: { background: secondRowBg },
-							children: localeService.t("sheets-table-ui.secondLine")
-						}), /* @__PURE__ */ jsx(Dropdown, {
-							overlay: /* @__PURE__ */ jsx("div", {
-								className: "univer-p-2",
-								children: /* @__PURE__ */ jsx(ColorPicker, {
-									value: secondRowBg,
-									onChange: (val) => setCustomTheme(table.getTableStyleId(), { secondRowStyle: {
-										bg: { rgb: val },
-										cl: { rgb: new ColorKit(val).isDark() ? "#fff" : "#000" }
-									} })
-								})
-							}),
-							children: /* @__PURE__ */ jsxs("div", {
-								className: clsx("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", borderClassName),
-								children: [/* @__PURE__ */ jsx("div", {
-									className: clsx("univer-size-4 univer-rounded-lg univer-bg-gray-400", borderClassName),
-									style: { background: secondRowBg }
-								}), /* @__PURE__ */ jsx(DropdownIcon, { className: "univer-size-2" })]
-							})
-						})]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "univer-flex univer-h-9 univer-gap-2",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: clsx("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", borderClassName, {
-								"univer-text-white": lastRowBgIsDark,
-								"univer-text-gray-900": !lastRowBgIsDark
-							}),
-							style: { background: lastRowBg },
-							children: localeService.t("sheets-table-ui.footer")
-						}), /* @__PURE__ */ jsx(Dropdown, {
-							overlay: /* @__PURE__ */ jsx("div", {
-								className: "univer-p-2",
-								children: /* @__PURE__ */ jsx(ColorPicker, {
-									value: lastRowBg,
-									onChange: (val) => {
-										const lastRowStyle = processStyleWithBorderStyle("lastRowStyle", {
-											bg: { rgb: val },
-											cl: { rgb: new ColorKit(val).isDark() ? "#fff" : "#000" }
-										});
-										setCustomTheme(table.getTableStyleId(), { lastRowStyle });
-									}
-								})
-							}),
-							children: /* @__PURE__ */ jsxs("div", {
-								className: clsx("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", borderClassName),
-								children: [/* @__PURE__ */ jsx("div", {
-									className: clsx("univer-size-4 univer-rounded-lg univer-bg-gray-400", borderClassName),
-									style: { background: lastRowBg }
-								}), /* @__PURE__ */ jsx(DropdownIcon, { className: "univer-size-2" })]
-							})
-						})]
-					})
-				]
-			})] })]
-		})
-	] });
+		super();
+		this._context = _context;
+		this._injector = _injector;
+		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
+		this._sheetInterceptorService = _sheetInterceptorService;
+		this._tableManager = _tableManager;
+		this._rangeThemeModel = _rangeThemeModel;
+		this._commandService = _commandService;
+		_defineProperty(this, "_buttonRenderDisposable", null);
+		_defineProperty(this, "_tableFilterButtonShapes", []);
+		this._initRenderer();
+		this._initCommandExecuted();
+	}
+	dispose() {
+		super.dispose();
+		this._disposeRendering();
+	}
+	_initRenderer() {
+		const tableManager = this._tableManager;
+		this._sheetSkeletonManagerService.currentSkeleton$.pipe(switchMap((skeletonParams) => {
+			var _workbook$getActiveSh;
+			if (!skeletonParams) return of(null);
+			const { unit: workbook, unitId } = this._context;
+			const worksheetId = ((_workbook$getActiveSh = workbook.getActiveSheet()) === null || _workbook$getActiveSh === void 0 ? void 0 : _workbook$getActiveSh.getSheetId()) || "";
+			const getParams = () => ({
+				unitId,
+				worksheetId,
+				tableFilterRanges: this._tableManager.getSheetFilterRangeWithState(workbook.getUnitId(), worksheetId),
+				skeleton: skeletonParams.skeleton
+			});
+			return merge$1(tableManager.tableAdd$, tableManager.tableNameChanged$, tableManager.tableRangeChanged$, tableManager.tableThemeChanged$, tableManager.tableDelete$, tableManager.tableFilterChanged$).pipe(map(() => getParams()), startWith(getParams()));
+		}), takeUntil(this.dispose$)).subscribe((renderParams) => {
+			this._disposeRendering();
+			if (!renderParams || !renderParams.tableFilterRanges) return;
+			this._renderButtons(renderParams);
+		});
+	}
+	_initCommandExecuted() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			var _workbook$getActiveSh2;
+			if (command.id !== SetVerticalTextAlignCommand.id) return;
+			const { unit: workbook, unitId } = this._context;
+			const worksheetId = ((_workbook$getActiveSh2 = workbook.getActiveSheet()) === null || _workbook$getActiveSh2 === void 0 ? void 0 : _workbook$getActiveSh2.getSheetId()) || "";
+			const skeleton = this._sheetSkeletonManagerService.getCurrentSkeleton();
+			if (!skeleton) return;
+			const renderParams = {
+				unitId,
+				worksheetId,
+				tableFilterRanges: this._tableManager.getSheetFilterRangeWithState(workbook.getUnitId(), worksheetId),
+				skeleton
+			};
+			this._disposeRendering();
+			if (!renderParams || !renderParams.tableFilterRanges) return;
+			this._renderButtons(renderParams);
+		}));
+	}
+	_renderButtons(params) {
+		const { tableFilterRanges, unitId, skeleton, worksheetId } = params;
+		const { unit: workbook, scene } = this._context;
+		const worksheet = workbook.getSheetBySheetId(worksheetId);
+		if (!worksheet) return;
+		for (const { range, states, tableId } of tableFilterRanges) {
+			var _this$_rangeThemeMode, _headerStyle$cl$rgb, _headerStyle$cl, _headerStyle$bg$rgb, _headerStyle$bg;
+			const { startRow, startColumn, endColumn } = range;
+			const table = this._tableManager.getTableById(unitId, tableId);
+			const headerStyle = table ? (_this$_rangeThemeMode = this._rangeThemeModel.getRangeThemeStyle(unitId, table.getTableStyleId())) === null || _this$_rangeThemeMode === void 0 ? void 0 : _this$_rangeThemeMode.getHeaderRowStyle() : null;
+			const iconColor = (_headerStyle$cl$rgb = headerStyle === null || headerStyle === void 0 || (_headerStyle$cl = headerStyle.cl) === null || _headerStyle$cl === void 0 ? void 0 : _headerStyle$cl.rgb) !== null && _headerStyle$cl$rgb !== void 0 ? _headerStyle$cl$rgb : "#fff";
+			const hoverIconColor = (_headerStyle$bg$rgb = headerStyle === null || headerStyle === void 0 || (_headerStyle$bg = headerStyle.bg) === null || _headerStyle$bg === void 0 ? void 0 : _headerStyle$bg.rgb) !== null && _headerStyle$bg$rgb !== void 0 ? _headerStyle$bg$rgb : "#202124";
+			this._interceptCellContent(unitId, worksheetId, range);
+			for (let col = startColumn; col <= endColumn; col++) {
+				const key = `sheets-table-filter-button-${startRow}-${col}`;
+				const startPosition = getCoordByCell(startRow, col, scene, skeleton);
+				const cellStyle = worksheet.getCellStyle(startRow, col);
+				const verticalAlign = (cellStyle === null || cellStyle === void 0 ? void 0 : cellStyle.vt) || VerticalAlign.BOTTOM;
+				const { startX, startY, endX, endY } = startPosition;
+				const cellWidth = endX - startX;
+				const cellHeight = endY - startY;
+				if (cellHeight <= 1 || cellWidth <= 1) continue;
+				const state = states[col - startColumn];
+				const props = {
+					left: endX - 16 - 1,
+					top: computeIconTop(startY, endY, cellHeight, verticalAlign),
+					height: 16,
+					width: 16,
+					zIndex: SHEETS_FILTER_BUTTON_Z_INDEX,
+					iconColor,
+					hoverBackground: iconColor,
+					hoverIconColor,
+					cellHeight,
+					cellWidth,
+					filterParams: {
+						unitId,
+						subUnitId: worksheetId,
+						row: startRow,
+						col,
+						buttonState: state,
+						tableId
+					}
+				};
+				const buttonShape = this._injector.createInstance(SheetsTableFilterButtonShape, key, props);
+				this._tableFilterButtonShapes.push(buttonShape);
+			}
+		}
+		scene.addObjects(this._tableFilterButtonShapes);
+		scene.makeDirty();
+	}
+	_interceptCellContent(workbookId, worksheetId, range) {
+		const { startRow, startColumn, endColumn } = range;
+		this._buttonRenderDisposable = this._sheetInterceptorService.intercept(INTERCEPTOR_POINT.CELL_CONTENT, {
+			effect: InterceptorEffectEnum.Style,
+			handler: (cell, pos, next) => {
+				const { row, col, unitId, subUnitId } = pos;
+				if (unitId !== workbookId || subUnitId !== worksheetId || row !== startRow || col < startColumn || col > endColumn) return next(cell);
+				if (!cell || cell === pos.rawData) cell = { ...pos.rawData };
+				cell.fontRenderExtension = {
+					...cell === null || cell === void 0 ? void 0 : cell.fontRenderExtension,
+					rightOffset: 16 + 1 + 2
+				};
+				return next(cell);
+			},
+			priority: 10
+		});
+	}
+	_disposeRendering() {
+		var _this$_buttonRenderDi;
+		this._tableFilterButtonShapes.forEach((s) => s.dispose());
+		(_this$_buttonRenderDi = this._buttonRenderDisposable) === null || _this$_buttonRenderDi === void 0 || _this$_buttonRenderDi.dispose();
+		this._buttonRenderDisposable = null;
+		this._tableFilterButtonShapes = [];
+	}
+};
+SheetsTableFilterButtonRenderController = __decorate([
+	__decorateParam(1, Inject(Injector)),
+	__decorateParam(2, Inject(SheetSkeletonManagerService)),
+	__decorateParam(3, Inject(SheetInterceptorService)),
+	__decorateParam(4, Inject(TableManager)),
+	__decorateParam(5, Inject(SheetRangeThemeModel)),
+	__decorateParam(6, ICommandService)
+], SheetsTableFilterButtonRenderController);
+//#endregion
+//#region src/controllers/sheet-table-render.controller.ts
+let SheetsTableRenderController = class SheetsTableRenderController extends RxDisposable {
+	constructor(_context, _injector, _sheetSkeletonManagerService, _tableManager, _sheetTableThemeUIController) {
+		super();
+		this._context = _context;
+		this._injector = _injector;
+		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
+		this._tableManager = _tableManager;
+		this._sheetTableThemeUIController = _sheetTableThemeUIController;
+		this._initListener();
+	}
+	_dirtySkeleton() {
+		var _this$_context$mainCo;
+		(_this$_context$mainCo = this._context.mainComponent) === null || _this$_context$mainCo === void 0 || _this$_context$mainCo.makeDirty();
+		const currentParam = this._sheetSkeletonManagerService.getCurrentParam();
+		if (currentParam) {
+			const param = {
+				...currentParam,
+				dirty: true
+			};
+			this._sheetSkeletonManagerService.reCalculate(param);
+		}
+	}
+	_initListener() {
+		const tableManager = this._tableManager;
+		const dirtySkeleton = this._dirtySkeleton.bind(this);
+		this.disposeWithMe(merge$1(tableManager.tableAdd$, tableManager.tableDelete$, tableManager.tableNameChanged$, tableManager.tableRangeChanged$, tableManager.tableThemeChanged$, tableManager.tableFilterChanged$, tableManager.tableInitStatus$, this._sheetTableThemeUIController.refreshTable$).subscribe(dirtySkeleton));
+	}
+};
+SheetsTableRenderController = __decorate([
+	__decorateParam(1, Inject(Injector)),
+	__decorateParam(2, Inject(SheetSkeletonManagerService)),
+	__decorateParam(3, Inject(TableManager)),
+	__decorateParam(4, Inject(SheetTableThemeUIController))
+], SheetsTableRenderController);
+//#endregion
+//#region src/controllers/sheet-table-selection.controller.ts
+let SheetTableSelectionController = class SheetTableSelectionController extends Disposable {
+	constructor(_sheetInterceptorService, _univerInstanceService, _tableManager) {
+		super();
+		this._sheetInterceptorService = _sheetInterceptorService;
+		this._univerInstanceService = _univerInstanceService;
+		this._tableManager = _tableManager;
+		this._initSelectionChange();
+	}
+	_initSelectionChange() {
+		this.disposeWithMe(this._sheetInterceptorService.interceptCommand({ getMutations: (command) => {
+			if (command.id === SelectAllCommand.id) {
+				const target = getSheetCommandTarget(this._univerInstanceService);
+				if (!target) return {
+					redos: [],
+					undos: []
+				};
+				const { range } = command.params;
+				const { unitId, subUnitId, worksheet } = target;
+				const overlapTable = this._tableManager.getTablesBySubunitId(unitId, subUnitId).find((table) => {
+					const tableRange = table.getRange();
+					return Rectangle.contains(tableRange, range);
+				});
+				if (overlapTable) {
+					const tableRange = overlapTable.getRange();
+					const tableRangeWithoutHeader = {
+						...tableRange,
+						startRow: tableRange.startRow + 1
+					};
+					if (Rectangle.equals(tableRange, range)) return {
+						undos: [],
+						redos: []
+					};
+					else if (Rectangle.equals(tableRangeWithoutHeader, range)) return {
+						undos: [],
+						redos: [{
+							id: SetSelectionsOperation.id,
+							params: {
+								unitId,
+								subUnitId,
+								selections: [{
+									range: tableRange,
+									primary: getPrimaryForRange(tableRange, worksheet)
+								}]
+							}
+						}]
+					};
+					else return {
+						undos: [],
+						redos: [{
+							id: SetSelectionsOperation.id,
+							params: {
+								unitId,
+								subUnitId,
+								selections: [{
+									range: tableRangeWithoutHeader,
+									primary: getPrimaryForRange(tableRangeWithoutHeader, worksheet)
+								}]
+							}
+						}]
+					};
+				}
+			}
+			return {
+				redos: [],
+				undos: []
+			};
+		} }));
+	}
 };
+SheetTableSelectionController = __decorate([
+	__decorateParam(0, Inject(SheetInterceptorService)),
+	__decorateParam(1, Inject(IUniverInstanceService)),
+	__decorateParam(2, Inject(TableManager))
+], SheetTableSelectionController);
 //#endregion
 //#region src/menu/menu.ts
@@ -2763,7 +2794,7 @@ function sheetTableToolbarInsertMenuFactory(accessor) {
 	return {
 		id: OpenTableSelectorOperation.id,
 		type: MenuItemType.BUTTON,
-		icon: TABLE_TOOLBAR_BUTTON,
+		icon: "TableIcon",
 		tooltip: "sheets-table-ui.title",
 		title: "sheets-table-ui.title",
 		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
@@ -2796,7 +2827,7 @@ function SheetTableInsertRowMenuFactory(accessor) {
 		hidden$: getSheetTableHeaderOperationHidden$(accessor)
 	};
 }
-function SheetTableInsertColMenuFactory(accessor) {
+function SheetTableInsertColMenuFactory() {
 	return {
 		id: SheetTableInsertColCommand.id,
 		title: "sheets-table-ui.insert.col",
@@ -2811,7 +2842,7 @@ function SheetTableRemoveRowMenuFactory(accessor) {
 		hidden$: getSheetTableHeaderOperationHidden$(accessor)
 	};
 }
-function SheetTableRemoveColMenuFactory(accessor) {
+function SheetTableRemoveColMenuFactory() {
 	return {
 		id: SheetTableRemoveColCommand.id,
 		title: "sheets-table-ui.remove.col",
@@ -2904,27 +2935,22 @@ const menuSchema = {
 * limitations under the License.
 */
 let SheetTableMenuController = class SheetTableMenuController extends Disposable {
-	constructor(_componentManager, _menuManagerService) {
+	constructor(_componentManager, _iconManager, _menuManagerService) {
 		super();
 		this._componentManager = _componentManager;
+		this._iconManager = _iconManager;
 		this._menuManagerService = _menuManagerService;
-		this._initComponents();
 		this._initMenu();
 	}
-	_initComponents() {
-		[
-			[TABLE_TOOLBAR_BUTTON, TableIcon],
-			[TABLE_SELECTOR_DIALOG, SheetTableSelector],
-			[SHEET_TABLE_THEME_PANEL, SheetTableThemePanel]
-		].forEach(([key, comp]) => {
-			this.disposeWithMe(this._componentManager.register(key, comp));
-		});
-	}
 	_initMenu() {
 		this._menuManagerService.mergeMenu(menuSchema);
 	}
 };
-SheetTableMenuController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IMenuManagerService))], SheetTableMenuController);
+SheetTableMenuController = __decorate([
+	__decorateParam(0, Inject(ComponentManager)),
+	__decorateParam(1, Inject(IconManager)),
+	__decorateParam(2, Inject(IMenuManagerService))
+], SheetTableMenuController);
 //#endregion
 //#region src/plugin.ts
@@ -2942,6 +2968,8 @@ let UniverSheetsTableUIPlugin = class UniverSheetsTableUIPlugin extends Plugin {
 		this._initRegisterCommand();
 	}
 	onStarting() {
+		this._injector.add([ComponentsController]);
+		this._injector.get(ComponentsController);
 		registerDependencies(this._injector, [
 			[SheetsTableComponentController],
 			[SheetsTableUiService],