@univerjs/sheets-table-ui 1.0.0-rc.0 → 1.0.1

package/lib/es/index.js

@@ -1,14 +1,14 @@
-import { AddSheetTableCommand, AddTableThemeCommand, DeleteSheetTableCommand, RemoveTableThemeCommand, SHEET_TABLE_CUSTOM_THEME_PREFIX, SetSheetTableCommand, SetSheetTableFilterCommand, SetSheetTableSortStateCommand, SheetTableInsertColCommand, SheetTableInsertColumnAtCommand, SheetTableInsertRowAtCommand, SheetTableInsertRowCommand, SheetTableRemoveColCommand, SheetTableRemoveColumnAtCommand, SheetTableRemoveRowCommand, SheetTableService, SheetsTableController, SheetsTableSortStateEnum, TABLE_FILTER_EMPTY_VALUE, TableColumnFilterTypeEnum, TableConditionTypeEnum, TableDateCompareTypeEnum, TableManager, TableNumberCompareTypeEnum, TableStringCompareTypeEnum, UniverSheetsTablePlugin, customEmptyThemeWithBorderStyle, getExistingNamesSet, isColorTableFilter, isConditionFilter, isManualTableFilter, processStyleWithBorderStyle, validateSheetTableName } from "@univerjs/sheets-table";
+import { AddSheetTableCommand, AddTableThemeCommand, DeleteSheetTableCommand, RemoveTableThemeCommand, SHEET_TABLE_CUSTOM_THEME_PREFIX, SetSheetTableCommand, SetSheetTableFilterCommand, SetSheetTableFilterMutation, SetSheetTableMutation, SetSheetTableSortStateCommand, SheetTableInsertColCommand, SheetTableInsertColumnAtCommand, SheetTableInsertRowAtCommand, SheetTableInsertRowCommand, SheetTableRemoveColCommand, SheetTableRemoveColumnAtCommand, SheetTableRemoveRowCommand, SheetTableService, SheetsTableController, SheetsTableSortStateEnum, TABLE_FILTER_EMPTY_VALUE, TableColumnFilterTypeEnum, TableConditionTypeEnum, TableDateCompareTypeEnum, TableManager, TableNumberCompareTypeEnum, TableStringCompareTypeEnum, UniverSheetsTablePlugin, compileTableRecordFilter, customEmptyThemeWithBorderStyle, getExistingNamesSet, getTableRecordValue, getTableRecordValueKey, isColorTableFilter, isConditionFilter, isManualTableFilter, isRecordTableFilter, processStyleWithBorderStyle, validateSheetTableName } from "@univerjs/sheets-table";
 import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IMenuManagerService, ISidebarService, IconManager, MenuItemType, MobileDrawer, RibbonDataGroup, UniverMobileUIPlugin, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
-import { ColorKit, CommandType, DEFAULT_STYLES, DependentOn, Disposable, ErrorService, ICommandService, IConfigService, IContextService, IPermissionService, IUndoRedoService, IUniverInstanceService, Inject, Injector, InterceptorEffectEnum, LocaleService, ObjectMatrix, Plugin, Rectangle, RxDisposable, UniverInstanceType, VerticalAlign, cellToRange, fromCallback, generateRandomId, getColorStyle, merge, registerDependencies, toDisposable, touchDependencies } from "@univerjs/core";
+import { ColorKit, CommandType, DEFAULT_STYLES, DependentOn, Disposable, ErrorService, FilterSelectionMode, ICommandService, IConfigService, IContextService, IPermissionService, IUndoRedoService, IUniverInstanceService, Inject, Injector, InterceptorEffectEnum, LocaleService, ObjectMatrix, Plugin, RecordValueType, Rectangle, RxDisposable, UniverInstanceType, VerticalAlign, cellToRange, fromCallback, generateRandomId, getColorStyle, merge, registerDependencies, toDisposable, touchDependencies } from "@univerjs/core";
 import { INTERCEPTOR_POINT, RangeThemeStyle, SelectRangeCommand, SetRangeThemeMutation, SetRangeValuesMutation, SetSelectionsOperation, SetVerticalTextAlignCommand, SheetInterceptorService, SheetRangeThemeModel, SheetsSelectionsService, UniverSheetsPlugin, WorkbookEditablePermission, WorkbookPermissionService, expandToContinuousRange, getPrimaryForRange, getSheetCommandTarget, isSingleCellSelection } from "@univerjs/sheets";
 import { ExpandSelectionCommand, ISheetSelectionRenderService, MoveSelectionCommand, MoveSelectionEnterAndTabCommand, SHEET_VIEW_KEY, SelectAllCommand, SetScrollOperation, SetZoomRatioOperation, SheetCanvasPopManagerService, SheetSkeletonManagerService, UniverSheetsMobileUIPlugin, UniverSheetsUIPlugin, getCoordByCell, getCurrentRangeDisable$, getTransformCoord } from "@univerjs/sheets-ui";
 import { Subject, distinctUntilChanged, filter, map, merge as merge$1, of, startWith, switchMap, takeUntil } from "rxjs";
 import { CURSOR_TYPE, DEFAULT_FONTFACE_PLANE, IRenderManagerService, Shape, UniverRenderEnginePlugin } from "@univerjs/engine-render";
 import { AIcon, AscendingIcon, BanIcon, CheckMarkIcon, CloseIcon, DeleteColumnDoubleIcon, DescendingIcon, DownIcon, IncreaseIcon, LeftInsertColumnDoubleIcon, MoreDownIcon, MoreLeftIcon, MoreRightIcon, RightInsertColumnDoubleIcon, SuccessIcon, TableIcon } from "@univerjs/icons";
-import { ActionRow, Button, ButtonGroup, CascaderList, Checkbox, ColorPicker, DatePicker, DateRangePicker, Dropdown, DropdownMenu, Input, InputNumber, MobileActionRow, MobileActionRowGroup, MobileColorPicker, MobileDropdown, MobileSelect, Segmented, Select, borderClassName, clsx, resetButtonClassName, scrollbarClassName } from "@univerjs/design";
+import { ActionRow, Button, ButtonGroup, CascaderList, Checkbox, ColorPicker, DatePicker, DateRangePicker, Dropdown, DropdownMenu, FormLayout, Input, InputNumber, MobileActionRow, MobileActionRowGroup, MobileColorPicker, MobileDropdown, MobileSelect, Segmented, Select, borderClassName, clsx, resetButtonClassName, scrollbarClassName } from "@univerjs/design";
 import { SortRangeCommand, SortType } from "@univerjs/sheets-sort";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { IDefinedNamesService, deserializeRangeWithSheet, serializeRange } from "@univerjs/engine-formula";
@@ -36,6 +36,8 @@ const UNIVER_SHEET_TABLE_FILTER_PANEL_ID = "UNIVER_SHEET_Table_FILTER_PANEL_ID";
 const TABLE_SELECTOR_DIALOG = "TABLE_SELECTOR_DIALOG";
 const SHEET_TABLE_RENAME_DIALOG = "SHEET_TABLE_RENAME_DIALOG";
 const SHEET_TABLE_RENAME_DIALOG_ID = "SHEET_TABLE_RENAME_DIALOG_ID";
+const SHEET_TABLE_SETTINGS_DIALOG = "SHEET_TABLE_SETTINGS_DIALOG";
+const SHEET_TABLE_SETTINGS_DIALOG_ID = "SHEET_TABLE_SETTINGS_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";
@@ -184,7 +186,8 @@ function getSheetTableRowColOperationHidden$(accessor) {
 			return sheetsSelectionsService.selectionMoveEnd$.pipe(startWith(sheetsSelectionsService.getCurrentSelections()), switchMap((selections) => {
 				if (!selections.length || selections.length > 1) return of(true);
 				const range = selections[0].range;
-				return of(!accessor.get(SheetsTableController).getContainerTableWithRange(workbook.getUnitId(), sheet.getSheetId(), range));
+				const isInTable = accessor.get(SheetsTableController).getContainerTableWithRange(workbook.getUnitId(), sheet.getSheetId(), range);
+				return of(!isInTable);
 			}));
 		}));
 	}));
@@ -250,10 +253,10 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-table-ui";
-var version = "1.0.0-rc.0";
+var version = "1.0.1";
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -264,7 +267,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -277,14 +280,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -295,7 +298,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -303,7 +306,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -389,6 +392,37 @@ SheetsTableComponentController = __decorate([
 	__decorateParam(2, Inject(IDialogService))
 ], SheetsTableComponentController);
 
+//#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);
+			}
+		});
+	}
+};
+
 //#endregion
 //#region src/commands/operations/open-table-filter-dialog.opration.ts
 const OpenTableFilterPanelOperation = {
@@ -411,6 +445,28 @@ const OpenTableFilterPanelOperation = {
 	}
 };
 
