@univerjs/sheets-table-ui 1.0.0-insiders.20260809-70eefdd → 1.0.0-rc.0

package/lib/cjs/index.js

@@ -10,6 +10,7 @@ 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_dom = require("react-dom");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _univerjs_engine_formula = require("@univerjs/engine-formula");
 let _univerjs_sheets_formula_ui = require("@univerjs/sheets-formula-ui");
@@ -39,6 +40,7 @@ const SHEET_TABLE_RENAME_DIALOG_ID = "SHEET_TABLE_RENAME_DIALOG_ID";
 const SHEET_TABLE_THEME_PANEL_ID = "SHEET_TABLE_THEME_PANEL_ID";
 const SHEET_TABLE_THEME_PANEL = "SHEET_TABLE_THEME_PANEL";
 const SHEET_TABLE_MENU = "SHEET_TABLE_MENU";
+const SHEET_TABLE_MOBILE_MENU = "SHEET_TABLE_MOBILE_MENU";
 const TABLE_CUSTOM_NAME_PREFIX = "table-custom-";
 const TABLE_DEFAULT_NAME_PREFIX = "table-default-";
 const TABLE_DEFAULT_BG_COLOR = "rgb(255, 255, 255)";
@@ -249,7 +251,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-table-ui";
-var version = "1.0.0-insiders.20260809-70eefdd";
+var version = "1.0.0-rc.0";
 
 //#endregion
 //#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
@@ -373,6 +375,7 @@ let SheetsTableComponentController = class SheetsTableComponentController extend
 	}
 	_closeFilterPopup() {
 		var _this$_popupDisposabl2;
+		this._dialogService.close(UNIVER_SHEET_TABLE_FILTER_PANEL_ID);
 		(_this$_popupDisposabl2 = this._popupDisposable) === null || _this$_popupDisposabl2 === void 0 || _this$_popupDisposabl2.dispose();
 		this._popupDisposable = null;
 		this.clearCurrentTableFilterInfo();
@@ -468,7 +471,7 @@ let SheetsTableUiService = class SheetsTableUiService extends _univerjs_core.Dis
 			unitId,
 			subUnitId,
 			tableFilter,
-			currentFilterBy: (0, _univerjs_sheets_table.isConditionFilter)(tableFilter) ? "condition" : "items",
+			currentFilterBy: (0, _univerjs_sheets_table.isConditionFilter)(tableFilter) ? "condition" : (0, _univerjs_sheets_table.isColorTableFilter)(tableFilter) ? "color" : "items",
 			tableId,
 			columnIndex: column - tableRange.startColumn
 		};
@@ -482,18 +485,57 @@ let SheetsTableUiService = class SheetsTableUiService extends _univerjs_core.Dis
 		}
 		return checkedItems;
 	}
-	setTableFilter(unitId, tableId, columnIndex, tableFilter) {
-		if (!this._tableManager.getTable(unitId, tableId)) return;
+	async setTableFilter(unitId, tableId, columnIndex, tableFilter) {
+		if (!this._tableManager.getTable(unitId, tableId)) return false;
 		const setTableFilterParams = {
 			unitId,
 			tableId,
 			column: columnIndex,
 			tableFilter
 		};
-		this._commandService.executeCommand(_univerjs_sheets_table.SetSheetTableFilterCommand.id, setTableFilterParams);
+		return this._commandService.executeCommand(_univerjs_sheets_table.SetSheetTableFilterCommand.id, setTableFilterParams);
+	}
+	getTableFilterColors(unitId, subUnitId, tableId, columnIndex) {
+		var _this$_univerInstance, _currentFilter$cellFi, _currentFilter$cellTe;
+		const emptyResult = {
+			cellFillColors: [],
+			cellTextColors: []
+		};
+		const table = this._tableManager.getTable(unitId, tableId);
+		if (!table) return emptyResult;
+		const worksheet = (_this$_univerInstance = this._univerInstanceService.getUnit(unitId)) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.getSheetBySheetId(subUnitId);
+		if (!worksheet) return emptyResult;
+		const normalizeColor = (color) => color ? new _univerjs_core.ColorKit(color).toRgbString() : null;
+		const currentFilter = table.getTableFilterColumn(columnIndex);
+		const checkedFillColors = new Set((0, _univerjs_sheets_table.isColorTableFilter)(currentFilter) ? (_currentFilter$cellFi = currentFilter.cellFillColors) === null || _currentFilter$cellFi === void 0 ? void 0 : _currentFilter$cellFi.map(normalizeColor) : []);
+		const checkedTextColors = new Set((0, _univerjs_sheets_table.isColorTableFilter)(currentFilter) ? (_currentFilter$cellTe = currentFilter.cellTextColors) === null || _currentFilter$cellTe === void 0 ? void 0 : _currentFilter$cellTe.map(normalizeColor) : []);
+		const cellFillColors = /* @__PURE__ */ new Map();
+		const cellTextColors = /* @__PURE__ */ new Map();
+		const tableRange = table.getTableFilterRange();
+		const column = tableRange.startColumn + columnIndex;
+		const filteredRowsByOtherColumns = this._getFilteredRowsByOtherColumns(worksheet, tableId, unitId, columnIndex);
+		for (let row = tableRange.startRow; row <= tableRange.endRow; row++) {
+			if (filteredRowsByOtherColumns.has(row)) continue;
+			const cellData = worksheet.getCell(row, column);
+			const style = worksheet.getComposedCellStyleByCellData(row, column, cellData);
+			const fillColor = normalizeColor((0, _univerjs_core.getColorStyle)(style.bg));
+			const textColor = normalizeColor((0, _univerjs_core.getColorStyle)(style.cl) ?? (0, _univerjs_core.getColorStyle)(_univerjs_core.DEFAULT_STYLES.cl));
+			cellFillColors.set(fillColor, checkedFillColors.has(fillColor));
+			cellTextColors.set(textColor, checkedTextColors.has(textColor));
+		}
+		return {
+			cellFillColors: Array.from(cellFillColors, ([color, checked]) => ({
+				color,
+				checked
+			})),
+			cellTextColors: Array.from(cellTextColors, ([color, checked]) => ({
+				color,
+				checked
+			}))
+		};
 	}
 	getTableFilterItems(unitId, subUnitId, tableId, columnIndex) {
-		var _this$_univerInstance;
+		var _this$_univerInstance2;
 		if (this._itemsCache.has(tableId + columnIndex)) return this._itemsCache.get(tableId + columnIndex) || {
 			data: [],
 			itemsCountMap: /* @__PURE__ */ new Map(),
@@ -505,10 +547,9 @@ let SheetsTableUiService = class SheetsTableUiService extends _univerjs_core.Dis
 			itemsCountMap: /* @__PURE__ */ new Map(),
 			allItemsCount: 0
 		};
-		const tableRange = table.getTableFilterRange();
-		const { startRow, endRow, startColumn } = tableRange;
+		const { startRow, endRow, startColumn } = table.getTableFilterRange();
 		const column = startColumn + columnIndex;
-		const worksheet = (_this$_univerInstance = this._univerInstanceService.getUnit(unitId)) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.getSheetBySheetId(subUnitId);
+		const worksheet = (_this$_univerInstance2 = this._univerInstanceService.getUnit(unitId)) === null || _this$_univerInstance2 === void 0 ? void 0 : _this$_univerInstance2.getSheetBySheetId(subUnitId);
 		if (!worksheet) return {
 			data: [],
 			itemsCountMap: /* @__PURE__ */ new Map(),
@@ -516,12 +557,7 @@ let SheetsTableUiService = class SheetsTableUiService extends _univerjs_core.Dis
 		};
 		const data = [];
 		const map = /* @__PURE__ */ new Map();
-		const filteredRowsByOtherColumns = /* @__PURE__ */ new Set();
-		const tableFilters = table.getTableFilters();
-		for (let i = tableRange.startColumn; i <= tableRange.endColumn; i++) {
-			const currentColumnIndex = i - tableRange.startColumn;
-			if (currentColumnIndex !== columnIndex && table.getTableFilterColumn(currentColumnIndex)) tableFilters.doColumnFilter(worksheet, tableRange, currentColumnIndex, filteredRowsByOtherColumns);
-		}
+		const filteredRowsByOtherColumns = this._getFilteredRowsByOtherColumns(worksheet, tableId, unitId, columnIndex);
 		let allItemsCount = 0;
 		for (let row = startRow; row <= endRow; row++) {
 			if (filteredRowsByOtherColumns.has(row)) continue;
@@ -546,6 +582,18 @@ let SheetsTableUiService = class SheetsTableUiService extends _univerjs_core.Dis
 			allItemsCount
 		};
 	}
+	_getFilteredRowsByOtherColumns(worksheet, tableId, unitId, columnIndex) {
+		const filteredRows = /* @__PURE__ */ new Set();
+		const table = this._tableManager.getTable(unitId, tableId);
+		if (!table) return filteredRows;
+		const tableRange = table.getTableFilterRange();
+		const tableFilters = table.getTableFilters();
+		for (let column = tableRange.startColumn; column <= tableRange.endColumn; column++) {
+			const currentColumnIndex = column - tableRange.startColumn;
+			if (currentColumnIndex !== columnIndex && table.getTableFilterColumn(currentColumnIndex)) tableFilters.doColumnFilter(worksheet, tableRange, currentColumnIndex, filteredRows);
+		}
+		return filteredRows;
+	}
 };
 SheetsTableUiService = __decorate([
 	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_sheets_table.TableManager)),
@@ -555,6 +603,86 @@ SheetsTableUiService = __decorate([
 	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService))
 ], SheetsTableUiService);
 
