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

package/lib/cjs/index.js

@@ -5,9 +5,9 @@ let _univerjs_sheets_table = require("@univerjs/sheets-table");
 let _univerjs_sheets_ui = require("@univerjs/sheets-ui");
 let _univerjs_ui = require("@univerjs/ui");
 let rxjs = require("rxjs");
-let _univerjs_design = require("@univerjs/design");
-let _univerjs_icons = require("@univerjs/icons");
 let _univerjs_sheets = require("@univerjs/sheets");
+let _univerjs_icons = require("@univerjs/icons");
+let _univerjs_design = require("@univerjs/design");
 let _univerjs_sheets_sort = require("@univerjs/sheets-sort");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -16,7 +16,7 @@ let _univerjs_sheets_formula_ui = require("@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
@@ -38,7 +38,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";
@@ -51,7 +50,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) {
@@ -62,7 +61,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];
@@ -75,14 +74,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,
@@ -93,7 +92,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);
@@ -101,7 +100,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);
@@ -109,6 +108,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 _univerjs_core.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((0, rxjs.startWith)(void 0), (0, rxjs.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, _univerjs_core.IContextService),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.SheetCanvasPopManagerService)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_ui.IDialogService))
+], SheetsTableComponentController);
+
+//#endregion
+//#region src/commands/operations/open-table-filter-dialog.opration.ts
+const OpenTableFilterPanelOperation = {
+	type: _univerjs_core.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(_univerjs_sheets_table.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: _univerjs_core.CommandType.OPERATION,
+	id: "sheet.operation.open-table-selector",
+	async handler(accessor) {
+		var _lastSelection$range;
+		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const target = (0, _univerjs_sheets.getSheetCommandTarget)(univerInstanceService);
+		if (!target) return false;
+		const { unitId, subUnitId, worksheet } = target;
+		const lastSelection = accessor.get(_univerjs_sheets.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, (0, _univerjs_sheets.isSingleCellSelection)(lastSelection) ? (0, _univerjs_sheets.expandToContinuousRange)(range, {
+			up: true,
+			left: true,
+			right: true,
+			down: true
+		}, worksheet) : range);
+		if (!rangeInfo) return false;
+		commandService.executeCommand(_univerjs_sheets_table.AddSheetTableCommand.id, { ...rangeInfo });
+		return true;
+	}
+};
+async function openRangeSelector(accessor, unitId, subUnitId, range, tableId) {
+	const dialogService = accessor.get(_univerjs_ui.IDialogService);
+	const localeService = accessor.get(_univerjs_core.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 _univerjs_core.Disposable {
@@ -249,175 +424,175 @@ SheetsTableUiService = __decorate([
 //#endregion
 //#region src/views/components/util.ts
 function getCascaderListOptions(injector) {
-	const t = injector.get(_univerjs_core.LocaleService).t;
+	const localeService = injector.get(_univerjs_core.LocaleService);
 	return [
 		{
 			value: _univerjs_sheets_table.TableConditionTypeEnum.String,
-			label: t(`sheets-table-ui.condition.${_univerjs_sheets_table.TableConditionTypeEnum.String}`),
+			label: localeService.t(`sheets-table-ui.condition.${_univerjs_sheets_table.TableConditionTypeEnum.String}`),
 			children: [
 				{
 					value: _univerjs_sheets_table.TableStringCompareTypeEnum.Equal,
-					label: t(`sheets-table-ui.string.compare.${_univerjs_sheets_table.TableStringCompareTypeEnum.Equal}`)
+					label: localeService.t(`sheets-table-ui.string.compare.${_univerjs_sheets_table.TableStringCompareTypeEnum.Equal}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableStringCompareTypeEnum.NotEqual,
-					label: t(`sheets-table-ui.string.compare.${_univerjs_sheets_table.TableStringCompareTypeEnum.NotEqual}`)
+					label: localeService.t(`sheets-table-ui.string.compare.${_univerjs_sheets_table.TableStringCompareTypeEnum.NotEqual}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableStringCompareTypeEnum.Contains,
-					label: t(`sheets-table-ui.string.compare.${_univerjs_sheets_table.TableStringCompareTypeEnum.Contains}`)
+					label: localeService.t(`sheets-table-ui.string.compare.${_univerjs_sheets_table.TableStringCompareTypeEnum.Contains}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableStringCompareTypeEnum.NotContains,
-					label: t(`sheets-table-ui.string.compare.${_univerjs_sheets_table.TableStringCompareTypeEnum.NotContains}`)
+					label: localeService.t(`sheets-table-ui.string.compare.${_univerjs_sheets_table.TableStringCompareTypeEnum.NotContains}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableStringCompareTypeEnum.StartsWith,
-					label: t(`sheets-table-ui.string.compare.${_univerjs_sheets_table.TableStringCompareTypeEnum.StartsWith}`)
+					label: localeService.t(`sheets-table-ui.string.compare.${_univerjs_sheets_table.TableStringCompareTypeEnum.StartsWith}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableStringCompareTypeEnum.EndsWith,
-					label: t(`sheets-table-ui.string.compare.${_univerjs_sheets_table.TableStringCompareTypeEnum.EndsWith}`)
+					label: localeService.t(`sheets-table-ui.string.compare.${_univerjs_sheets_table.TableStringCompareTypeEnum.EndsWith}`)
 				}
 			]
 		},
 		{
 			value: _univerjs_sheets_table.TableConditionTypeEnum.Number,
-			label: t(`sheets-table-ui.condition.${_univerjs_sheets_table.TableConditionTypeEnum.Number}`),
+			label: localeService.t(`sheets-table-ui.condition.${_univerjs_sheets_table.TableConditionTypeEnum.Number}`),
 			children: [
 				{
 					value: _univerjs_sheets_table.TableNumberCompareTypeEnum.Equal,
-					label: t(`sheets-table-ui.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.Equal}`)
+					label: localeService.t(`sheets-table-ui.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.Equal}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableNumberCompareTypeEnum.NotEqual,
-					label: t(`sheets-table-ui.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.NotEqual}`)
+					label: localeService.t(`sheets-table-ui.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.NotEqual}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableNumberCompareTypeEnum.GreaterThan,
-					label: t(`sheets-table-ui.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.GreaterThan}`)
+					label: localeService.t(`sheets-table-ui.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.GreaterThan}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableNumberCompareTypeEnum.GreaterThanOrEqual,
-					label: t(`sheets-table-ui.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.GreaterThanOrEqual}`)
+					label: localeService.t(`sheets-table-ui.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.GreaterThanOrEqual}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableNumberCompareTypeEnum.LessThan,
-					label: t(`sheets-table-ui.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.LessThan}`)
+					label: localeService.t(`sheets-table-ui.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.LessThan}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableNumberCompareTypeEnum.LessThanOrEqual,
-					label: t(`sheets-table-ui.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.LessThanOrEqual}`)
+					label: localeService.t(`sheets-table-ui.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.LessThanOrEqual}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableNumberCompareTypeEnum.Between,
-					label: t(`sheets-table-ui.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.Between}`)
+					label: localeService.t(`sheets-table-ui.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.Between}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableNumberCompareTypeEnum.NotBetween,
-					label: t(`sheets-table-ui.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.NotBetween}`)
+					label: localeService.t(`sheets-table-ui.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.NotBetween}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableNumberCompareTypeEnum.Above,
-					label: t(`sheets-table-ui.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.Above}`)
+					label: localeService.t(`sheets-table-ui.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.Above}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableNumberCompareTypeEnum.Below,
-					label: t(`sheets-table-ui.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.Below}`)
+					label: localeService.t(`sheets-table-ui.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.Below}`)
 				}
 			]
 		},
 		{
 			value: _univerjs_sheets_table.TableConditionTypeEnum.Date,
-			label: t(`sheets-table-ui.condition.${_univerjs_sheets_table.TableConditionTypeEnum.Date}`),
+			label: localeService.t(`sheets-table-ui.condition.${_univerjs_sheets_table.TableConditionTypeEnum.Date}`),
 			children: [
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.Equal,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Equal}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Equal}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.NotEqual,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.NotEqual}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.NotEqual}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.After,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.After}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.After}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.AfterOrEqual,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.AfterOrEqual}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.AfterOrEqual}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.Before,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Before}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Before}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.BeforeOrEqual,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.BeforeOrEqual}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.BeforeOrEqual}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.Between,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Between}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Between}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.NotBetween,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.NotBetween}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.NotBetween}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.Today,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Today}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Today}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.Yesterday,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Yesterday}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Yesterday}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.Tomorrow,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Tomorrow}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Tomorrow}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.ThisWeek,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.ThisWeek}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.ThisWeek}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.LastWeek,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.LastWeek}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.LastWeek}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.NextWeek,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.NextWeek}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.NextWeek}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.ThisMonth,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.ThisMonth}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.ThisMonth}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.LastMonth,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.LastMonth}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.LastMonth}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.NextMonth,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.NextMonth}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.NextMonth}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.ThisYear,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.ThisYear}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.ThisYear}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.LastYear,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.LastYear}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.LastYear}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.NextYear,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.NextYear}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.NextYear}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.Quarter,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Quarter}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Quarter}`)
 				},
 				{
 					value: _univerjs_sheets_table.TableDateCompareTypeEnum.Month,
-					label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Month}`)
+					label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Month}`)
 				}
 			]
 		}
@@ -425,80 +600,80 @@ function getCascaderListOptions(injector) {
 }
 function getConditionDateSelect(injector, dateType) {
 	if (!dateType) return [];
-	const t = injector.get(_univerjs_core.LocaleService).t;
+	const localeService = injector.get(_univerjs_core.LocaleService);
 	switch (dateType) {
 		case _univerjs_sheets_table.TableDateCompareTypeEnum.Quarter: return [
 			{
 				value: _univerjs_sheets_table.TableDateCompareTypeEnum.Q1,
-				label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Q1}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Q1}`)
 			},
 			{
 				value: _univerjs_sheets_table.TableDateCompareTypeEnum.Q2,
-				label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Q2}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Q2}`)
 			},
 			{
 				value: _univerjs_sheets_table.TableDateCompareTypeEnum.Q3,
-				label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Q3}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Q3}`)
 			},
 			{
 				value: _univerjs_sheets_table.TableDateCompareTypeEnum.Q4,
-				label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Q4}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Q4}`)
 			}
 		];
 		case _univerjs_sheets_table.TableDateCompareTypeEnum.Month: return [
 			{
 				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M1,
-				label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M1}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M1}`)
 			},
 			{
 				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M2,
-				label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M2}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M2}`)
 			},
 			{
 				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M3,
-				label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M3}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M3}`)
 			},
 			{
 				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M4,
-				label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M4}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M4}`)
 			},
 			{
 				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M5,
-				label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M5}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M5}`)
 			},
 			{
 				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M6,
-				label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M6}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M6}`)
 			},
 			{
 				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M7,
-				label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M7}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M7}`)
 			},
 			{
 				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M8,
-				label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M8}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M8}`)
 			},
 			{
 				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M9,
-				label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M9}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M9}`)
 			},
 			{
 				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M10,
-				label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M10}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M10}`)
 			},
 			{
 				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M11,
-				label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M11}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M11}`)
 			},
 			{
 				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M12,
-				label: t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M12}`)
+				label: localeService.t(`sheets-table-ui.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M12}`)
 			}
 		];
 		default: return [];
 	}
 }
-const datePickerSet = new Set([
+const datePickerSet = /* @__PURE__ */ new Set([
 	_univerjs_sheets_table.TableDateCompareTypeEnum.Equal,
 	_univerjs_sheets_table.TableDateCompareTypeEnum.NotEqual,
 	_univerjs_sheets_table.TableDateCompareTypeEnum.After,
@@ -522,7 +697,7 @@ function getSubComponentType(type, compare) {
 function getInitConditionInfo(tableFilter) {
 	if (!tableFilter || tableFilter.filterType !== "condition") return {
 		type: _univerjs_sheets_table.TableConditionTypeEnum.String,
-		compareType: _univerjs_sheets_table.TableStringCompareTypeEnum.Equal,
+		compare: _univerjs_sheets_table.TableStringCompareTypeEnum.Equal,
 		info: {}
 	};
 	const filterInfo = tableFilter.filterInfo;
@@ -551,12 +726,12 @@ function getInitConditionInfo(tableFilter) {
 			compare: compareType,
 			info: { date }
 		};
-	} else if (new Set([
+	} else if ((/* @__PURE__ */ new Set([
 		_univerjs_sheets_table.TableDateCompareTypeEnum.Q1,
 		_univerjs_sheets_table.TableDateCompareTypeEnum.Q2,
 		_univerjs_sheets_table.TableDateCompareTypeEnum.Q3,
 		_univerjs_sheets_table.TableDateCompareTypeEnum.Q4
-	]).has(compareType)) return {
+	])).has(compareType)) return {
 		type: conditionType,
 		compare: _univerjs_sheets_table.TableDateCompareTypeEnum.Quarter,
 		info: { dateSelect: filterInfo.compareType }
@@ -713,10 +888,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;
 };
@@ -725,7 +901,7 @@ function SheetTableItemsFilterPanel(props) {
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const { data: items, itemsCountMap, allItemsCount } = (0, _univerjs_ui.useDependency)(SheetsTableUiService).getTableFilterItems(unitId, subUnitId, tableId, columnIndex);
 	const [allChecked, setAllChecked] = (0, react.useState)(tableFilter === void 0 ? true : checkedItemSet.size === itemsCountMap.size);
-	const [checkedCount, setCheckedCount] = (0, react.useState)(allChecked ? allItemsCount : getCheckedCount(itemsCountMap));
+	const [checkedCount, setCheckedCount] = (0, react.useState)(allChecked ? allItemsCount : getCheckedItemCount(itemsCountMap, checkedItemSet));
 	const indeterminate = !allChecked && checkedItemSet.size > 0;
 	const [searchText, setSearchText] = (0, react.useState)("");
 	const displayItems = (0, react.useMemo)(() => {
@@ -1151,206 +1327,486 @@ function SheetTableRenameDialog(props) {
 }
 
 //#endregion
-//#region src/controllers/sheet-table-component.controller.ts
-let SheetsTableComponentController = class SheetsTableComponentController extends _univerjs_core.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((0, rxjs.startWith)(void 0), (0, rxjs.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, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)),
-	__decorateParam(1, _univerjs_core.IContextService),
-	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.SheetCanvasPopManagerService)),
-	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_ui.IDialogService))
-], SheetsTableComponentController);
-
-//#endregion
-//#region src/commands/operations/open-table-filter-dialog.opration.ts
-const OpenTableFilterPanelOperation = {
-	type: _univerjs_core.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(_univerjs_sheets_table.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 = (0, _univerjs_ui.useDependency)(_univerjs_sheets_table.TableManager);
+	const [selectedRange, setSelectedRange] = (0, react.useState)(range);
+	const [rangeError, setRangeError] = (0, react.useState)("");
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_sheets_formula_ui.RangeSelector, {
+			maxRangeCount: 1,
 			unitId,
 			subUnitId,
-			row,
-			tableId,
-			column: col
-		});
-		return true;
-	}
+			initialValue: (0, _univerjs_engine_formula.serializeRange)(range),
+			onChange: (_, text) => {
+				const originValue = (0, _univerjs_engine_formula.serializeRange)(range);
+				const newRange = (0, _univerjs_engine_formula.deserializeRangeWithSheet)(text).range;
+				const target = (0, _univerjs_sheets.getSheetCommandTarget)(univerInstanceService, {
+					unitId,
+					subUnitId
+				});
+				if (!target) return;
+				if (target.worksheet.getMergeData().some((merge) => {
+					return _univerjs_core.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 _univerjs_core.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 (_univerjs_core.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__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-mt-1 univer-text-xs univer-text-red-500",
+			children: rangeError
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "univer-mt-4 univer-flex univer-justify-end",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+				onClick: onCancel,
+				children: localeService.t("sheets-table-ui.cancel")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.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: _univerjs_core.CommandType.OPERATION,
-	id: "sheet.operation.open-table-selector",
-	async handler(accessor) {
-		var _lastSelection$range;
-		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
-		const commandService = accessor.get(_univerjs_core.ICommandService);
-		const target = (0, _univerjs_sheets.getSheetCommandTarget)(univerInstanceService);
-		if (!target) return false;
-		const { unitId, subUnitId, worksheet } = target;
-		const lastSelection = accessor.get(_univerjs_sheets.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, (0, _univerjs_sheets.isSingleCellSelection)(lastSelection) ? (0, _univerjs_sheets.expandToContinuousRange)(range, {
-			up: true,
-			left: true,
-			right: true,
-			down: true
-		}, worksheet) : range);
-		if (!rangeInfo) return false;
-		commandService.executeCommand(_univerjs_sheets_table.AddSheetTableCommand.id, { ...rangeInfo });
-		return true;
+//#region src/controllers/sheet-table-theme-ui.controller.ts
+let SheetTableThemeUIController = class SheetTableThemeUIController extends _univerjs_core.Disposable {
+	constructor(_commandService) {
+		super();
+		this._commandService = _commandService;
+		_defineProperty(this, "_refreshTable", new rxjs.Subject());
+		_defineProperty(this, "refreshTable$", this._refreshTable.asObservable());
+		this._initListener();
+	}
+	_initListener() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id === _univerjs_sheets.SetRangeThemeMutation.id) {
+				const { styleName } = command.params;
+				if (styleName.startsWith(_univerjs_sheets_table.SHEET_TABLE_CUSTOM_THEME_PREFIX)) this._refreshTable.next(Math.random());
+			}
+		}));
 	}
 };
-async function openRangeSelector(accessor, unitId, subUnitId, range, tableId) {
-	const dialogService = accessor.get(_univerjs_ui.IDialogService);
-	const localeService = accessor.get(_univerjs_core.LocaleService);
-	return new Promise((resolve) => {
-		const dialogProps = {
+SheetTableThemeUIController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.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 = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const tableManager = (0, _univerjs_ui.useDependency)(_univerjs_sheets_table.TableManager);
+	const table = tableManager.getTableById(unitId, tableId);
+	const rangeThemeModel = (0, _univerjs_ui.useDependency)(_univerjs_sheets.SheetRangeThemeModel);
+	const sheetTableThemeUIController = (0, _univerjs_ui.useDependency)(SheetTableThemeUIController);
+	const rangeThemeMapChanged = (0, _univerjs_ui.useObservable)(rangeThemeModel.rangeThemeMapChange$);
+	const tableRefresh = (0, _univerjs_ui.useObservable)(sheetTableThemeUIController.refreshTable$);
+	const errorService = (0, _univerjs_ui.useDependency)(_univerjs_core.ErrorService);
+	const [, setRefresh] = (0, react.useState)(Math.random());
+	const themeConfig = (0, _univerjs_ui.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] = (0, react.useState)(null);
+	const handleThemeChange = (theme) => {
+		commandService.executeCommand(_univerjs_sheets_table.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 _univerjs_sheets.RangeThemeStyle(newThemeName, { ..._univerjs_sheets_table.customEmptyThemeWithBorderStyle });
+		commandService.executeCommand(_univerjs_sheets_table.AddTableThemeCommand.id, {
+			unitId,
+			tableId,
+			themeStyle: newTheme
+		});
+	};
+	const setCustomTheme = (themeName, tableThemeStyle) => {
+		commandService.executeCommand(_univerjs_sheets.SetRangeThemeMutation.id, {
 			unitId,
 			subUnitId,
-			range,
+			styleName: themeName,
+			style: tableThemeStyle
+		});
+	};
+	const removeCustomTheme = (themeName) => {
+		commandService.executeCommand(_univerjs_sheets_table.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)"
+	};
+	(0, react.useEffect)(() => {
+		setRefresh(Math.random());
+	}, [rangeThemeMapChanged, tableRefresh]);
+	if (!table) return null;
+	const headerBgIsDark = new _univerjs_core.ColorKit(headerBg).isDark();
+	const firstRowBgIsDark = new _univerjs_core.ColorKit(firstRowBg).isDark();
+	const secondRowBgIsDark = new _univerjs_core.ColorKit(secondRowBg).isDark();
+	const lastRowBgIsDark = new _univerjs_core.ColorKit(lastRowBg).isDark();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h5", { children: localeService.t("sheets-table-ui.defaultStyle") }),
+		/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: (0, _univerjs_design.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__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+							background: headerRowBg,
+							border: `${headerRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
+						} }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+							background: firstRowBg,
+							border: `${firstRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
+						} }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+							background: secondRowBg,
+							border: `${secondRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
+						} }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+							background: lastRowBg,
+							border: `${lastRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
+						} })
+					]
+				}, item);
+			})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h5", { children: localeService.t("sheets-table-ui.customStyle") }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, _univerjs_design.clsx)("univer-w-full univer-rounded-sm", _univerjs_design.borderClassName),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-flex univer-flex-wrap univer-gap-2 univer-p-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, _univerjs_design.clsx)("univer-h-10 univer-w-8 univer-cursor-pointer univer-p-px univer-text-center univer-leading-10", _univerjs_design.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: (0, _univerjs_design.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "univer-h-px univer-w-full univer-bg-gray-200" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-flex univer-flex-col univer-gap-2 univer-p-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "univer-flex univer-h-9 univer-gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: (0, _univerjs_design.clsx)("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", _univerjs_design.borderClassName, {
+								"univer-text-white": headerBgIsDark,
+								"univer-text-gray-900": !headerBgIsDark
+							}),
+							style: { background: headerBg },
+							children: localeService.t("sheets-table-ui.header")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
+							overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "univer-p-2",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ColorPicker, {
+									value: headerBg,
+									onChange: (val) => {
+										const headerRowStyle = (0, _univerjs_sheets_table.processStyleWithBorderStyle)("headerRowStyle", {
+											bg: { rgb: val },
+											cl: { rgb: new _univerjs_core.ColorKit(val).isDark() ? "#fff" : "#000" }
+										});
+										setCustomTheme(table.getTableStyleId(), { headerRowStyle });
+									}
+								})
+							}),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: (0, _univerjs_design.clsx)("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", _univerjs_design.borderClassName),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: (0, _univerjs_design.clsx)("univer-size-4 univer-rounded-lg univer-bg-gray-400", _univerjs_design.borderClassName, {
+										"univer-text-white": headerBgIsDark,
+										"univer-text-gray-900": !headerBgIsDark
+									}),
+									style: { background: headerBg }
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DropdownIcon, { className: "univer-size-2" })]
+							})
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "univer-flex univer-h-9 univer-gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: (0, _univerjs_design.clsx)("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", _univerjs_design.borderClassName, {
+								"univer-text-white": firstRowBgIsDark,
+								"univer-text-gray-900": !firstRowBgIsDark
+							}),
+							style: { background: firstRowBg },
+							children: localeService.t("sheets-table-ui.firstLine")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
+							overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "univer-p-2",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ColorPicker, {
+									value: firstRowBg,
+									onChange: (val) => {
+										setCustomTheme(table.getTableStyleId(), { firstRowStyle: {
+											bg: { rgb: val },
+											cl: { rgb: new _univerjs_core.ColorKit(val).isDark() ? "#fff" : "#000" }
+										} });
+									}
+								})
+							}),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: (0, _univerjs_design.clsx)("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", _univerjs_design.borderClassName),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: (0, _univerjs_design.clsx)("univer-size-4 univer-rounded-lg univer-bg-gray-400", _univerjs_design.borderClassName),
+									style: { background: firstRowBg }
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DropdownIcon, { className: "univer-size-2" })]
+							})
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "univer-flex univer-h-9 univer-gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: (0, _univerjs_design.clsx)("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", _univerjs_design.borderClassName, {
+								"univer-text-white": secondRowBgIsDark,
+								"univer-text-gray-900": !secondRowBgIsDark
+							}),
+							style: { background: secondRowBg },
+							children: localeService.t("sheets-table-ui.secondLine")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
+							overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "univer-p-2",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ColorPicker, {
+									value: secondRowBg,
+									onChange: (val) => setCustomTheme(table.getTableStyleId(), { secondRowStyle: {
+										bg: { rgb: val },
+										cl: { rgb: new _univerjs_core.ColorKit(val).isDark() ? "#fff" : "#000" }
+									} })
+								})
+							}),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: (0, _univerjs_design.clsx)("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", _univerjs_design.borderClassName),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: (0, _univerjs_design.clsx)("univer-size-4 univer-rounded-lg univer-bg-gray-400", _univerjs_design.borderClassName),
+									style: { background: secondRowBg }
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DropdownIcon, { className: "univer-size-2" })]
+							})
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "univer-flex univer-h-9 univer-gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: (0, _univerjs_design.clsx)("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", _univerjs_design.borderClassName, {
+								"univer-text-white": lastRowBgIsDark,
+								"univer-text-gray-900": !lastRowBgIsDark
+							}),
+							style: { background: lastRowBg },
+							children: localeService.t("sheets-table-ui.footer")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
+							overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "univer-p-2",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ColorPicker, {
+									value: lastRowBg,
+									onChange: (val) => {
+										const lastRowStyle = (0, _univerjs_sheets_table.processStyleWithBorderStyle)("lastRowStyle", {
+											bg: { rgb: val },
+											cl: { rgb: new _univerjs_core.ColorKit(val).isDark() ? "#fff" : "#000" }
+										});
+										setCustomTheme(table.getTableStyleId(), { lastRowStyle });
+									}
+								})
+							}),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: (0, _univerjs_design.clsx)("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", _univerjs_design.borderClassName),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: (0, _univerjs_design.clsx)("univer-size-4 univer-rounded-lg univer-bg-gray-400", _univerjs_design.borderClassName),
+									style: { background: lastRowBg }
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.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 _univerjs_core.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: _univerjs_icons.TableIcon }));
+	}
+};
+ComponentsController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_ui.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",
@@ -1624,32 +2080,11 @@ var SheetTableControlsShape = class extends _univerjs_engine_render.Shape {
 	}
 };
 
-//#endregion
-//#region src/controllers/sheet-table-theme-ui.controller.ts
-let SheetTableThemeUIController = class SheetTableThemeUIController extends _univerjs_core.Disposable {
-	constructor(_commandService) {
-		super();
-		this._commandService = _commandService;
-		_defineProperty(this, "_refreshTable", new rxjs.Subject());
-		_defineProperty(this, "refreshTable$", this._refreshTable.asObservable());
-		this._initListener();
-	}
-	_initListener() {
-		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
-			if (command.id === _univerjs_sheets.SetRangeThemeMutation.id) {
-				const { styleName } = command.params;
-				if (styleName.startsWith(_univerjs_sheets_table.SHEET_TABLE_CUSTOM_THEME_PREFIX)) this._refreshTable.next(Math.random());
-			}
-		}));
-	}
-};
-SheetTableThemeUIController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.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([_univerjs_sheets_ui.SetScrollOperation.id, _univerjs_sheets_ui.SetZoomRatioOperation.id]);
+const TABLE_RENDER_REFRESH_COMMANDS = /* @__PURE__ */ new Set([_univerjs_sheets_ui.SetScrollOperation.id, _univerjs_sheets_ui.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;
@@ -2098,663 +2533,259 @@ const computeIconTop = (startY, endY, cellHeight, verticalAlign) => {
 };
 let SheetsTableFilterButtonRenderController = class SheetsTableFilterButtonRenderController extends _univerjs_core.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((0, rxjs.switchMap)((skeletonParams) => {
-			var _workbook$getActiveSh;
-			if (!skeletonParams) return (0, rxjs.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 (0, rxjs.merge)(tableManager.tableAdd$, tableManager.tableNameChanged$, tableManager.tableRangeChanged$, tableManager.tableThemeChanged$, tableManager.tableDelete$, tableManager.tableFilterChanged$).pipe((0, rxjs.map)(() => getParams()), (0, rxjs.startWith)(getParams()));
-		}), (0, rxjs.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 !== _univerjs_sheets.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 = (0, _univerjs_sheets_ui.getCoordByCell)(startRow, col, scene, skeleton);
-				const cellStyle = worksheet.getCellStyle(startRow, col);
-				const verticalAlign = (cellStyle === null || cellStyle === void 0 ? void 0 : cellStyle.vt) || _univerjs_core.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(_univerjs_sheets.INTERCEPTOR_POINT.CELL_CONTENT, {
-			effect: _univerjs_core.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, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
-	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.SheetSkeletonManagerService)),
-	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetInterceptorService)),
-	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_sheets_table.TableManager)),
-	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetRangeThemeModel)),
-	__decorateParam(6, _univerjs_core.ICommandService)
-], SheetsTableFilterButtonRenderController);
-
-//#endregion
-//#region src/controllers/sheet-table-render.controller.ts
-let SheetsTableRenderController = class SheetsTableRenderController extends _univerjs_core.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((0, rxjs.merge)(tableManager.tableAdd$, tableManager.tableDelete$, tableManager.tableNameChanged$, tableManager.tableRangeChanged$, tableManager.tableThemeChanged$, tableManager.tableFilterChanged$, tableManager.tableInitStatus$, this._sheetTableThemeUIController.refreshTable$).subscribe(dirtySkeleton));
-	}
-};
-SheetsTableRenderController = __decorate([
-	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
-	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.SheetSkeletonManagerService)),
-	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_sheets_table.TableManager)),
-	__decorateParam(4, (0, _univerjs_core.Inject)(SheetTableThemeUIController))
-], SheetsTableRenderController);
-
-//#endregion
-//#region src/controllers/sheet-table-selection.controller.ts
-let SheetTableSelectionController = class SheetTableSelectionController extends _univerjs_core.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 === _univerjs_sheets_ui.SelectAllCommand.id) {
-				const target = (0, _univerjs_sheets.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 _univerjs_core.Rectangle.contains(tableRange, range);
-				});
-				if (overlapTable) {
-					const tableRange = overlapTable.getRange();
-					const tableRangeWithoutHeader = {
-						...tableRange,
-						startRow: tableRange.startRow + 1
-					};
-					if (_univerjs_core.Rectangle.equals(tableRange, range)) return {
-						undos: [],
-						redos: []
-					};
-					else if (_univerjs_core.Rectangle.equals(tableRangeWithoutHeader, range)) return {
-						undos: [],
-						redos: [{
-							id: _univerjs_sheets.SetSelectionsOperation.id,
-							params: {
-								unitId,
-								subUnitId,
-								selections: [{
-									range: tableRange,
-									primary: (0, _univerjs_sheets.getPrimaryForRange)(tableRange, worksheet)
-								}]
-							}
-						}]
-					};
-					else return {
-						undos: [],
-						redos: [{
-							id: _univerjs_sheets.SetSelectionsOperation.id,
-							params: {
-								unitId,
-								subUnitId,
-								selections: [{
-									range: tableRangeWithoutHeader,
-									primary: (0, _univerjs_sheets.getPrimaryForRange)(tableRangeWithoutHeader, worksheet)
-								}]
-							}
-						}]
-					};
-				}
-			}
-			return {
-				redos: [],
-				undos: []
-			};
-		} }));
-	}
-};
-SheetTableSelectionController = __decorate([
-	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetInterceptorService)),
-	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.IUniverInstanceService)),
-	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets_table.TableManager))
-], SheetTableSelectionController);
-
-//#endregion
-//#region src/views/components/SheetTableSelector.tsx
-const SheetTableSelector = (props) => {
-	const { unitId, subUnitId, range, onCancel, onConfirm, tableId } = props;
-	const tableManager = (0, _univerjs_ui.useDependency)(_univerjs_sheets_table.TableManager);
-	const [selectedRange, setSelectedRange] = (0, react.useState)(range);
-	const [rangeError, setRangeError] = (0, react.useState)("");
-	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_sheets_formula_ui.RangeSelector, {
-			maxRangeCount: 1,
-			unitId,
-			subUnitId,
-			initialValue: (0, _univerjs_engine_formula.serializeRange)(range),
-			onChange: (_, text) => {
-				const originValue = (0, _univerjs_engine_formula.serializeRange)(range);
-				const newRange = (0, _univerjs_engine_formula.deserializeRangeWithSheet)(text).range;
-				const target = (0, _univerjs_sheets.getSheetCommandTarget)(univerInstanceService, {
-					unitId,
-					subUnitId
-				});
-				if (!target) return;
-				if (target.worksheet.getMergeData().some((merge) => {
-					return _univerjs_core.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 _univerjs_core.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 (_univerjs_core.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__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-mt-1 univer-text-xs univer-text-red-500",
-			children: rangeError
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "univer-mt-4 univer-flex univer-justify-end",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
-				onClick: onCancel,
-				children: localeService.t("sheets-table-ui.cancel")
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.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 = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
-	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const tableManager = (0, _univerjs_ui.useDependency)(_univerjs_sheets_table.TableManager);
-	const table = tableManager.getTableById(unitId, tableId);
-	const rangeThemeModel = (0, _univerjs_ui.useDependency)(_univerjs_sheets.SheetRangeThemeModel);
-	const sheetTableThemeUIController = (0, _univerjs_ui.useDependency)(SheetTableThemeUIController);
-	const rangeThemeMapChanged = (0, _univerjs_ui.useObservable)(rangeThemeModel.rangeThemeMapChange$);
-	const tableRefresh = (0, _univerjs_ui.useObservable)(sheetTableThemeUIController.refreshTable$);
-	const errorService = (0, _univerjs_ui.useDependency)(_univerjs_core.ErrorService);
-	const [, setRefresh] = (0, react.useState)(Math.random());
-	const themeConfig = (0, _univerjs_ui.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] = (0, react.useState)(null);
-	const handleThemeChange = (theme) => {
-		commandService.executeCommand(_univerjs_sheets_table.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 _univerjs_sheets.RangeThemeStyle(newThemeName, { ..._univerjs_sheets_table.customEmptyThemeWithBorderStyle });
-		commandService.executeCommand(_univerjs_sheets_table.AddTableThemeCommand.id, {
-			unitId,
-			tableId,
-			themeStyle: newTheme
-		});
-	};
-	const setCustomTheme = (themeName, tableThemeStyle) => {
-		commandService.executeCommand(_univerjs_sheets.SetRangeThemeMutation.id, {
-			unitId,
-			subUnitId,
-			styleName: themeName,
-			style: tableThemeStyle
-		});
-	};
-	const removeCustomTheme = (themeName) => {
-		commandService.executeCommand(_univerjs_sheets_table.RemoveTableThemeCommand.id, {
-			unitId,
-			tableId,
-			themeName
-		});
-	};
-	(0, react.useEffect)(() => {
-		setRefresh(Math.random());
-	}, [rangeThemeMapChanged, tableRefresh]);
-	if (!table) return null;
-	const headerBgIsDark = new _univerjs_core.ColorKit(headerBg).isDark();
-	const firstRowBgIsDark = new _univerjs_core.ColorKit(firstRowBg).isDark();
-	const secondRowBgIsDark = new _univerjs_core.ColorKit(secondRowBg).isDark();
-	const lastRowBgIsDark = new _univerjs_core.ColorKit(lastRowBg).isDark();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h5", { children: localeService.t("sheets-table-ui.defaultStyle") }),
-		/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: (0, _univerjs_design.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__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-							background: headerRowBg,
-							border: `${headerRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-						} }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-							background: firstRowBg,
-							border: `${firstRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-						} }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-							background: secondRowBg,
-							border: `${secondRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-						} }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-							background: lastRowBg,
-							border: `${lastRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-						} })
-					]
-				}, item);
-			})
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h5", { children: localeService.t("sheets-table-ui.customStyle") }),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, _univerjs_design.clsx)("univer-w-full univer-rounded-sm", _univerjs_design.borderClassName),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-flex univer-flex-wrap univer-gap-2 univer-p-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: (0, _univerjs_design.clsx)("univer-h-10 univer-w-8 univer-cursor-pointer univer-p-px univer-text-center univer-leading-10", _univerjs_design.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: (0, _univerjs_design.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "univer-h-px univer-w-full univer-bg-gray-200" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-flex univer-flex-col univer-gap-2 univer-p-2",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "univer-flex univer-h-9 univer-gap-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: (0, _univerjs_design.clsx)("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", _univerjs_design.borderClassName, {
-								"univer-text-white": headerBgIsDark,
-								"univer-text-gray-900": !headerBgIsDark
-							}),
-							style: { background: headerBg },
-							children: localeService.t("sheets-table-ui.header")
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
-							overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "univer-p-2",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ColorPicker, {
-									value: headerBg,
-									onChange: (val) => {
-										const headerRowStyle = (0, _univerjs_sheets_table.processStyleWithBorderStyle)("headerRowStyle", {
-											bg: { rgb: val },
-											cl: { rgb: new _univerjs_core.ColorKit(val).isDark() ? "#fff" : "#000" }
-										});
-										setCustomTheme(table.getTableStyleId(), { headerRowStyle });
-									}
-								})
-							}),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: (0, _univerjs_design.clsx)("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", _univerjs_design.borderClassName),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: (0, _univerjs_design.clsx)("univer-size-4 univer-rounded-lg univer-bg-gray-400", _univerjs_design.borderClassName, {
-										"univer-text-white": headerBgIsDark,
-										"univer-text-gray-900": !headerBgIsDark
-									}),
-									style: { background: headerBg }
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DropdownIcon, { className: "univer-size-2" })]
-							})
-						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "univer-flex univer-h-9 univer-gap-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: (0, _univerjs_design.clsx)("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", _univerjs_design.borderClassName, {
-								"univer-text-white": firstRowBgIsDark,
-								"univer-text-gray-900": !firstRowBgIsDark
-							}),
-							style: { background: firstRowBg },
-							children: localeService.t("sheets-table-ui.firstLine")
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
-							overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "univer-p-2",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ColorPicker, {
-									value: firstRowBg,
-									onChange: (val) => {
-										setCustomTheme(table.getTableStyleId(), { firstRowStyle: {
-											bg: { rgb: val },
-											cl: { rgb: new _univerjs_core.ColorKit(val).isDark() ? "#fff" : "#000" }
-										} });
-									}
-								})
-							}),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: (0, _univerjs_design.clsx)("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", _univerjs_design.borderClassName),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: (0, _univerjs_design.clsx)("univer-size-4 univer-rounded-lg univer-bg-gray-400", _univerjs_design.borderClassName),
-									style: { background: firstRowBg }
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DropdownIcon, { className: "univer-size-2" })]
-							})
-						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "univer-flex univer-h-9 univer-gap-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: (0, _univerjs_design.clsx)("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", _univerjs_design.borderClassName, {
-								"univer-text-white": secondRowBgIsDark,
-								"univer-text-gray-900": !secondRowBgIsDark
-							}),
-							style: { background: secondRowBg },
-							children: localeService.t("sheets-table-ui.secondLine")
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
-							overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "univer-p-2",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ColorPicker, {
-									value: secondRowBg,
-									onChange: (val) => setCustomTheme(table.getTableStyleId(), { secondRowStyle: {
-										bg: { rgb: val },
-										cl: { rgb: new _univerjs_core.ColorKit(val).isDark() ? "#fff" : "#000" }
-									} })
-								})
-							}),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: (0, _univerjs_design.clsx)("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", _univerjs_design.borderClassName),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: (0, _univerjs_design.clsx)("univer-size-4 univer-rounded-lg univer-bg-gray-400", _univerjs_design.borderClassName),
-									style: { background: secondRowBg }
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DropdownIcon, { className: "univer-size-2" })]
-							})
-						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "univer-flex univer-h-9 univer-gap-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: (0, _univerjs_design.clsx)("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", _univerjs_design.borderClassName, {
-								"univer-text-white": lastRowBgIsDark,
-								"univer-text-gray-900": !lastRowBgIsDark
-							}),
-							style: { background: lastRowBg },
-							children: localeService.t("sheets-table-ui.footer")
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
-							overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "univer-p-2",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ColorPicker, {
-									value: lastRowBg,
-									onChange: (val) => {
-										const lastRowStyle = (0, _univerjs_sheets_table.processStyleWithBorderStyle)("lastRowStyle", {
-											bg: { rgb: val },
-											cl: { rgb: new _univerjs_core.ColorKit(val).isDark() ? "#fff" : "#000" }
-										});
-										setCustomTheme(table.getTableStyleId(), { lastRowStyle });
-									}
-								})
-							}),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: (0, _univerjs_design.clsx)("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", _univerjs_design.borderClassName),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: (0, _univerjs_design.clsx)("univer-size-4 univer-rounded-lg univer-bg-gray-400", _univerjs_design.borderClassName),
-									style: { background: lastRowBg }
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.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((0, rxjs.switchMap)((skeletonParams) => {
+			var _workbook$getActiveSh;
+			if (!skeletonParams) return (0, rxjs.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 (0, rxjs.merge)(tableManager.tableAdd$, tableManager.tableNameChanged$, tableManager.tableRangeChanged$, tableManager.tableThemeChanged$, tableManager.tableDelete$, tableManager.tableFilterChanged$).pipe((0, rxjs.map)(() => getParams()), (0, rxjs.startWith)(getParams()));
+		}), (0, rxjs.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 !== _univerjs_sheets.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 = (0, _univerjs_sheets_ui.getCoordByCell)(startRow, col, scene, skeleton);
+				const cellStyle = worksheet.getCellStyle(startRow, col);
+				const verticalAlign = (cellStyle === null || cellStyle === void 0 ? void 0 : cellStyle.vt) || _univerjs_core.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(_univerjs_sheets.INTERCEPTOR_POINT.CELL_CONTENT, {
+			effect: _univerjs_core.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, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.SheetSkeletonManagerService)),
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetInterceptorService)),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_sheets_table.TableManager)),
+	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetRangeThemeModel)),
+	__decorateParam(6, _univerjs_core.ICommandService)
+], SheetsTableFilterButtonRenderController);
+
+//#endregion
+//#region src/controllers/sheet-table-render.controller.ts
+let SheetsTableRenderController = class SheetsTableRenderController extends _univerjs_core.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((0, rxjs.merge)(tableManager.tableAdd$, tableManager.tableDelete$, tableManager.tableNameChanged$, tableManager.tableRangeChanged$, tableManager.tableThemeChanged$, tableManager.tableFilterChanged$, tableManager.tableInitStatus$, this._sheetTableThemeUIController.refreshTable$).subscribe(dirtySkeleton));
+	}
+};
+SheetsTableRenderController = __decorate([
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.SheetSkeletonManagerService)),
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_sheets_table.TableManager)),
+	__decorateParam(4, (0, _univerjs_core.Inject)(SheetTableThemeUIController))
+], SheetsTableRenderController);
+
+//#endregion
+//#region src/controllers/sheet-table-selection.controller.ts
+let SheetTableSelectionController = class SheetTableSelectionController extends _univerjs_core.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 === _univerjs_sheets_ui.SelectAllCommand.id) {
+				const target = (0, _univerjs_sheets.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 _univerjs_core.Rectangle.contains(tableRange, range);
+				});
+				if (overlapTable) {
+					const tableRange = overlapTable.getRange();
+					const tableRangeWithoutHeader = {
+						...tableRange,
+						startRow: tableRange.startRow + 1
+					};
+					if (_univerjs_core.Rectangle.equals(tableRange, range)) return {
+						undos: [],
+						redos: []
+					};
+					else if (_univerjs_core.Rectangle.equals(tableRangeWithoutHeader, range)) return {
+						undos: [],
+						redos: [{
+							id: _univerjs_sheets.SetSelectionsOperation.id,
+							params: {
+								unitId,
+								subUnitId,
+								selections: [{
+									range: tableRange,
+									primary: (0, _univerjs_sheets.getPrimaryForRange)(tableRange, worksheet)
+								}]
+							}
+						}]
+					};
+					else return {
+						undos: [],
+						redos: [{
+							id: _univerjs_sheets.SetSelectionsOperation.id,
+							params: {
+								unitId,
+								subUnitId,
+								selections: [{
+									range: tableRangeWithoutHeader,
+									primary: (0, _univerjs_sheets.getPrimaryForRange)(tableRangeWithoutHeader, worksheet)
+								}]
+							}
+						}]
+					};
+				}
+			}
+			return {
+				redos: [],
+				undos: []
+			};
+		} }));
+	}
 };
+SheetTableSelectionController = __decorate([
+	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetInterceptorService)),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.IUniverInstanceService)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets_table.TableManager))
+], SheetTableSelectionController);
 
 //#endregion
 //#region src/menu/menu.ts
@@ -2764,7 +2795,7 @@ function sheetTableToolbarInsertMenuFactory(accessor) {
 	return {
 		id: OpenTableSelectorOperation.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
-		icon: TABLE_TOOLBAR_BUTTON,
+		icon: "TableIcon",
 		tooltip: "sheets-table-ui.title",
 		title: "sheets-table-ui.title",
 		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
@@ -2797,7 +2828,7 @@ function SheetTableInsertRowMenuFactory(accessor) {
 		hidden$: getSheetTableHeaderOperationHidden$(accessor)
 	};
 }
-function SheetTableInsertColMenuFactory(accessor) {
+function SheetTableInsertColMenuFactory() {
 	return {
 		id: _univerjs_sheets_table.SheetTableInsertColCommand.id,
 		title: "sheets-table-ui.insert.col",
@@ -2812,7 +2843,7 @@ function SheetTableRemoveRowMenuFactory(accessor) {
 		hidden$: getSheetTableHeaderOperationHidden$(accessor)
 	};
 }
-function SheetTableRemoveColMenuFactory(accessor) {
+function SheetTableRemoveColMenuFactory() {
 	return {
 		id: _univerjs_sheets_table.SheetTableRemoveColCommand.id,
 		title: "sheets-table-ui.remove.col",
@@ -2905,27 +2936,22 @@ const menuSchema = {
 * limitations under the License.
 */
 let SheetTableMenuController = class SheetTableMenuController extends _univerjs_core.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, _univerjs_icons.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, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_ui.IMenuManagerService))], SheetTableMenuController);
+SheetTableMenuController = __decorate([
+	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_ui.IconManager)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_ui.IMenuManagerService))
+], SheetTableMenuController);
 
 //#endregion
 //#region src/plugin.ts
@@ -2943,6 +2969,8 @@ let UniverSheetsTableUIPlugin = class UniverSheetsTableUIPlugin extends _univerj
 		this._initRegisterCommand();
 	}
 	onStarting() {
+		this._injector.add([ComponentsController]);
+		this._injector.get(ComponentsController);
 		(0, _univerjs_core.registerDependencies)(this._injector, [
 			[SheetsTableComponentController],
 			[SheetsTableUiService],