+//#endregion
+//#region src/commands/operations/mobile/open-table-filter-dialog.operation.ts
+const OpenTableFilterPanelMobileOperation = {
+	type: CommandType.OPERATION,
+	id: OpenTableFilterPanelOperation.id,
+	async handler(accessor, params) {
+		if (!params) return false;
+		const { row, col, unitId, subUnitId, tableId } = params;
+		const tableManager = accessor.get(TableManager);
+		const componentController = accessor.get(SheetsTableMobileComponentController);
+		if (!tableManager.getTable(unitId, tableId)) return false;
+		componentController.openOrToggleFilterPanel({
+			unitId,
+			subUnitId,
+			row,
+			tableId,
+			column: col
+		});
+		return true;
+	}
+};
+
 //#endregion
 //#region src/config/config.ts
 const SHEETS_TABLE_UI_PLUGIN_CONFIG_KEY = "sheets-table-ui.config";
@@ -434,7 +490,7 @@ let SheetsTableUiService = class SheetsTableUiService extends Disposable {
 		this._registerTableFilterChangeEvent();
 	}
 	_registerTableFilterChangeEvent() {
-		this._commandService.onCommandExecuted((command) => {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
 			if (command.id === SetRangeValuesMutation.id) {
 				const { unitId, subUnitId, cellValue } = command.params;
 				const tables = this._tableManager.getTablesBySubunitId(unitId, subUnitId);
@@ -447,20 +503,19 @@ let SheetsTableUiService = class SheetsTableUiService extends Disposable {
 					});
 					if (overlapTable) {
 						const colIndex = col - overlapTable.getRange().startColumn;
-						this._itemsCache.delete(overlapTable.getId() + colIndex);
+						this._itemsCache.delete(this._getItemsCacheKey(unitId, overlapTable.getId(), colIndex));
 					}
 				});
-			} else if (command.id === SetSheetTableFilterCommand.id) {
+			} else if (command.id === SetSheetTableFilterMutation.id) {
 				const { unitId, tableId } = command.params;
 				const table = this._tableManager.getTable(unitId, tableId);
 				if (!table) return;
 				const subUnitId = table.getSubunitId();
 				this._tableManager.getTablesBySubunitId(unitId, subUnitId).forEach((table) => {
-					const range = table.getRange();
-					for (let i = range.startColumn; i <= range.endColumn; i++) this._itemsCache.delete(table.getId() + i);
+					for (let columnIndex = 0; columnIndex < table.getColumnsCount(); columnIndex++) this._itemsCache.delete(this._getItemsCacheKey(unitId, table.getId(), columnIndex));
 				});
 			}