+//#endregion
+//#region src/views/components/MobileSheetTableColorFilterPanel.tsx
+function MobileColorOption(props) {
+	const { item, label, textColor = false, onClick } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		"aria-label": item.color ?? label,
+		"aria-pressed": item.checked,
+		className: (0, _univerjs_design.clsx)(_univerjs_design.resetButtonClassName, "univer-relative univer-flex univer-size-12 univer-items-center univer-justify-center univer-rounded-full univer-border univer-border-solid univer-border-gray-200 univer-bg-gray-0 dark:!univer-border-gray-600 dark:!univer-bg-gray-800"),
+		style: !textColor && item.color ? { backgroundColor: item.color } : void 0,
+		onClick,
+		children: [
+			!item.color && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.BanIcon, { className: "univer-size-7" }),
+			textColor && item.color && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.AIcon, {
+				className: "univer-size-7",
+				style: { color: item.color }
+			}),
+			item.checked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "univer-absolute -univer-bottom-1 -univer-right-1 univer-flex univer-size-5 univer-items-center univer-justify-center univer-rounded-full univer-bg-primary-600 univer-text-gray-0",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CheckMarkIcon, { className: "univer-size-3" })
+			})
+		]
+	});
+}
+function MobileSheetTableColorFilterPanel(props) {
+	const { colors, onChange } = props;
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const fillLabel = localeService.t("sheets-table-ui.filter.filter-by-cell-fill-color");
+	const textLabel = localeService.t("sheets-table-ui.filter.filter-by-cell-text-color");
+	const hasMultipleColors = colors.cellFillColors.length > 1 || colors.cellTextColors.length > 1;
+	function toggleColor(item, fillColor) {
+		const key = fillColor ? "cellFillColors" : "cellTextColors";
+		const otherKey = fillColor ? "cellTextColors" : "cellFillColors";
+		onChange({
+			...colors,
+			[key]: colors[key].map((color) => color.color === item.color ? {
+				...color,
+				checked: !color.checked
+			} : color),
+			[otherKey]: colors[otherKey].map((color) => ({
+				...color,
+				checked: false
+			}))
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-u-comp": "mobile-sheet-table-filter-by-colors",
+		className: "univer-grid univer-gap-6",
+		children: [
+			colors.cellFillColors.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: "univer-m-0 univer-mb-4 univer-text-base univer-font-medium",
+				children: fillLabel
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-flex univer-flex-wrap univer-gap-4",
+				children: colors.cellFillColors.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileColorOption, {
+					item,
+					label: fillLabel,
+					onClick: () => toggleColor(item, true)
+				}, item.color ?? "none"))
+			})] }),
+			colors.cellTextColors.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: "univer-m-0 univer-mb-4 univer-text-base univer-font-medium",
+				children: textLabel
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-flex univer-flex-wrap univer-gap-4",
+				children: colors.cellTextColors.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileColorOption, {
+					item,
+					label: textLabel,
+					textColor: true,
+					onClick: () => toggleColor(item, false)
+				}, item.color ?? "none"))
+			})] }),
+			!hasMultipleColors && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-flex univer-min-h-40 univer-items-center univer-justify-center univer-text-gray-500",
+				children: localeService.t("sheets-table-ui.filter.filter-by-color-none")
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/views/components/util.ts
 function getCascaderListOptions(injector) {
@@ -829,7 +957,7 @@ function getSubComponentType(type, compare) {
 	return "None";
 }
 function getInitConditionInfo(tableFilter) {
-	if (!tableFilter || tableFilter.filterType !== "condition") return {
+	if (!tableFilter || tableFilter.filterType !== _univerjs_sheets_table.TableColumnFilterTypeEnum.condition) return {
 		type: _univerjs_sheets_table.TableConditionTypeEnum.String,
 		compare: _univerjs_sheets_table.TableStringCompareTypeEnum.Equal,
 		info: {}
@@ -898,22 +1026,23 @@ function getInitConditionInfo(tableFilter) {
 }
 
 //#endregion
-//#region src/views/components/SheetTableConditionPanel.tsx
-const SheetTableConditionPanel = (props) => {
+//#region src/views/components/MobileSheetTableConditionPanel.tsx
+function MobileSheetTableConditionPanel(props) {
 	var _conditionInfo$info$d, _conditionInfo$info$d2, _conditionInfo$info$n, _conditionInfo$info$n3;
 	const { conditionInfo, onChange } = props;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const [conditionVisible, setConditionVisible] = (0, react.useState)(false);
 	const injector = (0, _univerjs_ui.useDependency)(_univerjs_core.Injector);
+	const [conditionVisible, setConditionVisible] = (0, react.useState)(false);
+	const [defaultDate] = (0, react.useState)(() => /* @__PURE__ */ new Date());
 	const cascaderOptions = getCascaderListOptions(injector);
-	const handleConditionInfo = (info, type, compare) => {
+	function handleConditionInfo(info, type, compare) {
 		onChange({
 			type: type ?? conditionInfo.type,
 			compare: compare ?? conditionInfo.compare,
 			info
 		});
-	};
-	const handleChange = (value) => {
+	}
+	function handleChange(value) {
 		const type = value[0];
 		const compare = value[1];
 		if (compare) setConditionVisible(false);
@@ -924,14 +1053,12 @@ const SheetTableConditionPanel = (props) => {
 		else info.dateRange = [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()];
 		else if (type === _univerjs_sheets_table.TableConditionTypeEnum.Number) info.number = 0;
 		else if (type === _univerjs_sheets_table.TableConditionTypeEnum.String) info.string = "";
-		handleConditionInfo(info, value[0], value[1] ?? _univerjs_sheets_table.TableStringCompareTypeEnum.Equal);
-	};
+		handleConditionInfo(info, type, compare ?? _univerjs_sheets_table.TableStringCompareTypeEnum.Equal);
+	}
 	const subComponentType = getSubComponentType(conditionInfo.type, conditionInfo.compare);
-	let selectType = "";
-	if (conditionInfo.compare) selectType = `${localeService.t(`sheets-table-ui.condition.${conditionInfo.type}`)} - ${localeService.t(`sheets-table-ui.${conditionInfo.type}.compare.${conditionInfo.compare}`)}`;
-	else selectType = localeService.t(`sheets-table-ui.condition.${conditionInfo.type}`);
+	const selectType = conditionInfo.compare ? `${localeService.t(`sheets-table-ui.condition.${conditionInfo.type}`)} - ${localeService.t(`sheets-table-ui.${conditionInfo.type}.compare.${conditionInfo.compare}`)}` : localeService.t(`sheets-table-ui.condition.${conditionInfo.type}`);
 	const conditionDateOptions = getConditionDateSelect(injector, conditionInfo.compare);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.MobileDropdown, {
 		align: "start",
 		open: conditionVisible,
 		onOpenChange: setConditionVisible,
@@ -943,7 +1070,7 @@ const SheetTableConditionPanel = (props) => {
 			wrapperClassName: "!univer-h-[150px]"
 		}),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-h-8 univer-w-full univer-items-center univer-justify-between univer-rounded-md univer-bg-white univer-px-2 univer-text-sm univer-transition-colors univer-duration-200 hover:univer-border-primary-600 focus:univer-border-primary-600 focus:univer-outline-none focus:univer-ring-2 dark:!univer-bg-gray-700 dark:!univer-text-white", _univerjs_design.borderClassName),
+			className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-h-8 univer-w-full univer-items-center univer-justify-between univer-rounded-md univer-bg-gray-0 univer-px-2 univer-text-sm univer-transition-colors univer-duration-200 hover:univer-border-primary-600 focus:univer-border-primary-600 focus:univer-outline-none focus:univer-ring-2 dark:!univer-bg-gray-700 dark:!univer-text-gray-0", _univerjs_design.borderClassName),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: selectType }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {})]
 		})
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -953,32 +1080,29 @@ const SheetTableConditionPanel = (props) => {
 				className: "univer-w-full",
 				placeholder: localeService.t("sheets-table-ui.filter.input-values-placeholder"),
 				value: conditionInfo.info.string,
-				onChange: (v) => handleConditionInfo({ string: v })
+				onChange: (value) => handleConditionInfo({ string: value })
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
 				className: "univer-h-7 univer-w-full",
 				value: conditionInfo.info.number,
 				controls: false,
-				onChange: (v) => {
-					if (v !== null) handleConditionInfo({ number: v });
+				onChange: (value) => {
+					if (value !== null) handleConditionInfo({ number: value });
 				}
 			}) }),
-			!!(subComponentType === "DatePicker") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			subComponentType === "DatePicker" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				id: "univer-table-date-picker-wrapper",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DatePicker, {
 					className: "univer-w-full",
-					value: conditionInfo.info.date ?? /* @__PURE__ */ new Date(),
-					onValueChange: (v) => handleConditionInfo({ date: v })
+					value: conditionInfo.info.date ?? defaultDate,
+					onValueChange: (value) => handleConditionInfo({ date: value })
 				})
 			}),
-			!!(subComponentType === "DateRange") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			subComponentType === "DateRange" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				id: "univer-table-date-range-wrapper",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DateRangePicker, {
 					className: "univer-w-full",
-					value: [((_conditionInfo$info$d = conditionInfo.info.dateRange) === null || _conditionInfo$info$d === void 0 ? void 0 : _conditionInfo$info$d[0]) ?? /* @__PURE__ */ new Date(), ((_conditionInfo$info$d2 = conditionInfo.info.dateRange) === null || _conditionInfo$info$d2 === void 0 ? void 0 : _conditionInfo$info$d2[1]) ?? /* @__PURE__ */ new Date()],
-					onValueChange: (v) => {
-						if (v) handleConditionInfo({ dateRange: v });
-						else handleConditionInfo({});
-					}
+					value: [((_conditionInfo$info$d = conditionInfo.info.dateRange) === null || _conditionInfo$info$d === void 0 ? void 0 : _conditionInfo$info$d[0]) ?? defaultDate, ((_conditionInfo$info$d2 = conditionInfo.info.dateRange) === null || _conditionInfo$info$d2 === void 0 ? void 0 : _conditionInfo$info$d2[1]) ?? defaultDate],
+					onValueChange: (value) => handleConditionInfo(value ? { dateRange: value } : {})
 				})
 			}),
 			subComponentType === "Inputs" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -987,447 +1111,390 @@ const SheetTableConditionPanel = (props) => {
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
 						className: "univer-w-full",
 						value: (_conditionInfo$info$n = conditionInfo.info.numberRange) === null || _conditionInfo$info$n === void 0 ? void 0 : _conditionInfo$info$n[0],
-						onChange: (v) => {
-							if (v !== null) {
+						controls: false,
+						onChange: (value) => {
+							if (value !== null) {
 								var _conditionInfo$info$n2;
-								handleConditionInfo({ numberRange: [v, (_conditionInfo$info$n2 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n2 === void 0 ? void 0 : _conditionInfo$info$n2[1]] });
+								handleConditionInfo({ numberRange: [value, (_conditionInfo$info$n2 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n2 === void 0 ? void 0 : _conditionInfo$info$n2[1]] });
 							}
-						},
-						controls: false
+						}
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: " - " }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
 						className: "univer-w-full",
 						value: (_conditionInfo$info$n3 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n3 === void 0 ? void 0 : _conditionInfo$info$n3[1],
 						controls: false,
-						onChange: (v) => {
-							if (v !== null) {
+						onChange: (value) => {
+							if (value !== null) {
 								var _conditionInfo$info$n4;
-								handleConditionInfo({ numberRange: [(_conditionInfo$info$n4 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n4 === void 0 ? void 0 : _conditionInfo$info$n4[0], v] });
+								handleConditionInfo({ numberRange: [(_conditionInfo$info$n4 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n4 === void 0 ? void 0 : _conditionInfo$info$n4[0], value] });
 							}
 						}
 					})
 				]
 			}),
-			!!(subComponentType === "Select") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
+			subComponentType === "Select" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.MobileSelect, {
 				className: "univer-w-full",
 				value: conditionInfo.info.dateSelect ?? conditionDateOptions[0].value,
 				options: conditionDateOptions,
-				onChange: (v) => handleConditionInfo({ dateSelect: v })
+				onChange: (value) => handleConditionInfo({ dateSelect: value })
 			})
 		]
 	})] });
-};
+}
 
 //#endregion
-//#region src/views/components/SheetTableItemsFilterPanel.tsx
-const getCheckedItemCount = (map, checkedItemSet) => {
-	let count = 0;
-	checkedItemSet.forEach((item) => {
-		count += map.get(item) ?? 0;
-	});
-	return count;
-};
-function SheetTableItemsFilterPanel(props) {
-	const { unitId, tableId, subUnitId, columnIndex, checkedItemSet, setCheckedItemSet, tableFilter } = props;
+//#region src/views/components/MobileSheetTableItemsFilterPanel.tsx
+function MobileSheetTableItemsFilterPanel(props) {
+	const { items, checkedItemSet, setCheckedItemSet } = 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 : getCheckedItemCount(itemsCountMap, checkedItemSet));
-	const indeterminate = !allChecked && checkedItemSet.size > 0;
 	const [searchText, setSearchText] = (0, react.useState)("");
 	const displayItems = (0, react.useMemo)(() => {
-		return searchText ? items.filter((item) => {
-			return String(item.title).toLowerCase().includes(searchText.toLowerCase());
-		}) : items;
-	}, [searchText, items]);
-	const onCheckAllToggled = (0, react.useCallback)(() => {
-		if (allChecked) {
-			checkedItemSet.clear();
-			setCheckedItemSet(new Set(checkedItemSet));
-			setAllChecked(false);
-		} else {
-			displayItems.forEach((item) => {
-				checkedItemSet.add(item.title);
-			});
-			setCheckedItemSet(new Set(checkedItemSet));
-			setAllChecked(true);
-		}
-	}, [allChecked]);
-	const onSearchValueChange = (0, react.useCallback)((str) => {
-		if (str === "") {
-			setAllChecked(true);
-			items.forEach((item) => {
-				checkedItemSet.add(item.title);
-			});
-			setCheckedCount(allItemsCount);
-		} else {
-			checkedItemSet.clear();
-			setAllChecked(false);
-			setCheckedCount(0);
-		}
-		setSearchText(str);
-	}, []);
-	const onCheckItemToggled = (key) => {
-		if (allChecked) {
-			setAllChecked(false);
-			const newSet = /* @__PURE__ */ new Set();
-			for (const { title } of items) if (key !== title) newSet.add(title);
-			setCheckedCount(allItemsCount - itemsCountMap.get(key));
-			setCheckedItemSet(newSet);
-		} else {
-			if (checkedItemSet.has(key)) {
-				checkedItemSet.delete(key);
-				setCheckedCount(checkedCount - itemsCountMap.get(key));
-			} else {
-				checkedItemSet.add(key);
-				setCheckedCount(checkedCount + itemsCountMap.get(key));
-			}
-			setCheckedItemSet(new Set(checkedItemSet));
-		}
-	};
+		const normalizedSearchText = searchText.toLowerCase();
+		return normalizedSearchText ? items.data.filter((item) => String(item.title).toLowerCase().includes(normalizedSearchText)) : items.data;
+	}, [items.data, searchText]);
+	const allDisplayedChecked = displayItems.length > 0 && displayItems.every((item) => checkedItemSet.has(item.title));
+	const someDisplayedChecked = displayItems.some((item) => checkedItemSet.has(item.title));
+	function toggleAllDisplayed() {
+		setCheckedItemSet((current) => {
+			const next = new Set(current);
+			for (const item of displayItems) if (allDisplayedChecked) next.delete(item.title);
+			else next.add(item.title);
+			return next;
+		});
+	}
+	function toggleItem(title) {
+		setCheckedItemSet((current) => {
+			const next = new Set(current);
+			if (next.has(title)) next.delete(title);
+			else next.add(title);
+			return next;
+		});
+	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "univer-flex univer-h-full univer-flex-col",
+		"data-u-comp": "mobile-sheet-table-filter-by-values",
+		className: "univer-grid univer-gap-3",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
-			autoFocus: true,
 			value: searchText,
 			placeholder: localeService.t("sheets-table-ui.filter.search-placeholder"),
-			onChange: onSearchValueChange
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, _univerjs_design.clsx)("univer-mt-2 univer-box-border univer-flex univer-h-[180px] univer-max-h-[180px] univer-flex-grow univer-flex-col univer-overflow-hidden univer-rounded-md univer-py-1.5 univer-pl-2", _univerjs_design.borderClassName),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, _univerjs_design.clsx)("univer-h-40 univer-min-w-0 univer-overflow-y-auto univer-py-1 univer-pl-2", _univerjs_design.scrollbarClassName),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "univer-h-full",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "univer-flex univer-items-center univer-px-2 univer-py-1",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
-							className: "univer-min-w-0 univer-flex-1",
-							contentClassName: "univer-flex-1 univer-min-w-0",
-							indeterminate,
-							disabled: items.length === 0,
-							checked: allChecked,
-							onChange: onCheckAllToggled,
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "univer-flex univer-h-5 univer-flex-1 univer-items-center univer-text-sm",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "univer-flex-1 univer-truncate",
-									children: `${localeService.t("sheets-table-ui.filter.select-all")}`
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "univer-ml univer-text-gray-400",
-									children: `(${checkedCount}/${searchText ? displayItems.length : allItemsCount})`
-								})]
-							})
-						})
-					}), displayItems.map((item) => {
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "univer-flex univer-items-center univer-px-2 univer-py-1",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
-								className: "univer-min-w-0 univer-flex-1",
-								contentClassName: "univer-flex-1 univer-min-w-0",
-								checked: allChecked || checkedItemSet.has(item.title),
-								onChange: () => {
-									onCheckItemToggled(item.title);
-								},
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-									className: "univer-flex univer-h-5 univer-flex-1 univer-items-center univer-text-sm",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "univer-flex-1 univer-truncate",
-										children: item.title
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "univer-ml-1 univer-inline-flex univer-h-full univer-items-center univer-text-gray-400",
-										children: `(${itemsCountMap.get(item.title) || 0})`
-									})]
-								})
-							})
-						}, item.key);
-					})]
+			onChange: setSearchText
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "univer-overflow-hidden univer-rounded-xl univer-bg-gray-0 dark:!univer-bg-gray-800",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-border-0 univer-border-b univer-border-solid univer-border-gray-200 univer-px-4 dark:!univer-border-gray-700",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
+					className: "univer-flex univer-min-h-12 univer-items-center",
+					checked: allDisplayedChecked,
+					indeterminate: !allDisplayedChecked && someDisplayedChecked,
+					disabled: displayItems.length === 0,
+					onChange: toggleAllDisplayed,
+					children: localeService.t("sheets-table-ui.filter.select-all")
 				})
