@odoo/o-spreadsheet 17.3.0-alpha.5 → 17.3.0-alpha.7

package/dist/o-spreadsheet.esm.js

@@ -3,9 +3,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 17.3.0-alpha.5
- * @date 2024-04-18T14:38:57.166Z
- * @hash cff0ef9
+ * @version 17.3.0-alpha.7
+ * @date 2024-05-07T10:42:47.288Z
+ * @hash 853c266
  */
 
 import { reactive, useEnv, useSubEnv, useState, onWillUnmount, markRaw, toRaw, Component, useRef, onMounted, useEffect, onPatched, useComponent, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv } from '@odoo/owl';
@@ -566,7 +566,7 @@ function getAddHeaderStartIndex(position, base) {
 /**
  * Compares two objects.
  */
-function deepEquals(o1, o2) {
+function deepEquals(o1, o2, ignoreFunctions) {
     if (o1 === o2)
         return true;
     if ((o1 && !o2) || (o2 && !o1))
@@ -582,13 +582,16 @@ function deepEquals(o1, o2) {
         }
     }
     for (const key in o1) {
-        if (typeof o1[key] !== typeof o2[key])
+        const typeOfO1Key = typeof o1[key];
+        if (typeOfO1Key !== typeof o2[key])
             return false;
-        if (typeof o1[key] === "object") {
-            if (!deepEquals(o1[key], o2[key]))
+        if (typeOfO1Key === "object") {
+            if (!deepEquals(o1[key], o2[key], ignoreFunctions))
                 return false;
         }
         else {
+            if (ignoreFunctions && typeOfO1Key === "function")
+                return true;
             if (o1[key] !== o2[key])
                 return false;
         }
@@ -1989,6 +1992,8 @@ const coreTypes = new Set([
     "CREATE_TABLE",
     "REMOVE_TABLE",
     "UPDATE_TABLE",
+    "CREATE_TABLE_STYLE",
+    "REMOVE_TABLE_STYLE",
     /** IMAGE */
     "CREATE_IMAGE",
     /** HEADER GROUP */
@@ -2135,6 +2140,7 @@ var CommandResult;
     CommandResult["TableNotFound"] = "TableNotFound";
     CommandResult["TableOverlap"] = "TableOverlap";
     CommandResult["InvalidTableConfig"] = "InvalidTableConfig";
+    CommandResult["InvalidTableStyle"] = "InvalidTableStyle";
     CommandResult["FilterNotFound"] = "FilterNotFound";
     CommandResult["MergeInTable"] = "MergeInTable";
     CommandResult["NonContinuousTargets"] = "NonContinuousTargets";
@@ -2236,6 +2242,7 @@ const CellErrorType = {
     CircularDependency: "#CYCLE",
     UnknownFunction: "#NAME?",
     DivisionByZero: "#DIV/0!",
+    SpilledBlocked: "#SPILL!",
     GenericError: "#ERROR",
 };
 const errorTypes = new Set(Object.values(CellErrorType));
@@ -2271,6 +2278,11 @@ class UnknownFunctionError extends EvaluationError {
         super(message, CellErrorType.UnknownFunction);
     }
 }
+class SplillBlockedError extends EvaluationError {
+    constructor(message = _t("Spill range is not empty")) {
+        super(message, CellErrorType.SpilledBlocked);
+    }
+}
 
 // HELPERS
 const SORT_TYPES_ORDER = ["number", "string", "boolean", "undefined"];
@@ -4129,21 +4141,22 @@ function toZoneWithoutBoundaryChanges(xc) {
         xc = xc.split("!").at(-1);
     }
     if (xc.includes("$")) {
-        xc = xc.replace(/\$/g, "");
+        xc = xc.replaceAll("$", "");
     }
-    let ranges;
+    let firstRangePart = "";
+    let secondRangePart;
     if (xc.includes(":")) {
-        ranges = xc.split(":").map((x) => x.trim());
+        [firstRangePart, secondRangePart] = xc.split(":");
+        firstRangePart = firstRangePart.trim();
+        secondRangePart = secondRangePart.trim();
     }
     else {
-        ranges = [xc.trim()];
+        firstRangePart = xc.trim();
     }
     let top, bottom, left, right;
     let fullCol = false;
     let fullRow = false;
     let hasHeader = false;
-    const firstRangePart = ranges[0];
-    const secondRangePart = ranges[1] && ranges[1];
     if (isColReference(firstRangePart)) {
         left = right = lettersToNumber(firstRangePart);
         top = bottom = 0;
@@ -4160,7 +4173,7 @@ function toZoneWithoutBoundaryChanges(xc) {
         top = bottom = c.row;
         hasHeader = true;
     }
-    if (ranges.length === 2) {
+    if (secondRangePart) {
         if (isColReference(secondRangePart)) {
             right = lettersToNumber(secondRangePart);
             fullCol = true;
@@ -8653,6 +8666,9 @@ function drawHighlight(renderingContext, highlight, rect) {
     const color = highlight.color || HIGHLIGHT_COLOR;
     const { ctx } = renderingContext;
     if (!highlight.noBorder) {
+        if (highlight.dashed) {
+            ctx.setLineDash([5, 3]);
+        }
         ctx.strokeStyle = color;
         if (highlight.thinLine) {
             ctx.lineWidth = 1;
@@ -9346,8 +9362,7 @@ class ComposerStore extends SpreadsheetStore {
             const exactMatch = proposals?.find((p) => p.text === tokenAtCursor.value);
             // remove tokens that are likely to be other parts of the formula that slipped in the token if it's a string
             const searchTerm = tokenAtCursor.value.replace(/[ ,\(\)]/g, "");
-            const initialContent = this.initialContent;
-            if (exactMatch && exactMatch.text !== initialContent) {
+            if (exactMatch && this._currentContent !== this.initialContent) {
                 // this means the user has chosen a proposal
                 return;
             }
@@ -9355,7 +9370,7 @@ class ComposerStore extends SpreadsheetStore {
                 proposals &&
                 !["ARG_SEPARATOR", "LEFT_PAREN"].includes(tokenAtCursor.type)) {
                 const filteredProposals = fuzzyLookup(searchTerm, proposals, (p) => p.fuzzySearchKey || p.text);
-                if (!exactMatch) {
+                if (!exactMatch || filteredProposals.length > 1) {
                     proposals = filteredProposals;
                 }
             }
@@ -9546,6 +9561,7 @@ class ChartJsComponent extends Component {
     };
     canvas = useRef("graphContainer");
     chart;
+    currentRuntime;
     get background() {
         return this.chartRuntime.background;
     }
@@ -9562,9 +9578,18 @@ class ChartJsComponent extends Component {
     setup() {
         onMounted(() => {
             const runtime = this.chartRuntime;
-            this.createChart(runtime.chartJsConfig);
+            this.currentRuntime = runtime;
+            // Note: chartJS modify the runtime in place, so it's important to give it a copy
+            this.createChart(deepCopy(runtime.chartJsConfig));
+        });
+        onWillUnmount(() => this.chart?.destroy());
+        useEffect(() => {
+            const runtime = this.chartRuntime;
+            if (!deepEquals(runtime, this.currentRuntime, "ignoreFunctions")) {
+                this.currentRuntime = runtime;
+                this.updateChartJs(deepCopy(runtime));
+            }
         });
-        useEffect(() => this.updateChartJs(this.chartRuntime), () => [this.chartRuntime]);
     }
     createChart(chartData) {
         const canvas = this.canvas.el;
@@ -9584,7 +9609,7 @@ class ChartJsComponent extends Component {
             this.chart.data.datasets = [];
         }
         this.chart.config.options = chartData.options;
-        this.chart.update("active");
+        this.chart.update();
     }
 }
 
@@ -10073,8 +10098,7 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
     }
     getContextCreation() {
         return {
-            background: this.background,
-            title: this.title,
+            ...this,
             range: this.keyValue ? [this.getters.getRangeString(this.keyValue, this.sheetId)] : undefined,
             auxiliaryRange: this.baseline
                 ? this.getters.getRangeString(this.baseline, this.sheetId)
@@ -18138,6 +18162,9 @@ const COLUMN = {
     ],
     returns: ["NUMBER"],
     compute: function (cellReference) {
+        if (isEvaluationError(cellReference?.value)) {
+            throw cellReference;
+        }
         const _cellReference = cellReference === undefined ? this.__originCellXC?.() : cellReference.value;
         assert(() => !!_cellReference, "In this context, the function [[FUNCTION_NAME]] needs to have a cell or range in parameter.");
         const zone = toZone(_cellReference);
@@ -18153,6 +18180,9 @@ const COLUMNS = {
     args: [arg("range (meta)", _t("The range whose column count will be returned."))],
     returns: ["NUMBER"],
     compute: function (range) {
+        if (isEvaluationError(range?.value)) {
+            throw range;
+        }
         const zone = toZone(range.value);
         return zone.right - zone.left + 1;
     },
@@ -18375,6 +18405,9 @@ const ROW = {
     ],
     returns: ["NUMBER"],
     compute: function (cellReference) {
+        if (isEvaluationError(cellReference?.value)) {
+            throw cellReference;
+        }
         const _cellReference = cellReference === undefined ? this.__originCellXC?.() : cellReference.value;
         assert(() => !!_cellReference, "In this context, the function [[FUNCTION_NAME]] needs to have a cell or range in parameter.");
         const zone = toZone(_cellReference);
@@ -18390,6 +18423,9 @@ const ROWS = {
     args: [arg("range (meta)", _t("The range whose row count will be returned."))],
     returns: ["NUMBER"],
     compute: function (range) {
+        if (isEvaluationError(range?.value)) {
+            throw range;
+        }
         const zone = toZone(range.value);
         return zone.bottom - zone.top + 1;
     },
@@ -20342,17 +20378,13 @@ class Composer extends Component {
                 this.DOMFocusableElementStore.setFocusableElement(el);
             }
             this.contentHelper.updateEl(el);
-            this.processTokenAtCursor();
         });
         useEffect(() => {
             this.processContent();
         });
-        onPatched(() => {
-            // Required because typing '=SUM' and double-clicking another cell leaves ShowProvider/ShowDescription true
-            if (this.composerStore.editionMode === "inactive") {
-                this.processTokenAtCursor();
-            }
-        });
+        useEffect(() => {
+            this.processTokenAtCursor();
+        }, () => [this.composerStore.editionMode !== "inactive"]);
     }
     // ---------------------------------------------------------------------------
     // Handlers
@@ -20954,13 +20986,10 @@ function compileTokens(tokens) {
                 const isRangeOnly = argTypes.every((t) => isRangeType(t));
                 if (isRangeOnly) {
                     if (!isRangeInput(currentArg)) {
-                        throw new BadExpressionError(_t("Function %s expects the parameter %s to be reference to a cell or range, not a %s.", functionName, (i + 1).toString(), currentArg.type.toLowerCase()));
+                        throw new BadExpressionError(_t("Function %(function_name)s expects the parameter %(arg_index)s to be a reference to a cell or a range.", { function_name: functionName, arg_index: i + 1 }));
                     }
                 }
-                compiledArgs.push(compileAST(currentArg, isMeta, hasRange, {
-                    functionName,
-                    paramIndex: i + 1,
-                }));
+                compiledArgs.push(compileAST(currentArg, isMeta, hasRange));
             }
             return compiledArgs;
         }
@@ -20976,7 +21005,7 @@ function compileTokens(tokens) {
          * function needs to receive as argument the coordinates of a cell rather
          * than its value. For this we have meta arguments.
          */
-        function compileAST(ast, isMeta = false, hasRange = false, referenceVerification = {}) {
+        function compileAST(ast, isMeta = false, hasRange = false) {
             const code = new FunctionCodeBuilder(scope);
             if (ast.type !== "REFERENCE" && !(ast.type === "BIN_OPERATION" && ast.value === ":")) {
                 if (isMeta) {
@@ -20995,11 +21024,11 @@ function compileTokens(tokens) {
                     return code.return(`{ value: this.constantValues.strings[${constantValues.strings.indexOf(ast.value)}] }`);
                 case "REFERENCE":
                     const referenceIndex = dependencies.indexOf(ast.value);
-                    if (hasRange) {
+                    if ((!isMeta && ast.value.includes(":")) || hasRange) {
                         return code.return(`range(deps[${referenceIndex}])`);
                     }
                     else {
-                        return code.return(`ref(deps[${referenceIndex}], ${isMeta ? "true" : "false"}, "${referenceVerification.functionName || OPERATOR_MAP["="]}",  ${referenceVerification.paramIndex})`);
+                        return code.return(`ref(deps[${referenceIndex}], ${isMeta ? "true" : "false"})`);
                     }
                 case "FUNCALL":
                     const args = compileFunctionArgs(ast).map((arg) => arg.assignResultToVariable());
@@ -21008,20 +21037,14 @@ function compileTokens(tokens) {
                     return code.return(`ctx['${fnName}'](${args.map((arg) => arg.returnExpression)})`);
                 case "UNARY_OPERATION": {
                     const fnName = UNARY_OPERATOR_MAP[ast.value];
-                    const operand = compileAST(ast.operand, false, false, {
-                        functionName: fnName,
-                    }).assignResultToVariable();
+                    const operand = compileAST(ast.operand, false, false).assignResultToVariable();
                     code.append(operand);
                     return code.return(`ctx['${fnName}'](${operand.returnExpression})`);
                 }
                 case "BIN_OPERATION": {
                     const fnName = OPERATOR_MAP[ast.value];
-                    const left = compileAST(ast.left, false, false, {
-                        functionName: fnName,
-                    }).assignResultToVariable();
-                    const right = compileAST(ast.right, false, false, {
-                        functionName: fnName,
-                    }).assignResultToVariable();
+                    const left = compileAST(ast.left, false, false).assignResultToVariable();
+                    const right = compileAST(ast.right, false, false).assignResultToVariable();
                     code.append(left);
                     code.append(right);
                     return code.return(`ctx['${fnName}'](${left.returnExpression}, ${right.returnExpression})`);
@@ -21059,7 +21082,10 @@ function compilationCacheKey(tokens, dependencies, constantValues) {
                 return `|N${constantValues.numbers.indexOf(parseNumber(token.value, DEFAULT_LOCALE))}|`;
             case "REFERENCE":
             case "INVALID_REFERENCE":
-                return `|${dependencies.indexOf(token.value)}|`;
+                if (token.value.includes(":")) {
+                    return `R|${dependencies.indexOf(token.value)}|`;
+                }
+                return `C|${dependencies.indexOf(token.value)}|`;
             case "SPACE":
                 return "";
             default:
@@ -21194,6 +21220,7 @@ const AGGREGATORS_BY_FIELD_TYPE = {
     boolean: ["count_distinct", "count", "bool_and", "bool_or"],
     char: ["count_distinct", "count"],
     many2one: ["count_distinct", "count"],
+    reference: ["count_distinct", "count"],
 };
 const AGGREGATORS = {};
 for (const type in AGGREGATORS_BY_FIELD_TYPE) {
@@ -22203,7 +22230,7 @@ function truncateLabel(label) {
 /**
  * Get a default chart js configuration
  */
-function getDefaultChartJsRuntime(chart, labels, fontColor, { format, locale }) {
+function getDefaultChartJsRuntime(chart, labels, fontColor, { format, locale, truncateLabels }) {
     const options = {
         // https://www.chartjs.org/docs/latest/general/responsive.html
         responsive: true, // will resize when its container is resized
@@ -22250,7 +22277,7 @@ function getDefaultChartJsRuntime(chart, labels, fontColor, { format, locale })
         type: chart.type,
         options,
         data: {
-            labels: labels.map(truncateLabel),
+            labels: truncateLabels ? labels.map(truncateLabel) : labels,
             datasets: [],
         },
         platform: undefined, // This key is optional and will be set by chart.js
@@ -22430,25 +22457,23 @@ class BarChart extends AbstractChart {
         return {
             background: context.background,
             dataSets: context.range ? context.range : [],
-            dataSetsHaveTitle: false,
-            stacked: false,
+            dataSetsHaveTitle: context.dataSetsHaveTitle ?? false,
+            stacked: context.stacked ?? false,
             aggregated: context.aggregated ?? false,
-            legendPosition: "top",
+            legendPosition: context.legendPosition ?? "top",
             title: context.title || "",
             type: "bar",
-            verticalAxisPosition: "left",
+            verticalAxisPosition: context.verticalAxisPosition ?? "left",
             labelRange: context.auxiliaryRange || undefined,
         };
     }
     getContextCreation() {
         return {
-            background: this.background,
-            title: this.title,
+            ...this,
             range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
-            aggregated: this.aggregated,
         };
     }
     copyForSheetId(sheetId) {
@@ -22613,13 +22638,11 @@ class ComboChart extends AbstractChart {
     }
     getContextCreation() {
         return {
-            background: this.background,
-            title: this.title,
+            ...this,
             range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
-            aggregated: this.aggregated,
         };
     }
     getDefinition() {
@@ -22669,12 +22692,12 @@ class ComboChart extends AbstractChart {
     static getDefinitionFromContextCreation(context) {
         return {
             background: context.background,
-            dataSets: context.range ? context.range : [],
-            dataSetsHaveTitle: false,
+            dataSets: context.range ?? [],
+            dataSetsHaveTitle: context.dataSetsHaveTitle ?? false,
             aggregated: context.aggregated,
-            legendPosition: "top",
+            legendPosition: context.legendPosition ?? "top",
             title: context.title || "",
-            verticalAxisPosition: "left",
+            verticalAxisPosition: context.verticalAxisPosition ?? "left",
             labelRange: context.auxiliaryRange || undefined,
             type: "combo",
             useBothYAxis: false,
@@ -22925,8 +22948,7 @@ class GaugeChart extends AbstractChart {
     }
     getContextCreation() {
         return {
-            background: this.background,
-            title: this.title,
+            ...this,
             range: this.dataRange
                 ? [this.getters.getRangeString(this.dataRange, this.sheetId)]
                 : undefined,
@@ -23214,9 +23236,9 @@ function isLuxonTimeAdapterInstalled() {
     }
     return isInstalled;
 }
-function getLineOrScatterConfiguration(chart, labels, localeFormat) {
+function getLineOrScatterConfiguration(chart, labels, options) {
     const fontColor = chartFontColor(chart.background);
-    const config = getDefaultChartJsRuntime(chart, labels, fontColor, localeFormat);
+    const config = getDefaultChartJsRuntime(chart, labels, fontColor, options);
     const legend = {
         labels: {
             color: fontColor,
@@ -23259,7 +23281,7 @@ function getLineOrScatterConfiguration(chart, labels, localeFormat) {
                     value = Number(value);
                     if (isNaN(value))
                         return value;
-                    const { locale, format } = localeFormat;
+                    const { locale, format } = options;
                     return formatValue(value, {
                         locale,
                         format: !format && Math.abs(value) >= 1000 ? "#,##" : format,
@@ -23292,9 +23314,10 @@ function createLineOrScatterChartRuntime(chart, getters) {
         ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
     }
     const locale = getters.getLocale();
+    const truncateLabels = axisType === "category";
     const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets);
-    const localeFormat = { format: dataSetFormat, locale };
-    const config = getLineOrScatterConfiguration(chart, labels, localeFormat);
+    const options = { format: dataSetFormat, locale, truncateLabels };
+    const config = getLineOrScatterConfiguration(chart, labels, options);
     const labelFormat = getChartLabelFormat(getters, chart.labelRange);
     if (axisType === "time") {
         const axis = {
@@ -23394,16 +23417,16 @@ class LineChart extends AbstractChart {
         return {
             background: context.background,
             dataSets: context.range ? context.range : [],
-            dataSetsHaveTitle: false,
-            labelsAsText: false,
-            legendPosition: "top",
+            dataSetsHaveTitle: context.dataSetsHaveTitle ?? false,
+            labelsAsText: context.labelsAsText ?? false,
+            legendPosition: context.legendPosition ?? "top",
             title: context.title || "",
             type: "line",
-            verticalAxisPosition: "left",
+            verticalAxisPosition: context.verticalAxisPosition ?? "left",
             labelRange: context.auxiliaryRange || undefined,
-            stacked: false,
+            stacked: context.stacked ?? false,
             aggregated: context.aggregated ?? false,
-            cumulative: false,
+            cumulative: context.cumulative ?? false,
         };
     }
     getDefinition() {
@@ -23429,13 +23452,11 @@ class LineChart extends AbstractChart {
     }
     getContextCreation() {
         return {
-            background: this.background,
-            title: this.title,
+            ...this,
             range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
-            aggregated: this.aggregated,
         };
     }
     updateRanges(applyChange) {
@@ -23505,8 +23526,8 @@ class PieChart extends AbstractChart {
         return {
             background: context.background,
             dataSets: context.range ? context.range : [],
-            dataSetsHaveTitle: false,
-            legendPosition: "top",
+            dataSetsHaveTitle: context.dataSetsHaveTitle ?? false,
+            legendPosition: context.legendPosition ?? "top",
             title: context.title || "",
             type: "pie",
             labelRange: context.auxiliaryRange || undefined,
@@ -23518,13 +23539,11 @@ class PieChart extends AbstractChart {
     }
     getContextCreation() {
         return {
-            background: this.background,
-            title: this.title,
+            ...this,
             range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
-            aggregated: this.aggregated,
         };
     }
     getDefinitionWithSpecificDataSets(dataSets, labelRange, targetSheetId) {
@@ -23709,12 +23728,12 @@ class ScatterChart extends AbstractChart {
         return {
             background: context.background,
             dataSets: context.range ? context.range : [],
-            dataSetsHaveTitle: false,
-            labelsAsText: false,
-            legendPosition: "top",
+            dataSetsHaveTitle: context.dataSetsHaveTitle ?? false,
+            labelsAsText: context.labelsAsText ?? false,
+            legendPosition: context.legendPosition ?? "top",
             title: context.title || "",
             type: "scatter",
-            verticalAxisPosition: "left",
+            verticalAxisPosition: context.verticalAxisPosition ?? "left",
             labelRange: context.auxiliaryRange || undefined,
             aggregated: context.aggregated ?? false,
         };
@@ -23740,13 +23759,11 @@ class ScatterChart extends AbstractChart {
     }
     getContextCreation() {
         return {
-            background: this.background,
-            title: this.title,
+            ...this,
             range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
-            aggregated: this.aggregated,
         };
     }
     updateRanges(applyChange) {
@@ -23860,27 +23877,25 @@ class WaterfallChart extends AbstractChart {
         return {
             background: context.background,
             dataSets: context.range ? context.range : [],
-            dataSetsHaveTitle: false,
+            dataSetsHaveTitle: context.dataSetsHaveTitle ?? false,
             aggregated: context.aggregated ?? false,
-            legendPosition: "top",
+            legendPosition: context.legendPosition ?? "top",
             title: context.title || "",
             type: "waterfall",
-            verticalAxisPosition: "left",
+            verticalAxisPosition: context.verticalAxisPosition ?? "left",
             labelRange: context.auxiliaryRange || undefined,
-            showSubTotals: true,
-            showConnectorLines: true,
-            firstValueAsSubtotal: false,
+            showSubTotals: context.showSubTotals ?? false,
+            showConnectorLines: context.showConnectorLines ?? true,
+            firstValueAsSubtotal: context.firstValueAsSubtotal ?? false,
         };
     }
     getContextCreation() {
         return {
-            background: this.background,
-            title: this.title,
+            ...this,
             range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
-            aggregated: this.aggregated,
         };
     }
     copyForSheetId(sheetId) {
@@ -24361,7 +24376,7 @@ function getDeleteMenuItem(figureId, onFigureDeleted, env) {
             });
             onFigureDeleted();
         },
-        icon: "o-spreadsheet-Icon.DELETE",
+        icon: "o-spreadsheet-Icon.TRASH",
     };
 }
 
@@ -24376,7 +24391,8 @@ const inverseCommandRegistry = new Registry()
     .add("CREATE_FIGURE", inverseCreateFigure)
     .add("CREATE_CHART", inverseCreateChart)
     .add("HIDE_COLUMNS_ROWS", inverseHideColumnsRows)
-    .add("UNHIDE_COLUMNS_ROWS", inverseUnhideColumnsRows);
+    .add("UNHIDE_COLUMNS_ROWS", inverseUnhideColumnsRows)
+    .add("CREATE_TABLE_STYLE", inverseCreateTableStyle);
 for (const cmd of coreTypes.values()) {
     if (!inverseCommandRegistry.contains(cmd)) {
         inverseCommandRegistry.add(cmd, identity);
@@ -24461,6 +24477,9 @@ function inverseUnhideColumnsRows(cmd) {
         },
     ];
 }
+function inverseCreateTableStyle(cmd) {
+    return [{ type: "REMOVE_TABLE_STYLE", tableStyleId: cmd.tableStyleId }];
+}
 
 /**
  * The class Registry is extended in order to add the function addChild
@@ -25058,7 +25077,7 @@ const CSS = css /* scss */ `
 
     .o-search-icon {
       right: 5px;
-      top: 4px;
+      top: 3px;
       opacity: 0.4;
 
       svg {
@@ -25145,8 +25164,12 @@ class FilterMenu extends Component {
         });
         this.state.values = this.getFilterHiddenValues(this.props.filterPosition);
     }
-    get isReadonly() {
-        return this.env.model.getters.isReadonly();
+    get isSortable() {
+        if (!this.table) {
+            return false;
+        }
+        const coreTable = this.env.model.getters.getCoreTableMatchingTopLeft(this.table.range.sheetId, this.table.range.zone);
+        return !this.env.model.getters.isReadonly() && coreTable?.type !== "dynamic";
     }
     getFilterHiddenValues(position) {
         const sheetId = this.env.model.getters.getActiveSheetId();
@@ -26116,10 +26139,10 @@ function getSmartChartDefinition(zone, getters) {
 }
 
 const TABLE_STYLE_CATEGORIES = {
-    none: _t("None"),
     light: _t("Light"),
     medium: _t("Medium"),
     dark: _t("Dark"),
+    custom: _t("Custom"),
 };
 const DEFAULT_TABLE_CONFIG = {
     hasFilters: true,
@@ -26132,7 +26155,7 @@ const DEFAULT_TABLE_CONFIG = {
     automaticAutofill: true,
     styleId: "TableStyleMedium2",
 };
-function generateColorSet(name, highlightColor) {
+function generateTableColorSet(name, highlightColor) {
     return {
         coloredText: darkenColor(highlightColor, 0.3),
         light: lightenColor(highlightColor, 0.8),
@@ -26153,10 +26176,10 @@ const COLOR_SETS = {
         mediumBorder: "#000000",
         highlight: "#000000",
     },
-    lightBlue: generateColorSet(_t("Light blue"), "#346B90"),
-    red: generateColorSet(_t("Red"), "#C53628"),
-    lightGreen: generateColorSet(_t("Light green"), "#748747"),
-    purple: generateColorSet(_t("Purple"), "#6C4E65"),
+    lightBlue: generateTableColorSet(_t("Light blue"), "#346B90"),
+    red: generateTableColorSet(_t("Red"), "#C53628"),
+    lightGreen: generateTableColorSet(_t("Light green"), "#748747"),
+    purple: generateTableColorSet(_t("Purple"), "#6C4E65"),
     gray: {
         name: _t("Gray"),
         coloredText: "#666666",
@@ -26166,7 +26189,7 @@ const COLOR_SETS = {
         mediumBorder: "#D0D0D0",
         highlight: "#A9A9A9",
     },
-    orange: generateColorSet(_t("Orange"), "#C37034"),
+    orange: generateTableColorSet(_t("Orange"), "#C37034"),
 };
 const DARK_COLOR_SETS = {
     black: COLOR_SETS.black,
@@ -26174,9 +26197,10 @@ const DARK_COLOR_SETS = {
     purpleGreen: { ...COLOR_SETS.lightGreen, highlight: COLOR_SETS.purple.highlight },
     redBlue: { ...COLOR_SETS.lightBlue, highlight: COLOR_SETS.red.highlight },
 };
-const lightTemplateColoredText = (colorSet) => ({
+const lightColoredText = (colorSet) => ({
     category: "light",
-    colorName: colorSet.name,
+    templateName: "lightColoredText",
+    primaryColor: colorSet.highlight,
     wholeTable: {
         style: { textColor: colorSet.coloredText },
         border: {
@@ -26188,9 +26212,10 @@ const lightTemplateColoredText = (colorSet) => ({
     totalRow: { border: { top: { color: colorSet.highlight, style: "thin" } } },
     firstRowStripe: { style: { fillColor: colorSet.light } },
 });
-const lightTemplateWithHeader = (colorSet) => ({
+const lightWithHeader = (colorSet) => ({
     category: "light",
-    colorName: colorSet.name,
+    templateName: "lightWithHeader",
+    primaryColor: colorSet.highlight,
     wholeTable: {
         border: {
             top: { color: colorSet.highlight, style: "thin" },
@@ -26207,9 +26232,10 @@ const lightTemplateWithHeader = (colorSet) => ({
     firstRowStripe: { border: { bottom: { color: colorSet.highlight, style: "thin" } } },
     secondRowStripe: { border: { bottom: { color: colorSet.highlight, style: "thin" } } },
 });
-const lightTemplateAllBorders = (colorSet) => ({
+const lightAllBorders = (colorSet) => ({
     category: "light",
-    colorName: colorSet.name,
+    templateName: "lightAllBorders",
+    primaryColor: colorSet.highlight,
     wholeTable: {
         border: {
             top: { color: colorSet.highlight, style: "thin" },
@@ -26225,9 +26251,10 @@ const lightTemplateAllBorders = (colorSet) => ({
     firstRowStripe: { style: { fillColor: colorSet.light } },
     firstColumnStripe: { style: { fillColor: colorSet.light } },
 });
-const mediumTemplateBandedBorders = (colorSet) => ({
+const mediumBandedBorders = (colorSet) => ({
     category: "medium",
-    colorName: colorSet.name,
+    templateName: "mediumBandedBorders",
+    primaryColor: colorSet.highlight,
     wholeTable: {
         border: {
             top: { color: colorSet.mediumBorder, style: "thin" },
@@ -26244,9 +26271,10 @@ const mediumTemplateBandedBorders = (colorSet) => ({
     firstRowStripe: { style: { fillColor: colorSet.light } },
     firstColumnStripe: { style: { fillColor: colorSet.light } },
 });
-const mediumTemplateWhiteBorders = (colorSet) => ({
+const mediumWhiteBorders = (colorSet) => ({
     category: "medium",
-    colorName: colorSet.name,
+    templateName: "mediumWhiteBorders",
+    primaryColor: colorSet.highlight,
     wholeTable: {
         border: {
             horizontal: { color: "#FFFFFF", style: "thin" },
@@ -26267,9 +26295,10 @@ const mediumTemplateWhiteBorders = (colorSet) => ({
     firstRowStripe: { style: { fillColor: colorSet.medium } },
     firstColumnStripe: { style: { fillColor: colorSet.medium } },
 });
-const mediumTemplateMinimalBorders = (colorSet) => ({
+const mediumMinimalBorders = (colorSet) => ({
     category: "medium",
-    colorName: colorSet.name,
+    templateName: "mediumMinimalBorders",
+    primaryColor: colorSet.highlight,
     wholeTable: {
         border: {
             top: { color: "#000000", style: "medium" },
@@ -26286,9 +26315,10 @@ const mediumTemplateMinimalBorders = (colorSet) => ({
     firstRowStripe: { style: { fillColor: COLOR_SETS.black.light } },
     firstColumnStripe: { style: { fillColor: COLOR_SETS.black.light } },
 });
-const mediumTemplateAllBorders = (colorSet) => ({
+const mediumAllBorders = (colorSet) => ({
     category: "medium",
-    colorName: colorSet.name,
+    templateName: "mediumAllBorders",
+    primaryColor: colorSet.highlight,
     wholeTable: {
         border: {
             top: { color: colorSet.mediumBorder, style: "thin" },
@@ -26304,9 +26334,10 @@ const mediumTemplateAllBorders = (colorSet) => ({
     firstRowStripe: { style: { fillColor: colorSet.medium } },
     firstColumnStripe: { style: { fillColor: colorSet.medium } },
 });
-const darkTemplate = (colorSet) => ({
+const dark = (colorSet) => ({
     category: "dark",
-    colorName: colorSet.name,
+    templateName: "dark",
+    primaryColor: colorSet.highlight,
     wholeTable: { style: { fillColor: colorSet.highlight, textColor: "#FFFFFF" } },
     totalRow: {
         style: { fillColor: colorSet.dark, textColor: "#FFFFFF" },
@@ -26327,18 +26358,19 @@ const darkTemplate = (colorSet) => ({
     firstRowStripe: { style: { fillColor: colorSet.dark } },
     firstColumnStripe: { style: { fillColor: colorSet.dark } },
 });
-const darkTemplateNoBorders = (colorSet) => ({
+const darkNoBorders = (colorSet) => ({
     category: "dark",
-    colorName: colorSet.name,
+    templateName: "darkNoBorders",
+    primaryColor: colorSet.highlight,
     wholeTable: { style: { fillColor: colorSet.light } },
     totalRow: { border: { top: { color: "#000000", style: "medium" } } }, // @compatibility: should be double line
     headerRow: { style: { fillColor: colorSet.highlight, textColor: "#FFFFFF" } },
     firstRowStripe: { style: { fillColor: colorSet.medium } },
     firstColumnStripe: { style: { fillColor: colorSet.medium } },
 });
-const darkTemplateInBlack = darkTemplate(COLOR_SETS.black);
+const darkTemplateInBlack = dark(COLOR_SETS.black);
 darkTemplateInBlack.wholeTable.style.fillColor = "#737373";
-const mediumMinimalBordersInBlack = mediumTemplateMinimalBorders(COLOR_SETS.black);
+const mediumMinimalBordersInBlack = mediumMinimalBorders(COLOR_SETS.black);
 mediumMinimalBordersInBlack.wholeTable.border = {
     ...mediumMinimalBordersInBlack.wholeTable.border,
     left: { color: "#000000", style: "thin" },
@@ -26346,69 +26378,92 @@ mediumMinimalBordersInBlack.wholeTable.border = {
     horizontal: { color: "#000000", style: "thin" },
     vertical: { color: "#000000", style: "thin" },
 };
+function buildPreset(name, template, colorSet) {
+    return { ...template(colorSet), displayName: `${colorSet.name}, ${name}` };
+}
 const TABLE_PRESETS = {
-    None: { category: "none", colorName: "" },
-    TableStyleLight1: lightTemplateColoredText(COLOR_SETS.black),
-    TableStyleLight2: lightTemplateColoredText(COLOR_SETS.lightBlue),
-    TableStyleLight3: lightTemplateColoredText(COLOR_SETS.red),
-    TableStyleLight4: lightTemplateColoredText(COLOR_SETS.lightGreen),
-    TableStyleLight5: lightTemplateColoredText(COLOR_SETS.purple),
-    TableStyleLight6: lightTemplateColoredText(COLOR_SETS.gray),
-    TableStyleLight7: lightTemplateColoredText(COLOR_SETS.orange),
-    TableStyleLight8: lightTemplateWithHeader(COLOR_SETS.black),
-    TableStyleLight9: lightTemplateWithHeader(COLOR_SETS.lightBlue),
-    TableStyleLight10: lightTemplateWithHeader(COLOR_SETS.red),
-    TableStyleLight11: lightTemplateWithHeader(COLOR_SETS.lightGreen),
-    TableStyleLight12: lightTemplateWithHeader(COLOR_SETS.purple),
-    TableStyleLight13: lightTemplateWithHeader(COLOR_SETS.gray),
-    TableStyleLight14: lightTemplateWithHeader(COLOR_SETS.orange),
-    TableStyleLight15: lightTemplateAllBorders(COLOR_SETS.black),
-    TableStyleLight16: lightTemplateAllBorders(COLOR_SETS.lightBlue),
-    TableStyleLight17: lightTemplateAllBorders(COLOR_SETS.red),
-    TableStyleLight18: lightTemplateAllBorders(COLOR_SETS.lightGreen),
-    TableStyleLight19: lightTemplateAllBorders(COLOR_SETS.purple),
-    TableStyleLight20: lightTemplateAllBorders(COLOR_SETS.gray),
-    TableStyleLight21: lightTemplateAllBorders(COLOR_SETS.orange),
-    TableStyleMedium1: mediumTemplateBandedBorders(COLOR_SETS.black),
-    TableStyleMedium2: mediumTemplateBandedBorders(COLOR_SETS.lightBlue),
-    TableStyleMedium3: mediumTemplateBandedBorders(COLOR_SETS.red),
-    TableStyleMedium4: mediumTemplateBandedBorders(COLOR_SETS.lightGreen),
-    TableStyleMedium5: mediumTemplateBandedBorders(COLOR_SETS.purple),
-    TableStyleMedium6: mediumTemplateBandedBorders(COLOR_SETS.gray),
-    TableStyleMedium7: mediumTemplateBandedBorders(COLOR_SETS.orange),
-    TableStyleMedium8: mediumTemplateWhiteBorders(COLOR_SETS.black),
-    TableStyleMedium9: mediumTemplateWhiteBorders(COLOR_SETS.lightBlue),
-    TableStyleMedium10: mediumTemplateWhiteBorders(COLOR_SETS.red),
-    TableStyleMedium11: mediumTemplateWhiteBorders(COLOR_SETS.lightGreen),
-    TableStyleMedium12: mediumTemplateWhiteBorders(COLOR_SETS.purple),
-    TableStyleMedium13: mediumTemplateWhiteBorders(COLOR_SETS.gray),
-    TableStyleMedium14: mediumTemplateWhiteBorders(COLOR_SETS.orange),
-    TableStyleMedium15: mediumMinimalBordersInBlack,
-    TableStyleMedium16: mediumTemplateMinimalBorders(COLOR_SETS.lightBlue),
-    TableStyleMedium17: mediumTemplateMinimalBorders(COLOR_SETS.red),
-    TableStyleMedium18: mediumTemplateMinimalBorders(COLOR_SETS.lightGreen),
-    TableStyleMedium19: mediumTemplateMinimalBorders(COLOR_SETS.purple),
-    TableStyleMedium20: mediumTemplateMinimalBorders(COLOR_SETS.gray),
-    TableStyleMedium21: mediumTemplateMinimalBorders(COLOR_SETS.orange),
-    TableStyleMedium22: mediumTemplateAllBorders(COLOR_SETS.black),
-    TableStyleMedium23: mediumTemplateAllBorders(COLOR_SETS.lightBlue),
-    TableStyleMedium24: mediumTemplateAllBorders(COLOR_SETS.red),
-    TableStyleMedium25: mediumTemplateAllBorders(COLOR_SETS.lightGreen),
-    TableStyleMedium26: mediumTemplateAllBorders(COLOR_SETS.purple),
-    TableStyleMedium27: mediumTemplateAllBorders(COLOR_SETS.gray),
-    TableStyleMedium28: mediumTemplateAllBorders(COLOR_SETS.orange),
-    TableStyleDark1: darkTemplateInBlack,
-    TableStyleDark2: darkTemplate(COLOR_SETS.lightBlue),
-    TableStyleDark3: darkTemplate(COLOR_SETS.red),
-    TableStyleDark4: darkTemplate(COLOR_SETS.lightGreen),
-    TableStyleDark5: darkTemplate(COLOR_SETS.purple),
-    TableStyleDark6: darkTemplate(COLOR_SETS.gray),
-    TableStyleDark7: darkTemplate(COLOR_SETS.orange),
-    TableStyleDark8: darkTemplateNoBorders(DARK_COLOR_SETS.black),
-    TableStyleDark9: darkTemplateNoBorders(DARK_COLOR_SETS.redBlue),
-    TableStyleDark10: darkTemplateNoBorders(DARK_COLOR_SETS.purpleGreen),
-    TableStyleDark11: darkTemplateNoBorders(DARK_COLOR_SETS.orangeBlue),
-};
+    None: { category: "light", templateName: "none", primaryColor: "", displayName: "none" },
+    TableStyleLight1: buildPreset("TableStyleLight1", lightColoredText, COLOR_SETS.black),
+    TableStyleLight2: buildPreset("TableStyleLight2", lightColoredText, COLOR_SETS.lightBlue),
+    TableStyleLight3: buildPreset("TableStyleLight3", lightColoredText, COLOR_SETS.red),
+    TableStyleLight4: buildPreset("TableStyleLight4", lightColoredText, COLOR_SETS.lightGreen),
+    TableStyleLight5: buildPreset("TableStyleLight5", lightColoredText, COLOR_SETS.purple),
+    TableStyleLight6: buildPreset("TableStyleLight6", lightColoredText, COLOR_SETS.gray),
+    TableStyleLight7: buildPreset("TableStyleLight7", lightColoredText, COLOR_SETS.orange),
+    TableStyleLight8: buildPreset("TableStyleLight8", lightWithHeader, COLOR_SETS.black),
+    TableStyleLight9: buildPreset("TableStyleLight9", lightWithHeader, COLOR_SETS.lightBlue),
+    TableStyleLight10: buildPreset("TableStyleLight10", lightWithHeader, COLOR_SETS.red),
+    TableStyleLight11: buildPreset("TableStyleLight11", lightWithHeader, COLOR_SETS.lightGreen),
+    TableStyleLight12: buildPreset("TableStyleLight12", lightWithHeader, COLOR_SETS.purple),
+    TableStyleLight13: buildPreset("TableStyleLight13", lightWithHeader, COLOR_SETS.gray),
+    TableStyleLight14: buildPreset("TableStyleLight14", lightWithHeader, COLOR_SETS.orange),
+    TableStyleLight15: buildPreset("TableStyleLight15", lightAllBorders, COLOR_SETS.black),
+    TableStyleLight16: buildPreset("TableStyleLight16", lightAllBorders, COLOR_SETS.lightBlue),
+    TableStyleLight17: buildPreset("TableStyleLight17", lightAllBorders, COLOR_SETS.red),
+    TableStyleLight18: buildPreset("TableStyleLight18", lightAllBorders, COLOR_SETS.lightGreen),
+    TableStyleLight19: buildPreset("TableStyleLight19", lightAllBorders, COLOR_SETS.purple),
+    TableStyleLight20: buildPreset("TableStyleLight20", lightAllBorders, COLOR_SETS.gray),
+    TableStyleLight21: buildPreset("TableStyleLight21", lightAllBorders, COLOR_SETS.orange),
+    TableStyleMedium1: buildPreset("TableStyleMedium1", mediumBandedBorders, COLOR_SETS.black),
+    TableStyleMedium2: buildPreset("TableStyleMedium2", mediumBandedBorders, COLOR_SETS.lightBlue),
+    TableStyleMedium3: buildPreset("TableStyleMedium3", mediumBandedBorders, COLOR_SETS.red),
+    TableStyleMedium4: buildPreset("TableStyleMedium4", mediumBandedBorders, COLOR_SETS.lightGreen),
+    TableStyleMedium5: buildPreset("TableStyleMedium5", mediumBandedBorders, COLOR_SETS.purple),
+    TableStyleMedium6: buildPreset("TableStyleMedium6", mediumBandedBorders, COLOR_SETS.gray),
+    TableStyleMedium7: buildPreset("TableStyleMedium7", mediumBandedBorders, COLOR_SETS.orange),
+    TableStyleMedium8: buildPreset("TableStyleMedium8", mediumWhiteBorders, COLOR_SETS.black),
+    TableStyleMedium9: buildPreset("TableStyleMedium9", mediumWhiteBorders, COLOR_SETS.lightBlue),
+    TableStyleMedium10: buildPreset("TableStyleMedium10", mediumWhiteBorders, COLOR_SETS.red),
+    TableStyleMedium11: buildPreset("TableStyleMedium11", mediumWhiteBorders, COLOR_SETS.lightGreen),
+    TableStyleMedium12: buildPreset("TableStyleMedium12", mediumWhiteBorders, COLOR_SETS.purple),
+    TableStyleMedium13: buildPreset("TableStyleMedium13", mediumWhiteBorders, COLOR_SETS.gray),
+    TableStyleMedium14: buildPreset("TableStyleMedium14", mediumWhiteBorders, COLOR_SETS.orange),
+    TableStyleMedium15: { ...mediumMinimalBordersInBlack, displayName: "Black, TableStyleMedium15" },
+    TableStyleMedium16: buildPreset("TableStyleMedium16", mediumMinimalBorders, COLOR_SETS.lightBlue),
+    TableStyleMedium17: buildPreset("TableStyleMedium17", mediumMinimalBorders, COLOR_SETS.red),
+    TableStyleMedium18: buildPreset("TableStyleMedium18", mediumMinimalBorders, COLOR_SETS.lightGreen),
+    TableStyleMedium19: buildPreset("TableStyleMedium19", mediumMinimalBorders, COLOR_SETS.purple),
+    TableStyleMedium20: buildPreset("TableStyleMedium20", mediumMinimalBorders, COLOR_SETS.gray),
+    TableStyleMedium21: buildPreset("TableStyleMedium21", mediumMinimalBorders, COLOR_SETS.orange),
+    TableStyleMedium22: buildPreset("TableStyleMedium22", mediumAllBorders, COLOR_SETS.black),
+    TableStyleMedium23: buildPreset("TableStyleMedium23", mediumAllBorders, COLOR_SETS.lightBlue),
+    TableStyleMedium24: buildPreset("TableStyleMedium24", mediumAllBorders, COLOR_SETS.red),
+    TableStyleMedium25: buildPreset("TableStyleMedium25", mediumAllBorders, COLOR_SETS.lightGreen),
+    TableStyleMedium26: buildPreset("TableStyleMedium26", mediumAllBorders, COLOR_SETS.purple),
+    TableStyleMedium27: buildPreset("TableStyleMedium27", mediumAllBorders, COLOR_SETS.gray),
+    TableStyleMedium28: buildPreset("TableStyleMedium28", mediumAllBorders, COLOR_SETS.orange),
+    TableStyleDark1: { ...darkTemplateInBlack, displayName: "Black, TableStyleDark1" },
+    TableStyleDark2: buildPreset("TableStyleDark2", dark, COLOR_SETS.lightBlue),
+    TableStyleDark3: buildPreset("TableStyleDark3", dark, COLOR_SETS.red),
+    TableStyleDark4: buildPreset("TableStyleDark4", dark, COLOR_SETS.lightGreen),
+    TableStyleDark5: buildPreset("TableStyleDark5", dark, COLOR_SETS.purple),
+    TableStyleDark6: buildPreset("TableStyleDark6", dark, COLOR_SETS.gray),
+    TableStyleDark7: buildPreset("TableStyleDark7", dark, COLOR_SETS.orange),
+    TableStyleDark8: buildPreset("TableStyleDark8", darkNoBorders, DARK_COLOR_SETS.black),
+    TableStyleDark9: buildPreset("TableStyleDark9", darkNoBorders, DARK_COLOR_SETS.redBlue),
+    TableStyleDark10: buildPreset("TableStyleDark10", darkNoBorders, DARK_COLOR_SETS.purpleGreen),
+    TableStyleDark11: buildPreset("TableStyleDark11", darkNoBorders, DARK_COLOR_SETS.orangeBlue),
+};
+const TABLE_STYLES_TEMPLATES = {
+    none: () => ({ category: "none", templateName: "none", primaryColor: "", name: "none" }),
+    lightColoredText: lightColoredText,
+    lightAllBorders: lightAllBorders,
+    mediumAllBorders: mediumAllBorders,
+    lightWithHeader: lightWithHeader,
+    mediumBandedBorders: mediumBandedBorders,
+    mediumMinimalBorders: mediumMinimalBorders,
+    darkNoBorders: darkNoBorders,
+    mediumWhiteBorders: mediumWhiteBorders,
+    dark: dark,
+};
+function buildTableStyle(name, templateName, primaryColor) {
+    const colorSet = generateTableColorSet("", primaryColor);
+    return {
+        ...TABLE_STYLES_TEMPLATES[templateName](colorSet),
+        category: "custom",
+        displayName: name,
+    };
+}
 
 /**
  * Create a table on the selected zone, with UI warnings to the user if the creation fails.
@@ -26971,7 +27026,7 @@ const findAndReplace = {
     execute: (env) => {
         env.openSidePanel("FindAndReplace", {});
     },
-    icon: "o-spreadsheet-Icon.FIND_AND_REPLACE",
+    icon: "o-spreadsheet-Icon.SEARCH",
 };
 const deleteValues = {
     name: _t("Delete values"),
@@ -27471,18 +27526,18 @@ cellMenuRegistry
     .add("delete_row", {
     ...deleteRow,
     sequence: 110,
-    icon: "o-spreadsheet-Icon.DELETE",
+    icon: "o-spreadsheet-Icon.TRASH",
 })
     .add("delete_column", {
     ...deleteCol,
     sequence: 120,
-    icon: "o-spreadsheet-Icon.DELETE",
+    icon: "o-spreadsheet-Icon.TRASH",
 })
     .add("delete_cell", {
     ...deleteCells,
     sequence: 130,
     separator: true,
-    icon: "o-spreadsheet-Icon.DELETE",
+    icon: "o-spreadsheet-Icon.TRASH",
 })
     .addChild("delete_cell_up", ["delete_cell"], {
     ...deleteCellShiftUp,
@@ -27598,6 +27653,7 @@ function createFormatActionSpec({ name, format, descriptionValue, }) {
         }),
         execute: (env) => setFormatter(env, formatCallback(env)),
         isActive: (env) => isFormatSelected(env, formatCallback(env)),
+        format,
     };
 }
 const formatNumberAutomatic = {
@@ -27950,7 +28006,9 @@ function getWrapModeIcon(env) {
 
 var ACTION_FORMAT = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  EXAMPLE_DATE: EXAMPLE_DATE,
   clearFormat: clearFormat,
+  createFormatActionSpec: createFormatActionSpec,
   decraseDecimalPlaces: decraseDecimalPlaces,
   fillColor: fillColor,
   formatAlignment: formatAlignment,
@@ -28318,7 +28376,7 @@ colMenuRegistry
     .add("delete_column", {
     ...deleteCols,
     sequence: 90,
-    icon: "o-spreadsheet-Icon.DELETE",
+    icon: "o-spreadsheet-Icon.TRASH",
 })
     .add("clear_column", {
     ...clearCols,
@@ -28361,64 +28419,119 @@ colMenuRegistry
     isVisible: (env) => canUngroupHeaders(env, "COL"),
 });
 
-const numberFormatMenuRegistry = new MenuItemRegistry();
+const numberFormatMenuRegistry = new Registry();
 numberFormatMenuRegistry
     .add("format_number_automatic", {
     ...formatNumberAutomatic,
+    id: "format_number_automatic",
     sequence: 10,
 })
     .add("format_number_plain_text", {
     ...formatNumberPlainText,
+    id: "format_number_plain_text",
     sequence: 15,
     separator: true,
 })
     .add("format_number_number", {
     ...formatNumberNumber,
+    id: "format_number_number",
     sequence: 20,
 })
     .add("format_number_percent", {
     ...formatNumberPercent,
+    id: "format_number_percent",
     sequence: 30,
     separator: true,
 })
     .add("format_number_currency", {
     ...formatNumberCurrency,
+    id: "format_number_currency",
     sequence: 40,
 })
     .add("format_number_currency_rounded", {
     ...formatNumberCurrencyRounded,
+    id: "format_number_currency_rounded",
     sequence: 50,
 })
     .add("format_custom_currency", {
     ...formatCustomCurrency,
+    id: "format_custom_currency",
     sequence: 60,
     separator: true,
 })
     .add("format_number_date", {
     ...formatNumberDate,
+    id: "format_number_date",
     sequence: 70,
 })
     .add("format_number_time", {
     ...formatNumberTime,
+    id: "format_number_time",
     sequence: 80,
 })
     .add("format_number_date_time", {
     ...formatNumberDateTime,
+    id: "format_number_date_time",
     sequence: 90,
 })
     .add("format_number_duration", {
     ...formatNumberDuration,
+    id: "format_number_duration",
     sequence: 100,
     separator: true,
 })
     .add("more_formats", {
     ...moreFormats,
-    sequence: 110,
+    id: "more_formats",
+    sequence: 120,
+});
+function getCustomNumberFormats(env) {
+    const defaultFormats = new Set(numberFormatMenuRegistry
+        .getAll()
+        .map((f) => (typeof f.format === "function" ? f.format(env) : f.format)));
+    const customFormats = new Map();
+    for (const sheetId of env.model.getters.getSheetIds()) {
+        const cells = env.model.getters.getEvaluatedCells(sheetId);
+        for (const cellId in cells) {
+            const cell = cells[cellId];
+            if (cell.format && !customFormats.has(cell.format) && !defaultFormats.has(cell.format)) {
+                const formatType = getNumberFormatType(cell.format);
+                if (formatType === "date" || formatType === "currency") {
+                    customFormats.set(cell.format, createFormatActionSpec({
+                        descriptionValue: formatType === "currency" ? 1000 : EXAMPLE_DATE,
+                        format: cell.format,
+                        name: cell.format,
+                    }));
+                }
+            }
+        }
+    }
+    return [...customFormats.values()];
+}
+const getNumberFormatType = memoize((format) => {
+    if (isDateTimeFormat(format)) {
+        return "date";
+    }
+    else if (format.includes("[$")) {
+        return "currency";
+    }
+    return "number";
 });
 const formatNumberMenuItemSpec = {
     name: _t("More formats"),
     icon: "o-spreadsheet-Icon.NUMBER_FORMATS",
-    children: [() => numberFormatMenuRegistry.getAll()],
+    children: [
+        (env) => {
+            const customFormats = getCustomNumberFormats(env).map((action) => ({
+                ...action,
+                sequence: 110,
+            }));
+            if (customFormats.length > 0) {
+                customFormats[customFormats.length - 1].separator = true;
+            }
+            return createActions([...numberFormatMenuRegistry.getAll(), ...customFormats]);
+        },
+    ],
 };
 
 const rowMenuRegistry = new MenuItemRegistry();
@@ -28459,7 +28572,7 @@ rowMenuRegistry
     .add("delete_row", {
     ...deleteRows,
     sequence: 70,
-    icon: "o-spreadsheet-Icon.DELETE",
+    icon: "o-spreadsheet-Icon.TRASH",
 })
     .add("clear_row", {
     ...clearRows,
@@ -28610,7 +28723,7 @@ topbarMenuRegistry
 })
     .addChild("delete", ["edit"], {
     name: _t("Delete"),
-    icon: "o-spreadsheet-Icon.DELETE",
+    icon: "o-spreadsheet-Icon.TRASH",
     sequence: 70,
 })
     .addChild("edit_delete_cell_values", ["edit", "delete"], {
@@ -30814,9 +30927,26 @@ chartSidePanelComponentRegistry
 
 class MainChartPanelStore extends SpreadsheetStore {
     panel = "configuration";
+    creationContext = {};
     activatePanel(panel) {
         this.panel = panel;
     }
+    changeChartType(figureId, type) {
+        this.creationContext = {
+            ...this.creationContext,
+            ...this.getters.getContextCreationChart(figureId),
+        };
+        const sheetId = this.getters.getFigureSheetId(figureId);
+        if (!sheetId) {
+            return;
+        }
+        const definition = getChartDefinitionFromContextCreation(this.creationContext, type);
+        this.model.dispatch("UPDATE_CHART", {
+            definition,
+            id: figureId,
+            sheetId,
+        });
+    }
 }
 
 css /* scss */ `
@@ -30886,16 +31016,7 @@ class ChartPanel extends Component {
         if (!this.figureId) {
             return;
         }
-        const context = this.env.model.getters.getContextCreationChart(this.figureId);
-        if (!context) {
-            throw new Error("Chart not defined.");
-        }
-        const definition = getChartDefinitionFromContextCreation(context, type);
-        this.env.model.dispatch("UPDATE_CHART", {
-            definition,
-            id: this.figureId,
-            sheetId: this.env.model.getters.getFigureSheetId(this.figureId),
-        });
+        this.store.changeChartType(this.figureId, type);
     }
     get chartPanel() {
         if (!this.figureId) {
@@ -30922,6 +31043,14 @@ class ChartPanel extends Component {
 css /* scss */ `
   .o-spreadsheet {
     .o-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: ${ICON_EDGE_LENGTH}px;
+      height: ${ICON_EDGE_LENGTH}px;
+      font-size: ${ICON_EDGE_LENGTH}px;
+      vertical-align: middle;
+
       .small-text {
         font: bold 9px sans-serif;
       }
@@ -30929,6 +31058,9 @@ css /* scss */ `
         font: bold 16px sans-serif;
       }
     }
+    .fa-small {
+      font-size: 14px;
+    }
   }
 `;
 // -----------------------------------------------------------------------------
@@ -33552,15 +33684,14 @@ function createFilter(id, range, config, createRange) {
 function isStaticTable(table) {
     return table.type === "static" || table.type === "forceStatic";
 }
-function getComputedTableStyle(tableConfig, numberOfCols, numberOfRows) {
+function getComputedTableStyle(tableConfig, style, numberOfCols, numberOfRows) {
     return {
-        borders: getAllTableBorders(tableConfig, numberOfCols, numberOfRows),
-        styles: getAllTableStyles(tableConfig, numberOfCols, numberOfRows),
+        borders: getAllTableBorders(tableConfig, style, numberOfCols, numberOfRows),
+        styles: getAllTableStyles(tableConfig, style, numberOfCols, numberOfRows),
     };
 }
-function getAllTableBorders(tableConfig, nOfCols, nOfRows) {
+function getAllTableBorders(tableConfig, style, nOfCols, nOfRows) {
     const borders = generateMatrix(nOfCols, nOfRows, () => ({}));
-    const style = TABLE_PRESETS[tableConfig.styleId];
     for (const tableElement of TABLE_ELEMENTS_BY_PRIORITY) {
         const styleBorder = style[tableElement]?.border;
         if (!styleBorder)
@@ -33628,9 +33759,8 @@ function setBorderDescr(computedBorders, dir, borderDescr, col, row, numberOfCol
             return;
     }
 }
-function getAllTableStyles(tableConfig, numberOfCols, numberOfRows) {
+function getAllTableStyles(tableConfig, style, numberOfCols, numberOfRows) {
     const styles = generateMatrix(numberOfCols, numberOfRows, () => ({}));
-    const style = TABLE_PRESETS[tableConfig.styleId];
     for (const tableElement of TABLE_ELEMENTS_BY_PRIORITY) {
         const tableElStyle = style[tableElement];
         const bold = isTableElementInBold(tableElement);
@@ -33724,8 +33854,25 @@ function getTableElementZones(el, tableConfig, numberOfCols, numberOfRows) {
     }
     return zones;
 }
-function getTableStyleName(styleId, tableStyle) {
-    return tableStyle.colorName ? `${tableStyle.colorName}, ${styleId}` : styleId;
+
+function createTableStyleContextMenuActions(env, styleId) {
+    if (!env.model.getters.isTableStyleEditable(styleId)) {
+        return [];
+    }
+    return createActions([
+        {
+            id: "editTableStyle",
+            name: _t("Edit table style"),
+            execute: (env) => env.openSidePanel("TableStyleEditorPanel", { styleId }),
+            icon: "o-spreadsheet-Icon.EDIT",
+        },
+        {
+            id: "deleteTableStyle",
+            name: _t("Delete table style"),
+            execute: (env) => env.model.dispatch("REMOVE_TABLE_STYLE", { tableStyleId: styleId }),
+            icon: "o-spreadsheet-Icon.TRASH",
+        },
+    ]);
 }
 
 function drawPreviewTable(ctx, tableStyle, colWidth, rowHeight) {
@@ -33808,55 +33955,120 @@ function drawTexts(ctx, tableStyle, colWidth, rowHeight) {
     ctx.restore();
 }
 
+css /* scss */ `
+  .o-table-style-list-item {
+    border: 1px solid transparent;
+    &.selected {
+      border: 1px solid #007eff;
+      background: #f5f5f5;
+    }
+
+    &:hover {
+      background: #ddd;
+      .o-table-style-edit-button {
+        display: block !important;
+        right: 0;
+        top: 0;
+        background: #fff;
+        cursor: pointer;
+        border: 1px solid #ddd;
+        padding: 1px 1px 1px 2px;
+        .o-icon {
+          font-size: 12px;
+          width: 12px;
+          height: 12px;
+        }
+      }
+    }
+  }
+`;
 class TableStylePreview extends Component {
     static template = "o-spreadsheet-TableStylePreview";
-    static props = { tableConfig: Object };
+    static components = { Menu };
+    static props = {
+        tableConfig: Object,
+        tableStyle: Object,
+        class: String,
+        styleId: { type: String, optional: true },
+        selected: { type: Boolean, optional: true },
+        onClick: { type: Function, optional: true },
+    };
     canvasRef = useRef("canvas");
+    menu = useState({ isOpen: false, position: null, menuItems: [] });
     setup() {
         onWillUpdateProps((nextProps) => {
-            if (!deepEquals(this.props.tableConfig, nextProps.tableConfig)) {
-                this.drawTable(nextProps.tableConfig);
+            if (!deepEquals(this.props.tableConfig, nextProps.tableConfig) ||
+                !deepEquals(this.props.tableStyle, nextProps.tableStyle)) {
+                this.drawTable(nextProps);
             }
         });
-        onMounted(() => this.drawTable(this.props.tableConfig));
+        onMounted(() => this.drawTable(this.props));
     }
-    drawTable(tableConfig) {
+    drawTable(props) {
         const ctx = this.canvasRef.el.getContext("2d");
         const { width, height } = this.canvasRef.el.getBoundingClientRect();
         this.canvasRef.el.width = width;
         this.canvasRef.el.height = height;
-        const tableStyle = getComputedTableStyle(tableConfig, 5, 5);
-        drawPreviewTable(ctx, tableStyle, (width - 1) / 5, (height - 1) / 5);
+        const computedStyle = getComputedTableStyle(props.tableConfig, props.tableStyle, 5, 5);
+        drawPreviewTable(ctx, computedStyle, (width - 1) / 5, (height - 1) / 5);
+    }
+    onContextMenu(event) {
+        if (!this.props.styleId) {
+            return;
+        }
+        this.menu.menuItems = createTableStyleContextMenuActions(this.env, this.props.styleId);
+        this.menu.isOpen = true;
+        this.menu.position = { x: event.clientX, y: event.clientY };
+    }
+    closeMenu() {
+        this.menu.isOpen = false;
+        this.menu.position = null;
+        this.menu.menuItems = [];
+    }
+    get styleName() {
+        if (!this.props.styleId) {
+            return "";
+        }
+        return this.env.model.getters.getTableStyle(this.props.styleId).displayName;
+    }
+    get isStyleEditable() {
+        if (!this.props.styleId) {
+            return false;
+        }
+        return this.env.model.getters.isTableStyleEditable(this.props.styleId);
+    }
+    editTableStyle() {
+        this.env.openSidePanel("TableStyleEditorPanel", { styleId: this.props.styleId });
     }
 }
 
 css /* scss */ `
   .o-table-style-popover {
     /** 7 tables preview + padding by line */
-    max-width: calc((66px + 4px * 2) * 7);
+    width: calc((66px + 4px * 2) * 7);
     background: #fff;
     font-size: 14px;
-    .o-table-style-list-item {
-      padding: 4px;
-      &.selected {
-        padding: 3px;
-      }
+    user-select: none;
 
-      .o-table-style-popover-preview {
-        width: 66px;
-        height: 51px;
-      }
+    .form-check-input {
+      font-size: 12px;
     }
-  }
 
-  .o-table-style-list-item {
-    &.selected {
-      border: 1px solid #007eff;
-      background: #f5f5f5;
+    .o-table-style-list-item {
+      padding: 3px;
     }
 
-    &:hover {
-      background: #ddd;
+    .o-table-style-popover-preview {
+      width: 66px;
+      height: 51px;
+    }
+
+    .o-new-table-style {
+      font-size: 36px;
+      color: #666;
+      &:hover {
+        background: #f5f5f5;
+      }
     }
   }
 `;
@@ -33870,9 +34082,10 @@ class TableStylesPopover extends Component {
         onStylePicked: Function,
         selectedStyleId: { type: String, optional: true },
     };
-    stylePresets = TABLE_PRESETS;
     categories = TABLE_STYLE_CATEGORIES;
     tableStyleListRef = useRef("tableStyleList");
+    state = useState({ selectedCategory: this.initialSelectedCategory });
+    menu = useState({ isOpen: false, position: null, menuItems: [] });
     setup() {
         useExternalListener(window, "click", this.onExternalClick, { capture: true });
     }
@@ -33882,14 +34095,20 @@ class TableStylesPopover extends Component {
             ev.hasClosedTableStylesPopover = true;
         }
     }
-    getPresetsByCategory(category) {
-        return Object.keys(this.stylePresets).filter((key) => this.stylePresets[key].category === category);
+    get displayedStyles() {
+        const styles = this.env.model.getters.getTableStyles();
+        return Object.keys(styles).filter((styleId) => styles[styleId].category === this.state.selectedCategory);
     }
-    getTableConfig(styleId) {
-        return { ...this.props.tableConfig, styleId: styleId };
+    get initialSelectedCategory() {
+        return this.props.selectedStyleId
+            ? this.env.model.getters.getTableStyle(this.props.selectedStyleId).category
+            : "medium";
     }
-    getStyleName(styleId) {
-        return getTableStyleName(styleId, TABLE_PRESETS[styleId]);
+    newTableStyle() {
+        this.props.closePopover();
+        this.env.openSidePanel("TableStyleEditorPanel", {
+            onStylePicked: this.props.onStylePicked,
+        });
     }
 }
 
@@ -33909,13 +34128,9 @@ css /* scss */ `
     }
 
     .o-table-style-list-item {
-      padding: 4px;
+      padding: 3px;
       margin: 2px 1px;
 
-      &.selected {
-        padding: 3px;
-      }
-
       .o-table-style-picker-preview {
         width: 61px;
         height: 46px;
@@ -33929,7 +34144,9 @@ class TableStylePicker extends Component {
     static props = { table: Object };
     state = useState({ popoverProps: undefined });
     getDisplayedTableStyles() {
-        const styles = Object.keys(TABLE_PRESETS);
+        const allStyles = this.env.model.getters.getTableStyles();
+        const selectedStyleCategory = allStyles[this.props.table.config.styleId].category;
+        const styles = Object.keys(allStyles).filter((key) => allStyles[key].category === selectedStyleCategory);
         const selectedStyleIndex = styles.indexOf(this.props.table.config.styleId);
         if (selectedStyleIndex === -1) {
             return styles.slice(0, 4);
@@ -33937,9 +34154,6 @@ class TableStylePicker extends Component {
         const index = Math.floor(selectedStyleIndex / 4) * 4;
         return styles.slice(index, index + 4);
     }
-    getTableConfig(styleId) {
-        return { ...this.props.table.config, styleId: styleId };
-    }
     onStylePicked(styleId) {
         const sheetId = this.env.model.getters.getActiveSheetId();
         this.env.model.dispatch("UPDATE_TABLE", {
@@ -33965,9 +34179,6 @@ class TableStylePicker extends Component {
     closePopover() {
         this.state.popoverProps = undefined;
     }
-    getStyleName(styleId) {
-        return getTableStyleName(styleId, TABLE_PRESETS[styleId]);
-    }
 }
 
 css /* scss */ `
@@ -34156,6 +34367,104 @@ class TablePanel extends Component {
     }
 }
 
+css /* scss */ `
+  .o-table-style-editor-panel {
+    .o-table-style-list-item {
+      margin: 1px 3px;
+      padding: 3px 6px;
+
+      .o-table-style-edit-template-preview {
+        width: 81px;
+        height: 61px;
+      }
+    }
+
+    .o-sidePanelButtons .o-delete:hover:enabled {
+      color: #ffffff;
+      background: #d94b4b;
+    }
+  }
+`;
+class TableStyleEditorPanel extends Component {
+    static template = "o-spreadsheet-TableStyleEditorPanel";
+    static components = { Section, RoundColorPicker, TableStylePreview };
+    static props = {
+        onCloseSidePanel: Function,
+        onStylePicked: { type: Function, optional: true },
+        styleId: { type: String, optional: true },
+    };
+    state = useState(this.getInitialState());
+    setup() {
+        useExternalListener(window, "click", () => (this.state.pickerOpened = false));
+    }
+    getInitialState() {
+        const editedStyle = this.props.styleId
+            ? this.env.model.getters.getTableStyle(this.props.styleId)
+            : null;
+        return {
+            pickerOpened: false,
+            primaryColor: editedStyle?.primaryColor || "#3C78D8",
+            selectedTemplateName: editedStyle?.templateName || "lightColoredText",
+            styleName: editedStyle?.displayName || this.env.model.getters.getNewCustomTableStyleName(),
+        };
+    }
+    togglePicker() {
+        this.state.pickerOpened = !this.state.pickerOpened;
+    }
+    onColorPicked(color) {
+        this.state.primaryColor = color;
+        this.state.pickerOpened = false;
+    }
+    onTemplatePicked(templateName) {
+        this.state.selectedTemplateName = templateName;
+    }
+    onConfirm() {
+        const tableStyleId = this.props.styleId || this.env.model.uuidGenerator.uuidv4();
+        this.env.model.dispatch("CREATE_TABLE_STYLE", {
+            tableStyleId,
+            tableStyleName: this.state.styleName,
+            templateName: this.state.selectedTemplateName,
+            primaryColor: this.state.primaryColor,
+        });
+        this.props.onStylePicked?.(tableStyleId);
+        this.props.onCloseSidePanel();
+    }
+    onCancel() {
+        this.props.onCloseSidePanel();
+    }
+    onDelete() {
+        if (!this.props.styleId) {
+            return;
+        }
+        this.env.model.dispatch("REMOVE_TABLE_STYLE", { tableStyleId: this.props.styleId });
+        this.props.onCloseSidePanel();
+    }
+    get colorPreviewStyle() {
+        return cssPropertiesToCss({ background: this.state.primaryColor });
+    }
+    get tableTemplates() {
+        return Object.keys(TABLE_STYLES_TEMPLATES).filter((templateName) => templateName !== "none");
+    }
+    get previewTableConfig() {
+        return {
+            bandedColumns: false,
+            bandedRows: true,
+            firstColumn: false,
+            lastColumn: false,
+            numberOfHeaders: 1,
+            totalRow: true,
+            hasFilters: true,
+            styleId: "",
+        };
+    }
+    get selectedStyle() {
+        return this.computeTableStyle(this.state.selectedTemplateName);
+    }
+    computeTableStyle(templateName) {
+        return buildTableStyle(this.state.styleName, templateName, this.state.primaryColor);
+    }
+}
+
 const sidePanelRegistry = new Registry();
 
 //------------------------------------------------------------------------------
@@ -34220,6 +34529,17 @@ sidePanelRegistry.add("TableSidePanel", {
         return { isOpen: true, props: { table: coreTable }, key: table.id };
     },
 });
+sidePanelRegistry.add("TableStyleEditorPanel", {
+    title: _t("Create custom table style"),
+    Body: TableStyleEditorPanel,
+    computeState: (getters, initialProps) => {
+        return {
+            isOpen: true,
+            props: { ...initialProps },
+            key: initialProps.styleId ?? "new",
+        };
+    },
+});
 
 class TopBarComponentRegistry extends Registry {
     mapping = {};
@@ -34577,29 +34897,27 @@ class ArrayFormulaHighlight extends SpreadsheetStore {
         this.highlightStore.register(this);
     }
     get highlights() {
-        const zone = this.getHighlightZone();
+        let zone;
+        const position = this.model.getters.getActivePosition();
+        const cell = this.getters.getEvaluatedCell(position);
+        const spreader = this.model.getters.getArrayFormulaSpreadingOn(position);
+        zone = spreader
+            ? this.model.getters.getSpreadZone(spreader, { ignoreSpillError: true })
+            : this.model.getters.getSpreadZone(position, { ignoreSpillError: true });
         if (!zone) {
             return [];
         }
-        const sheetId = this.model.getters.getActiveSheetId();
         return [
             {
-                sheetId,
+                sheetId: position.sheetId,
                 zone,
+                dashed: cell.value === CellErrorType.SpilledBlocked,
                 color: "#17A2B8",
                 noFill: true,
                 thinLine: true,
             },
         ];
     }
-    getHighlightZone() {
-        const position = this.model.getters.getActivePosition();
-        const spreader = this.model.getters.getArrayFormulaSpreadingOn(position);
-        const spreadZone = spreader
-            ? this.model.getters.getSpreadZone(spreader)
-            : this.model.getters.getSpreadZone(position);
-        return spreadZone;
-    }
 }
 
 // -----------------------------------------------------------------------------
@@ -35055,7 +35373,8 @@ class DataValidationOverlay extends Component {
     get checkBoxCellPositions() {
         return this.env.model.getters
             .getVisibleCellPositions()
-            .filter(this.env.model.getters.isCellValidCheckbox);
+            .filter((position) => this.env.model.getters.isCellValidCheckbox(position) &&
+            !this.env.model.getters.isFilterHeader(position));
     }
     get listIconsCellPositions() {
         if (this.env.model.getters.isReadonly()) {
@@ -35063,7 +35382,8 @@ class DataValidationOverlay extends Component {
         }
         return this.env.model.getters
             .getVisibleCellPositions()
-            .filter(this.env.model.getters.cellHasListDataValidationIcon);
+            .filter((position) => this.env.model.getters.cellHasListDataValidationIcon(position) &&
+            !this.env.model.getters.isFilterHeader(position));
     }
 }
 
@@ -36305,6 +36625,9 @@ css /* scss */ `
       height: 10000px;
       background-color: ${SELECTION_BORDER_COLOR};
     }
+    .o-unhide {
+      color: ${ICONS_COLOR};
+    }
     .o-unhide:hover {
       z-index: ${ComponentsImportance.Grid + 1};
       background-color: lightgrey;
@@ -36466,6 +36789,9 @@ css /* scss */ `
       height: 1px;
       background-color: ${SELECTION_BORDER_COLOR};
     }
+    .o-unhide {
+      color: ${ICONS_COLOR};
+    }
     .o-unhide:hover {
       z-index: ${ComponentsImportance.Grid + 1};
       background-color: lightgrey;
@@ -39608,6 +39934,13 @@ function hexaToInt(hex) {
     }
     return parseInt(hex.replace("#", ""), 16);
 }
+/**
+ * When defining style (fontColor, borderColor for instance)
+ * Excel will specify rgb="FF000000"
+ * In that case, We should not consider this value as user-defined but
+ * rather like an instruction: "Use your system default"
+ */
+const DEFAULT_SYSTEM_COLOR = "FF000000";
 
 /**
  * Get the relative path between two files
@@ -39646,18 +39979,6 @@ function arrayToObject(array, indexOffset = 0) {
     }
     return obj;
 }
-/**
- * Convert an object whose keys are numbers to an array were the element index was their key in the object.
- *
- * eg. : {0:"a", 2:"b"} => ["a", undefined, "b"]
- */
-function objectToArray(obj) {
-    const arr = [];
-    for (let key of Object.keys(obj).map(Number)) {
-        arr[key] = obj[key];
-    }
-    return arr;
-}
 /**
  * In xlsx we can have string with unicode characters with the format _x00fa_.
  * Replace with characters understandable by JS
@@ -40126,7 +40447,7 @@ function extractStyle(cell, data) {
             vertical: style.verticalAlign
                 ? V_ALIGNMENT_EXPORT_CONVERSION_MAP[style.verticalAlign]
                 : undefined,
-            wrapText: style.wrapping === "wrap",
+            wrapText: style.wrapping === "wrap" || undefined,
         },
     };
     styles.font["strike"] = !!style?.strikethrough || undefined;
@@ -40730,128 +41051,54 @@ function getHeader(sheet, dim, index) {
         : sheet.rows.find((row) => row.index === index);
 }
 
-const TABLE_HEADER_STYLE = {
-    fillColor: "#000000",
-    textColor: "#ffffff",
-    bold: true,
-};
-const TABLE_HIGHLIGHTED_CELL_STYLE = {
-    bold: true,
-};
-const TABLE_BORDER_STYLE = { style: "thin", color: "#000000FF" };
 /**
- * Convert the imported XLSX tables.
- *
- * We will create a Table if the imported table have filters, then apply a style in all the cells of the table
- * and convert the table-specific formula references into standard references.
+ * Convert the imported XLSX tables and pivots convert the table-specific formula references into standard references.
  *
  * Change the converted data in-place.
  */
 function convertTables(convertedData, xlsxData) {
     for (const xlsxSheet of xlsxData.sheets) {
+        const sheet = convertedData.sheets.find((sheet) => sheet.name === xlsxSheet.sheetName);
+        if (!sheet)
+            continue;
+        if (!sheet.tables)
+            sheet.tables = [];
         for (const table of xlsxSheet.tables) {
-            const sheet = convertedData.sheets.find((sheet) => sheet.name === xlsxSheet.sheetName);
-            if (!sheet || !table.autoFilter)
-                continue;
-            if (!sheet.tables)
-                sheet.tables = [];
-            sheet.tables.push({ range: table.ref });
+            sheet.tables.push({ range: table.ref, config: convertTableConfig(table) });
+        }
+        for (const pivotTable of xlsxSheet.pivotTables) {
+            sheet.tables.push({
+                range: pivotTable.location.ref,
+                config: convertPivotTableConfig(pivotTable),
+            });
         }
     }
-    applyTableStyle(convertedData, xlsxData);
     convertTableFormulaReferences(convertedData.sheets, xlsxData.sheets);
 }
-/**
- * Apply a style to all the cells that are in a table, and add the created styles in the  converted data.
- *
- * In XLSXs, the style of the cells of a table are not directly in the sheet, but rather deduced from the style of
- * the table that is defined in the table's XML file. The style of the table is a string referencing a standard style
- * defined in the OpenXML specifications. As there are 80+ different styles, we won't implement every one of them but
- * we will just define a style that will be used for all the imported tables.
- */
-function applyTableStyle(convertedData, xlsxData) {
-    const styles = objectToArray(convertedData.styles);
-    const borders = objectToArray(convertedData.borders);
-    for (let xlsxSheet of xlsxData.sheets) {
-        for (let table of xlsxSheet.tables) {
-            const sheet = convertedData.sheets.find((sheet) => sheet.name === xlsxSheet.sheetName);
-            if (!sheet)
-                continue;
-            const tableZone = toZone(table.ref);
-            // Table style
-            for (let i = 0; i < table.headerRowCount; i++) {
-                applyStyleToZone(TABLE_HEADER_STYLE, { ...tableZone, bottom: tableZone.top + i }, sheet.cells, styles);
-            }
-            for (let i = 0; i < table.totalsRowCount; i++) {
-                applyStyleToZone(TABLE_HIGHLIGHTED_CELL_STYLE, { ...tableZone, top: tableZone.bottom - i }, sheet.cells, styles);
-            }
-            if (table.style?.showFirstColumn) {
-                applyStyleToZone(TABLE_HIGHLIGHTED_CELL_STYLE, { ...tableZone, right: tableZone.left }, sheet.cells, styles);
-            }
-            if (table.style?.showLastColumn) {
-                applyStyleToZone(TABLE_HIGHLIGHTED_CELL_STYLE, { ...tableZone, left: tableZone.right }, sheet.cells, styles);
-            }
-            // Table borders
-            // Borders at : table outline + col(/row) if showColumnStripes(/showRowStripes) + border above totalRow
-            for (let col = tableZone.left; col <= tableZone.right; col++) {
-                for (let row = tableZone.top; row <= tableZone.bottom; row++) {
-                    const xc = toXC(col, row);
-                    const cell = sheet.cells[xc];
-                    const border = {
-                        left: col === tableZone.left || table.style?.showColumnStripes
-                            ? TABLE_BORDER_STYLE
-                            : undefined,
-                        right: col === tableZone.right ? TABLE_BORDER_STYLE : undefined,
-                        top: row === tableZone.top ||
-                            table.style?.showRowStripes ||
-                            row > tableZone.bottom - table.totalsRowCount
-                            ? TABLE_BORDER_STYLE
-                            : undefined,
-                        bottom: row === tableZone.bottom ? TABLE_BORDER_STYLE : undefined,
-                    };
-                    const newBorder = cell?.border ? { ...borders[cell.border], ...border } : border;
-                    let borderIndex = borders.findIndex((border) => deepEquals(border, newBorder));
-                    if (borderIndex === -1) {
-                        borderIndex = borders.length;
-                        borders.push(newBorder);
-                    }
-                    if (cell) {
-                        cell.border = borderIndex;
-                    }
-                    else {
-                        sheet.cells[xc] = { border: borderIndex };
-                    }
-                }
-            }
-        }
-    }
-    convertedData.styles = arrayToObject(styles);
-    convertedData.borders = arrayToObject(borders);
+function convertTableConfig(table) {
+    const styleId = table.style?.name || "";
+    return {
+        hasFilters: table.autoFilter !== undefined,
+        numberOfHeaders: table.headerRowCount,
+        totalRow: table.totalsRowCount > 0,
+        firstColumn: table.style?.showFirstColumn || false,
+        lastColumn: table.style?.showLastColumn || false,
+        bandedRows: table.style?.showRowStripes || false,
+        bandedColumns: table.style?.showColumnStripes || false,
+        styleId: TABLE_PRESETS[styleId] ? styleId : DEFAULT_TABLE_CONFIG.styleId,
+    };
 }
-/**
- * Apply a style to all the cells in the zone. The applied style WILL NOT overwrite values in existing style of the cell.
- *
- * If a style that was not in the styles array was applied, push it into the style array.
- */
-function applyStyleToZone(appliedStyle, zone, cells, styles) {
-    for (let col = zone.left; col <= zone.right; col++) {
-        for (let row = zone.top; row <= zone.bottom; row++) {
-            const xc = toXC(col, row);
-            const cell = cells[xc];
-            const newStyle = cell?.style ? { ...styles[cell.style], ...appliedStyle } : appliedStyle;
-            let styleIndex = styles.findIndex((style) => deepEquals(style, newStyle));
-            if (styleIndex === -1) {
-                styleIndex = styles.length;
-                styles.push(newStyle);
-            }
-            if (cell) {
-                cell.style = styleIndex;
-            }
-            else {
-                cells[xc] = { style: styleIndex };
-            }
-        }
-    }
+function convertPivotTableConfig(pivotTable) {
+    return {
+        hasFilters: false,
+        numberOfHeaders: pivotTable.location.firstDataRow,
+        totalRow: pivotTable.rowGrandTotals,
+        firstColumn: true,
+        lastColumn: pivotTable.style?.showLastColumn || false,
+        bandedRows: pivotTable.style?.showRowStripes || false,
+        bandedColumns: pivotTable.style?.showColStripes || false,
+        styleId: DEFAULT_TABLE_CONFIG.styleId,
+    };
 }
 /**
  * In all the sheets, replace the table-only references in the formula cells with standard references.
@@ -41020,7 +41267,7 @@ function getDefaultXLSXStructure(data) {
                 fillId: 0,
                 numFmtId: 0,
                 borderId: 0,
-                alignment: { vertical: "bottom" },
+                alignment: {},
             },
         ],
         fonts: [
@@ -41028,7 +41275,7 @@ function getDefaultXLSXStructure(data) {
                 size: DEFAULT_FONT_SIZE,
                 family: 2,
                 color: { rgb: "000000" },
-                name: "Calibri",
+                name: "Arial",
             },
         ],
         fills: [{ reservedAttribute: "none" }, { reservedAttribute: "gray125" }],
@@ -41320,9 +41567,10 @@ class XlsxBaseExtractor {
         }
         else {
             rgb = this.extractAttr(colorElement, "rgb")?.asString();
+            rgb = rgb === DEFAULT_SYSTEM_COLOR ? undefined : rgb;
         }
         const color = {
-            rgb,
+            rgb: rgb || defaultColor,
             auto: this.extractAttr(colorElement, "auto")?.asBool(),
             indexed: this.extractAttr(colorElement, "indexed")?.asNum(),
             tint: this.extractAttr(colorElement, "tint")?.asNum(),
@@ -41759,20 +42007,48 @@ class XlsxPivotExtractor extends XlsxBaseExtractor {
         // pivotTableDefinition elements.
         { query: ":root", parent: this.rootFile.file.xml }, (pivotElement) => {
             return {
-                displayName: this.extractAttr(pivotElement, "name", { required: true }).asString(),
-                id: this.extractAttr(pivotElement, "name", { required: true }).asString(),
-                ref: this.extractChildAttr(pivotElement, "location", "ref", {
+                name: this.extractAttr(pivotElement, "name", { required: true }).asString(),
+                rowGrandTotals: this.extractAttr(pivotElement, "rowGrandTotals", {
+                    default: true,
+                }).asBool(),
+                location: this.extractPivotLocation(pivotElement),
+                style: this.extractPivotStyleInfo(pivotElement),
+            };
+        })[0];
+    }
+    extractPivotLocation(pivotElement) {
+        return this.mapOnElements({ query: "location", parent: pivotElement }, (pivotStyleElement) => {
+            return {
+                ref: this.extractAttr(pivotStyleElement, "ref", { required: true }).asString(),
+                firstHeaderRow: this.extractAttr(pivotStyleElement, "firstHeaderRow", {
                     required: true,
-                }).asString(),
-                headerRowCount: this.extractChildAttr(pivotElement, "location", "firstDataRow", {
-                    default: 0,
                 }).asNum(),
-                totalsRowCount: 1,
-                cols: [],
-                style: {
-                    showFirstColumn: true,
-                    showRowStripes: true,
-                },
+                firstDataRow: this.extractAttr(pivotStyleElement, "firstDataRow", {
+                    required: true,
+                }).asNum(),
+                firstDataCol: this.extractAttr(pivotStyleElement, "firstDataCol", {
+                    required: true,
+                }).asNum(),
+            };
+        })[0];
+    }
+    extractPivotStyleInfo(pivotElement) {
+        return this.mapOnElements({ query: "pivotTableStyleInfo", parent: pivotElement }, (pivotStyleElement) => {
+            return {
+                name: this.extractAttr(pivotStyleElement, "name", { required: true }).asString(),
+                showRowHeaders: this.extractAttr(pivotStyleElement, "showRowHeaders", {
+                    required: true,
+                }).asBool(),
+                showColHeaders: this.extractAttr(pivotStyleElement, "showColHeaders", {
+                    required: true,
+                }).asBool(),
+                showRowStripes: this.extractAttr(pivotStyleElement, "showRowStripes", {
+                    required: true,
+                }).asBool(),
+                showColStripes: this.extractAttr(pivotStyleElement, "showColStripes", {
+                    required: true,
+                }).asBool(),
+                showLastColumn: this.extractAttr(pivotStyleElement, "showLastColumn")?.asBool(),
             };
         })[0];
     }
@@ -41869,7 +42145,8 @@ class XlsxSheetExtractor extends XlsxBaseExtractor {
                 cfs: this.extractConditionalFormats(),
                 figures: this.extractFigures(sheetElement),
                 hyperlinks: this.extractHyperLinks(sheetElement),
-                tables: [...this.extractTables(sheetElement), ...this.extractPivotTables()],
+                tables: this.extractTables(sheetElement),
+                pivotTables: this.extractPivotTables(),
                 isVisible: sheetWorkbookInfo.state === "visible" ? true : false,
             };
         })[0];
@@ -42479,6 +42756,8 @@ function load(data, verboseImport) {
     if (!data) {
         return createEmptyWorkbookData();
     }
+    console.group("Loading data");
+    const start = performance.now();
     if (data["[Content_Types].xml"]) {
         const reader = new XlsxReader(data);
         data = reader.convertXlsx();
@@ -42491,17 +42770,22 @@ function load(data, verboseImport) {
     // apply migrations, if needed
     if ("version" in data) {
         if (data.version < CURRENT_VERSION) {
+            console.info("Migrating data from version", data.version);
             data = migrate(data);
         }
     }
     data = repairData(data);
+    console.info("Data loaded in", performance.now() - start, "ms");
+    console.groupEnd();
     return data;
 }
 function migrate(data) {
+    const start = performance.now();
     const index = MIGRATIONS.findIndex((m) => m.from === data.version);
     for (let i = index; i < MIGRATIONS.length; i++) {
         data = MIGRATIONS[i].applyMigration(data);
     }
+    console.info("Data migrated in", performance.now() - start, "ms");
     return data;
 }
 const MIGRATIONS = [
@@ -43013,6 +43297,7 @@ function createEmptyWorkbookData(sheetName = "Sheet1") {
         settings: { locale: DEFAULT_LOCALE },
         pivots: {},
         pivotNextId: 1,
+        customTableStyles: {},
     };
     return data;
 }
@@ -43221,7 +43506,7 @@ class BordersPlugin extends CorePlugin {
                 this.clearBorders(cmd.sheetId, cmd.target);
                 break;
             case "REMOVE_COLUMNS_ROWS":
-                for (let el of cmd.elements) {
+                for (let el of [...cmd.elements].sort((a, b) => b - a)) {
                     if (cmd.dimension === "COL") {
                         this.shiftBordersHorizontally(cmd.sheetId, el + 1, -1);
                     }
@@ -47489,10 +47774,9 @@ class TablePlugin extends CorePlugin {
                 for (const tableId in tables) {
                     const table = tables[tableId];
                     if (table && cmd.target.some((zone) => isZoneInside(table.range.zone, zone))) {
-                        delete tables[tableId];
+                        this.dispatch("REMOVE_TABLE", { sheetId: cmd.sheetId, target: [table.range.zone] });
                     }
                 }
-                this.history.update("tables", cmd.sheetId, tables);
                 break;
             }
         }
@@ -47589,9 +47873,6 @@ class TablePlugin extends CorePlugin {
         if (config.numberOfHeaders !== undefined && config.numberOfHeaders < 0) {
             return "InvalidTableConfig" /* CommandResult.InvalidTableConfig */;
         }
-        if (config.styleId && !TABLE_PRESETS[config.styleId]) {
-            return "InvalidTableConfig" /* CommandResult.InvalidTableConfig */;
-        }
         if (config.hasFilters && config.numberOfHeaders === 0) {
             return "InvalidTableConfig" /* CommandResult.InvalidTableConfig */;
         }
@@ -47809,7 +48090,12 @@ class TablePlugin extends CorePlugin {
         }
     }
     exportForExcel(data) {
-        this.export(data);
+        for (const sheet of data.sheets) {
+            for (const table of this.getCoreTables(sheet.id)) {
+                const range = zoneToXc(table.range.zone);
+                sheet.tables.push({ range, filters: [], config: table.config });
+            }
+        }
     }
 }
 
@@ -48680,6 +48966,108 @@ class SettingsPlugin extends CorePlugin {
     }
 }
 
+class TableStylePlugin extends CorePlugin {
+    static getters = [
+        "getNewCustomTableStyleName",
+        "getTableStyle",
+        "getTableStyles",
+        "isTableStyleEditable",
+    ];
+    styles = {};
+    allowDispatch(cmd) {
+        switch (cmd.type) {
+            case "CREATE_TABLE":
+            case "UPDATE_TABLE":
+                if (cmd.config?.styleId && !this.styles[cmd.config.styleId]) {
+                    return "InvalidTableConfig" /* CommandResult.InvalidTableConfig */;
+                }
+                break;
+            case "CREATE_TABLE_STYLE":
+                if (!TABLE_STYLES_TEMPLATES[cmd.templateName]) {
+                    return "InvalidTableStyle" /* CommandResult.InvalidTableStyle */;
+                }
+                try {
+                    toHex(cmd.primaryColor);
+                }
+                catch (e) {
+                    return "InvalidTableStyle" /* CommandResult.InvalidTableStyle */;
+                }
+                break;
+        }
+        return "Success" /* CommandResult.Success */;
+    }
+    handle(cmd) {
+        switch (cmd.type) {
+            case "CREATE_TABLE_STYLE":
+                const style = buildTableStyle(cmd.tableStyleName, cmd.templateName, cmd.primaryColor);
+                this.history.update("styles", cmd.tableStyleId, style);
+                break;
+            case "REMOVE_TABLE_STYLE":
+                const styles = { ...this.styles };
+                delete styles[cmd.tableStyleId];
+                this.history.update("styles", styles);
+                for (const sheetId of this.getters.getSheetIds()) {
+                    for (const table of this.getters.getCoreTables(sheetId)) {
+                        if (table.config.styleId === cmd.tableStyleId) {
+                            this.dispatch("UPDATE_TABLE", {
+                                sheetId,
+                                zone: table.range.zone,
+                                config: { styleId: DEFAULT_TABLE_CONFIG.styleId },
+                            });
+                        }
+                    }
+                }
+                break;
+        }
+    }
+    getTableStyle(styleId) {
+        if (!this.styles[styleId]) {
+            throw new Error(`Table style ${styleId} does not exist`);
+        }
+        return this.styles[styleId];
+    }
+    getTableStyles() {
+        return this.styles;
+    }
+    getNewCustomTableStyleName() {
+        let name = _t("Custom Table Style");
+        const styleNames = new Set(Object.values(this.styles).map((style) => style.displayName));
+        if (!styleNames.has(name)) {
+            return name;
+        }
+        let i = 2;
+        while (styleNames.has(`${name} ${i}`)) {
+            i++;
+        }
+        return `${name} ${i}`;
+    }
+    isTableStyleEditable(styleId) {
+        return !TABLE_PRESETS[styleId];
+    }
+    import(data) {
+        for (const presetStyleId in TABLE_PRESETS) {
+            this.styles[presetStyleId] = TABLE_PRESETS[presetStyleId];
+        }
+        for (const styleId in data.customTableStyles) {
+            const styleData = data.customTableStyles[styleId];
+            this.styles[styleId] = buildTableStyle(styleData.displayName, styleData.templateName, styleData.primaryColor);
+        }
+    }
+    export(data) {
+        const exportedStyles = {};
+        for (const styleId in this.styles) {
+            if (!TABLE_PRESETS[styleId]) {
+                exportedStyles[styleId] = {
+                    displayName: this.styles[styleId].displayName,
+                    templateName: this.styles[styleId].templateName,
+                    primaryColor: this.styles[styleId].primaryColor,
+                };
+            }
+        }
+        data.customTableStyles = exportedStyles;
+    }
+}
+
 /**
  * UI plugins handle any transient data required to display a spreadsheet.
  * They can draw on the grid canvas.
@@ -48740,19 +49128,17 @@ class CompilationParametersBuilder {
      *        function for which this parameter is used, we just return the string of the parameter.
      *        The `compute` of the formula's function must process it completely
      */
-    refFn(range, isMeta, functionName, paramNumber) {
-        this.assertRangeValid(range);
+    refFn(range, isMeta) {
+        const rangeError = this.getRangeError(range);
+        if (rangeError) {
+            return rangeError;
+        }
         if (isMeta) {
             // Use zoneToXc of zone instead of getRangeString to avoid sending unbounded ranges
             const sheetName = this.getters.getSheetName(range.sheetId);
             return { value: getFullReference(sheetName, zoneToXc(range.zone)) };
         }
-        // if the formula definition could have accepted a range, we would pass through the _range function and not here
-        if (range.zone.bottom !== range.zone.top || range.zone.left !== range.zone.right) {
-            throw new EvaluationError(paramNumber
-                ? _t("Function %s expects the parameter %s to be a single value or a single cell reference, not a range.", functionName.toString(), paramNumber.toString())
-                : _t("Function %s expects its parameters to be single values or single cell references, not ranges.", functionName.toString()));
-        }
+        // the compiler guarantees only single cell ranges reach this part of the code
         const position = { sheetId: range.sheetId, col: range.zone.left, row: range.zone.top };
         return this.computeCell(position);
     }
@@ -48765,7 +49151,10 @@ class CompilationParametersBuilder {
      * that are actually present in the grid.
      */
     range(range) {
-        this.assertRangeValid(range);
+        const rangeError = this.getRangeError(range);
+        if (rangeError) {
+            return [[rangeError]];
+        }
         const sheetId = range.sheetId;
         const zone = range.zone;
         // Performance issue: Avoid fetching data on positions that are out of the spreadsheet
@@ -48795,13 +49184,14 @@ class CompilationParametersBuilder {
         this.rangeCache[cacheKey] = matrix;
         return matrix;
     }
-    assertRangeValid(range) {
+    getRangeError(range) {
         if (!isZoneValid(range.zone)) {
-            throw new InvalidReferenceError();
+            return new InvalidReferenceError();
         }
         if (range.invalidSheetName) {
-            throw new EvaluationError(_t("Invalid sheet name: %s", range.invalidSheetName));
+            return new EvaluationError(_t("Invalid sheet name: %s", range.invalidSheetName));
         }
+        return undefined;
     }
 }
 
@@ -49603,7 +49993,7 @@ class FormulaDependencyGraph {
         }
     }
     /**
-     * Return the cell and all cells that depend on it,
+     * Return all the cells that depend on the provided ranges,
      * in the correct order they should be evaluated.
      * This is called a topological ordering (excluding cycles)
      */
@@ -49614,11 +50004,19 @@ class FormulaDependencyGraph {
             const range = queue.pop();
             visited.addMany(positions(range.zone).map((position) => ({ sheetId: range.sheetId, ...position })));
             const impactedPositions = this.rTree.search(range).map((dep) => dep.data);
+            const nextInQueue = {};
             for (const position of impactedPositions) {
                 if (!visited.has(position)) {
-                    queue.push({ sheetId: position.sheetId, zone: positionToZone(position) });
+                    if (!nextInQueue[position.sheetId]) {
+                        nextInQueue[position.sheetId] = [];
+                    }
+                    nextInQueue[position.sheetId].push(positionToZone(position));
                 }
             }
+            for (const sheetId in nextInQueue) {
+                const zones = recomputeZones(nextInQueue[sheetId], []);
+                queue.push(...zones.map((zone) => ({ sheetId, zone })));
+            }
         }
         visited.deleteMany(ranges.flatMap((r) => positions(r.zone).map((position) => ({ sheetId: r.sheetId, ...position }))));
         return visited;
@@ -49897,11 +50295,13 @@ class Evaluator {
     getEvaluatedCell(position) {
         return this.evaluatedCells.get(position) || EMPTY_CELL;
     }
-    getSpreadZone(position) {
+    getSpreadZone(position, options = { ignoreSpillError: false }) {
         if (!this.spreadingRelations.isArrayFormula(position)) {
             return undefined;
         }
-        if (this.evaluatedCells.get(position)?.type === CellValueType.error) {
+        const evaluatedCell = this.evaluatedCells.get(position);
+        if (evaluatedCell?.type === CellValueType.error &&
+            !(options.ignoreSpillError && evaluatedCell?.value === CellErrorType.SpilledBlocked)) {
             return positionToZone(position);
         }
         const spreadPositions = Array.from(this.spreadingRelations.getArrayResultPositions(position));
@@ -49942,6 +50342,7 @@ class Evaluator {
         return new PositionSet(sheetSizes);
     }
     evaluateCells(positions) {
+        const start = performance.now();
         const cellsToCompute = this.createEmptyPositionSet();
         cellsToCompute.addMany(positions);
         const arrayFormulasPositions = this.getArrayFormulasImpactedByChangesOf(positions);
@@ -49949,6 +50350,7 @@ class Evaluator {
         cellsToCompute.addMany(arrayFormulasPositions);
         cellsToCompute.addMany(this.getCellsDependingOn(arrayFormulasPositions));
         this.evaluate(cellsToCompute);
+        console.info("evaluate Cells", performance.now() - start, "ms");
     }
     getArrayFormulasImpactedByChangesOf(positions) {
         const impactedPositions = this.createEmptyPositionSet();
@@ -49961,7 +50363,7 @@ class Evaluator {
             }
             if (!content) {
                 // The previous content could have blocked some array formulas
-                impactedPositions.addMany(this.getArrayFormulasBlockedByOrSpreadingOn(position));
+                impactedPositions.addMany(this.getArrayFormulasBlockedBy(position));
             }
         }
         return impactedPositions;
@@ -49983,8 +50385,10 @@ class Evaluator {
         });
     }
     evaluateAllCells() {
+        const start = performance.now();
         this.evaluatedCells = new PositionMap();
         this.evaluate(this.getAllCells());
+        console.info("evaluate all cells", performance.now() - start, "ms");
     }
     evaluateFormula(sheetId, formulaString) {
         const compiledFormula = compile(formulaString);
@@ -50004,14 +50408,23 @@ class Evaluator {
         positions.fillAllPositions();
         return positions;
     }
-    getArrayFormulasBlockedByOrSpreadingOn(position) {
+    /**
+     * Return the position of formulas blocked by the given position
+     * as well as all their dependencies.
+     */
+    getArrayFormulasBlockedBy(position) {
         if (!this.spreadingRelations.hasArrayFormulaResult(position)) {
             return [];
         }
         const arrayFormulas = this.spreadingRelations.getFormulaPositionsSpreadingOn(position);
         const positions = this.createEmptyPositionSet();
         positions.addMany(arrayFormulas);
-        positions.addMany(this.getCellsDependingOn(arrayFormulas));
+        const arrayFormulaPosition = this.getArrayFormulaSpreadingOn(position);
+        if (arrayFormulaPosition) {
+            // ignore the formula spreading on the position. Keep only the blocked ones
+            positions.delete(arrayFormulaPosition);
+        }
+        positions.addMany(this.getCellsDependingOn(positions));
         return positions;
     }
     nextPositionsToUpdate = new PositionSet({});
@@ -50101,12 +50514,12 @@ class Evaluator {
             return;
         }
         if (enoughCols) {
-            throw new EvaluationError(_t("Result couldn't be automatically expanded. Please insert more rows."));
+            throw new SplillBlockedError(_t("Result couldn't be automatically expanded. Please insert more rows."));
         }
         if (enoughRows) {
-            throw new EvaluationError(_t("Result couldn't be automatically expanded. Please insert more columns."));
+            throw new SplillBlockedError(_t("Result couldn't be automatically expanded. Please insert more columns."));
         }
-        throw new EvaluationError(_t("Result couldn't be automatically expanded. Please insert more columns and rows."));
+        throw new SplillBlockedError(_t("Result couldn't be automatically expanded. Please insert more columns and rows."));
     }
     updateSpreadRelation({ sheetId, col, row, }) {
         const arrayFormulaPosition = { sheetId, col, row };
@@ -50123,7 +50536,7 @@ class Evaluator {
             if (rawCell?.content ||
                 this.getters.getEvaluatedCell(position).type !== CellValueType.empty) {
                 this.blockedArrayFormulas.add(formulaPosition);
-                throw new EvaluationError(_t("Array result was not expanded because it would overwrite data in %s.", toXC(position.col, position.row)));
+                throw new SplillBlockedError(_t("Array result was not expanded because it would overwrite data in %s.", toXC(position.col, position.row)));
             }
             this.blockedArrayFormulas.delete(formulaPosition);
         };
@@ -50152,7 +50565,7 @@ class Evaluator {
             }
             this.evaluatedCells.delete(child);
             this.nextPositionsToUpdate.addMany(this.getCellsDependingOn([child]));
-            this.nextPositionsToUpdate.addMany(this.getArrayFormulasBlockedByOrSpreadingOn(child));
+            this.nextPositionsToUpdate.addMany(this.getArrayFormulasBlockedBy(child));
         }
     }
     // ----------------------------------------------------------
@@ -50421,8 +50834,8 @@ class EvaluationPlugin extends UIPlugin {
     /**
      * Return the spread zone the position is part of, if any
      */
-    getSpreadZone(position) {
-        return this.evaluator.getSpreadZone(position);
+    getSpreadZone(position, options = { ignoreSpillError: false }) {
+        return this.evaluator.getSpreadZone(position, options);
     }
     getArrayFormulaSpreadingOn(position) {
         return this.evaluator.getArrayFormulaSpreadingOn(position);
@@ -50462,7 +50875,7 @@ class EvaluationPlugin extends UIPlugin {
                 ? getItemId(newFormat, data.formats)
                 : exportedCellData.format;
             let content;
-            if (isFormula && formulaCell instanceof FormulaCellWithDependencies) {
+            if (isExported && isFormula && formulaCell instanceof FormulaCellWithDependencies) {
                 content = formulaCell.contentWithFixedReferences;
             }
             else {
@@ -50657,7 +51070,7 @@ class CustomColorsPlugin extends UIPlugin {
         const tables = this.getters.getTables(sheetId);
         return tables.flatMap((table) => {
             const config = table.config;
-            const style = TABLE_PRESETS[config.styleId];
+            const style = this.getters.getTableStyle(config.styleId);
             return [
                 this.getTableStyleElementColors(style.wholeTable),
                 config.numberOfHeaders > 0 ? this.getTableStyleElementColors(style.headerRow) : [],
@@ -52599,6 +53012,7 @@ otRegistry.addTransformation("ADD_COLUMNS_ROWS", ["FREEZE_COLUMNS", "FREEZE_ROWS
 otRegistry.addTransformation("REMOVE_COLUMNS_ROWS", ["FREEZE_COLUMNS", "FREEZE_ROWS"], freezeTransformation);
 otRegistry.addTransformation("ADD_COLUMNS_ROWS", ["UPDATE_TABLE"], updateTableTransformation);
 otRegistry.addTransformation("REMOVE_COLUMNS_ROWS", ["UPDATE_TABLE"], updateTableTransformation);
+otRegistry.addTransformation("REMOVE_TABLE_STYLE", ["CREATE_TABLE", "UPDATE_TABLE"], removeTableStyleTransform);
 otRegistry.addTransformation("ADD_COLUMNS_ROWS", ["GROUP_HEADERS", "UNGROUP_HEADERS", "FOLD_HEADER_GROUP", "UNFOLD_HEADER_GROUP"], groupHeadersTransformation);
 otRegistry.addTransformation("REMOVE_COLUMNS_ROWS", ["GROUP_HEADERS", "UNGROUP_HEADERS", "FOLD_HEADER_GROUP", "UNFOLD_HEADER_GROUP"], groupHeadersTransformation);
 otRegistry.addTransformation("REMOVE_PIVOT", ["RENAME_PIVOT", "DUPLICATE_PIVOT", "INSERT_PIVOT", "UPDATE_PIVOT"], pivotTransformation);
@@ -52695,6 +53109,15 @@ function updateTableTransformation(toTransform, executed) {
         : undefined;
     return { ...toTransform, newTableRange, zone: newCmdZone };
 }
+function removeTableStyleTransform(toTransform, executed) {
+    if (toTransform.config?.styleId !== executed.tableStyleId) {
+        return toTransform;
+    }
+    return {
+        ...toTransform,
+        config: { ...toTransform.config, styleId: DEFAULT_TABLE_CONFIG.styleId },
+    };
+}
 /**
  * Transform ADD_COLUMNS_ROWS command if some headers were added/removed
  */
@@ -53077,11 +53500,14 @@ class Session extends EventBus {
         this.transportService.onNewMessage(this.clientId, this.onMessageReceived.bind(this));
     }
     loadInitialMessages(messages) {
+        const start = performance.now();
+        const numberOfCommands = messages.reduce((acc, message) => acc + (message.type === "REMOTE_REVISION" ? message.commands.length : 1), 0);
         this.isReplayingInitialRevisions = true;
         for (const message of messages) {
             this.onMessageReceived(message);
         }
         this.isReplayingInitialRevisions = false;
+        console.info("Replayed", numberOfCommands, "commands in", performance.now() - start, "ms");
     }
     /**
      * Notify the server that the user client left the collaborative session
@@ -54154,7 +54580,7 @@ class SheetUIPlugin extends UIPlugin {
     }
 }
 
-class TableStylePlugin extends UIPlugin {
+class TableComputedStylePlugin extends UIPlugin {
     static getters = ["getCellTableStyle", "getCellTableBorder"];
     tableStyles = {};
     handle(cmd) {
@@ -54165,7 +54591,12 @@ class TableStylePlugin extends UIPlugin {
             return;
         }
         if (doesCommandInvalidatesTableStyle(cmd)) {
-            delete this.tableStyles[cmd.sheetId];
+            if ("sheetId" in cmd) {
+                delete this.tableStyles[cmd.sheetId];
+            }
+            else {
+                this.tableStyles = {};
+            }
             return;
         }
     }
@@ -54198,7 +54629,8 @@ class TableStylePlugin extends UIPlugin {
     computeTableStyle(sheetId, table) {
         return lazy(() => {
             const { config, numberOfCols, numberOfRows } = this.getTableRuntimeConfig(sheetId, table);
-            const relativeTableStyle = getComputedTableStyle(config, numberOfCols, numberOfRows);
+            const style = this.getters.getTableStyle(table.config.styleId);
+            const relativeTableStyle = getComputedTableStyle(config, style, numberOfCols, numberOfRows);
             // Return the style with sheet coordinates instead of tables coordinates
             const mapping = this.getTableMapping(sheetId, table);
             const absoluteTableStyle = { borders: {}, styles: {} };
@@ -54299,6 +54731,8 @@ const invalidateTableStyleCommands = [
     "UPDATE_FILTER",
     "REMOVE_TABLE",
     "RESIZE_TABLE",
+    "CREATE_TABLE_STYLE",
+    "REMOVE_TABLE_STYLE",
 ];
 const invalidateTableStyleCommandsSet = new Set(invalidateTableStyleCommands);
 function doesCommandInvalidatesTableStyle(cmd) {
@@ -54318,8 +54752,14 @@ class CellComputedStylePlugin extends UIPlugin {
             return;
         }
         if (doesCommandInvalidatesTableStyle(cmd)) {
-            delete this.styles[cmd.sheetId];
-            delete this.borders[cmd.sheetId];
+            if ("sheetId" in cmd) {
+                delete this.styles[cmd.sheetId];
+                delete this.borders[cmd.sheetId];
+            }
+            else {
+                this.styles = {};
+                this.borders = {};
+            }
             return;
         }
         if (invalidateCFEvaluationCommands.has(cmd.type)) {
@@ -55668,9 +56108,7 @@ class FilterEvaluationPlugin extends UIPlugin {
                     };
                     const filteredValues = this.getFilterHiddenValues(position);
                     const filter = this.getters.getFilter(position);
-                    if (!filter)
-                        continue;
-                    const valuesInFilterZone = filter.filteredRange
+                    const valuesInFilterZone = filter?.filteredRange
                         ? positions(filter.filteredRange.zone).map((position) => this.getters.getEvaluatedCell({ sheetId, ...position }).formattedValue)
                         : [];
                     if (filteredValues.length) {
@@ -55683,17 +56121,12 @@ class FilterEvaluationPlugin extends UIPlugin {
                             displayBlanks: !filteredValues.includes("") && valuesInFilterZone.some((val) => !val),
                         });
                     }
-                    // In xlsx, filter header should ALWAYS be a string and should be unique in the table
-                    const headerPosition = {
-                        col: filter.col,
-                        row: filter.rangeWithHeaders.zone.top,
-                        sheetId,
-                    };
-                    const headerString = this.getters.getEvaluatedCell(headerPosition).formattedValue;
+                    // In xlsx, column header should ALWAYS be a string and should be unique in the table
+                    const headerString = this.getters.getEvaluatedCell(position).formattedValue;
                     const headerName = this.getUniqueColNameForExcel(i, headerString, headerNames);
                     headerNames.push(headerName);
-                    sheetData.cells[toXC(headerPosition.col, headerPosition.row)] = {
-                        ...sheetData.cells[toXC(headerPosition.col, headerPosition.row)],
+                    sheetData.cells[toXC(position.col, position.row)] = {
+                        ...sheetData.cells[toXC(position.col, position.row)],
                         content: headerName,
                         value: headerName,
                         isFormula: false,
@@ -55740,7 +56173,6 @@ class GridSelectionPlugin extends UIPlugin {
         "getSelection",
         "getActivePosition",
         "getSheetPosition",
-        "isSelected",
         "isSingleColSelected",
         "getElementsFromSelection",
         "tryGetActiveSheetId",
@@ -56022,9 +56454,6 @@ class GridSelectionPlugin extends UIPlugin {
                 : this.getters.getNextVisibleCellPosition({ sheetId, col: 0, row: 0 });
         }
     }
-    isSelected(zone) {
-        return !!this.getters.getSelectedZones().find((z) => isEqual(z, zone));
-    }
     isSingleColSelected() {
         const selection = this.getters.getSelectedZones();
         if (selection.length !== 1 || selection[0].left !== selection[0].right) {
@@ -57408,7 +57837,8 @@ const corePluginRegistry = new Registry()
     .add("figures", FigurePlugin)
     .add("chart", ChartPlugin)
     .add("image", ImagePlugin)
-    .add("pivot_core", PivotCorePlugin);
+    .add("pivot_core", PivotCorePlugin)
+    .add("tableStyle", TableStylePlugin);
 // Plugins which handle a specific feature, without handling any core commands
 const featurePluginRegistry = new Registry()
     .add("ui_sheet", SheetUIPlugin)
@@ -57429,8 +57859,8 @@ const statefulUIPluginRegistry = new Registry()
     .add("selection", GridSelectionPlugin)
     .add("evaluation_filter", FilterEvaluationPlugin)
     .add("header_visibility_ui", HeaderVisibilityUIPlugin)
-    .add("table_style", TableStylePlugin)
     .add("cell_computed_style", CellComputedStylePlugin)
+    .add("table_computed_style", TableComputedStylePlugin)
     .add("header_positions", HeaderPositionsUIPlugin)
     .add("viewport", SheetViewPlugin)
     .add("clipboard", ClipboardPlugin);
@@ -58248,6 +58678,7 @@ css /* scss */ `
         .o-icon {
           height: 18px;
           width: 18px;
+          font-size: 18px;
         }
       }
     }
@@ -59789,6 +60220,8 @@ css /* scss */ `
     display: grid;
     grid-template-columns: auto 350px;
     color: #333;
+    font-size: 14px;
+
     input {
       background-color: white;
     }
@@ -59866,12 +60299,6 @@ css /* scss */ `
     grid-column: 1 / 3;
   }
 
-  .o-icon {
-    width: ${ICON_EDGE_LENGTH}px;
-    height: ${ICON_EDGE_LENGTH}px;
-    vertical-align: middle;
-  }
-
   .o-cf-icon {
     width: ${CF_ICON_EDGE_LENGTH}px;
     height: ${CF_ICON_EDGE_LENGTH}px;
@@ -62774,20 +63201,14 @@ function addCellWiseConditionalFormatting(dxfs // cell-wise CF
   `;
 }
 
-const TABLE_DEFAULT_ATTRS = [
-    ["name", "TableStyleLight8"],
-    ["showFirstColumn", "0"],
-    ["showLastColumn", "0"],
-    ["showRowStripes", "0"],
-    ["showColumnStripes", "0"],
-];
-const TABLE_DEFAULT_STYLE = escapeXml /*xml*/ `<tableStyleInfo ${formatAttributes(TABLE_DEFAULT_ATTRS)}/>`;
 function createTable(table, tableId, sheetData) {
     const tableAttributes = [
         ["id", tableId],
         ["name", `Table${tableId}`],
         ["displayName", `Table${tableId}`],
         ["ref", table.range],
+        ["headerRowCount", table.config.numberOfHeaders],
+        ["totalsRowCount", table.config.totalRow ? 1 : 0],
         ["xmlns", NAMESPACE.table],
         ["xmlns:xr", NAMESPACE.revision],
         ["xmlns:xr3", NAMESPACE.revision3],
@@ -62795,9 +63216,9 @@ function createTable(table, tableId, sheetData) {
     ];
     const xml = escapeXml /*xml*/ `
     <table ${formatAttributes(tableAttributes)}>
-      ${addAutoFilter(table)}
+      ${table.config.hasFilters ? addAutoFilter(table) : ""}
       ${addTableColumns(table, sheetData)}
-      ${TABLE_DEFAULT_STYLE}
+      ${addTableStyle(table)}
     </table>
     `;
     return parseXML(xml);
@@ -62849,6 +63270,16 @@ function addTableColumns(table, sheetData) {
         </tableColumns>
     `;
 }
+function addTableStyle(table) {
+    const tableStyleAttrs = [
+        ["name", table.config.styleId],
+        ["showFirstColumn", table.config.firstColumn ? 1 : 0],
+        ["showLastColumn", table.config.lastColumn ? 1 : 0],
+        ["showRowStripes", table.config.bandedRows ? 1 : 0],
+        ["showColumnStripes", table.config.bandedColumns ? 1 : 0],
+    ];
+    return escapeXml /*xml*/ `<tableStyleInfo ${formatAttributes(tableStyleAttrs)}/>`;
+}
 
 function addColumns(cols) {
     if (!Object.values(cols).length) {
@@ -62905,7 +63336,10 @@ function addRows(construct, data, sheet) {
                 const attributes = [["r", xc]];
                 // style
                 const id = normalizeStyle(construct, extractStyle(cell, data));
-                attributes.push(["s", id]);
+                // don't add style if default
+                if (id) {
+                    attributes.push(["s", id]);
+                }
                 let additionalAttrs = [];
                 let cellNode = escapeXml ``;
                 // Either formula or static value inside the cell
@@ -63403,6 +63837,8 @@ class Model extends EventBus {
     uiHandlers = [];
     coreHandlers = [];
     constructor(data = {}, config = {}, stateUpdateMessages = [], uuidGenerator = new UuidGenerator(), verboseImport = true) {
+        const start = performance.now();
+        console.group("Model creation");
         super();
         stateUpdateMessages = repairInitialMessages(data, stateUpdateMessages);
         const workbookData = load(data, verboseImport);
@@ -63472,12 +63908,17 @@ class Model extends EventBus {
         this.setupSessionEvents();
         this.joinSession();
         if (config.snapshotRequested) {
+            const startSnapshot = performance.now();
+            console.info("Snapshot requested");
             this.session.snapshot(this.exportData());
             this.garbageCollectExternalResources();
+            console.info("Snapshot taken in", performance.now() - startSnapshot, "ms");
         }
         // mark all models as "raw", so they will not be turned into reactive objects
         // by owl, since we do not rely on reactivity
         markRaw(this);
+        console.info("Model created in", performance.now() - start, "ms");
+        console.groupEnd();
     }
     joinSession() {
         this.session.join(this.config.client);
@@ -63692,11 +64133,16 @@ class Model extends EventBus {
                 }
                 this.status = 1 /* Status.Running */;
                 const { changes, commands } = this.state.recordChanges(() => {
+                    const start = performance.now();
                     if (isCoreCommand(command)) {
                         this.state.addCommand(command);
                     }
                     this.dispatchToHandlers(this.handlers, command);
                     this.finalize();
+                    const time = performance.now() - start;
+                    if (time > 5) {
+                        console.info(type, time, "ms");
+                    }
                 });
                 this.session.save(command, commands, changes);
                 this.status = 0 /* Status.Ready */;
@@ -64102,6 +64548,6 @@ const constants = {
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
 
 
-__info__.version = "17.3.0-alpha.5";
-__info__.date = "2024-04-18T14:38:57.166Z";
-__info__.hash = "cff0ef9";
+__info__.version = "17.3.0-alpha.7";
+__info__.date = "2024-05-07T10:42:47.288Z";
+__info__.hash = "853c266";