-		});
+		}));
 	}
 	getTableFilterPanelInitProps(unitId, subUnitId, tableId, column) {
 		const table = this._tableManager.getTable(unitId, tableId);
@@ -480,10 +535,43 @@ let SheetsTableUiService = class SheetsTableUiService extends Disposable {
 		const checkedItems = [];
 		if (table) {
 			const filter = table.getTableFilterColumn(columnIndex);
-			if (filter && isManualTableFilter(filter)) checkedItems.push(...filter.values.map((value) => value === TABLE_FILTER_EMPTY_VALUE ? this._localeService.t("sheets-table-ui.condition.empty") : value));
+			if (isManualTableFilter(filter)) checkedItems.push(...filter.values.map((value) => value === TABLE_FILTER_EMPTY_VALUE ? this._localeService.t("sheets-table-ui.condition.empty") : value));
+			else if (isRecordTableFilter(filter)) {
+				const accepts = compileTableRecordFilter(filter);
+				const items = this.getTableFilterItems(unitId, table.getSubunitId(), tableId, columnIndex);
+				checkedItems.push(...items.data.filter((item) => item.recordValue && accepts(item.recordValue)).map((item) => item.valueKey));
+			}
 		}
 		return checkedItems;
 	}
+	createItemFilter(unitId, tableId, columnIndex, items, checkedItemSet, selectAllRequested) {
+		const table = this._tableManager.getTable(unitId, tableId);
+		const currentFilter = table === null || table === void 0 ? void 0 : table.getTableFilterColumn(columnIndex);
+		if (selectAllRequested) return;
+		if (!isRecordTableFilter(currentFilter)) {
+			const emptyLabel = this._localeService.t("sheets-table-ui.condition.empty");
+			const values = items.data.filter((item) => checkedItemSet.has(item.valueKey ?? item.title)).map((item) => item.title === emptyLabel ? TABLE_FILTER_EMPTY_VALUE : item.title);
+			return values.length === items.data.length ? void 0 : {
+				filterType: TableColumnFilterTypeEnum.manual,
+				values
+			};
+		}
+		const accepts = compileTableRecordFilter(currentFilter);
+		const recordItems = items.data.filter((item) => item.valueKey && item.recordValue);
+		if (recordItems.every((item) => checkedItemSet.has(item.valueKey) === accepts(item.recordValue))) return currentFilter;
+		const candidateKeys = new Set(recordItems.map((item) => item.valueKey));
+		const values = currentFilter.values.filter((value) => !candidateKeys.has(getTableRecordValueKey(value))).map((value) => value.type === RecordValueType.Blank ? { type: RecordValueType.Blank } : { ...value });
+		recordItems.forEach((item) => {
+			const selected = checkedItemSet.has(item.valueKey);
+			if (currentFilter.mode === FilterSelectionMode.Include === selected) values.push(item.recordValue);
+		});
+		if (currentFilter.mode === FilterSelectionMode.Exclude && values.length === 0) return;
+		return {
+			filterType: TableColumnFilterTypeEnum.record,
+			mode: currentFilter.mode,
+			values
+		};
+	}
 	async setTableFilter(unitId, tableId, columnIndex, tableFilter) {
 		if (!this._tableManager.getTable(unitId, tableId)) return false;
 		const setTableFilterParams = {
@@ -535,13 +623,14 @@ let SheetsTableUiService = class SheetsTableUiService extends Disposable {
 	}
 	getTableFilterItems(unitId, subUnitId, tableId, columnIndex) {
 		var _this$_univerInstance2;
-		if (this._itemsCache.has(tableId + columnIndex)) return this._itemsCache.get(tableId + columnIndex) || {
+		const table = this._tableManager.getTable(unitId, tableId);
+		if (!table) return {
 			data: [],
 			itemsCountMap: /* @__PURE__ */ new Map(),
 			allItemsCount: 0
 		};
-		const table = this._tableManager.getTable(unitId, tableId);
-		if (!table) return {
+		const cacheKey = this._getItemsCacheKey(unitId, tableId, columnIndex);
+		if (this._itemsCache.has(cacheKey)) return this._itemsCache.get(cacheKey) || {
 			data: [],
 			itemsCountMap: /* @__PURE__ */ new Map(),
 			allItemsCount: 0
@@ -556,21 +645,29 @@ let SheetsTableUiService = class SheetsTableUiService extends Disposable {
 		};
 		const data = [];
 		const map = /* @__PURE__ */ new Map();
+		const currentFilter = table.getTableFilterColumn(columnIndex);
+		const useRecordValues = isRecordTableFilter(currentFilter);
 		const filteredRowsByOtherColumns = this._getFilteredRowsByOtherColumns(worksheet, tableId, unitId, columnIndex);
 		let allItemsCount = 0;
 		for (let row = startRow; row <= endRow; row++) {
 			if (filteredRowsByOtherColumns.has(row)) continue;
 			let stringItem = this._sheetTableService.getCellValueWithConditionType(worksheet, row, column);
 			if (stringItem == null) stringItem = this._localeService.t("sheets-table-ui.condition.empty");
-			if (!map.has(stringItem)) data.push({
+			if (useRecordValues && typeof stringItem !== "string") stringItem = String(stringItem);
+			const recordValue = useRecordValues ? getTableRecordValue(worksheet, row, column) : void 0;
+			const valueKey = recordValue ? getTableRecordValueKey(recordValue) : void 0;
+			const itemKey = valueKey ?? stringItem;
+			if (!map.has(itemKey)) data.push({
 				title: stringItem,
-				key: `${column}_${row}`,
-				leaf: true
+				key: valueKey ?? `${column}_${row}`,
+				leaf: true,
+				valueKey,
+				recordValue
 			});
 			allItemsCount++;
-			map.set(stringItem, (map.get(stringItem) || 0) + 1);
+			map.set(itemKey, (map.get(itemKey) || 0) + 1);
 		}
-		this._itemsCache.set(tableId + columnIndex, {
+		this._itemsCache.set(cacheKey, {
 			data,
 			itemsCountMap: map,
 			allItemsCount
@@ -581,6 +678,15 @@ let SheetsTableUiService = class SheetsTableUiService extends Disposable {
 			allItemsCount
 		};
 	}
+	_getItemsCacheKey(unitId, tableId, columnIndex) {
+		var _this$_tableManager$g;
+		const columnId = (_this$_tableManager$g = this._tableManager.getTable(unitId, tableId)) === null || _this$_tableManager$g === void 0 || (_this$_tableManager$g = _this$_tableManager$g.getTableColumnByIndex(columnIndex)) === null || _this$_tableManager$g === void 0 ? void 0 : _this$_tableManager$g.id;
+		return JSON.stringify([
+			unitId,
+			tableId,
+			columnId ?? columnIndex
+		]);
+	}
 	_getFilteredRowsByOtherColumns(worksheet, tableId, unitId, columnIndex) {
 		const filteredRows = /* @__PURE__ */ new Set();
 		const table = this._tableManager.getTable(unitId, tableId);
@@ -945,9 +1051,10 @@ const datePickerSet = /* @__PURE__ */ new Set([
 function getSubComponentType(type, compare) {
 	if (!compare) return "None";
 	if (type === TableConditionTypeEnum.String) return "Input";
-	else if (type === TableConditionTypeEnum.Number) if (compare === TableNumberCompareTypeEnum.Between || compare === TableNumberCompareTypeEnum.NotBetween) return "Inputs";
-	else return "Input";
-	else if (type === TableConditionTypeEnum.Date) {
+	else if (type === TableConditionTypeEnum.Number) {
+		if (compare === TableNumberCompareTypeEnum.Between || compare === TableNumberCompareTypeEnum.NotBetween) return "Inputs";
+		else return "Input";
+	} else if (type === TableConditionTypeEnum.Date) {
 		if (compare === TableDateCompareTypeEnum.Between || compare === TableDateCompareTypeEnum.NotBetween) return "DateRange";
 		else if (compare === TableDateCompareTypeEnum.Quarter || compare === TableDateCompareTypeEnum.Month) return "Select";
 		else if (datePickerSet.has(compare)) return "DatePicker";
@@ -963,56 +1070,58 @@ function getInitConditionInfo(tableFilter) {
 	};
 	const filterInfo = tableFilter.filterInfo;
 	const { conditionType, compareType } = filterInfo;
-	if (conditionType === TableConditionTypeEnum.Date) if (compareType === TableDateCompareTypeEnum.Between || compareType === TableDateCompareTypeEnum.NotBetween) {
-		let dateRange;
-		if (Array.isArray(filterInfo.expectedValue)) dateRange = filterInfo.expectedValue.map((i) => typeof i === "string" ? new Date(i) : i);
-		return {
+	if (conditionType === TableConditionTypeEnum.Date) {
+		if (compareType === TableDateCompareTypeEnum.Between || compareType === TableDateCompareTypeEnum.NotBetween) {
+			let dateRange;
+			if (Array.isArray(filterInfo.expectedValue)) dateRange = filterInfo.expectedValue.map((i) => typeof i === "string" ? new Date(i) : i);
+			return {
+				type: conditionType,
+				compare: compareType,
+				info: { dateRange }
+			};
+		} else if (compareType === TableDateCompareTypeEnum.Today || compareType === TableDateCompareTypeEnum.Yesterday || compareType === TableDateCompareTypeEnum.Tomorrow || compareType === TableDateCompareTypeEnum.ThisWeek || compareType === TableDateCompareTypeEnum.LastWeek || compareType === TableDateCompareTypeEnum.NextWeek || compareType === TableDateCompareTypeEnum.ThisMonth || compareType === TableDateCompareTypeEnum.LastMonth || compareType === TableDateCompareTypeEnum.NextMonth || compareType === TableDateCompareTypeEnum.ThisYear || compareType === TableDateCompareTypeEnum.LastYear || compareType === TableDateCompareTypeEnum.NextYear) return {
 			type: conditionType,
 			compare: compareType,
-			info: { dateRange }
+			info: {}
 		};
-	} else if (compareType === TableDateCompareTypeEnum.Today || compareType === TableDateCompareTypeEnum.Yesterday || compareType === TableDateCompareTypeEnum.Tomorrow || compareType === TableDateCompareTypeEnum.ThisWeek || compareType === TableDateCompareTypeEnum.LastWeek || compareType === TableDateCompareTypeEnum.NextWeek || compareType === TableDateCompareTypeEnum.ThisMonth || compareType === TableDateCompareTypeEnum.LastMonth || compareType === TableDateCompareTypeEnum.NextMonth || compareType === TableDateCompareTypeEnum.ThisYear || compareType === TableDateCompareTypeEnum.LastYear || compareType === TableDateCompareTypeEnum.NextYear) return {
-		type: conditionType,
-		compare: compareType,
-		info: {}
-	};
-	else if (datePickerSet.has(compareType)) {
-		let date;
-		if (typeof filterInfo.expectedValue === "string") date = new Date(filterInfo.expectedValue);
-		else if (Array.isArray(filterInfo.expectedValue)) {
-			for (let i = 0; i < filterInfo.expectedValue.length; i++) if (typeof filterInfo.expectedValue[i] === "string") filterInfo.expectedValue[i] = new Date(filterInfo.expectedValue[i]);
-		}
-		return {
+		else if (datePickerSet.has(compareType)) {
+			let date;
+			if (typeof filterInfo.expectedValue === "string") date = new Date(filterInfo.expectedValue);
+			else if (Array.isArray(filterInfo.expectedValue)) {
+				for (let i = 0; i < filterInfo.expectedValue.length; i++) if (typeof filterInfo.expectedValue[i] === "string") filterInfo.expectedValue[i] = new Date(filterInfo.expectedValue[i]);
+			}
+			return {
+				type: conditionType,
+				compare: compareType,
+				info: { date }
+			};
+		} else if ((/* @__PURE__ */ new Set([
+			TableDateCompareTypeEnum.Q1,
+			TableDateCompareTypeEnum.Q2,
+			TableDateCompareTypeEnum.Q3,
+			TableDateCompareTypeEnum.Q4
+		])).has(compareType)) return {
+			type: conditionType,
+			compare: TableDateCompareTypeEnum.Quarter,
+			info: { dateSelect: filterInfo.compareType }
+		};
+		else return {
+			type: conditionType,
+			compare: TableDateCompareTypeEnum.Month,
+			info: { dateSelect: filterInfo.compareType }
+		};
+	} else if (conditionType === TableConditionTypeEnum.Number) {
+		if (compareType === TableNumberCompareTypeEnum.Between || compareType === TableNumberCompareTypeEnum.NotBetween) return {
 			type: conditionType,
 			compare: compareType,
-			info: { date }
+			info: { numberRange: filterInfo.expectedValue }
 		};
-	} else if ((/* @__PURE__ */ new Set([
-		TableDateCompareTypeEnum.Q1,
-		TableDateCompareTypeEnum.Q2,
-		TableDateCompareTypeEnum.Q3,
-		TableDateCompareTypeEnum.Q4
-	])).has(compareType)) return {
-		type: conditionType,
-		compare: TableDateCompareTypeEnum.Quarter,
-		info: { dateSelect: filterInfo.compareType }
-	};
-	else return {
-		type: conditionType,
-		compare: TableDateCompareTypeEnum.Month,
-		info: { dateSelect: filterInfo.compareType }
-	};
-	else if (conditionType === TableConditionTypeEnum.Number) if (compareType === TableNumberCompareTypeEnum.Between || compareType === TableNumberCompareTypeEnum.NotBetween) return {
-		type: conditionType,
-		compare: compareType,
-		info: { numberRange: filterInfo.expectedValue }
-	};
-	else return {
-		type: conditionType,
-		compare: compareType,
-		info: { number: filterInfo.expectedValue }
-	};
-	else if (conditionType === TableConditionTypeEnum.String) return {
+		else return {
+			type: conditionType,
+			compare: compareType,
+			info: { number: filterInfo.expectedValue }
+		};
+	} else if (conditionType === TableConditionTypeEnum.String) return {
 		type: conditionType,
 		compare: compareType,
 		info: { string: filterInfo.expectedValue }
@@ -1046,11 +1155,12 @@ function MobileSheetTableConditionPanel(props) {
 		const compare = value[1];
 		if (compare) setConditionVisible(false);
 		const info = {};
-		if (type === TableConditionTypeEnum.Date) if (compare === TableDateCompareTypeEnum.Quarter) info.dateSelect = TableDateCompareTypeEnum.Q1;
-		else if (compare === TableDateCompareTypeEnum.Month) info.dateSelect = TableDateCompareTypeEnum.M1;
-		else if (datePickerSet.has(compare)) info.date = /* @__PURE__ */ new Date();
-		else info.dateRange = [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()];
-		else if (type === TableConditionTypeEnum.Number) info.number = 0;
+		if (type === TableConditionTypeEnum.Date) {
+			if (compare === TableDateCompareTypeEnum.Quarter) info.dateSelect = TableDateCompareTypeEnum.Q1;
+			else if (compare === TableDateCompareTypeEnum.Month) info.dateSelect = TableDateCompareTypeEnum.M1;
+			else if (datePickerSet.has(compare)) info.date = /* @__PURE__ */ new Date();
+			else info.dateRange = [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()];
+		} else if (type === TableConditionTypeEnum.Number) info.number = 0;
 		else if (type === TableConditionTypeEnum.String) info.string = "";
 		handleConditionInfo(info, type, compare ?? TableStringCompareTypeEnum.Equal);
 	}
@@ -1145,28 +1255,33 @@ function MobileSheetTableConditionPanel(props) {
 //#endregion
 //#region src/views/components/MobileSheetTableItemsFilterPanel.tsx
 function MobileSheetTableItemsFilterPanel(props) {
-	const { items, checkedItemSet, setCheckedItemSet } = props;
+	const { items, checkedItemSet, setCheckedItemSet, onSelectAllChange, onItemChange } = props;
 	const localeService = useDependency(LocaleService);
 	const [searchText, setSearchText] = useState("");
 	const displayItems = useMemo(() => {
 		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));
+	const allDisplayedChecked = displayItems.length > 0 && displayItems.every((item) => checkedItemSet.has(item.valueKey ?? item.title));
+	const someDisplayedChecked = displayItems.some((item) => checkedItemSet.has(item.valueKey ?? 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);
+			for (const item of displayItems) {
+				const itemKey = item.valueKey ?? item.title;
+				if (allDisplayedChecked) next.delete(itemKey);
+				else next.add(itemKey);
+			}
 			return next;
 		});
+		onSelectAllChange === null || onSelectAllChange === void 0 || onSelectAllChange(!allDisplayedChecked && searchText === "");
 	}
-	function toggleItem(title) {
+	function toggleItem(itemKey) {
+		onItemChange === null || onItemChange === void 0 || onItemChange();
 		setCheckedItemSet((current) => {
 			const next = new Set(current);
-			if (next.has(title)) next.delete(title);
-			else next.add(title);
+			if (next.has(itemKey)) next.delete(itemKey);
+			else next.add(itemKey);
 			return next;
 		});
 	}
@@ -1189,24 +1304,27 @@ function MobileSheetTableItemsFilterPanel(props) {
 					onChange: toggleAllDisplayed,
 					children: localeService.t("sheets-table-ui.filter.select-all")
 				})
-			}), displayItems.map((item) => /* @__PURE__ */ 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__ */ jsx(Checkbox, {
-					className: "univer-flex univer-min-h-12 univer-items-center",
-					checked: checkedItemSet.has(item.title),
-					onChange: () => toggleItem(item.title),
-					children: /* @__PURE__ */ jsxs("span", {
-						className: "univer-flex univer-min-w-0 univer-flex-1 univer-items-center univer-gap-2",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "univer-min-w-0 univer-flex-1 univer-truncate",
-							children: item.title
-						}), /* @__PURE__ */ jsx("span", {
-							className: "univer-shrink-0 univer-text-gray-400",
-							children: `(${items.itemsCountMap.get(item.title) ?? 0})`
-						})]
+			}), displayItems.map((item) => {
+				const itemKey = item.valueKey ?? item.title;
+				return /* @__PURE__ */ 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__ */ jsx(Checkbox, {
+						className: "univer-flex univer-min-h-12 univer-items-center",
+						checked: checkedItemSet.has(itemKey),
+						onChange: () => toggleItem(itemKey),
+						children: /* @__PURE__ */ jsxs("span", {
+							className: "univer-flex univer-min-w-0 univer-flex-1 univer-items-center univer-gap-2",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "univer-min-w-0 univer-flex-1 univer-truncate",
+								children: item.title
+							}), /* @__PURE__ */ jsx("span", {
+								className: "univer-shrink-0 univer-text-gray-400",
+								children: `(${items.itemsCountMap.get(itemKey) ?? 0})`
+							})]
+						})
 					})
-				})
-			}, item.key))]
+				}, item.key);
+			})]
 		})]
 	});
 }
@@ -1228,7 +1346,7 @@ const FILTER_BY_OPTIONS$1 = [
 	}
 ];
 function MobileSheetTableFilterPanel() {
-	const tableFilterPanelInfo = useDependency(SheetsTableComponentController).getCurrentTableFilterInfo();
+	const tableFilterPanelInfo = useDependency(SheetsTableMobileComponentController).getCurrentTableFilterInfo();
 	if (!tableFilterPanelInfo) return null;
 	return /* @__PURE__ */ jsx(MobileSheetTableFilterPanelContent, { tableFilterPanelInfo });
 }
@@ -1241,7 +1359,7 @@ function MobileSheetTableFilterPanelContent(props) {
 	const commandService = useDependency(ICommandService);
 	const permissionService = useDependency(IPermissionService);
 	const undoRedoService = useDependency(IUndoRedoService);
-	const sheetsTableComponentController = useDependency(SheetsTableComponentController);
+	const sheetsTableComponentController = useDependency(SheetsTableMobileComponentController);
 	const [detailFilterBy, setDetailFilterBy] = useState(null);
 	const [drawerSnap, setDrawerSnap] = useState("expanded");
 	const layerRef = useRef(null);
@@ -1249,7 +1367,8 @@ function MobileSheetTableFilterPanelContent(props) {
 	const currentTable = tableManager.getTable(unitId, tableId);
 	const items = tableUiService.getTableFilterItems(unitId, subUnitId, tableId, columnIndex);
 	const checkedItems = tableUiService.getTableFilterCheckedItems(unitId, tableId, columnIndex);
-	const [checkedItemSet, setCheckedItemSet] = useState(() => new Set((tableFilter === null || tableFilter === void 0 ? void 0 : tableFilter.filterType) === TableColumnFilterTypeEnum.manual ? checkedItems : items.data.map((item) => item.title)));
+	const [checkedItemSet, setCheckedItemSet] = useState(() => new Set((tableFilter === null || tableFilter === void 0 ? void 0 : tableFilter.filterType) === TableColumnFilterTypeEnum.manual || (tableFilter === null || tableFilter === void 0 ? void 0 : tableFilter.filterType) === TableColumnFilterTypeEnum.record ? checkedItems : items.data.map((item) => item.valueKey ?? item.title)));
+	const [selectAllRequested, setSelectAllRequested] = useState(false);
 	const [conditionInfo, setConditionInfo] = useState(() => getInitConditionInfo(tableFilter));
 	const [colors, setColors] = useState(() => tableUiService.getTableFilterColors(unitId, subUnitId, tableId, columnIndex));
 	const tableRange = currentTable.getRange();
@@ -1306,14 +1425,8 @@ function MobileSheetTableFilterPanelContent(props) {
 	}
 	async function applyFilter() {
 		let filter;
-		if (detailFilterBy === "items") {
-			const emptyLabel = localeService.t("sheets-table-ui.condition.empty");
-			const values = items.data.filter((item) => checkedItemSet.has(item.title)).map((item) => item.title === emptyLabel ? TABLE_FILTER_EMPTY_VALUE : item.title);
-			filter = values.length === items.data.length ? void 0 : {
-				filterType: TableColumnFilterTypeEnum.manual,
-				values
-			};
-		} else if (detailFilterBy === "color") {
+		if (detailFilterBy === "items") filter = tableUiService.createItemFilter(unitId, tableId, columnIndex, items, checkedItemSet, selectAllRequested);
+		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 = {
@@ -1341,8 +1454,10 @@ function MobileSheetTableFilterPanelContent(props) {
 		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) === TableColumnFilterTypeEnum.manual ? checkedItems : items.data.map((item) => item.title)));
-		else if (filterBy === "color") setColors(tableUiService.getTableFilterColors(unitId, subUnitId, tableId, columnIndex));
+		if (filterBy === "items") {
+			setCheckedItemSet(new Set((tableFilter === null || tableFilter === void 0 ? void 0 : tableFilter.filterType) === TableColumnFilterTypeEnum.manual || (tableFilter === null || tableFilter === void 0 ? void 0 : tableFilter.filterType) === TableColumnFilterTypeEnum.record ? checkedItems : items.data.map((item) => item.valueKey ?? item.title)));
+			setSelectAllRequested(false);
+		} else if (filterBy === "color") setColors(tableUiService.getTableFilterColors(unitId, subUnitId, tableId, columnIndex));
 		else if (filterBy === "condition") setConditionInfo(getInitConditionInfo(tableFilter));
 		setDetailFilterBy(filterBy);
 		setDrawerSnap("expanded");
@@ -1399,7 +1514,9 @@ function MobileSheetTableFilterPanelContent(props) {
 				detailFilterBy === "items" && /* @__PURE__ */ jsx(MobileSheetTableItemsFilterPanel, {
 					items,
 					checkedItemSet,
-					setCheckedItemSet
+					setCheckedItemSet,
+					onSelectAllChange: setSelectAllRequested,
+					onItemChange: () => setSelectAllRequested(false)
 				}),
 				detailFilterBy === "color" && /* @__PURE__ */ jsx(MobileSheetTableColorFilterPanel, {
 					colors,
@@ -1475,6 +1592,7 @@ const ACTIONS = [
 	"rename",
 	"update-range",
 	"set-theme",
+	"settings",
 	"delete"
 ];
 function MobileSheetTableMenu({ menu }) {
@@ -1682,6 +1800,198 @@ function MobileSheetTableSelector(props) {
 	});
 }
 
+//#endregion
+//#region src/views/components/SheetTableCalculatedColumn.tsx
+function SheetTableCalculatedColumn({ unitId, tableId }) {
+	var _columns$, _columns$2, _table$getColumn2;
+	const localeService = useDependency(LocaleService);
+	const commands = useDependency(ICommandService);
+	const table = useDependency(TableManager).getTableById(unitId, tableId);
+	const columns = (table === null || table === void 0 ? void 0 : table.getTableInfo().columns) ?? [];
+	const [columnId, setColumnId] = useState(((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.id) ?? "");
+	const [formula, setFormula] = useState(((_columns$2 = columns[0]) === null || _columns$2 === void 0 ? void 0 : _columns$2.formula) ?? "");
+	const [result, setResult] = useState();
+	const range = table === null || table === void 0 ? void 0 : table.getTableFilterRange();
+	const apply = (value) => {
+		try {
+			const success = commands.syncExecuteCommand(SetSheetTableCommand.id, {
+				unitId,
+				tableId,
+				calculatedColumn: {
+					columnId,
+					formula: value
+				}
+			});
+			setResult(success);
+			if (success) setFormula(value);
+		} catch {
+			setResult(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: "univer-m-0 univer-min-w-0 univer-border-0 univer-p-0",
+		disabled: !table,
+		children: [
+			/* @__PURE__ */ jsx("legend", {
+				className: "univer-mb-2 univer-text-sm",
+				children: localeService.t("sheets-table-ui.calculatedColumn")
+			}),
+			/* @__PURE__ */ jsx(Select, {
+				className: "univer-w-full",
+				options: columns.map((column) => ({
+					value: column.id,
+					label: column.displayName
+				})),
+				value: columnId,
+				onChange: (id) => {
+					var _table$getColumn;
+					setColumnId(id);
+					setFormula((table === null || table === void 0 || (_table$getColumn = table.getColumn(id)) === null || _table$getColumn === void 0 ? void 0 : _table$getColumn.formula) ?? "");
+					setResult(void 0);
+				}
+			}),
+			/* @__PURE__ */ jsx(FormLayout, {
+				label: localeService.t("sheets-table-ui.columnFormula"),
+				children: /* @__PURE__ */ jsx(Input, {
+					value: formula,
+					onChange: (value) => {
+						setFormula(value);
+						setResult(void 0);
+					}
+				})
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "univer-text-sm univer-text-gray-500",
+				children: localeService.t("sheets-table-ui.columnFormulaHint", String(Math.max(0, ((range === null || range === void 0 ? void 0 : range.endRow) ?? -1) - ((range === null || range === void 0 ? void 0 : range.startRow) ?? 0) + 1)))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-flex univer-flex-wrap univer-gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					disabled: !columnId || !formula.trim(),
+					onClick: () => apply(formula),
+					children: localeService.t("sheets-table-ui.applyColumnFormula")
+				}), /* @__PURE__ */ jsx(Button, {
+					disabled: !(table === null || table === void 0 || (_table$getColumn2 = table.getColumn(columnId)) === null || _table$getColumn2 === void 0 ? void 0 : _table$getColumn2.formula),
+					onClick: () => apply(""),
+					children: localeService.t("sheets-table-ui.stopColumnFormula")
+				})]
+			}),
+			result !== void 0 && /* @__PURE__ */ jsx("p", {
+				role: result ? "status" : "alert",
+				className: "univer-text-sm",
+				children: localeService.t(result ? "sheets-table-ui.columnFormulaApplied" : "sheets-table-ui.settingsError")
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/views/components/SheetTableSettingsDialog.tsx
+function SheetTableSettingsDialog(props) {
+	const { unitId, tableId, onClose, ActionRowComponent = ActionRow } = props;
+	const localeService = useDependency(LocaleService);
+	const commandService = useDependency(ICommandService);
+	const tableManager = useDependency(TableManager);
+	const [initial] = useState(() => {
+		var _tableManager$getTabl;
+		return (_tableManager$getTabl = tableManager.getTableById(unitId, tableId)) === null || _tableManager$getTabl === void 0 ? void 0 : _tableManager$getTabl.getTableInfo();
+	});
+	const [showAutoFilter, setShowAutoFilter] = useState((initial === null || initial === void 0 ? void 0 : initial.showAutoFilter) ?? true);
+	const [columns, setColumns] = useState(() => Object.fromEntries(((initial === null || initial === void 0 ? void 0 : initial.columns) ?? []).map((column) => [column.id, column.showFilterButton !== false])));
+	const [saving, setSaving] = useState(false);
+	const [error, setError] = useState(false);
+	const handleConfirm = async () => {
+		if (!initial || saving) return;
+		const changedColumns = Object.fromEntries(initial.columns.filter((column) => columns[column.id] !== (column.showFilterButton !== false)).map((column) => [column.id, columns[column.id]]));
+		if (showAutoFilter === initial.showAutoFilter && Object.keys(changedColumns).length === 0) {
+			onClose();
+			return;
+		}
+		setSaving(true);
+		setError(false);
+		try {
+			if (await commandService.executeCommand(SetSheetTableCommand.id, {
+				unitId,
+				tableId,
+				filterButtons: {
+					...showAutoFilter === initial.showAutoFilter ? {} : { showAutoFilter },
+					columns: changedColumns
+				}
+			})) onClose();
+			else setError(true);
+		} catch {
+			setError(true);
+		} finally {
+			setSaving(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "univer-flex univer-flex-col univer-gap-4 univer-py-2",
+		children: [
+			/* @__PURE__ */ jsx(Checkbox, {
+				checked: showAutoFilter,
+				disabled: saving || !initial,
+				onChange: (value) => setShowAutoFilter(Boolean(value)),
+				children: localeService.t("sheets-table-ui.showFilterButtons")
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "univer-m-0 univer-text-sm univer-text-gray-500",
+				children: localeService.t("sheets-table-ui.filterButtonsHint")
+			}),
+			/* @__PURE__ */ jsxs("fieldset", {
+				className: "univer-m-0 univer-min-w-0 univer-border-0 univer-p-0",
+				disabled: !showAutoFilter || saving,
+				children: [/* @__PURE__ */ jsx("legend", {
+					className: "univer-mb-2 univer-text-sm",
+					children: localeService.t("sheets-table-ui.columnFilterButtons")
+				}), /* @__PURE__ */ jsx("div", {
+					className: "univer-flex univer-max-h-64 univer-flex-col univer-gap-2 univer-overflow-y-auto",
+					children: initial === null || initial === void 0 ? void 0 : initial.columns.map((column) => /* @__PURE__ */ jsx(Checkbox, {
+						checked: columns[column.id],
+						disabled: !showAutoFilter || saving,
+						onChange: (value) => setColumns((previous) => ({
+							...previous,
+							[column.id]: Boolean(value)
+						})),
+						children: column.displayName
+					}, column.id))
+				})]
+			}),
+			/* @__PURE__ */ jsx(SheetTableCalculatedColumn, {
+				unitId,
+				tableId
+			}),
+			error && /* @__PURE__ */ jsx("div", {
+				role: "alert",
+				className: "univer-text-sm univer-text-red-500",
+				children: localeService.t("sheets-table-ui.settingsError")
+			}),
+			/* @__PURE__ */ jsxs(ActionRowComponent, {
+				className: "univer-flex univer-justify-end univer-gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					disabled: saving,
+					onClick: onClose,
+					children: localeService.t("sheets-table-ui.cancel")
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					disabled: saving || !initial,
+					onClick: handleConfirm,
+					children: localeService.t("sheets-table-ui.confirm")
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/views/components/MobileSheetTableSettingsDialog.tsx
+function MobileSheetTableSettingsDialog(props) {
+	return /* @__PURE__ */ jsx(SheetTableSettingsDialog, {
+		...props,
+		ActionRowComponent: MobileActionRowGroup
+	});
+}
+
 //#endregion
 //#region src/controllers/sheet-table-theme-ui.controller.ts
 let SheetTableThemeUIController = class SheetTableThemeUIController extends Disposable {
@@ -1750,7 +2060,10 @@ const SheetTableThemePanel = (props) => {
 		}
 		const lastCustomTheme = customRangeThemes[customRangeThemes.length - 1];
 		let newThemeName = `${TABLE_CUSTOM_NAME_PREFIX}1`;
-		if (lastCustomTheme) newThemeName = `${TABLE_CUSTOM_NAME_PREFIX}${Number(lastCustomTheme.split("-")[2]) + 1}`;
+		if (lastCustomTheme) {
+			const index = Number(lastCustomTheme.split("-")[2]);
+			newThemeName = `${TABLE_CUSTOM_NAME_PREFIX}${index + 1}`;
+		}
 		const newTheme = new RangeThemeStyle(newThemeName, { ...customEmptyThemeWithBorderStyle });
 		commandService.executeCommand(AddTableThemeCommand.id, {
 			unitId,
@@ -2003,6 +2316,7 @@ let MobileComponentsController = class MobileComponentsController extends Dispos
 			[SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, MobileSheetTableFilterPanel],
 			[SHEET_TABLE_MOBILE_MENU, MobileSheetTableMenu],
 			[SHEET_TABLE_RENAME_DIALOG, MobileSheetTableRenameDialog],
+			[SHEET_TABLE_SETTINGS_DIALOG, MobileSheetTableSettingsDialog],
 			[TABLE_SELECTOR_DIALOG, MobileSheetTableSelector],
 			[SHEET_TABLE_THEME_PANEL, MobileSheetTableThemePanel]
 		].forEach(([key, component]) => {
@@ -2013,37 +2327,6 @@ let MobileComponentsController = class MobileComponentsController extends Dispos
 };
 MobileComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(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);
-			}
-		});
-	}
-};
-
 //#endregion
 //#region src/views/widgets/table-controls-util.ts
 function isPointInTableControlRegion(region, x, y) {
@@ -2161,7 +2444,7 @@ var SheetTableControlsShape = class extends Shape {
 		const left = position.startX;
 		const rawTop = position.startY - 28 - ANCHOR_OFFSET_Y;
 		const top = Math.max(0, rawTop);
-		const width = Math.max(ANCHOR_MIN_WIDTH, Math.min(ANCHOR_MAX_WIDTH, item.tableName.length * 8.5 + ANCHOR_PADDING_X * 2 + ANCHOR_TOGGLE_WIDTH));
+		const width = Math.max(ANCHOR_MIN_WIDTH, Math.min(ANCHOR_MAX_WIDTH, item.tableName.length * 8.5 + 24 + ANCHOR_TOGGLE_WIDTH));
 		const toggleRegion = {
 			type: "anchor-menu-toggle",
 			tableId: item.tableId,
@@ -2313,6 +2596,7 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 		_defineProperty(this, "_shape", void 0);
 		_defineProperty(this, "_topGapBaseBySkeleton", /* @__PURE__ */ new WeakMap());
 		_defineProperty(this, "_menuPopup", null);
+		_defineProperty(this, "_settingsDialog", null);
 		this._shape = new SheetTableControlsShape("SheetTableControlsShape", () => this._sheetSkeletonManagerService.getCurrentSkeleton() || null);
 		this._initShape();
 		this._initRefresh();
@@ -2322,7 +2606,10 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 		var _this$_context$compon;
 		this._context.scene.addObjects([this._shape], TABLE_CONTROLS_LAYER_INDEX);
 		this.disposeWithMe(toDisposable(() => {
+			var _this$_settingsDialog;
 			this._closeFloatingControls();
+			(_this$_settingsDialog = this._settingsDialog) === null || _this$_settingsDialog === void 0 || _this$_settingsDialog.dispose();
+			this._settingsDialog = null;
 			this._context.scene.removeObjects([this._shape]);
 		}));
 		this.disposeWithMe(this._shape.onPointerMove$.subscribeEvent((evt, state) => {
@@ -2475,6 +2762,7 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 				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"),
+				settings: this._localeService.t("sheets-table-ui.settings"),
 				delete: this._localeService.t("sheets-table-ui.removeTable")
 			},
 			onSelect: (action) => this._handleTableMenuAction(action, unitId, subUnitId, tableId),
@@ -2500,6 +2788,9 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 	_handleTableMenuAction(action, unitId, subUnitId, tableId) {
 		this._closeFloatingControls();
 		switch (action) {
+			case "settings":
+				this._openSettingsDialog(unitId, tableId);
+				break;
 			case "rename":
 				this._openRenameDialog(unitId, tableId);
 				break;
@@ -2507,15 +2798,34 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 			case "set-theme":
 				this._openThemePanel(unitId, subUnitId, tableId);
 				break;
-			case "delete":
-				this._commandService.executeCommand(DeleteSheetTableCommand.id, {
-					tableId,
-					subUnitId,
-					unitId
-				});
-				break;
+			case "delete": this._commandService.executeCommand(DeleteSheetTableCommand.id, {
+				tableId,
+				subUnitId,
+				unitId
+			});
 		}
 	}
+	_openSettingsDialog(unitId, tableId) {
+		var _this$_settingsDialog2;
+		(_this$_settingsDialog2 = this._settingsDialog) === null || _this$_settingsDialog2 === void 0 || _this$_settingsDialog2.dispose();
+		this._dialogService.open({
+			id: SHEET_TABLE_SETTINGS_DIALOG_ID,
+			title: { title: this._localeService.t("sheets-table-ui.settings") },
+			draggable: true,
+			mask: true,
+			children: { label: {
+				name: SHEET_TABLE_SETTINGS_DIALOG,
+				props: {
+					unitId,
+					tableId,
+					onClose: () => this._dialogService.close(SHEET_TABLE_SETTINGS_DIALOG_ID)
+				}
+			} },
+			width: 400,
+			onClose: () => this._dialogService.close(SHEET_TABLE_SETTINGS_DIALOG_ID)
+		});
+		this._settingsDialog = toDisposable(() => this._dialogService.close(SHEET_TABLE_SETTINGS_DIALOG_ID));
+	}
 	_openRenameDialog(unitId, tableId) {
 		this._dialogService.open({
 			id: SHEET_TABLE_RENAME_DIALOG_ID,
@@ -2694,6 +3004,7 @@ var SheetTableControlsMobileRenderController = class extends SheetTableControlsR
 				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"),
+				settings: this._localeService.t("sheets-table-ui.settings"),
 				delete: this._localeService.t("sheets-table-ui.removeTable")
 			},
 			onSelect: (action) => this._handleTableMenuAction(action, unitId, subUnitId, tableId),
@@ -2768,16 +3079,15 @@ let SheetsTableFilterButtonShape = class SheetsTableFilterButtonShape extends Sh
 	}
 	_drawChevron(ctx, color) {
 		const centerX = 16 / 2;
-		const centerY = 16 / 2;
 		ctx.save();
 		ctx.beginPath();
 		ctx.strokeStyle = color;
 		ctx.lineWidth = 1.8;
 		ctx.lineCap = "round";
 		ctx.lineJoin = "round";
-		ctx.moveTo(centerX - 4.5, centerY - 2.5);
+		ctx.moveTo(3.5, 5.5);
 		ctx.lineTo(centerX, 10);
-		ctx.lineTo(12.5, centerY - 2.5);
+		ctx.lineTo(12.5, 5.5);
 		ctx.stroke();
 		ctx.restore();
 	}
@@ -2860,7 +3170,12 @@ let SheetsTableFilterButtonRenderController = class SheetsTableFilterButtonRende
 	_initCommandExecuted() {
 		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
 			var _workbook$getActiveSh2;
-			if (command.id !== SetVerticalTextAlignCommand.id) return;
+			if (command.id !== SetVerticalTextAlignCommand.id && command.id !== SetSheetTableMutation.id) return;
+			if (command.id === SetSheetTableMutation.id) {
+				var _this$_context$unit$g;
+				const params = command.params;
+				if (!(params === null || params === void 0 ? void 0 : params.config.filterButtons) || params.unitId !== this._context.unitId || params.subUnitId !== ((_this$_context$unit$g = this._context.unit.getActiveSheet()) === null || _this$_context$unit$g === void 0 ? void 0 : _this$_context$unit$g.getSheetId())) return;
+			}
 			const { unit: workbook, unitId } = this._context;
 			const worksheetId = ((_workbook$getActiveSh2 = workbook.getActiveSheet()) === null || _workbook$getActiveSh2 === void 0 ? void 0 : _workbook$getActiveSh2.getSheetId()) || "";
 			const skeleton = this._sheetSkeletonManagerService.getCurrentSkeleton();
@@ -2888,8 +3203,14 @@ let SheetsTableFilterButtonRenderController = class SheetsTableFilterButtonRende
 			const headerStyle = table ? (_this$_rangeThemeMode = this._rangeThemeModel.getRangeThemeStyle(unitId, table.getTableStyleId())) === null || _this$_rangeThemeMode === void 0 ? void 0 : _this$_rangeThemeMode.getHeaderRowStyle() : null;
 			const iconColor = (headerStyle === null || headerStyle === void 0 || (_headerStyle$cl = headerStyle.cl) === null || _headerStyle$cl === void 0 ? void 0 : _headerStyle$cl.rgb) ?? "#fff";
 			const hoverIconColor = (headerStyle === null || headerStyle === void 0 || (_headerStyle$bg = headerStyle.bg) === null || _headerStyle$bg === void 0 ? void 0 : _headerStyle$bg.rgb) ?? "#202124";
-			this._interceptCellContent(unitId, worksheetId, range);
+			const visibleColumns = /* @__PURE__ */ new Set();
+			for (let col = startColumn; col <= endColumn; col++) {
+				var _table$getTableColumn;
+				if ((table === null || table === void 0 || (_table$getTableColumn = table.getTableColumnByIndex(col - startColumn)) === null || _table$getTableColumn === void 0 ? void 0 : _table$getTableColumn.isShowFilterButton()) !== false) visibleColumns.add(col);
+			}
+			this._interceptCellContent(unitId, worksheetId, range, visibleColumns);
 			for (let col = startColumn; col <= endColumn; col++) {
+				if (!visibleColumns.has(col)) continue;
 				const key = `sheets-table-filter-button-${startRow}-${col}`;
 				const startPosition = getCoordByCell(startRow, col, scene, skeleton);
 				const cellStyle = worksheet.getCellStyle(startRow, col);
@@ -2926,13 +3247,13 @@ let SheetsTableFilterButtonRenderController = class SheetsTableFilterButtonRende
 		scene.addObjects(this._tableFilterButtonShapes);
 		scene.makeDirty();
 	}
-	_interceptCellContent(workbookId, worksheetId, range) {
+	_interceptCellContent(workbookId, worksheetId, range, visibleColumns) {
 		const { startRow, startColumn, endColumn } = range;
 		this._buttonRenderDisposable = this._sheetInterceptorService.intercept(INTERCEPTOR_POINT.CELL_CONTENT, {
 			effect: InterceptorEffectEnum.Style,
 			handler: (cell, pos, next) => {
 				const { row, col, unitId, subUnitId } = pos;
-				if (unitId !== workbookId || subUnitId !== worksheetId || row !== startRow || col < startColumn || col > endColumn) return next(cell);
+				if (unitId !== workbookId || subUnitId !== worksheetId || row !== startRow || col < startColumn || col > endColumn || !visibleColumns.has(col)) return next(cell);
 				if (!cell || cell === pos.rawData) cell = { ...pos.rawData };
 				cell.fontRenderExtension = {
 					...cell === null || cell === void 0 ? void 0 : cell.fontRenderExtension,
@@ -3075,7 +3396,42 @@ SheetTableSelectionController = __decorate([
 ], SheetTableSelectionController);
 
 //#endregion
-//#region src/menu/sheet-table-menu.controller.ts
+//#region src/menu/mobile-schema.ts
+const mobileMenuSchema = {
+	[RibbonDataGroup.ORGANIZATION]: { [OpenTableSelectorOperation.id]: {
+		order: 0,
+		menuItemFactory: sheetTableToolbarInsertMenuFactory
+	} },
+	[ContextMenuPosition.MAIN_AREA]: { [ContextMenuGroup.LAYOUT]: {
+		[SHEET_TABLE_CONTEXT_INSERT_MENU_ID]: {
+			order: 5,
+			menuItemFactory: SheetTableInsertContextMenuFactory,
+			[SheetTableInsertRowCommand.id]: {
+				order: 1,
+				menuItemFactory: SheetTableInsertRowMenuFactory
+			},
+			[SheetTableInsertColCommand.id]: {
+				order: 2,
+				menuItemFactory: SheetTableInsertColMenuFactory
+			}
+		},
+		[SHEET_TABLE_CONTEXT_REMOVE_MENU_ID]: {
+			order: 6,
+			menuItemFactory: SheetTableRemoveContextMenuFactory,
+			[SheetTableRemoveRowCommand.id]: {
+				order: 1,
+				menuItemFactory: SheetTableRemoveRowMenuFactory
+			},
+			[SheetTableRemoveColCommand.id]: {
+				order: 2,
+				menuItemFactory: SheetTableRemoveColMenuFactory
+			}
+		}
+	} }
+};
+
+//#endregion
+//#region src/menu/mobile-sheet-table-menu.controller.ts
 /**
 * Copyright 2023-present DreamNum Co., Ltd.
 *
@@ -3091,17 +3447,13 @@ SheetTableSelectionController = __decorate([
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-let SheetTableMenuController = class SheetTableMenuController extends Disposable {
-	constructor(_menuManagerService) {
+let MobileSheetTableMenuController = class MobileSheetTableMenuController extends Disposable {
+	constructor(menuManagerService) {
 		super();
-		this._menuManagerService = _menuManagerService;
-		this._initMenu();
-	}
-	_initMenu() {
-		this._menuManagerService.mergeMenu(menuSchema);
+		menuManagerService.mergeMenu(mobileMenuSchema);
 	}
 };
-SheetTableMenuController = __decorate([__decorateParam(0, Inject(IMenuManagerService))], SheetTableMenuController);
+MobileSheetTableMenuController = __decorate([__decorateParam(0, IMenuManagerService)], MobileSheetTableMenuController);
 
 //#endregion
 //#region src/mobile-plugin.ts
@@ -3123,9 +3475,8 @@ let UniverSheetsTableMobileUIPlugin = class UniverSheetsTableMobileUIPlugin exte
 		this._injector.get(MobileComponentsController);
 		registerDependencies(this._injector, [
 			[SheetsTableMobileComponentController],
-			[SheetsTableComponentController, { useExisting: SheetsTableMobileComponentController }],
 			[SheetsTableUiService],
-			[SheetTableMenuController],
+			[MobileSheetTableMenuController],
 			[SheetTableThemeUIController],
 			[SheetTableSelectionController]
 		]);
@@ -3134,7 +3485,7 @@ let UniverSheetsTableMobileUIPlugin = class UniverSheetsTableMobileUIPlugin exte
 		touchDependencies(this._injector, [
 			[SheetsTableMobileComponentController],
 			[SheetsTableUiService],
-			[SheetTableMenuController],
+			[MobileSheetTableMenuController],
 			[SheetTableThemeUIController],
 			[SheetTableSelectionController]
 		]);
@@ -3151,7 +3502,7 @@ let UniverSheetsTableMobileUIPlugin = class UniverSheetsTableMobileUIPlugin exte
 		});
 	}
 	_initRegisterCommand() {
-		[OpenTableFilterPanelOperation, OpenTableSelectorOperation].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
+		[OpenTableFilterPanelMobileOperation, OpenTableSelectorOperation].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
 	}
 };
 _defineProperty(UniverSheetsTableMobileUIPlugin, "pluginName", PLUGIN_NAME);
@@ -3263,11 +3614,12 @@ const SheetTableConditionPanel = (props) => {
 		const compare = value[1];
 		if (compare) setConditionVisible(false);
 		const info = {};
-		if (type === TableConditionTypeEnum.Date) if (compare === TableDateCompareTypeEnum.Quarter) info.dateSelect = TableDateCompareTypeEnum.Q1;
-		else if (compare === TableDateCompareTypeEnum.Month) info.dateSelect = TableDateCompareTypeEnum.M1;
-		else if (datePickerSet.has(compare)) info.date = /* @__PURE__ */ new Date();
-		else info.dateRange = [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()];
-		else if (type === TableConditionTypeEnum.Number) info.number = 0;
+		if (type === TableConditionTypeEnum.Date) {
+			if (compare === TableDateCompareTypeEnum.Quarter) info.dateSelect = TableDateCompareTypeEnum.Q1;
+			else if (compare === TableDateCompareTypeEnum.Month) info.dateSelect = TableDateCompareTypeEnum.M1;
+			else if (datePickerSet.has(compare)) info.date = /* @__PURE__ */ new Date();
+			else info.dateRange = [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()];
+		} else if (type === TableConditionTypeEnum.Number) info.number = 0;
 		else if (type === TableConditionTypeEnum.String) info.string = "";
 		handleConditionInfo(info, value[0], value[1] ?? TableStringCompareTypeEnum.Equal);
 	};
@@ -3374,7 +3726,7 @@ const getCheckedItemCount = (map, checkedItemSet) => {
 	return count;
 };
 function SheetTableItemsFilterPanel(props) {
-	const { unitId, tableId, subUnitId, columnIndex, checkedItemSet, setCheckedItemSet, tableFilter } = props;
+	const { unitId, tableId, subUnitId, columnIndex, checkedItemSet, setCheckedItemSet, tableFilter, onSelectAllChange, onItemChange } = props;
 	const localeService = useDependency(LocaleService);
 	const { data: items, itemsCountMap, allItemsCount } = useDependency(SheetsTableUiService).getTableFilterItems(unitId, subUnitId, tableId, columnIndex);
 	const [allChecked, setAllChecked] = useState(tableFilter === void 0 ? true : checkedItemSet.size === itemsCountMap.size);
@@ -3386,38 +3738,75 @@ function SheetTableItemsFilterPanel(props) {
 			return String(item.title).toLowerCase().includes(searchText.toLowerCase());
 		}) : items;
 	}, [searchText, items]);
-	const onCheckAllToggled = useCallback(() => {
+	const recordFilter = isRecordTableFilter(tableFilter);
+	const allDisplayedChecked = displayItems.length > 0 && displayItems.every((item) => checkedItemSet.has(item.valueKey ?? item.title));
+	const someDisplayedChecked = displayItems.some((item) => checkedItemSet.has(item.valueKey ?? item.title));
+	const displayedAllChecked = recordFilter ? allDisplayedChecked : allChecked;
+	const displayedIndeterminate = recordFilter ? !allDisplayedChecked && someDisplayedChecked : indeterminate;
+	const onCheckAllToggled = () => {
+		if (recordFilter) {
+			const next = new Set(checkedItemSet);
+			displayItems.forEach((item) => {
+				const itemKey = item.valueKey ?? item.title;
+				if (allDisplayedChecked) next.delete(itemKey);
+				else next.add(itemKey);
+			});
+			setCheckedItemSet(next);
+			setCheckedCount(getCheckedItemCount(itemsCountMap, next));
+			onSelectAllChange === null || onSelectAllChange === void 0 || onSelectAllChange(!allDisplayedChecked && searchText === "");
+			return;
+		}
 		if (allChecked) {
 			checkedItemSet.clear();
 			setCheckedItemSet(new Set(checkedItemSet));
 			setAllChecked(false);
+			onSelectAllChange === null || onSelectAllChange === void 0 || onSelectAllChange(false);
 		} else {
 			displayItems.forEach((item) => {
-				checkedItemSet.add(item.title);
+				checkedItemSet.add(item.valueKey ?? item.title);
 			});
 			setCheckedItemSet(new Set(checkedItemSet));
 			setAllChecked(true);
+			onSelectAllChange === null || onSelectAllChange === void 0 || onSelectAllChange(items.every((item) => checkedItemSet.has(item.valueKey ?? item.title)));
+		}
+	};
+	const onSearchValueChange = (str) => {
+		if (recordFilter) {
+			setSearchText(str);
+			return;
 		}
-	}, [allChecked]);
-	const onSearchValueChange = useCallback((str) => {
 		if (str === "") {
 			setAllChecked(true);
 			items.forEach((item) => {
-				checkedItemSet.add(item.title);
+				checkedItemSet.add(item.valueKey ?? item.title);
 			});
 			setCheckedCount(allItemsCount);
+			onSelectAllChange === null || onSelectAllChange === void 0 || onSelectAllChange(true);
 		} else {
 			checkedItemSet.clear();
 			setAllChecked(false);
 			setCheckedCount(0);
+			onSelectAllChange === null || onSelectAllChange === void 0 || onSelectAllChange(false);
 		}
 		setSearchText(str);
-	}, []);
+	};
 	const onCheckItemToggled = (key) => {
+		onItemChange === null || onItemChange === void 0 || onItemChange();
+		if (recordFilter) {
+			const next = new Set(checkedItemSet);
+			if (next.has(key)) next.delete(key);
+			else next.add(key);
+			setCheckedCount(getCheckedItemCount(itemsCountMap, next));
+			setCheckedItemSet(next);
+			return;
+		}
 		if (allChecked) {
 			setAllChecked(false);
 			const newSet = /* @__PURE__ */ new Set();
-			for (const { title } of items) if (key !== title) newSet.add(title);
+			for (const item of items) {
+				const itemKey = item.valueKey ?? item.title;
+				if (key !== itemKey) newSet.add(itemKey);
+			}
 			setCheckedCount(allItemsCount - itemsCountMap.get(key));
 			setCheckedItemSet(newSet);
 		} else {
@@ -3449,9 +3838,9 @@ function SheetTableItemsFilterPanel(props) {
 						children: /* @__PURE__ */ jsx(Checkbox, {
 							className: "univer-min-w-0 univer-flex-1",
 							contentClassName: "univer-flex-1 univer-min-w-0",
-							indeterminate,
+							indeterminate: displayedIndeterminate,
 							disabled: items.length === 0,
-							checked: allChecked,
+							checked: displayedAllChecked,
 							onChange: onCheckAllToggled,
 							children: /* @__PURE__ */ jsxs("div", {
 								className: "univer-flex univer-h-5 univer-flex-1 univer-items-center univer-text-sm",
@@ -3465,14 +3854,15 @@ function SheetTableItemsFilterPanel(props) {
 							})
 						})
 					}), displayItems.map((item) => {
+						const itemKey = item.valueKey ?? item.title;
 						return /* @__PURE__ */ jsx("div", {
 							className: "univer-flex univer-items-center univer-px-2 univer-py-1",
 							children: /* @__PURE__ */ jsx(Checkbox, {
 								className: "univer-min-w-0 univer-flex-1",
 								contentClassName: "univer-flex-1 univer-min-w-0",
-								checked: allChecked || checkedItemSet.has(item.title),
+								checked: displayedAllChecked || checkedItemSet.has(itemKey),
 								onChange: () => {
-									onCheckItemToggled(item.title);
+									onCheckItemToggled(itemKey);
 								},
 								children: /* @__PURE__ */ jsxs("span", {
 									className: "univer-flex univer-h-5 univer-flex-1 univer-items-center univer-text-sm",
@@ -3481,7 +3871,7 @@ function SheetTableItemsFilterPanel(props) {
 										children: item.title
 									}), /* @__PURE__ */ 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})`
+										children: `(${itemsCountMap.get(itemKey) || 0})`
 									})]
 								})
 							})
@@ -3527,7 +3917,8 @@ function SheetTableFilterPanel() {
 	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] = useState(() => new Set(isManualTableFilter(tableFilter) ? checkedItems : data.map((item) => item.title)));
+	const [checkedItemSet, setCheckedItemSet] = useState(() => new Set((tableFilter === null || tableFilter === void 0 ? void 0 : tableFilter.filterType) === TableColumnFilterTypeEnum.manual || (tableFilter === null || tableFilter === void 0 ? void 0 : tableFilter.filterType) === TableColumnFilterTypeEnum.record ? checkedItems : data.map((item) => item.valueKey ?? item.title)));
+	const [selectAllRequested, setSelectAllRequested] = useState(false);
 	const [filterBy, setFilterBy] = useState(currentFilterBy || "items");
 	const [conditionInfo, setConditionInfo] = useState(() => {
 		const tableFilter = panelProps.tableFilter;
@@ -3593,23 +3984,17 @@ function SheetTableFilterPanel() {
 	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 ? TABLE_FILTER_EMPTY_VALUE : itemInfo.title);
+			filter = tableUiService.createItemFilter(unitId, tableId, columnIndex, tableUiService.getTableFilterItems(unitId, subUnitId, tableId, columnIndex), checkedItemSet, selectAllRequested);
 			const originFilter = table.getTableFilterColumn(columnIndex);
-			if (isManualTableFilter(originFilter)) {
-				if (originFilter.values.join(",") === filteredItems.join(",")) {
+			if (isManualTableFilter(originFilter) && isManualTableFilter(filter)) {
+				if (originFilter.values.join(",") === filter.values.join(",")) {
 					closeDialog();
 					return;
 				}
-			} else if (filteredItems.length === data.length && !originFilter) {
+			} else if (!filter && !originFilter) {
 				closeDialog();
 				return;
 			}
-			filter = filteredItems.length === data.length ? void 0 : {
-				filterType: 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);
@@ -3643,10 +4028,11 @@ function SheetTableFilterPanel() {
 		if (await tableUiService.setTableFilter(unitId, tableId, columnIndex, void 0)) closeDialog();
 	};
 	const workbookEditableId = new WorkbookEditablePermission(unitId).id;
+	const editable = (_permissionService$ge = permissionService.getPermissionPoint(workbookEditableId)) === null || _permissionService$ge === void 0 ? void 0 : _permissionService$ge.value;
 	return /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			editable && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ 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__ */ jsxs("button", {
@@ -3713,7 +4099,9 @@ function SheetTableFilterPanel() {
 							tableId,
 							columnIndex,
 							checkedItemSet,
-							setCheckedItemSet
+							setCheckedItemSet,
+							onSelectAllChange: setSelectAllRequested,
+							onItemChange: () => setSelectAllRequested(false)
 						}),
 						filterBy === "color" && /* @__PURE__ */ jsx(SheetTableColorFilterPanel, {
 							colors,
@@ -3777,6 +4165,11 @@ function SheetTableMenu({ popup }) {
 				children: menu.labels["set-theme"],
 				onSelect: () => menu.onSelect("set-theme")
 			},
+			{
+				type: "item",
+				children: menu.labels.settings,
+				onSelect: () => menu.onSelect("settings")
+			},
 			{
 				type: "item",
 				children: menu.labels.delete,
@@ -3828,7 +4221,8 @@ let ComponentsController = class ComponentsController extends Disposable {
 		[
 			[SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, SheetTableFilterPanel],
 			[SHEET_TABLE_MENU, SheetTableMenu],
-			[SHEET_TABLE_RENAME_DIALOG, SheetTableRenameDialog]
+			[SHEET_TABLE_RENAME_DIALOG, SheetTableRenameDialog],
+			[SHEET_TABLE_SETTINGS_DIALOG, SheetTableSettingsDialog]
 		].forEach(([key, comp]) => {
 			this.disposeWithMe(this._componentManager.register(key, comp));
 		});
@@ -3842,6 +4236,35 @@ let ComponentsController = class ComponentsController extends Disposable {
 };
 ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], ComponentsController);
 
+//#endregion
+//#region src/menu/sheet-table-menu.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 SheetTableMenuController = class SheetTableMenuController extends Disposable {
+	constructor(_menuManagerService) {
+		super();
+		this._menuManagerService = _menuManagerService;
+		this._initMenu();
+	}
+	_initMenu() {
+		this._menuManagerService.mergeMenu(menuSchema);
+	}
+};
+SheetTableMenuController = __decorate([__decorateParam(0, Inject(IMenuManagerService))], SheetTableMenuController);
+
 //#endregion
 //#region src/plugin.ts
 let UniverSheetsTableUIPlugin = class UniverSheetsTableUIPlugin extends Plugin {