-			})
+			}), displayItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-border-0 univer-border-b univer-border-solid univer-border-gray-200 univer-px-4 last:univer-border-b-0 dark:!univer-border-gray-700",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
+					className: "univer-flex univer-min-h-12 univer-items-center",
+					checked: checkedItemSet.has(item.title),
+					onChange: () => toggleItem(item.title),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "univer-flex univer-min-w-0 univer-flex-1 univer-items-center univer-gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "univer-min-w-0 univer-flex-1 univer-truncate",
+							children: item.title
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "univer-shrink-0 univer-text-gray-400",
+							children: `(${items.itemsCountMap.get(item.title) ?? 0})`
+						})]
+					})
+				})
+			}, item.key))]
 		})]
 	});
 }
 
 //#endregion
-//#region src/views/components/SheetTableFilterPanel.tsx
-const FILTER_BY_OPTIONS = [{
-	label: "sheets-table-ui.filter.by-values",
-	value: "items"
-}, {
-	label: "sheets-table-ui.filter.by-conditions",
-	value: "condition"
-}];
-function SheetTableFilterPanel() {
+//#region src/views/components/MobileSheetTableFilterPanel.tsx
+const FILTER_BY_OPTIONS$1 = [
+	{
+		label: "sheets-table-ui.filter.by-values",
+		value: "items"
+	},
+	{
+		label: "sheets-table-ui.filter.by-colors",
+		value: "color"
+	},
+	{
+		label: "sheets-table-ui.filter.by-conditions",
+		value: "condition"
+	}
+];
+function MobileSheetTableFilterPanel() {
+	const tableFilterPanelInfo = (0, _univerjs_ui.useDependency)(SheetsTableComponentController).getCurrentTableFilterInfo();
+	if (!tableFilterPanelInfo) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileSheetTableFilterPanelContent, { tableFilterPanelInfo });
+}
+function MobileSheetTableFilterPanelContent(props) {
 	var _permissionService$ge;
+	const { tableFilterPanelInfo } = props;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const filterByItems = FILTER_BY_OPTIONS.map((option) => ({
-		...option,
-		label: localeService.t(option.label)
-	}));
 	const tableUiService = (0, _univerjs_ui.useDependency)(SheetsTableUiService);
 	const tableManager = (0, _univerjs_ui.useDependency)(_univerjs_sheets_table.TableManager);
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const permissionService = (0, _univerjs_ui.useDependency)(_univerjs_core.IPermissionService);
+	const undoRedoService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUndoRedoService);
 	const sheetsTableComponentController = (0, _univerjs_ui.useDependency)(SheetsTableComponentController);
-	const tableFilterPanelInfo = sheetsTableComponentController.getCurrentTableFilterInfo();
-	const props = tableUiService.getTableFilterPanelInitProps(tableFilterPanelInfo.unitId, tableFilterPanelInfo.subUnitId, tableFilterPanelInfo.tableId, tableFilterPanelInfo.column);
-	const { unitId, subUnitId, tableId, tableFilter, currentFilterBy, columnIndex } = props;
-	const { data } = tableUiService.getTableFilterItems(unitId, subUnitId, tableId, columnIndex);
+	const [detailFilterBy, setDetailFilterBy] = (0, react.useState)(null);
+	const [drawerSnap, setDrawerSnap] = (0, react.useState)("expanded");
+	const layerRef = (0, react.useRef)(null);
+	const { unitId, subUnitId, tableId, tableFilter, columnIndex } = tableUiService.getTableFilterPanelInitProps(tableFilterPanelInfo.unitId, tableFilterPanelInfo.subUnitId, tableFilterPanelInfo.tableId, tableFilterPanelInfo.column);
+	const currentTable = tableManager.getTable(unitId, tableId);
+	const items = tableUiService.getTableFilterItems(unitId, subUnitId, tableId, columnIndex);
 	const checkedItems = tableUiService.getTableFilterCheckedItems(unitId, tableId, columnIndex);
-	const [checkedItemSet, setCheckedItemSet] = (0, react.useState)(() => new Set(checkedItems));
-	const [filterBy, setFilterBy] = (0, react.useState)(currentFilterBy || "items");
-	const [conditionInfo, setConditionInfo] = (0, react.useState)(() => {
-		const tableFilter = props.tableFilter;
-		return getInitConditionInfo(tableFilter);
-	});
-	const table = tableManager.getTable(unitId, tableId);
-	if (!table) return null;
-	const tableFilters = table.getTableFilters();
-	const tableRange = table.getRange();
-	const sortState = tableFilters.getSortState();
-	sortState.columnIndex === columnIndex && (sortState.sortState, _univerjs_sheets_table.SheetsTableSortStateEnum.Asc);
-	sortState.columnIndex === columnIndex && (sortState.sortState, _univerjs_sheets_table.SheetsTableSortStateEnum.Desc);
-	const absoluteColumn = tableFilterPanelInfo.column;
+	const [checkedItemSet, setCheckedItemSet] = (0, react.useState)(() => new Set((tableFilter === null || tableFilter === void 0 ? void 0 : tableFilter.filterType) === _univerjs_sheets_table.TableColumnFilterTypeEnum.manual ? checkedItems : items.data.map((item) => item.title)));
+	const [conditionInfo, setConditionInfo] = (0, react.useState)(() => getInitConditionInfo(tableFilter));
+	const [colors, setColors] = (0, react.useState)(() => tableUiService.getTableFilterColors(unitId, subUnitId, tableId, columnIndex));
+	const tableRange = currentTable.getRange();
 	const canDeleteColumn = tableRange.endColumn > tableRange.startColumn;
-	const closeDialog = () => {
+	const absoluteColumn = tableFilterPanelInfo.column;
+	const editable = (_permissionService$ge = permissionService.getPermissionPoint(new _univerjs_sheets.WorkbookEditablePermission(unitId).id)) === null || _permissionService$ge === void 0 ? void 0 : _permissionService$ge.value;
+	function closePanel() {
 		sheetsTableComponentController.closeFilterPanel();
-	};
-	const onCancel = () => {
-		closeDialog();
-	};
-	const applySort = (asc) => {
-		const range = table.getTableFilterRange();
-		commandService.executeCommand(_univerjs_sheets_sort.SortRangeCommand.id, {
-			unitId,
-			subUnitId,
-			range,
-			orderRules: [{
-				colIndex: columnIndex + range.startColumn,
-				type: asc ? _univerjs_sheets_sort.SortType.ASC : _univerjs_sheets_sort.SortType.DESC
-			}],
-			hasTitle: false
-		});
-		tableFilters.setSortState(columnIndex, asc ? _univerjs_sheets_table.SheetsTableSortStateEnum.Asc : _univerjs_sheets_table.SheetsTableSortStateEnum.Desc);
-		closeDialog();
-	};
-	const insertColumn = (side) => {
-		commandService.executeCommand(_univerjs_sheets_table.SheetTableInsertColumnAtCommand.id, {
+	}
+	async function applySort(ascending) {
+		const range = currentTable.getTableFilterRange();
+		const undoRedoGroup = undoRedoService.beginUndoRedoGroup(unitId, (0, _univerjs_core.generateRandomId)(), "append");
+		try {
+			if (!await commandService.executeCommand(_univerjs_sheets_sort.SortRangeCommand.id, {
+				unitId,
+				subUnitId,
+				range,
+				orderRules: [{
+					colIndex: columnIndex + range.startColumn,
+					type: ascending ? _univerjs_sheets_sort.SortType.ASC : _univerjs_sheets_sort.SortType.DESC
+				}],
+				hasTitle: false
+			})) return;
+			if (await commandService.executeCommand(_univerjs_sheets_table.SetSheetTableSortStateCommand.id, {
+				unitId,
+				tableId,
+				sortInfo: {
+					columnIndex,
+					sortState: ascending ? _univerjs_sheets_table.SheetsTableSortStateEnum.Asc : _univerjs_sheets_table.SheetsTableSortStateEnum.Desc
+				}
+			})) closePanel();
+		} finally {
+			undoRedoGroup.dispose();
+		}
+	}
+	async function insertColumn(side) {
+		if (await commandService.executeCommand(_univerjs_sheets_table.SheetTableInsertColumnAtCommand.id, {
 			unitId,
 			subUnitId,
 			tableId,
 			index: side === "left" ? absoluteColumn : absoluteColumn + 1,
 			count: 1
-		});
-		closeDialog();
-	};
-	const deleteColumn = () => {
+		})) closePanel();
+	}
+	async function deleteColumn() {
 		if (!canDeleteColumn) return;
-		commandService.executeCommand(_univerjs_sheets_table.SheetTableRemoveColumnAtCommand.id, {
+		if (await commandService.executeCommand(_univerjs_sheets_table.SheetTableRemoveColumnAtCommand.id, {
 			unitId,
 			subUnitId,
 			tableId,
 			index: absoluteColumn,
 			count: 1
-		});
-		closeDialog();
-	};
-	const onApply = () => {
-		if (filterBy === "items") {
-			const filteredItems = [];
+		})) closePanel();
+	}
+	async function applyFilter() {
+		let filter;
+		if (detailFilterBy === "items") {
 			const emptyLabel = localeService.t("sheets-table-ui.condition.empty");
-			for (const itemInfo of data) if (checkedItemSet.has(itemInfo.title)) filteredItems.push(itemInfo.title === emptyLabel ? _univerjs_sheets_table.TABLE_FILTER_EMPTY_VALUE : itemInfo.title);
-			const originFilter = table.getTableFilterColumn(columnIndex);
-			if (originFilter) {
-				if (originFilter.values.join(",") === filteredItems.join(",")) {
-					closeDialog();
-					return;
-				}
-			} else if (filteredItems.length === 0) {
-				closeDialog();
-				return;
-			}
-			const tableFilter = {
+			const values = items.data.filter((item) => checkedItemSet.has(item.title)).map((item) => item.title === emptyLabel ? _univerjs_sheets_table.TABLE_FILTER_EMPTY_VALUE : item.title);
+			filter = values.length === items.data.length ? void 0 : {
 				filterType: _univerjs_sheets_table.TableColumnFilterTypeEnum.manual,
-				values: filteredItems
+				values
 			};
-			tableUiService.setTableFilter(unitId, tableId, columnIndex, tableFilter);
-		} else {
-			let filterInfo;
-			if (conditionInfo.compare === _univerjs_sheets_table.TableDateCompareTypeEnum.Quarter || conditionInfo.compare === _univerjs_sheets_table.TableDateCompareTypeEnum.Month) filterInfo = {
-				conditionType: conditionInfo.type,
-				compareType: Object.values(conditionInfo.info)[0]
+		} else if (detailFilterBy === "color") {
+			const cellFillColors = colors.cellFillColors.filter((item) => item.checked).map((item) => item.color);
+			const cellTextColors = colors.cellTextColors.filter((item) => item.checked).map((item) => item.color);
+			if (cellFillColors.length) filter = {
+				filterType: _univerjs_sheets_table.TableColumnFilterTypeEnum.color,
+				cellFillColors
 			};
-			else filterInfo = {
-				conditionType: conditionInfo.type,
-				compareType: conditionInfo.compare,
-				expectedValue: Object.values(conditionInfo.info)[0]
+			else if (cellTextColors.length) filter = {
+				filterType: _univerjs_sheets_table.TableColumnFilterTypeEnum.color,
+				cellTextColors
 			};
-			const tableFilter = {
+		} else if (detailFilterBy === "condition") {
+			const dynamicCompare = conditionInfo.compare === _univerjs_sheets_table.TableDateCompareTypeEnum.Quarter || conditionInfo.compare === _univerjs_sheets_table.TableDateCompareTypeEnum.Month;
+			filter = {
 				filterType: _univerjs_sheets_table.TableColumnFilterTypeEnum.condition,
-				filterInfo
+				filterInfo: {
+					conditionType: conditionInfo.type,
+					compareType: dynamicCompare ? Object.values(conditionInfo.info)[0] : conditionInfo.compare,
+					expectedValue: dynamicCompare ? void 0 : Object.values(conditionInfo.info)[0]
+				}
 			};
-			tableUiService.setTableFilter(unitId, tableId, columnIndex, tableFilter);
-		}
-		closeDialog();
-	};
-	const onClearFilter = () => {
-		tableUiService.setTableFilter(unitId, tableId, columnIndex, void 0);
-		closeDialog();
-	};
-	const workbookEditableId = new _univerjs_sheets.WorkbookEditablePermission(unitId).id;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "univer-box-border univer-flex univer-w-[400px] univer-flex-col univer-rounded-[10px] univer-bg-white univer-p-4 univer-shadow-lg dark:!univer-border-gray-600 dark:!univer-bg-gray-700",
-		children: [
-			((_permissionService$ge = permissionService.getPermissionPoint(workbookEditableId)) === null || _permissionService$ge === void 0 ? void 0 : _permissionService$ge.value) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "-univer-mx-4 -univer-mt-2 univer-mb-3 univer-border-0 univer-border-b univer-border-solid univer-border-gray-200 univer-py-1",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						className: "univer-box-border univer-flex univer-h-10 univer-w-full univer-cursor-pointer univer-items-center univer-gap-3 univer-border-none univer-bg-transparent univer-px-4 univer-text-left univer-text-sm univer-text-gray-900 hover:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-text-gray-400 dark:!univer-text-white dark:hover:!univer-bg-gray-600",
-						onClick: () => insertColumn("left"),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.LeftInsertColumnDoubleIcon, {
-							className: "univer-size-5",
-							extend: { colorChannel1: "var(--univer-primary-600)" }
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("sheets-table-ui.columnMenu.insert-left") })]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						className: "univer-box-border univer-flex univer-h-10 univer-w-full univer-cursor-pointer univer-items-center univer-gap-3 univer-border-none univer-bg-transparent univer-px-4 univer-text-left univer-text-sm univer-text-gray-900 hover:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-text-gray-400 dark:!univer-text-white dark:hover:!univer-bg-gray-600",
-						onClick: () => insertColumn("right"),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.RightInsertColumnDoubleIcon, {
-							className: "univer-size-5",
-							extend: { colorChannel1: "var(--univer-primary-600)" }
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("sheets-table-ui.columnMenu.insert-right") })]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						className: "univer-box-border univer-flex univer-h-10 univer-w-full univer-cursor-pointer univer-items-center univer-gap-3 univer-border-none univer-bg-transparent univer-px-4 univer-text-left univer-text-sm univer-text-gray-900 hover:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-text-gray-400 dark:!univer-text-white dark:hover:!univer-bg-gray-600",
-						disabled: !canDeleteColumn,
-						onClick: deleteColumn,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DeleteColumnDoubleIcon, {
-							className: "univer-size-5",
-							extend: { colorChannel1: "var(--univer-primary-600)" }
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("sheets-table-ui.columnMenu.delete") })]
-					})
-				]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-mb-3 univer-flex",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.ButtonGroup, {
-					className: "univer-mb-3 !univer-flex univer-w-full",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
-						className: "univer-w-1/2",
-						onClick: () => applySort(true),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.AscendingIcon, { className: "univer-mr-1" }), localeService.t("sheets-table-ui.sort.sort-asc")]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
-						className: "univer-w-1/2",
-						onClick: () => applySort(false),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DescendingIcon, { className: "univer-mr-1" }), localeService.t("sheets-table-ui.sort.sort-desc")]
-					})]
-				})
-			})] }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-w-full",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Segmented, {
-					value: filterBy,
-					items: filterByItems,
-					onChange: (value) => setFilterBy(value)
-				})
+		} else return;
+		if (await tableUiService.setTableFilter(unitId, tableId, columnIndex, filter)) closePanel();
+	}
+	async function clearFilter() {
+		if (await tableUiService.setTableFilter(unitId, tableId, columnIndex, void 0)) closePanel();
+	}
+	function openDetail(filterBy) {
+		if (filterBy === "items") setCheckedItemSet(new Set((tableFilter === null || tableFilter === void 0 ? void 0 : tableFilter.filterType) === _univerjs_sheets_table.TableColumnFilterTypeEnum.manual ? checkedItems : items.data.map((item) => item.title)));
+		else if (filterBy === "color") setColors(tableUiService.getTableFilterColors(unitId, subUnitId, tableId, columnIndex));
+		else if (filterBy === "condition") setConditionInfo(getInitConditionInfo(tableFilter));
+		setDetailFilterBy(filterBy);
+		setDrawerSnap("expanded");
+	}
+	function closeDetail() {
+		setDetailFilterBy(null);
+	}
+	const detailOption = FILTER_BY_OPTIONS$1.find((option) => option.value === detailFilterBy);
+	const detailTitle = detailOption ? localeService.t(detailOption.label) : "";
+	const detailDrawer = detailFilterBy ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: layerRef,
+		className: "univer-pointer-events-none univer-fixed univer-inset-0 univer-z-[1300]",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_ui.MobileDrawer, {
+			layerRef,
+			componentName: "mobile-sheet-table-filter-detail",
+			openMode: "push",
+			snap: drawerSnap,
+			expandLabel: localeService.t("sheets-table-ui.filter.resize"),
+			collapseLabel: localeService.t("sheets-table-ui.filter.resize"),
+			onSnapChange: setDrawerSnap,
+			onClose: closeDetail,
+			role: "dialog",
+			ariaLabel: detailTitle,
+			panelClassName: "univer-pointer-events-auto",
+			contentClassName: "univer-min-h-0 univer-px-4 univer-pb-4",
+			header: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+				className: "univer-grid univer-h-12 univer-flex-1 univer-grid-cols-[48px_1fr_48px] univer-items-center",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					"aria-label": localeService.t("sheets-table-ui.filter.back"),
+					className: `
+                                  ${_univerjs_design.resetButtonClassName}
+                                  univer-flex univer-size-12 univer-items-center univer-justify-center
+                                `,
+					onClick: closeDetail,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreLeftIcon, { className: "univer-size-6" })
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-truncate univer-text-center univer-text-base univer-font-semibold",
+					children: detailTitle
+				})]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-z-10 univer-h-60",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "univer-mt-3 univer-size-full",
-					children: filterBy === "items" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetTableItemsFilterPanel, {
-						tableFilter,
-						unitId,
-						subUnitId,
-						tableId,
-						columnIndex,
-						checkedItemSet,
-						setCheckedItemSet
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetTableConditionPanel, {
-						tableFilter,
-						unitId,
-						subUnitId,
-						tableId,
-						columnIndex,
-						conditionInfo,
-						onChange: setConditionInfo
-					})
-				})
+			footer: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
+				className: "univer-shrink-0 univer-border-0 univer-border-t univer-border-solid univer-border-gray-200 univer-p-4 dark:!univer-border-gray-700",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.MobileActionRowGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+					onClick: closeDetail,
+					children: localeService.t("sheets-table-ui.filter.cancel")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+					variant: "primary",
+					onClick: () => applyFilter().catch(() => void 0),
+					children: localeService.t("sheets-table-ui.filter.confirm")
+				})] })
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-flex-wrap-nowrap univer-mt-4 univer-inline-flex univer-flex-shrink-0 univer-flex-grow-0 univer-justify-between univer-gap-6 univer-overflow-hidden",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
-					disabled: tableFilter === void 0,
-					onClick: onClearFilter,
-					children: localeService.t("sheets-table-ui.filter.clear-filter")
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "univer-flex univer-gap-x-2",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
-						onClick: onCancel,
-						children: localeService.t("sheets-table-ui.filter.cancel")
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
-						variant: "primary",
-						onClick: onApply,
-						children: localeService.t("sheets-table-ui.filter.confirm")
-					})]
-				})]
+			children: [
+				detailFilterBy === "items" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileSheetTableItemsFilterPanel, {
+					items,
+					checkedItemSet,
+					setCheckedItemSet
+				}),
+				detailFilterBy === "color" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileSheetTableColorFilterPanel, {
+					colors,
+					onChange: setColors
+				}),
+				detailFilterBy === "condition" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileSheetTableConditionPanel, {
+					tableFilter,
+					unitId,
+					subUnitId,
+					tableId,
+					columnIndex,
+					conditionInfo,
+					onChange: setConditionInfo
+				})
+			]
+		})
+	}), document.body) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-flex univer-flex-col univer-gap-2",
+		children: [
+			editable && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.MobileActionRow, {
+					variant: "subtle",
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.LeftInsertColumnDoubleIcon, {}),
+					title: localeService.t("sheets-table-ui.columnMenu.insert-left"),
+					onClick: () => insertColumn("left").catch(() => void 0)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.MobileActionRow, {
+					variant: "subtle",
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.RightInsertColumnDoubleIcon, {}),
+					title: localeService.t("sheets-table-ui.columnMenu.insert-right"),
+					onClick: () => insertColumn("right").catch(() => void 0)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.MobileActionRow, {
+					variant: "subtle",
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DeleteColumnDoubleIcon, {}),
+					title: localeService.t("sheets-table-ui.columnMenu.delete"),
+					disabled: !canDeleteColumn,
+					onClick: () => deleteColumn().catch(() => void 0)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.MobileActionRow, {
+					variant: "subtle",
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.AscendingIcon, {}),
+					title: localeService.t("sheets-table-ui.sort.sort-asc"),
+					onClick: () => applySort(true).catch(() => void 0)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.MobileActionRow, {
+					variant: "subtle",
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DescendingIcon, {}),
+					title: localeService.t("sheets-table-ui.sort.sort-desc"),
+					onClick: () => applySort(false).catch(() => void 0)
+				})
+			] }),
+			FILTER_BY_OPTIONS$1.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.MobileActionRow, {
+				variant: "subtle",
+				title: localeService.t(option.label),
+				trailing: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, { className: "univer-size-5 univer-text-gray-400" }),
+				onClick: () => openDetail(option.value)
+			}, option.value)),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.MobileActionRow, {
+				variant: "subtle",
+				title: localeService.t("sheets-table-ui.filter.clear-filter"),
+				disabled: !tableFilter,
+				onClick: () => clearFilter().catch(() => void 0)
 			})
 		]
-	});
+	}), detailDrawer] });
 }
 
 //#endregion
-//#region src/views/components/SheetTableMenu.tsx
-function SheetTableMenu({ popup }) {
-	const menu = popup.extraProps;
+//#region src/views/components/MobileSheetTableMenu.tsx
+const ACTIONS = [
+	"rename",
+	"update-range",
+	"set-theme",
+	"delete"
+];
+function MobileSheetTableMenu({ menu }) {
 	if (!menu) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DropdownMenu, {
-		align: "start",
-		className: "univer-min-w-40",
-		items: [
-			{
-				type: "item",
-				children: menu.labels.rename,
-				onSelect: () => menu.onSelect("rename")
-			},
-			{
-				type: "item",
-				children: menu.labels["update-range"],
-				onSelect: () => menu.onSelect("update-range")
-			},
-			{
-				type: "item",
-				children: menu.labels["set-theme"],
-				onSelect: () => menu.onSelect("set-theme")
-			},
-			{
-				type: "item",
-				children: menu.labels.delete,
-				variant: "destructive",
-				onSelect: () => menu.onSelect("delete")
-			}
-		],
-		open: true,
-		sideOffset: 0,
-		onOpenChange: (open) => {
-			if (!open) menu.onClose();
-		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			type: "button",
-			"aria-label": menu.tableName,
-			className: "univer-block univer-h-px univer-opacity-0",
-			style: { width: menu.anchorWidth },
-			tabIndex: -1
-		})
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "univer-flex univer-flex-col univer-gap-2",
+		children: ACTIONS.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.MobileActionRow, {
+			title: menu.labels[action],
+			"aria-label": menu.labels[action],
+			variant: "subtle",
+			onClick: () => menu.onSelect(action)
+		}, action))
 	});
 }
 
 //#endregion
 //#region src/views/components/SheetTableRenameDialog.tsx
 function SheetTableRenameDialog(props) {
-	const { unitId, tableId, onClose } = props;
+	const { unitId, tableId, onClose, ActionRowComponent = _univerjs_design.ActionRow } = props;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const tableManager = (0, _univerjs_ui.useDependency)(_univerjs_sheets_table.TableManager);
@@ -1489,7 +1556,7 @@ function SheetTableRenameDialog(props) {
 				className: "-univer-mt-2 univer-text-sm univer-text-red-500",
 				children: error
 			}) : null,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ActionRowComponent, {
 				className: "univer-flex univer-w-full univer-items-center univer-justify-end univer-gap-2",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
 					className: "univer-min-w-16",
@@ -1506,10 +1573,19 @@ function SheetTableRenameDialog(props) {
 	});
 }
 
+//#endregion
+//#region src/views/components/MobileSheetTableRenameDialog.tsx
+function MobileSheetTableRenameDialog(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetTableRenameDialog, {
+		...props,
+		ActionRowComponent: _univerjs_design.MobileActionRowGroup
+	});
+}
+
 //#endregion
 //#region src/views/components/SheetTableSelector.tsx
 const SheetTableSelector = (props) => {
-	const { unitId, subUnitId, range, onCancel, onConfirm, tableId } = props;
+	const { unitId, subUnitId, range, onCancel, onConfirm, tableId, ActionRowComponent = _univerjs_design.ActionRow } = props;
 	const tableManager = (0, _univerjs_ui.useDependency)(_univerjs_sheets_table.TableManager);
 	const [selectedRange, setSelectedRange] = (0, react.useState)(range);
 	const [rangeError, setRangeError] = (0, react.useState)("");
@@ -1577,7 +1653,7 @@ const SheetTableSelector = (props) => {
 			className: "univer-mt-1 univer-text-xs univer-text-red-500",
 			children: rangeError
 		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ActionRowComponent, {
 			className: "univer-mt-4 univer-flex univer-justify-end univer-gap-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
 				onClick: onCancel,
@@ -1598,6 +1674,15 @@ const SheetTableSelector = (props) => {
 	] });
 };
 
+//#endregion
+//#region src/views/components/MobileSheetTableSelector.tsx
+function MobileSheetTableSelector(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetTableSelector, {
+		...props,
+		ActionRowComponent: _univerjs_design.MobileActionRowGroup
+	});
+}
+
 //#endregion
 //#region src/controllers/sheet-table-theme-ui.controller.ts
 let SheetTableThemeUIController = class SheetTableThemeUIController extends _univerjs_core.Disposable {
@@ -1623,7 +1708,7 @@ SheetTableThemeUIController = __decorate([__decorateParam(0, (0, _univerjs_core.
 //#region src/views/components/SheetTableThemePanel.tsx
 const SheetTableThemePanel = (props) => {
 	var _customStyle$getHeade, _customStyle$getFirst, _customStyle$getSecon, _customStyle$getLastR;
-	const { unitId, subUnitId, tableId } = props;
+	const { unitId, subUnitId, tableId, ColorPickerComponent = _univerjs_design.ColorPicker, DropdownComponent = _univerjs_design.Dropdown } = 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);
@@ -1774,7 +1859,7 @@ const SheetTableThemePanel = (props) => {
 						title: item,
 						"aria-label": item,
 						"aria-pressed": selected,
-						className: (0, _univerjs_design.clsx)("univer-flex univer-h-12 univer-w-full univer-cursor-pointer univer-flex-col univer-overflow-hidden univer-rounded-lg univer-bg-white univer-p-1 univer-shadow-sm univer-transition-all hover:univer-border-gray-400 hover:univer-shadow-md focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-200 dark:!univer-bg-gray-800", _univerjs_design.borderClassName, { "!univer-border-primary-500 univer-ring-2 univer-ring-primary-100": selected }),
+						className: (0, _univerjs_design.clsx)("univer-flex univer-h-12 univer-w-full univer-cursor-pointer univer-flex-col univer-overflow-hidden univer-rounded-lg univer-bg-gray-0 univer-p-1 univer-shadow-sm univer-transition-all hover:univer-border-gray-400 hover:univer-shadow-md focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-200 dark:!univer-bg-gray-800", _univerjs_design.borderClassName, { "!univer-border-primary-500 univer-ring-2 univer-ring-primary-100": selected }),
 						onClick: () => handleThemeChange(item),
 						children: rowBackgrounds.map((background, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "univer-min-h-0 univer-w-full univer-flex-1",
@@ -1799,7 +1884,7 @@ const SheetTableThemePanel = (props) => {
 						type: "button",
 						"data-u-comp": "sheet-table-theme-add",
 						"aria-label": localeService.t("sheets-table-ui.setTheme"),
-						className: "univer-flex univer-h-12 univer-w-full univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-lg univer-border univer-border-dashed univer-border-gray-300 univer-bg-white univer-p-0 univer-text-gray-500 univer-transition-colors hover:univer-border-primary-500 hover:univer-text-primary-600 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-200 dark:!univer-border-gray-600 dark:!univer-bg-gray-900 dark:!univer-text-gray-300",
+						className: "univer-flex univer-h-12 univer-w-full univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-lg univer-border univer-border-dashed univer-border-gray-300 univer-bg-gray-0 univer-p-0 univer-text-gray-500 univer-transition-colors hover:univer-border-primary-500 hover:univer-text-primary-600 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-200 dark:!univer-border-gray-600 dark:!univer-bg-gray-900 dark:!univer-text-gray-300",
 						onClick: handleAddCustomTheme,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.IncreaseIcon, { className: "univer-size-4" })
 					}), customRangeThemes.map((item) => {
@@ -1819,7 +1904,7 @@ const SheetTableThemePanel = (props) => {
 								title: item,
 								"aria-label": item,
 								"aria-pressed": selected,
-								className: (0, _univerjs_design.clsx)("univer-flex univer-size-full univer-cursor-pointer univer-flex-col univer-overflow-hidden univer-rounded-lg univer-bg-white univer-p-1 univer-shadow-sm univer-transition-all hover:univer-border-gray-400 hover:univer-shadow-md focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-200 dark:!univer-bg-gray-900", _univerjs_design.borderClassName, { "!univer-border-primary-500 univer-ring-2 univer-ring-primary-100": selected }),
+								className: (0, _univerjs_design.clsx)("univer-flex univer-size-full univer-cursor-pointer univer-flex-col univer-overflow-hidden univer-rounded-lg univer-bg-gray-0 univer-p-1 univer-shadow-sm univer-transition-all hover:univer-border-gray-400 hover:univer-shadow-md focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-200 dark:!univer-bg-gray-900", _univerjs_design.borderClassName, { "!univer-border-primary-500 univer-ring-2 univer-ring-primary-100": selected }),
 								onClick: () => handleThemeChange(item),
 								children: rowBackgrounds.map((background, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: "univer-min-h-0 univer-w-full univer-flex-1",
@@ -1832,7 +1917,7 @@ const SheetTableThemePanel = (props) => {
 								type: "button",
 								"data-u-comp": "sheet-table-theme-remove",
 								"aria-label": `${localeService.t("sheets-table-ui.customStyle")} ${item}`,
-								className: (0, _univerjs_design.clsx)("univer-absolute univer-right-[-6px] univer-top-[-6px] univer-z-10 univer-flex univer-size-5 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-full univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-p-0 univer-text-gray-500 univer-shadow-sm univer-transition-all hover:univer-border-red-200 hover:univer-bg-red-50 hover:univer-text-red-600 focus:univer-opacity-100 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-200 rtl:univer-left-[-6px] rtl:univer-right-auto dark:!univer-border-gray-600 dark:!univer-bg-gray-900", {
+								className: (0, _univerjs_design.clsx)("univer-absolute univer-right-[-6px] univer-top-[-6px] univer-z-10 univer-flex univer-size-5 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-full univer-border univer-border-solid univer-border-gray-200 univer-bg-gray-0 univer-p-0 univer-text-gray-500 univer-shadow-sm univer-transition-all hover:univer-border-red-200 hover:univer-bg-red-50 hover:univer-text-red-600 focus:univer-opacity-100 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-200 rtl:univer-left-[-6px] rtl:univer-right-auto dark:!univer-border-gray-600 dark:!univer-bg-gray-900", {
 									"univer-opacity-100": selected,
 									"univer-opacity-0 group-focus-within:univer-opacity-100 group-hover:univer-opacity-100": !selected
 								}),
@@ -1851,7 +1936,7 @@ const SheetTableThemePanel = (props) => {
 						className: "univer-flex univer-h-10 univer-min-w-0 univer-gap-2",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: (0, _univerjs_design.clsx)("univer-flex univer-min-w-0 univer-flex-1 univer-items-center univer-rounded-md univer-px-3 univer-text-sm univer-font-medium rtl:univer-text-right", _univerjs_design.borderClassName, {
-								"univer-text-white": row.isDark,
+								"univer-text-gray-0": row.isDark,
 								"univer-text-gray-900": !row.isDark
 							}),
 							style: { background: row.background },
@@ -1859,11 +1944,11 @@ const SheetTableThemePanel = (props) => {
 								className: "univer-truncate",
 								children: row.label
 							})
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownComponent, {
 							overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								dir: direction,
 								className: "univer-p-2",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ColorPicker, {
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPickerComponent, {
 									value: new _univerjs_core.ColorKit(row.background).toHexString(),
 									onChange: row.onChange
 								})
@@ -1871,7 +1956,7 @@ const SheetTableThemePanel = (props) => {
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 								type: "button",
 								"aria-label": `${row.label} ${localeService.t("sheets-table-ui.setTheme")}`,
-								className: (0, _univerjs_design.clsx)("univer-flex univer-h-10 univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-md univer-bg-white univer-px-2 univer-text-gray-600 univer-transition-colors hover:univer-bg-gray-100 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-200 dark:!univer-bg-gray-900 dark:!univer-text-gray-300", _univerjs_design.borderClassName),
+								className: (0, _univerjs_design.clsx)("univer-flex univer-h-10 univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-md univer-bg-gray-0 univer-px-2 univer-text-gray-600 univer-transition-colors hover:univer-bg-gray-100 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-200 dark:!univer-bg-gray-900 dark:!univer-text-gray-300", _univerjs_design.borderClassName),
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: (0, _univerjs_design.clsx)("univer-size-4 univer-rounded-full", _univerjs_design.borderClassName),
 									style: { background: row.background }
@@ -1886,7 +1971,17 @@ const SheetTableThemePanel = (props) => {
 };
 
 //#endregion
-//#region src/controllers/components.controller.ts
+//#region src/views/components/MobileSheetTableThemePanel.tsx
+function MobileSheetTableThemePanel(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetTableThemePanel, {
+		...props,
+		ColorPickerComponent: _univerjs_design.MobileColorPicker,
+		DropdownComponent: _univerjs_design.MobileDropdown
+	});
+}
+
+//#endregion
+//#region src/controllers/mobile/components.controller.ts
 /**
 * Copyright 2023-present DreamNum Co., Ltd.
 *
@@ -1902,31 +1997,53 @@ const SheetTableThemePanel = (props) => {
 * 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) {
+let MobileComponentsController = class MobileComponentsController 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_MENU, SheetTableMenu],
-			[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));
+			[SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, MobileSheetTableFilterPanel],
+			[SHEET_TABLE_MOBILE_MENU, MobileSheetTableMenu],
+			[SHEET_TABLE_RENAME_DIALOG, MobileSheetTableRenameDialog],
+			[TABLE_SELECTOR_DIALOG, MobileSheetTableSelector],
+			[SHEET_TABLE_THEME_PANEL, MobileSheetTableThemePanel]
+		].forEach(([key, component]) => {
+			this.disposeWithMe(componentManager.register(key, component));
 		});
+		this.disposeWithMe(iconManager.register({ TableIcon: _univerjs_icons.TableIcon }));
 	}
-	_registerIcons() {
-		this.disposeWithMe(this._iconManager.register({ TableIcon: _univerjs_icons.TableIcon }));
+};
+MobileComponentsController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_ui.IconManager))], MobileComponentsController);
+
+//#endregion
+//#region src/controllers/mobile/sheet-table-component.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.
+*/
+var SheetsTableMobileComponentController = class extends SheetsTableComponentController {
+	_openFilterPopup() {
+		if (!this.getCurrentTableFilterInfo()) throw new Error("[SheetsFilterUIController]: no filter model when opening filter popup!");
+		this._dialogService.open({
+			id: UNIVER_SHEET_TABLE_FILTER_PANEL_ID,
+			title: { title: "sheets-table-ui.filter.title" },
+			children: { label: SHEETS_TABLE_FILTER_PANEL_OPENED_KEY },
+			onClose: () => {
+				this._contextService.setContextValue(SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, false);
+			}
+		});
 	}
 };
-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
@@ -2176,7 +2293,7 @@ function isSameTopGap(left, right) {
 	return left.size === right.size && left.color === right.color && left.stripeColor === right.stripeColor;
 }
 let SheetTableControlsRenderController = class SheetTableControlsRenderController extends _univerjs_core.Disposable {
-	constructor(_context, _injector, _sheetSkeletonManagerService, _commandService, _tableManager, _rangeThemeModel, _workbookPermissionService, _permissionService, _sheetsSelectionsService, _selectionRenderService, _sheetTableThemeUIController, _localeService, _dialogService, _sidebarService, _sheetCanvasPopupService) {
+	constructor(_context, _injector, _sheetSkeletonManagerService, _commandService, _tableManager, _rangeThemeModel, _workbookPermissionService, _permissionService, _sheetsSelectionsService, _selectionRenderService, _sheetTableThemeUIController, _localeService, _contextService, _dialogService, _sidebarService, _sheetCanvasPopupService) {
 		super();
 		this._context = _context;
 		this._injector = _injector;
@@ -2190,6 +2307,7 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 		this._selectionRenderService = _selectionRenderService;
 		this._sheetTableThemeUIController = _sheetTableThemeUIController;
 		this._localeService = _localeService;
+		this._contextService = _contextService;
 		this._dialogService = _dialogService;
 		this._sidebarService = _sidebarService;
 		this._sheetCanvasPopupService = _sheetCanvasPopupService;
@@ -2351,6 +2469,18 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 		this._closeFloatingControls();
 		this._shape.setOpenedMenuTableId(tableId);
 		const range = table.getRange();
+		const extraProps = {
+			anchorWidth: anchor.width,
+			tableName: table.getDisplayName(),
+			labels: {
+				rename: this._localeService.t("sheets-table-ui.rename"),
+				"update-range": this._localeService.t("sheets-table-ui.updateRange"),
+				"set-theme": this._localeService.t("sheets-table-ui.setTheme"),
+				delete: this._localeService.t("sheets-table-ui.removeTable")
+			},
+			onSelect: (action) => this._handleTableMenuAction(action, unitId, subUnitId, tableId),
+			onClose: () => this._closeFloatingControls()
+		};
 		this._menuPopup = this._sheetCanvasPopupService.attachPopupByPosition({
 			left: anchor.left,
 			right: anchor.left + anchor.width,
@@ -2359,18 +2489,7 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 		}, {
 			componentKey: "SHEET_TABLE_MENU",
 			direction: "bottom-left",
-			extraProps: {
-				anchorWidth: anchor.width,
-				tableName: table.getDisplayName(),
-				labels: {
-					rename: this._localeService.t("sheets-table-ui.rename"),
-					"update-range": this._localeService.t("sheets-table-ui.updateRange"),
-					"set-theme": this._localeService.t("sheets-table-ui.setTheme"),
-					delete: this._localeService.t("sheets-table-ui.removeTable")
-				},
-				onSelect: (action) => this._handleTableMenuAction(action, unitId, subUnitId, tableId),
-				onClose: () => this._closeFloatingControls()
-			}
+			extraProps
 		}, {
 			unitId,
 			subUnitId,
@@ -2549,11 +2668,51 @@ SheetTableControlsRenderController = __decorate([
 	__decorateParam(9, _univerjs_sheets_ui.ISheetSelectionRenderService),
 	__decorateParam(10, (0, _univerjs_core.Inject)(SheetTableThemeUIController)),
 	__decorateParam(11, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService)),
-	__decorateParam(12, _univerjs_ui.IDialogService),
-	__decorateParam(13, _univerjs_ui.ISidebarService),
-	__decorateParam(14, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.SheetCanvasPopManagerService))
+	__decorateParam(12, _univerjs_core.IContextService),
+	__decorateParam(13, _univerjs_ui.IDialogService),
+	__decorateParam(14, _univerjs_ui.ISidebarService),
+	__decorateParam(15, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.SheetCanvasPopManagerService))
 ], SheetTableControlsRenderController);
 
+//#endregion
+//#region src/controllers/mobile/sheet-table-controls-render.controller.ts
+const SHEET_TABLE_MOBILE_MENU_DIALOG_ID = "sheet-table-mobile-menu";
+var SheetTableControlsMobileRenderController = class extends SheetTableControlsRenderController {
+	_toggleTableMenu(unitId, subUnitId, tableId) {
+		if (this._shape.getOpenedMenuTableId() === tableId) {
+			this._closeFloatingControls();
+			return;
+		}
+		const table = this._tableManager.getTableById(unitId, tableId);
+		const anchor = this._shape.getAnchorRegion(tableId);
+		if (!table || !anchor) return;
+		this._closeFloatingControls();
+		this._shape.setOpenedMenuTableId(tableId);
+		const extraProps = {
+			anchorWidth: anchor.width,
+			tableName: table.getDisplayName(),
+			labels: {
+				rename: this._localeService.t("sheets-table-ui.rename"),
+				"update-range": this._localeService.t("sheets-table-ui.updateRange"),
+				"set-theme": this._localeService.t("sheets-table-ui.setTheme"),
+				delete: this._localeService.t("sheets-table-ui.removeTable")
+			},
+			onSelect: (action) => this._handleTableMenuAction(action, unitId, subUnitId, tableId),
+			onClose: () => this._closeFloatingControls()
+		};
+		this._dialogService.open({
+			id: SHEET_TABLE_MOBILE_MENU_DIALOG_ID,
+			title: { title: table.getDisplayName() },
+			children: { label: {
+				name: SHEET_TABLE_MOBILE_MENU,
+				props: { menu: extraProps }
+			} },
+			onClose: () => this._closeFloatingControls()
+		});
+		this._menuPopup = (0, _univerjs_core.toDisposable)(() => this._dialogService.close(SHEET_TABLE_MOBILE_MENU_DIALOG_ID));
+	}
+};
+
 //#endregion
 //#region src/views/widgets/table-filter-button.shape.ts
 const FILTER_ICON_SIZE = 16;
@@ -2946,8 +3105,8 @@ let SheetTableMenuController = class SheetTableMenuController extends _univerjs_
 SheetTableMenuController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.IMenuManagerService))], SheetTableMenuController);
 
 //#endregion
-//#region src/plugin.ts
-let UniverSheetsTableUIPlugin = class UniverSheetsTableUIPlugin extends _univerjs_core.Plugin {
+//#region src/mobile-plugin.ts
+let UniverSheetsTableMobileUIPlugin = class UniverSheetsTableMobileUIPlugin extends _univerjs_core.Plugin {
 	constructor(_config = defaultPluginConfig, _injector, _commandService, _configService, _renderManagerService) {
 		super();
 		this._config = _config;
@@ -2961,10 +3120,11 @@ let UniverSheetsTableUIPlugin = class UniverSheetsTableUIPlugin extends _univerj
 		this._initRegisterCommand();
 	}
 	onStarting() {
-		this._injector.add([ComponentsController]);
-		this._injector.get(ComponentsController);
+		this._injector.add([MobileComponentsController]);
+		this._injector.get(MobileComponentsController);
 		(0, _univerjs_core.registerDependencies)(this._injector, [
-			[SheetsTableComponentController],
+			[SheetsTableMobileComponentController],
+			[SheetsTableComponentController, { useExisting: SheetsTableMobileComponentController }],
 			[SheetsTableUiService],
 			[SheetTableMenuController],
 			[SheetTableThemeUIController],
@@ -2973,7 +3133,7 @@ let UniverSheetsTableUIPlugin = class UniverSheetsTableUIPlugin extends _univerj
 	}
 	onReady() {
 		(0, _univerjs_core.touchDependencies)(this._injector, [
-			[SheetsTableComponentController],
+			[SheetsTableMobileComponentController],
 			[SheetsTableUiService],
 			[SheetTableMenuController],
 			[SheetTableThemeUIController],
@@ -2985,30 +3145,774 @@ let UniverSheetsTableUIPlugin = class UniverSheetsTableUIPlugin extends _univerj
 	}
 	_registerRenderModules() {
 		const renderDependencies = [];
-		if (this._config.hideAnchor !== true) renderDependencies.push([SheetTableControlsRenderController]);
+		if (this._config.hideAnchor !== true) renderDependencies.push([SheetTableControlsMobileRenderController]);
 		renderDependencies.push([SheetsTableFilterButtonRenderController], [SheetsTableRenderController]);
-		renderDependencies.forEach((m) => {
-			this.disposeWithMe(this._renderManagerService.registerRenderModule(_univerjs_core.UniverInstanceType.UNIVER_SHEET, m));
+		renderDependencies.forEach((dependency) => {
+			this.disposeWithMe(this._renderManagerService.registerRenderModule(_univerjs_core.UniverInstanceType.UNIVER_SHEET, dependency));
 		});
 	}
 	_initRegisterCommand() {
-		[OpenTableFilterPanelOperation, OpenTableSelectorOperation].forEach((m) => this._commandService.registerCommand(m));
+		[OpenTableFilterPanelOperation, OpenTableSelectorOperation].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
 	}
 };
-_defineProperty(UniverSheetsTableUIPlugin, "pluginName", PLUGIN_NAME);
-_defineProperty(UniverSheetsTableUIPlugin, "packageName", name);
-_defineProperty(UniverSheetsTableUIPlugin, "version", version);
-_defineProperty(UniverSheetsTableUIPlugin, "type", _univerjs_core.UniverInstanceType.UNIVER_SHEET);
-UniverSheetsTableUIPlugin = __decorate([
-	(0, _univerjs_core.DependentOn)(_univerjs_engine_render.UniverRenderEnginePlugin, _univerjs_sheets.UniverSheetsPlugin, _univerjs_sheets_table.UniverSheetsTablePlugin, _univerjs_sheets_ui.UniverSheetsUIPlugin),
+_defineProperty(UniverSheetsTableMobileUIPlugin, "pluginName", PLUGIN_NAME);
+_defineProperty(UniverSheetsTableMobileUIPlugin, "packageName", name);
+_defineProperty(UniverSheetsTableMobileUIPlugin, "version", version);
+_defineProperty(UniverSheetsTableMobileUIPlugin, "type", _univerjs_core.UniverInstanceType.UNIVER_SHEET);
+UniverSheetsTableMobileUIPlugin = __decorate([
+	(0, _univerjs_core.DependentOn)(_univerjs_engine_render.UniverRenderEnginePlugin, _univerjs_sheets.UniverSheetsPlugin, _univerjs_sheets_table.UniverSheetsTablePlugin, _univerjs_sheets_ui.UniverSheetsMobileUIPlugin, _univerjs_ui.UniverMobileUIPlugin),
 	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
 	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_core.ICommandService)),
 	__decorateParam(3, _univerjs_core.IConfigService),
 	__decorateParam(4, _univerjs_engine_render.IRenderManagerService)
-], UniverSheetsTableUIPlugin);
+], UniverSheetsTableMobileUIPlugin);
 
 //#endregion
-exports.SheetsTableUIMenuSchema = menuSchema;
+//#region src/views/components/SheetTableColorFilterPanel.tsx
+function ColorOption(props) {
+	const { item, label, textColor = false, onClick } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		"aria-label": item.color ?? label,
+		"aria-pressed": item.checked,
+		className: (0, _univerjs_design.clsx)(_univerjs_design.resetButtonClassName, "univer-relative univer-flex univer-size-6 univer-items-center univer-justify-center univer-rounded-full univer-border univer-border-solid univer-border-gray-200 univer-bg-gray-0 hover:univer-ring-2 hover:univer-ring-offset-2 dark:!univer-border-gray-600 dark:!univer-bg-gray-800"),
+		style: !textColor && item.color ? { backgroundColor: item.color } : void 0,
+		onClick,
+		children: [
+			!item.color && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.BanIcon, { className: "univer-size-5" }),
+			textColor && item.color && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.AIcon, {
+				className: "univer-size-5",
+				style: { color: item.color }
+			}),
+			item.checked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.SuccessIcon, { className: "univer-absolute -univer-bottom-1 -univer-right-1 univer-size-3 univer-rounded-full univer-bg-gray-0 univer-text-green-600" })
+		]
+	});
+}
+function SheetTableColorFilterPanel(props) {
+	const { colors, onChange } = props;
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const fillLabel = localeService.t("sheets-table-ui.filter.filter-by-cell-fill-color");
+	const textLabel = localeService.t("sheets-table-ui.filter.filter-by-cell-text-color");
+	const hasMultipleColors = colors.cellFillColors.length > 1 || colors.cellTextColors.length > 1;
+	function toggleColor(item, fillColor) {
+		const key = fillColor ? "cellFillColors" : "cellTextColors";
+		const otherKey = fillColor ? "cellTextColors" : "cellFillColors";
+		onChange({
+			...colors,
+			[key]: colors[key].map((color) => color.color === item.color ? {
+				...color,
+				checked: !color.checked
+			} : color),
+			[otherKey]: colors[otherKey].map((color) => ({
+				...color,
+				checked: false
+			}))
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-grid univer-h-full univer-gap-4 univer-overflow-auto univer-rounded-md univer-p-2",
+		children: [
+			colors.cellFillColors.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: "univer-m-0 univer-mb-2 univer-text-sm univer-font-normal",
+				children: fillLabel
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-grid univer-grid-cols-8 univer-gap-2",
+				children: colors.cellFillColors.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorOption, {
+					item,
+					label: fillLabel,
+					onClick: () => toggleColor(item, true)
+				}, item.color ?? "none"))
+			})] }),
+			colors.cellTextColors.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: "univer-m-0 univer-mb-2 univer-text-sm univer-font-normal",
+				children: textLabel
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-grid univer-grid-cols-8 univer-gap-2",
+				children: colors.cellTextColors.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorOption, {
+					item,
+					label: textLabel,
+					textColor: true,
+					onClick: () => toggleColor(item, false)
+				}, item.color ?? "none"))
+			})] }),
+			!hasMultipleColors && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-flex univer-size-full univer-items-center univer-justify-center univer-text-sm",
+				children: localeService.t("sheets-table-ui.filter.filter-by-color-none")
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/views/components/SheetTableConditionPanel.tsx
+const SheetTableConditionPanel = (props) => {
+	var _conditionInfo$info$d, _conditionInfo$info$d2, _conditionInfo$info$n, _conditionInfo$info$n3;
+	const { conditionInfo, onChange } = props;
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const [conditionVisible, setConditionVisible] = (0, react.useState)(false);
+	const injector = (0, _univerjs_ui.useDependency)(_univerjs_core.Injector);
+	const cascaderOptions = getCascaderListOptions(injector);
+	const handleConditionInfo = (info, type, compare) => {
+		onChange({
+			type: type ?? conditionInfo.type,
+			compare: compare ?? conditionInfo.compare,
+			info
+		});
+	};
+	const handleChange = (value) => {
+		const type = value[0];
+		const compare = value[1];
+		if (compare) setConditionVisible(false);
+		const info = {};
+		if (type === _univerjs_sheets_table.TableConditionTypeEnum.Date) if (compare === _univerjs_sheets_table.TableDateCompareTypeEnum.Quarter) info.dateSelect = _univerjs_sheets_table.TableDateCompareTypeEnum.Q1;
+		else if (compare === _univerjs_sheets_table.TableDateCompareTypeEnum.Month) info.dateSelect = _univerjs_sheets_table.TableDateCompareTypeEnum.M1;
+		else if (datePickerSet.has(compare)) info.date = /* @__PURE__ */ new Date();
+		else info.dateRange = [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()];
+		else if (type === _univerjs_sheets_table.TableConditionTypeEnum.Number) info.number = 0;
+		else if (type === _univerjs_sheets_table.TableConditionTypeEnum.String) info.string = "";
+		handleConditionInfo(info, value[0], value[1] ?? _univerjs_sheets_table.TableStringCompareTypeEnum.Equal);
+	};
+	const subComponentType = getSubComponentType(conditionInfo.type, conditionInfo.compare);
+	let selectType = "";
+	if (conditionInfo.compare) selectType = `${localeService.t(`sheets-table-ui.condition.${conditionInfo.type}`)} - ${localeService.t(`sheets-table-ui.${conditionInfo.type}.compare.${conditionInfo.compare}`)}`;
+	else selectType = localeService.t(`sheets-table-ui.condition.${conditionInfo.type}`);
+	const conditionDateOptions = getConditionDateSelect(injector, conditionInfo.compare);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
+		align: "start",
+		open: conditionVisible,
+		onOpenChange: setConditionVisible,
+		overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.CascaderList, {
+			value: [conditionInfo.type, conditionInfo.compare],
+			options: cascaderOptions,
+			onChange: handleChange,
+			contentClassName: "univer-flex-1",
+			wrapperClassName: "!univer-h-[150px]"
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-h-8 univer-w-full univer-items-center univer-justify-between univer-rounded-md univer-bg-gray-0 univer-px-2 univer-text-sm univer-transition-colors univer-duration-200 hover:univer-border-primary-600 focus:univer-border-primary-600 focus:univer-outline-none focus:univer-ring-2 dark:!univer-bg-gray-700 dark:!univer-text-gray-0", _univerjs_design.borderClassName),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: selectType }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {})]
+		})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-mt-3 univer-w-full",
+		children: [
+			subComponentType === "Input" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: conditionInfo.type === _univerjs_sheets_table.TableConditionTypeEnum.String ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
+				className: "univer-w-full",
+				placeholder: localeService.t("sheets-table-ui.filter.input-values-placeholder"),
+				value: conditionInfo.info.string,
+				onChange: (v) => handleConditionInfo({ string: v })
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+				className: "univer-h-7 univer-w-full",
+				value: conditionInfo.info.number,
+				controls: false,
+				onChange: (v) => {
+					if (v !== null) handleConditionInfo({ number: v });
+				}
+			}) }),
+			!!(subComponentType === "DatePicker") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: "univer-table-date-picker-wrapper",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DatePicker, {
+					className: "univer-w-full",
+					value: conditionInfo.info.date ?? /* @__PURE__ */ new Date(),
+					onValueChange: (v) => handleConditionInfo({ date: v })
+				})
+			}),
+			!!(subComponentType === "DateRange") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: "univer-table-date-range-wrapper",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DateRangePicker, {
+					className: "univer-w-full",
+					value: [((_conditionInfo$info$d = conditionInfo.info.dateRange) === null || _conditionInfo$info$d === void 0 ? void 0 : _conditionInfo$info$d[0]) ?? /* @__PURE__ */ new Date(), ((_conditionInfo$info$d2 = conditionInfo.info.dateRange) === null || _conditionInfo$info$d2 === void 0 ? void 0 : _conditionInfo$info$d2[1]) ?? /* @__PURE__ */ new Date()],
+					onValueChange: (v) => {
+						if (v) handleConditionInfo({ dateRange: v });
+						else handleConditionInfo({});
+					}
+				})
+			}),
+			subComponentType === "Inputs" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-flex univer-items-center univer-gap-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						className: "univer-w-full",
+						value: (_conditionInfo$info$n = conditionInfo.info.numberRange) === null || _conditionInfo$info$n === void 0 ? void 0 : _conditionInfo$info$n[0],
+						onChange: (v) => {
+							if (v !== null) {
+								var _conditionInfo$info$n2;
+								handleConditionInfo({ numberRange: [v, (_conditionInfo$info$n2 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n2 === void 0 ? void 0 : _conditionInfo$info$n2[1]] });
+							}
+						},
+						controls: false
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: " - " }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						className: "univer-w-full",
+						value: (_conditionInfo$info$n3 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n3 === void 0 ? void 0 : _conditionInfo$info$n3[1],
+						controls: false,
+						onChange: (v) => {
+							if (v !== null) {
+								var _conditionInfo$info$n4;
+								handleConditionInfo({ numberRange: [(_conditionInfo$info$n4 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n4 === void 0 ? void 0 : _conditionInfo$info$n4[0], v] });
+							}
+						}
+					})
+				]
+			}),
+			!!(subComponentType === "Select") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
+				className: "univer-w-full",
+				value: conditionInfo.info.dateSelect ?? conditionDateOptions[0].value,
+				options: conditionDateOptions,
+				onChange: (v) => handleConditionInfo({ dateSelect: v })
+			})
+		]
+	})] });
+};
+
+//#endregion
+//#region src/views/components/SheetTableItemsFilterPanel.tsx
+const getCheckedItemCount = (map, checkedItemSet) => {
+	let count = 0;
+	checkedItemSet.forEach((item) => {
+		count += map.get(item) ?? 0;
+	});
+	return count;
+};
+function SheetTableItemsFilterPanel(props) {
+	const { unitId, tableId, subUnitId, columnIndex, checkedItemSet, setCheckedItemSet, tableFilter } = 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 : getCheckedItemCount(itemsCountMap, checkedItemSet));
+	const indeterminate = !allChecked && checkedItemSet.size > 0;
+	const [searchText, setSearchText] = (0, react.useState)("");
+	const displayItems = (0, react.useMemo)(() => {
+		return searchText ? items.filter((item) => {
+			return String(item.title).toLowerCase().includes(searchText.toLowerCase());
+		}) : items;
+	}, [searchText, items]);
+	const onCheckAllToggled = (0, react.useCallback)(() => {
+		if (allChecked) {
+			checkedItemSet.clear();
+			setCheckedItemSet(new Set(checkedItemSet));
+			setAllChecked(false);
+		} else {
+			displayItems.forEach((item) => {
+				checkedItemSet.add(item.title);
+			});
+			setCheckedItemSet(new Set(checkedItemSet));
+			setAllChecked(true);
+		}
+	}, [allChecked]);
+	const onSearchValueChange = (0, react.useCallback)((str) => {
+		if (str === "") {
+			setAllChecked(true);
+			items.forEach((item) => {
+				checkedItemSet.add(item.title);
+			});
+			setCheckedCount(allItemsCount);
+		} else {
+			checkedItemSet.clear();
+			setAllChecked(false);
+			setCheckedCount(0);
+		}
+		setSearchText(str);
+	}, []);
+	const onCheckItemToggled = (key) => {
+		if (allChecked) {
+			setAllChecked(false);
+			const newSet = /* @__PURE__ */ new Set();
+			for (const { title } of items) if (key !== title) newSet.add(title);
+			setCheckedCount(allItemsCount - itemsCountMap.get(key));
+			setCheckedItemSet(newSet);
+		} else {
+			if (checkedItemSet.has(key)) {
+				checkedItemSet.delete(key);
+				setCheckedCount(checkedCount - itemsCountMap.get(key));
+			} else {
+				checkedItemSet.add(key);
+				setCheckedCount(checkedCount + itemsCountMap.get(key));
+			}
+			setCheckedItemSet(new Set(checkedItemSet));
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-flex univer-h-full univer-flex-col",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
+			autoFocus: true,
+			value: searchText,
+			placeholder: localeService.t("sheets-table-ui.filter.search-placeholder"),
+			onChange: onSearchValueChange
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, _univerjs_design.clsx)("univer-mt-2 univer-box-border univer-flex univer-h-[180px] univer-max-h-[180px] univer-flex-grow univer-flex-col univer-overflow-hidden univer-rounded-md univer-py-1.5 univer-pl-2", _univerjs_design.borderClassName),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, _univerjs_design.clsx)("univer-h-40 univer-min-w-0 univer-overflow-y-auto univer-py-1 univer-pl-2", _univerjs_design.scrollbarClassName),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "univer-h-full",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "univer-flex univer-items-center univer-px-2 univer-py-1",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
+							className: "univer-min-w-0 univer-flex-1",
+							contentClassName: "univer-flex-1 univer-min-w-0",
+							indeterminate,
+							disabled: items.length === 0,
+							checked: allChecked,
+							onChange: onCheckAllToggled,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "univer-flex univer-h-5 univer-flex-1 univer-items-center univer-text-sm",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "univer-flex-1 univer-truncate",
+									children: `${localeService.t("sheets-table-ui.filter.select-all")}`
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "univer-ml univer-text-gray-400",
+									children: `(${checkedCount}/${searchText ? displayItems.length : allItemsCount})`
+								})]
+							})
+						})
+					}), displayItems.map((item) => {
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "univer-flex univer-items-center univer-px-2 univer-py-1",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
+								className: "univer-min-w-0 univer-flex-1",
+								contentClassName: "univer-flex-1 univer-min-w-0",
+								checked: allChecked || checkedItemSet.has(item.title),
+								onChange: () => {
+									onCheckItemToggled(item.title);
+								},
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "univer-flex univer-h-5 univer-flex-1 univer-items-center univer-text-sm",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "univer-flex-1 univer-truncate",
+										children: item.title
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "univer-ml-1 univer-inline-flex univer-h-full univer-items-center univer-text-gray-400",
+										children: `(${itemsCountMap.get(item.title) || 0})`
+									})]
+								})
+							})
+						}, item.key);
+					})]
+				})
+			})
+		})]
+	});
+}
+
+//#endregion
+//#region src/views/components/SheetTableFilterPanel.tsx
+const FILTER_BY_OPTIONS = [
+	{
+		label: "sheets-table-ui.filter.by-values",
+		value: "items"
+	},
+	{
+		label: "sheets-table-ui.filter.by-colors",
+		value: "color"
+	},
+	{
+		label: "sheets-table-ui.filter.by-conditions",
+		value: "condition"
+	}
+];
+function SheetTableFilterPanel() {
+	var _permissionService$ge;
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const filterByItems = FILTER_BY_OPTIONS.map((option) => ({
+		...option,
+		label: localeService.t(option.label)
+	}));
+	const tableUiService = (0, _univerjs_ui.useDependency)(SheetsTableUiService);
+	const tableManager = (0, _univerjs_ui.useDependency)(_univerjs_sheets_table.TableManager);
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const permissionService = (0, _univerjs_ui.useDependency)(_univerjs_core.IPermissionService);
+	const undoRedoService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUndoRedoService);
+	const sheetsTableComponentController = (0, _univerjs_ui.useDependency)(SheetsTableComponentController);
+	const tableFilterPanelInfo = sheetsTableComponentController.getCurrentTableFilterInfo();
+	const panelProps = tableUiService.getTableFilterPanelInitProps(tableFilterPanelInfo.unitId, tableFilterPanelInfo.subUnitId, tableFilterPanelInfo.tableId, tableFilterPanelInfo.column);
+	const { unitId, subUnitId, tableId, tableFilter, currentFilterBy, columnIndex } = panelProps;
+	const { data } = tableUiService.getTableFilterItems(unitId, subUnitId, tableId, columnIndex);
+	const checkedItems = tableUiService.getTableFilterCheckedItems(unitId, tableId, columnIndex);
+	const [checkedItemSet, setCheckedItemSet] = (0, react.useState)(() => new Set((0, _univerjs_sheets_table.isManualTableFilter)(tableFilter) ? checkedItems : data.map((item) => item.title)));
+	const [filterBy, setFilterBy] = (0, react.useState)(currentFilterBy || "items");
+	const [conditionInfo, setConditionInfo] = (0, react.useState)(() => {
+		const tableFilter = panelProps.tableFilter;
+		return getInitConditionInfo(tableFilter);
+	});
+	const [colors, setColors] = (0, react.useState)(() => tableUiService.getTableFilterColors(unitId, subUnitId, tableId, columnIndex));
+	const table = tableManager.getTable(unitId, tableId);
+	if (!table) return null;
+	const tableRange = table.getRange();
+	const absoluteColumn = tableFilterPanelInfo.column;
+	const canDeleteColumn = tableRange.endColumn > tableRange.startColumn;
+	const closeDialog = () => {
+		sheetsTableComponentController.closeFilterPanel();
+	};
+	const onCancel = () => {
+		closeDialog();
+	};
+	const applySort = async (asc) => {
+		const range = table.getTableFilterRange();
+		const undoRedoGroup = undoRedoService.beginUndoRedoGroup(unitId, (0, _univerjs_core.generateRandomId)(), "append");
+		try {
+			if (!await commandService.executeCommand(_univerjs_sheets_sort.SortRangeCommand.id, {
+				unitId,
+				subUnitId,
+				range,
+				orderRules: [{
+					colIndex: columnIndex + range.startColumn,
+					type: asc ? _univerjs_sheets_sort.SortType.ASC : _univerjs_sheets_sort.SortType.DESC
+				}],
+				hasTitle: false
+			})) return;
+			if (await commandService.executeCommand(_univerjs_sheets_table.SetSheetTableSortStateCommand.id, {
+				unitId,
+				tableId,
+				sortInfo: {
+					columnIndex,
+					sortState: asc ? _univerjs_sheets_table.SheetsTableSortStateEnum.Asc : _univerjs_sheets_table.SheetsTableSortStateEnum.Desc
+				}
+			})) closeDialog();
+		} finally {
+			undoRedoGroup.dispose();
+		}
+	};
+	const insertColumn = async (side) => {
+		if (await commandService.executeCommand(_univerjs_sheets_table.SheetTableInsertColumnAtCommand.id, {
+			unitId,
+			subUnitId,
+			tableId,
+			index: side === "left" ? absoluteColumn : absoluteColumn + 1,
+			count: 1
+		})) closeDialog();
+	};
+	const deleteColumn = async () => {
+		if (!canDeleteColumn) return;
+		if (await commandService.executeCommand(_univerjs_sheets_table.SheetTableRemoveColumnAtCommand.id, {
+			unitId,
+			subUnitId,
+			tableId,
+			index: absoluteColumn,
+			count: 1
+		})) closeDialog();
+	};
+	const onApply = async () => {
+		let filter;
+		if (filterBy === "items") {
+			const filteredItems = [];
+			const emptyLabel = localeService.t("sheets-table-ui.condition.empty");
+			for (const itemInfo of data) if (checkedItemSet.has(itemInfo.title)) filteredItems.push(itemInfo.title === emptyLabel ? _univerjs_sheets_table.TABLE_FILTER_EMPTY_VALUE : itemInfo.title);
+			const originFilter = table.getTableFilterColumn(columnIndex);
+			if ((0, _univerjs_sheets_table.isManualTableFilter)(originFilter)) {
+				if (originFilter.values.join(",") === filteredItems.join(",")) {
+					closeDialog();
+					return;
+				}
+			} else if (filteredItems.length === data.length && !originFilter) {
+				closeDialog();
+				return;
+			}
+			filter = filteredItems.length === data.length ? void 0 : {
+				filterType: _univerjs_sheets_table.TableColumnFilterTypeEnum.manual,
+				values: filteredItems
+			};
+		} else if (filterBy === "color") {
+			const cellFillColors = colors.cellFillColors.filter((item) => item.checked).map((item) => item.color);
+			const cellTextColors = colors.cellTextColors.filter((item) => item.checked).map((item) => item.color);
+			if (cellFillColors.length) filter = {
+				filterType: _univerjs_sheets_table.TableColumnFilterTypeEnum.color,
+				cellFillColors
+			};
+			else if (cellTextColors.length) filter = {
+				filterType: _univerjs_sheets_table.TableColumnFilterTypeEnum.color,
+				cellTextColors
+			};
+		} else {
+			let filterInfo;
+			if (conditionInfo.compare === _univerjs_sheets_table.TableDateCompareTypeEnum.Quarter || conditionInfo.compare === _univerjs_sheets_table.TableDateCompareTypeEnum.Month) filterInfo = {
+				conditionType: conditionInfo.type,
+				compareType: Object.values(conditionInfo.info)[0]
+			};
+			else filterInfo = {
+				conditionType: conditionInfo.type,
+				compareType: conditionInfo.compare,
+				expectedValue: Object.values(conditionInfo.info)[0]
+			};
+			filter = {
+				filterType: _univerjs_sheets_table.TableColumnFilterTypeEnum.condition,
+				filterInfo
+			};
+		}
+		if (await tableUiService.setTableFilter(unitId, tableId, columnIndex, filter)) closeDialog();
+	};
+	const onClearFilter = async () => {
+		if (await tableUiService.setTableFilter(unitId, tableId, columnIndex, void 0)) closeDialog();
+	};
+	const workbookEditableId = new _univerjs_sheets.WorkbookEditablePermission(unitId).id;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-box-border univer-flex univer-w-[400px] univer-flex-col univer-rounded-[10px] univer-bg-gray-0 univer-p-4 univer-shadow-lg dark:!univer-border-gray-600 dark:!univer-bg-gray-700",
+		children: [
+			((_permissionService$ge = permissionService.getPermissionPoint(workbookEditableId)) === null || _permissionService$ge === void 0 ? void 0 : _permissionService$ge.value) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "-univer-mx-4 -univer-mt-2 univer-mb-3 univer-border-0 univer-border-b univer-border-solid univer-border-gray-200 univer-py-1",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: "univer-box-border univer-flex univer-h-10 univer-w-full univer-cursor-pointer univer-items-center univer-gap-3 univer-border-none univer-bg-transparent univer-px-4 univer-text-left univer-text-sm univer-text-gray-900 hover:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-text-gray-400 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-600",
+						onClick: () => insertColumn("left").catch(() => void 0),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.LeftInsertColumnDoubleIcon, {
+							className: "univer-size-5",
+							extend: { colorChannel1: "var(--univer-primary-600)" }
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("sheets-table-ui.columnMenu.insert-left") })]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: "univer-box-border univer-flex univer-h-10 univer-w-full univer-cursor-pointer univer-items-center univer-gap-3 univer-border-none univer-bg-transparent univer-px-4 univer-text-left univer-text-sm univer-text-gray-900 hover:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-text-gray-400 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-600",
+						onClick: () => insertColumn("right").catch(() => void 0),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.RightInsertColumnDoubleIcon, {
+							className: "univer-size-5",
+							extend: { colorChannel1: "var(--univer-primary-600)" }
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("sheets-table-ui.columnMenu.insert-right") })]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: "univer-box-border univer-flex univer-h-10 univer-w-full univer-cursor-pointer univer-items-center univer-gap-3 univer-border-none univer-bg-transparent univer-px-4 univer-text-left univer-text-sm univer-text-gray-900 hover:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-text-gray-400 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-600",
+						disabled: !canDeleteColumn,
+						onClick: () => deleteColumn().catch(() => void 0),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DeleteColumnDoubleIcon, {
+							className: "univer-size-5",
+							extend: { colorChannel1: "var(--univer-primary-600)" }
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("sheets-table-ui.columnMenu.delete") })]
+					})
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-mb-3 univer-flex",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.ButtonGroup, {
+					className: "univer-mb-3 !univer-flex univer-w-full",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
+						className: "univer-w-1/2",
+						onClick: () => applySort(true).catch(() => void 0),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.AscendingIcon, { className: "univer-mr-1" }), localeService.t("sheets-table-ui.sort.sort-asc")]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
+						className: "univer-w-1/2",
+						onClick: () => applySort(false).catch(() => void 0),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DescendingIcon, { className: "univer-mr-1" }), localeService.t("sheets-table-ui.sort.sort-desc")]
+					})]
+				})
+			})] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-w-full",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Segmented, {
+					value: filterBy,
+					items: filterByItems,
+					onChange: (value) => setFilterBy(value)
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-z-10 univer-h-60",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "univer-mt-3 univer-size-full",
+					children: [
+						filterBy === "items" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetTableItemsFilterPanel, {
+							tableFilter,
+							unitId,
+							subUnitId,
+							tableId,
+							columnIndex,
+							checkedItemSet,
+							setCheckedItemSet
+						}),
+						filterBy === "color" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetTableColorFilterPanel, {
+							colors,
+							onChange: setColors
+						}),
+						filterBy === "condition" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetTableConditionPanel, {
+							tableFilter,
+							unitId,
+							subUnitId,
+							tableId,
+							columnIndex,
+							conditionInfo,
+							onChange: setConditionInfo
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.ActionRow, {
+				className: "univer-flex-wrap-nowrap univer-mt-4 univer-inline-flex univer-flex-shrink-0 univer-flex-grow-0 univer-justify-between univer-gap-6 univer-overflow-hidden",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+					disabled: tableFilter === void 0,
+					onClick: () => onClearFilter().catch(() => void 0),
+					children: localeService.t("sheets-table-ui.filter.clear-filter")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.ActionRow, {
+					className: "univer-flex univer-flex-1 univer-gap-x-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+						onClick: onCancel,
+						children: localeService.t("sheets-table-ui.filter.cancel")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+						variant: "primary",
+						onClick: () => onApply().catch(() => void 0),
+						children: localeService.t("sheets-table-ui.filter.confirm")
+					})]
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/views/components/SheetTableMenu.tsx
+function SheetTableMenu({ popup }) {
+	const menu = popup.extraProps;
+	if (!menu) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DropdownMenu, {
+		align: "start",
+		className: "univer-min-w-40",
+		items: [
+			{
+				type: "item",
+				children: menu.labels.rename,
+				onSelect: () => menu.onSelect("rename")
+			},
+			{
+				type: "item",
+				children: menu.labels["update-range"],
+				onSelect: () => menu.onSelect("update-range")
+			},
+			{
+				type: "item",
+				children: menu.labels["set-theme"],
+				onSelect: () => menu.onSelect("set-theme")
+			},
+			{
+				type: "item",
+				children: menu.labels.delete,
+				variant: "destructive",
+				onSelect: () => menu.onSelect("delete")
+			}
+		],
+		open: true,
+		sideOffset: 0,
+		onOpenChange: (open) => {
+			if (!open) menu.onClose();
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			"aria-label": menu.tableName,
+			className: "univer-block univer-h-px univer-opacity-0",
+			style: { width: menu.anchorWidth },
+			tabIndex: -1
+		})
+	});
+}
+
+//#endregion
+//#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_MENU, SheetTableMenu],
+			[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/plugin.ts
+let UniverSheetsTableUIPlugin = class UniverSheetsTableUIPlugin extends _univerjs_core.Plugin {
+	constructor(_config = defaultPluginConfig, _injector, _commandService, _configService, _renderManagerService) {
+		super();
+		this._config = _config;
+		this._injector = _injector;
+		this._commandService = _commandService;
+		this._configService = _configService;
+		this._renderManagerService = _renderManagerService;
+		const { menu, ...rest } = (0, _univerjs_core.merge)({}, defaultPluginConfig, this._config);
+		if (menu) this._configService.setConfig("menu", menu, { merge: true });
+		this._configService.setConfig(SHEETS_TABLE_UI_PLUGIN_CONFIG_KEY, rest);
+		this._initRegisterCommand();
+	}
+	onStarting() {
+		this._injector.add([ComponentsController]);
+		this._injector.get(ComponentsController);
+		(0, _univerjs_core.registerDependencies)(this._injector, [
+			[SheetsTableComponentController],
+			[SheetsTableUiService],
+			[SheetTableMenuController],
+			[SheetTableThemeUIController],
+			[SheetTableSelectionController]
+		]);
+	}
+	onReady() {
+		(0, _univerjs_core.touchDependencies)(this._injector, [
+			[SheetsTableComponentController],
+			[SheetsTableUiService],
+			[SheetTableMenuController],
+			[SheetTableThemeUIController],
+			[SheetTableSelectionController]
+		]);
+	}
+	onRendered() {
+		this._registerRenderModules();
+	}
+	_registerRenderModules() {
+		const renderDependencies = [];
+		if (this._config.hideAnchor !== true) renderDependencies.push([SheetTableControlsRenderController]);
+		renderDependencies.push([SheetsTableFilterButtonRenderController], [SheetsTableRenderController]);
+		renderDependencies.forEach((m) => {
+			this.disposeWithMe(this._renderManagerService.registerRenderModule(_univerjs_core.UniverInstanceType.UNIVER_SHEET, m));
+		});
+	}
+	_initRegisterCommand() {
+		[OpenTableFilterPanelOperation, OpenTableSelectorOperation].forEach((m) => this._commandService.registerCommand(m));
+	}
+};
+_defineProperty(UniverSheetsTableUIPlugin, "pluginName", PLUGIN_NAME);
+_defineProperty(UniverSheetsTableUIPlugin, "packageName", name);
+_defineProperty(UniverSheetsTableUIPlugin, "version", version);
+_defineProperty(UniverSheetsTableUIPlugin, "type", _univerjs_core.UniverInstanceType.UNIVER_SHEET);
+UniverSheetsTableUIPlugin = __decorate([
+	(0, _univerjs_core.DependentOn)(_univerjs_engine_render.UniverRenderEnginePlugin, _univerjs_sheets.UniverSheetsPlugin, _univerjs_sheets_table.UniverSheetsTablePlugin, _univerjs_sheets_ui.UniverSheetsUIPlugin),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_core.ICommandService)),
+	__decorateParam(3, _univerjs_core.IConfigService),
+	__decorateParam(4, _univerjs_engine_render.IRenderManagerService)
+], UniverSheetsTableUIPlugin);
+
+//#endregion
+exports.SheetsTableUIMenuSchema = menuSchema;
+Object.defineProperty(exports, 'UniverSheetsTableMobileUIPlugin', {
+  enumerable: true,
+  get: function () {
+    return UniverSheetsTableMobileUIPlugin;
+  }
+});
 Object.defineProperty(exports, 'UniverSheetsTableUIPlugin', {
   enumerable: true,
   get: function () {