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

package/dist/o-spreadsheet.iife.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.6
+ * @date 2024-04-26T07:39:53.611Z
+ * @hash f58a0d5
  */
 
 (function (exports, owl) {
@@ -1990,6 +1990,8 @@
       "CREATE_TABLE",
       "REMOVE_TABLE",
       "UPDATE_TABLE",
+      "CREATE_TABLE_STYLE",
+      "REMOVE_TABLE_STYLE",
       /** IMAGE */
       "CREATE_IMAGE",
       /** HEADER GROUP */
@@ -2136,6 +2138,7 @@
       CommandResult["TableNotFound"] = "TableNotFound";
       CommandResult["TableOverlap"] = "TableOverlap";
       CommandResult["InvalidTableConfig"] = "InvalidTableConfig";
+      CommandResult["InvalidTableStyle"] = "InvalidTableStyle";
       CommandResult["FilterNotFound"] = "FilterNotFound";
       CommandResult["MergeInTable"] = "MergeInTable";
       CommandResult["NonContinuousTargets"] = "NonContinuousTargets";
@@ -18139,6 +18142,9 @@ stores.inject(MyMetaStore, storeInstance);
       ],
       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);
@@ -18154,6 +18160,9 @@ stores.inject(MyMetaStore, storeInstance);
       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;
       },
@@ -18376,6 +18385,9 @@ stores.inject(MyMetaStore, storeInstance);
       ],
       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);
@@ -18391,6 +18403,9 @@ stores.inject(MyMetaStore, storeInstance);
       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;
       },
@@ -20343,17 +20358,13 @@ stores.inject(MyMetaStore, storeInstance);
                   this.DOMFocusableElementStore.setFocusableElement(el);
               }
               this.contentHelper.updateEl(el);
-              this.processTokenAtCursor();
           });
           owl.useEffect(() => {
               this.processContent();
           });
-          owl.onPatched(() => {
-              // Required because typing '=SUM' and double-clicking another cell leaves ShowProvider/ShowDescription true
-              if (this.composerStore.editionMode === "inactive") {
-                  this.processTokenAtCursor();
-              }
-          });
+          owl.useEffect(() => {
+              this.processTokenAtCursor();
+          }, () => [this.composerStore.editionMode !== "inactive"]);
       }
       // ---------------------------------------------------------------------------
       // Handlers
@@ -20955,13 +20966,10 @@ stores.inject(MyMetaStore, storeInstance);
                   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;
           }
@@ -20977,7 +20985,7 @@ stores.inject(MyMetaStore, storeInstance);
            * 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) {
@@ -20996,11 +21004,11 @@ stores.inject(MyMetaStore, storeInstance);
                       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());
@@ -21009,20 +21017,14 @@ stores.inject(MyMetaStore, storeInstance);
                       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})`);
@@ -21060,7 +21062,10 @@ stores.inject(MyMetaStore, storeInstance);
                   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:
@@ -21195,6 +21200,7 @@ stores.inject(MyMetaStore, storeInstance);
       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) {
@@ -24362,7 +24368,7 @@ stores.inject(MyMetaStore, storeInstance);
               });
               onFigureDeleted();
           },
-          icon: "o-spreadsheet-Icon.DELETE",
+          icon: "o-spreadsheet-Icon.TRASH",
       };
   }
 
@@ -24377,7 +24383,8 @@ stores.inject(MyMetaStore, storeInstance);
       .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);
@@ -24462,6 +24469,9 @@ stores.inject(MyMetaStore, storeInstance);
           },
       ];
   }
+  function inverseCreateTableStyle(cmd) {
+      return [{ type: "REMOVE_TABLE_STYLE", tableStyleId: cmd.tableStyleId }];
+  }
 
   /**
    * The class Registry is extended in order to add the function addChild
@@ -25059,7 +25069,7 @@ stores.inject(MyMetaStore, storeInstance);
 
     .o-search-icon {
       right: 5px;
-      top: 4px;
+      top: 3px;
       opacity: 0.4;
 
       svg {
@@ -25146,8 +25156,12 @@ stores.inject(MyMetaStore, storeInstance);
           });
           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();
@@ -26117,10 +26131,10 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   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,
@@ -26133,7 +26147,7 @@ stores.inject(MyMetaStore, storeInstance);
       automaticAutofill: true,
       styleId: "TableStyleMedium2",
   };
-  function generateColorSet(name, highlightColor) {
+  function generateTableColorSet(name, highlightColor) {
       return {
           coloredText: darkenColor(highlightColor, 0.3),
           light: lightenColor(highlightColor, 0.8),
@@ -26154,10 +26168,10 @@ stores.inject(MyMetaStore, storeInstance);
           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",
@@ -26167,7 +26181,7 @@ stores.inject(MyMetaStore, storeInstance);
           mediumBorder: "#D0D0D0",
           highlight: "#A9A9A9",
       },
-      orange: generateColorSet(_t("Orange"), "#C37034"),
+      orange: generateTableColorSet(_t("Orange"), "#C37034"),
   };
   const DARK_COLOR_SETS = {
       black: COLOR_SETS.black,
@@ -26175,9 +26189,10 @@ stores.inject(MyMetaStore, storeInstance);
       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: {
@@ -26189,9 +26204,10 @@ stores.inject(MyMetaStore, storeInstance);
       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" },
@@ -26208,9 +26224,10 @@ stores.inject(MyMetaStore, storeInstance);
       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" },
@@ -26226,9 +26243,10 @@ stores.inject(MyMetaStore, storeInstance);
       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" },
@@ -26245,9 +26263,10 @@ stores.inject(MyMetaStore, storeInstance);
       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" },
@@ -26268,9 +26287,10 @@ stores.inject(MyMetaStore, storeInstance);
       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" },
@@ -26287,9 +26307,10 @@ stores.inject(MyMetaStore, storeInstance);
       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" },
@@ -26305,9 +26326,10 @@ stores.inject(MyMetaStore, storeInstance);
       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" },
@@ -26328,18 +26350,19 @@ stores.inject(MyMetaStore, storeInstance);
       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" },
@@ -26347,69 +26370,92 @@ stores.inject(MyMetaStore, storeInstance);
       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.
@@ -26972,7 +27018,7 @@ stores.inject(MyMetaStore, storeInstance);
       execute: (env) => {
           env.openSidePanel("FindAndReplace", {});
       },
-      icon: "o-spreadsheet-Icon.FIND_AND_REPLACE",
+      icon: "o-spreadsheet-Icon.SEARCH",
   };
   const deleteValues = {
       name: _t("Delete values"),
@@ -27472,18 +27518,18 @@ stores.inject(MyMetaStore, storeInstance);
       .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,
@@ -27599,6 +27645,7 @@ stores.inject(MyMetaStore, storeInstance);
           }),
           execute: (env) => setFormatter(env, formatCallback(env)),
           isActive: (env) => isFormatSelected(env, formatCallback(env)),
+          format,
       };
   }
   const formatNumberAutomatic = {
@@ -27951,7 +27998,9 @@ stores.inject(MyMetaStore, storeInstance);
 
   var ACTION_FORMAT = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    EXAMPLE_DATE: EXAMPLE_DATE,
     clearFormat: clearFormat,
+    createFormatActionSpec: createFormatActionSpec,
     decraseDecimalPlaces: decraseDecimalPlaces,
     fillColor: fillColor,
     formatAlignment: formatAlignment,
@@ -28319,7 +28368,7 @@ stores.inject(MyMetaStore, storeInstance);
       .add("delete_column", {
       ...deleteCols,
       sequence: 90,
-      icon: "o-spreadsheet-Icon.DELETE",
+      icon: "o-spreadsheet-Icon.TRASH",
   })
       .add("clear_column", {
       ...clearCols,
@@ -28362,64 +28411,119 @@ stores.inject(MyMetaStore, storeInstance);
       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();
@@ -28460,7 +28564,7 @@ stores.inject(MyMetaStore, storeInstance);
       .add("delete_row", {
       ...deleteRows,
       sequence: 70,
-      icon: "o-spreadsheet-Icon.DELETE",
+      icon: "o-spreadsheet-Icon.TRASH",
   })
       .add("clear_row", {
       ...clearRows,
@@ -28611,7 +28715,7 @@ stores.inject(MyMetaStore, storeInstance);
   })
       .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"], {
@@ -30923,6 +31027,14 @@ stores.inject(MyMetaStore, storeInstance);
   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;
       }
@@ -30930,6 +31042,9 @@ stores.inject(MyMetaStore, storeInstance);
         font: bold 16px sans-serif;
       }
     }
+    .fa-small {
+      font-size: 14px;
+    }
   }
 `;
   // -----------------------------------------------------------------------------
@@ -33553,15 +33668,14 @@ stores.inject(MyMetaStore, storeInstance);
   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)
@@ -33629,9 +33743,8 @@ stores.inject(MyMetaStore, storeInstance);
               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);
@@ -33725,8 +33838,25 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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_TABLE",
+          },
+          {
+              id: "deleteTableStyle",
+              name: _t("Delete table style"),
+              execute: (env) => env.model.dispatch("REMOVE_TABLE_STYLE", { tableStyleId: styleId }),
+              icon: "o-spreadsheet-Icon.DELETE_TABLE",
+          },
+      ]);
   }
 
   function drawPreviewTable(ctx, tableStyle, colWidth, rowHeight) {
@@ -33811,46 +33941,59 @@ stores.inject(MyMetaStore, storeInstance);
 
   class TableStylePreview extends owl.Component {
       static template = "o-spreadsheet-TableStylePreview";
-      static props = { tableConfig: Object };
+      static props = { tableConfig: Object, tableStyle: { type: Object, optional: true } };
       canvasRef = owl.useRef("canvas");
       setup() {
           owl.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);
               }
           });
-          owl.onMounted(() => this.drawTable(this.props.tableConfig));
+          owl.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);
       }
   }
 
   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;
+    user-select: none;
+
+    .form-check-input {
+      font-size: 12px;
+    }
+
     .o-table-style-list-item {
-      padding: 4px;
-      &.selected {
-        padding: 3px;
-      }
+      padding: 3px;
+    }
+
+    .o-table-style-popover-preview {
+      width: 66px;
+      height: 51px;
+    }
 
-      .o-table-style-popover-preview {
-        width: 66px;
-        height: 51px;
+    .o-new-table-style {
+      font-size: 36px;
+      color: #666;
+      &:hover {
+        background: #f5f5f5;
       }
     }
   }
 
   .o-table-style-list-item {
+    border: 1px solid transparent;
     &.selected {
       border: 1px solid #007eff;
       background: #f5f5f5;
@@ -33863,7 +34006,7 @@ stores.inject(MyMetaStore, storeInstance);
 `;
   class TableStylesPopover extends owl.Component {
       static template = "o-spreadsheet-TableStylesPopover";
-      static components = { Popover, TableStylePreview };
+      static components = { Popover, TableStylePreview, Menu };
       static props = {
           tableConfig: Object,
           popoverProps: { type: Object, optional: true },
@@ -33871,9 +34014,10 @@ stores.inject(MyMetaStore, storeInstance);
           onStylePicked: Function,
           selectedStyleId: { type: String, optional: true },
       };
-      stylePresets = TABLE_PRESETS;
       categories = TABLE_STYLE_CATEGORIES;
       tableStyleListRef = owl.useRef("tableStyleList");
+      state = owl.useState({ selectedCategory: this.initialSelectedCategory });
+      menu = owl.useState({ isOpen: false, position: null, menuItems: [] });
       setup() {
           owl.useExternalListener(window, "click", this.onExternalClick, { capture: true });
       }
@@ -33883,14 +34027,33 @@ stores.inject(MyMetaStore, storeInstance);
               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]);
+          return this.env.model.getters.getTableStyle(styleId).displayName;
+      }
+      newTableStyle() {
+          this.props.closePopover();
+          this.env.openSidePanel("TableStyleEditorPanel", {
+              onStylePicked: this.props.onStylePicked,
+          });
+      }
+      onContextMenu(event, styleId) {
+          this.menu.menuItems = createTableStyleContextMenuActions(this.env, 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 = [];
       }
   }
 
@@ -33910,13 +34073,9 @@ stores.inject(MyMetaStore, storeInstance);
     }
 
     .o-table-style-list-item {
-      padding: 4px;
+      padding: 3px;
       margin: 2px 1px;
 
-      &.selected {
-        padding: 3px;
-      }
-
       .o-table-style-picker-preview {
         width: 61px;
         height: 46px;
@@ -33926,11 +34085,14 @@ stores.inject(MyMetaStore, storeInstance);
 `;
   class TableStylePicker extends owl.Component {
       static template = "o-spreadsheet-TableStylePicker";
-      static components = { TableStylesPopover, TableStylePreview };
+      static components = { TableStylesPopover, TableStylePreview, Menu };
       static props = { table: Object };
       state = owl.useState({ popoverProps: undefined });
+      menu = owl.useState({ isOpen: false, position: null, menuItems: [] });
       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);
@@ -33938,9 +34100,6 @@ stores.inject(MyMetaStore, storeInstance);
           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", {
@@ -33967,7 +34126,17 @@ stores.inject(MyMetaStore, storeInstance);
           this.state.popoverProps = undefined;
       }
       getStyleName(styleId) {
-          return getTableStyleName(styleId, TABLE_PRESETS[styleId]);
+          return this.env.model.getters.getTableStyle(styleId).displayName;
+      }
+      onContextMenu(event, styleId) {
+          this.menu.menuItems = createTableStyleContextMenuActions(this.env, 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 = [];
       }
   }
 
@@ -34157,6 +34326,103 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  css /* scss */ `
+  .o-table-style-editor-panel {
+    .o-color-preview {
+      width: 30px;
+      height: 15px;
+      margin-left: 2px;
+      outline: 1px solid #3d85c6;
+      outline-offset: 1px;
+      margin-right: 10px;
+
+      cursor: pointer;
+    }
+
+    .o-table-style-list-item {
+      margin: 1px 3px;
+      padding: 3px 6px;
+
+      .o-table-style-edit-template-preview {
+        width: 81px;
+        height: 61px;
+      }
+    }
+  }
+`;
+  class TableStyleEditorPanel extends owl.Component {
+      static template = "o-spreadsheet-TableStyleEditorPanel";
+      static components = { Section, ColorPickerWidget, TableStylePreview };
+      static props = {
+          onCloseSidePanel: Function,
+          onStylePicked: { type: Function, optional: true },
+          styleId: { type: String, optional: true },
+      };
+      state = owl.useState(this.getInitialState());
+      setup() {
+          owl.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();
+      }
+      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();
 
   //------------------------------------------------------------------------------
@@ -34221,6 +34487,17 @@ stores.inject(MyMetaStore, storeInstance);
           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 = {};
@@ -36306,6 +36583,9 @@ stores.inject(MyMetaStore, storeInstance);
       height: 10000px;
       background-color: ${SELECTION_BORDER_COLOR};
     }
+    .o-unhide {
+      color: ${ICONS_COLOR};
+    }
     .o-unhide:hover {
       z-index: ${ComponentsImportance.Grid + 1};
       background-color: lightgrey;
@@ -36467,6 +36747,9 @@ stores.inject(MyMetaStore, storeInstance);
       height: 1px;
       background-color: ${SELECTION_BORDER_COLOR};
     }
+    .o-unhide {
+      color: ${ICONS_COLOR};
+    }
     .o-unhide:hover {
       z-index: ${ComponentsImportance.Grid + 1};
       background-color: lightgrey;
@@ -39609,6 +39892,13 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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
@@ -39647,18 +39937,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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
@@ -40127,7 +40405,7 @@ stores.inject(MyMetaStore, storeInstance);
               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;
@@ -40731,128 +41009,54 @@ stores.inject(MyMetaStore, storeInstance);
           : 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.
@@ -41021,7 +41225,7 @@ stores.inject(MyMetaStore, storeInstance);
                   fillId: 0,
                   numFmtId: 0,
                   borderId: 0,
-                  alignment: { vertical: "bottom" },
+                  alignment: {},
               },
           ],
           fonts: [
@@ -41029,7 +41233,7 @@ stores.inject(MyMetaStore, storeInstance);
                   size: DEFAULT_FONT_SIZE,
                   family: 2,
                   color: { rgb: "000000" },
-                  name: "Calibri",
+                  name: "Arial",
               },
           ],
           fills: [{ reservedAttribute: "none" }, { reservedAttribute: "gray125" }],
@@ -41321,9 +41525,10 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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(),
@@ -41760,20 +41965,48 @@ stores.inject(MyMetaStore, storeInstance);
           // 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,
+                  }).asNum(),
+                  firstDataRow: this.extractAttr(pivotStyleElement, "firstDataRow", {
+                      required: true,
+                  }).asNum(),
+                  firstDataCol: this.extractAttr(pivotStyleElement, "firstDataCol", {
                       required: true,
-                  }).asString(),
-                  headerRowCount: this.extractChildAttr(pivotElement, "location", "firstDataRow", {
-                      default: 0,
                   }).asNum(),
-                  totalsRowCount: 1,
-                  cols: [],
-                  style: {
-                      showFirstColumn: true,
-                      showRowStripes: true,
-                  },
+              };
+          })[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];
       }
@@ -41870,7 +42103,8 @@ stores.inject(MyMetaStore, storeInstance);
                   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];
@@ -42480,6 +42714,8 @@ stores.inject(MyMetaStore, storeInstance);
       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();
@@ -42492,17 +42728,22 @@ stores.inject(MyMetaStore, storeInstance);
       // 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 = [
@@ -43014,6 +43255,7 @@ stores.inject(MyMetaStore, storeInstance);
           settings: { locale: DEFAULT_LOCALE },
           pivots: {},
           pivotNextId: 1,
+          customTableStyles: {},
       };
       return data;
   }
@@ -43222,7 +43464,7 @@ stores.inject(MyMetaStore, storeInstance);
                   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);
                       }
@@ -47490,10 +47732,9 @@ stores.inject(MyMetaStore, storeInstance);
                   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;
               }
           }
@@ -47590,9 +47831,6 @@ stores.inject(MyMetaStore, storeInstance);
           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 */;
           }
@@ -47810,7 +48048,12 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       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 });
+              }
+          }
       }
   }
 
@@ -48681,6 +48924,108 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  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.
@@ -48741,19 +49086,17 @@ stores.inject(MyMetaStore, storeInstance);
        *        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);
       }
@@ -48766,7 +49109,10 @@ stores.inject(MyMetaStore, storeInstance);
        * 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
@@ -48796,13 +49142,14 @@ stores.inject(MyMetaStore, storeInstance);
           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;
       }
   }
 
@@ -49604,7 +49951,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       /**
-       * 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)
        */
@@ -49615,11 +49962,19 @@ stores.inject(MyMetaStore, storeInstance);
               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;
@@ -49943,6 +50298,7 @@ stores.inject(MyMetaStore, storeInstance);
           return new PositionSet(sheetSizes);
       }
       evaluateCells(positions) {
+          const start = performance.now();
           const cellsToCompute = this.createEmptyPositionSet();
           cellsToCompute.addMany(positions);
           const arrayFormulasPositions = this.getArrayFormulasImpactedByChangesOf(positions);
@@ -49950,6 +50306,7 @@ stores.inject(MyMetaStore, storeInstance);
           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();
@@ -49962,7 +50319,7 @@ stores.inject(MyMetaStore, storeInstance);
               }
               if (!content) {
                   // The previous content could have blocked some array formulas
-                  impactedPositions.addMany(this.getArrayFormulasBlockedByOrSpreadingOn(position));
+                  impactedPositions.addMany(this.getArrayFormulasBlockedBy(position));
               }
           }
           return impactedPositions;
@@ -49984,8 +50341,10 @@ stores.inject(MyMetaStore, storeInstance);
           });
       }
       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);
@@ -50005,14 +50364,23 @@ stores.inject(MyMetaStore, storeInstance);
           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({});
@@ -50153,7 +50521,7 @@ stores.inject(MyMetaStore, storeInstance);
               }
               this.evaluatedCells.delete(child);
               this.nextPositionsToUpdate.addMany(this.getCellsDependingOn([child]));
-              this.nextPositionsToUpdate.addMany(this.getArrayFormulasBlockedByOrSpreadingOn(child));
+              this.nextPositionsToUpdate.addMany(this.getArrayFormulasBlockedBy(child));
           }
       }
       // ----------------------------------------------------------
@@ -50658,7 +51026,7 @@ stores.inject(MyMetaStore, storeInstance);
           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) : [],
@@ -52600,6 +52968,7 @@ stores.inject(MyMetaStore, storeInstance);
   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);
@@ -52696,6 +53065,15 @@ stores.inject(MyMetaStore, storeInstance);
           : 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
    */
@@ -53078,11 +53456,14 @@ stores.inject(MyMetaStore, storeInstance);
           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
@@ -54155,7 +54536,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class TableStylePlugin extends UIPlugin {
+  class TableComputedStylePlugin extends UIPlugin {
       static getters = ["getCellTableStyle", "getCellTableBorder"];
       tableStyles = {};
       handle(cmd) {
@@ -54166,7 +54547,12 @@ stores.inject(MyMetaStore, storeInstance);
               return;
           }
           if (doesCommandInvalidatesTableStyle(cmd)) {
-              delete this.tableStyles[cmd.sheetId];
+              if ("sheetId" in cmd) {
+                  delete this.tableStyles[cmd.sheetId];
+              }
+              else {
+                  this.tableStyles = {};
+              }
               return;
           }
       }
@@ -54199,7 +54585,8 @@ stores.inject(MyMetaStore, storeInstance);
       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: {} };
@@ -54300,6 +54687,8 @@ stores.inject(MyMetaStore, storeInstance);
       "UPDATE_FILTER",
       "REMOVE_TABLE",
       "RESIZE_TABLE",
+      "CREATE_TABLE_STYLE",
+      "REMOVE_TABLE_STYLE",
   ];
   const invalidateTableStyleCommandsSet = new Set(invalidateTableStyleCommands);
   function doesCommandInvalidatesTableStyle(cmd) {
@@ -54319,8 +54708,14 @@ stores.inject(MyMetaStore, storeInstance);
               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)) {
@@ -55669,9 +56064,7 @@ stores.inject(MyMetaStore, storeInstance);
                       };
                       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) {
@@ -55684,17 +56077,12 @@ stores.inject(MyMetaStore, storeInstance);
                               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,
@@ -55741,7 +56129,6 @@ stores.inject(MyMetaStore, storeInstance);
           "getSelection",
           "getActivePosition",
           "getSheetPosition",
-          "isSelected",
           "isSingleColSelected",
           "getElementsFromSelection",
           "tryGetActiveSheetId",
@@ -56023,9 +56410,6 @@ stores.inject(MyMetaStore, storeInstance);
                   : 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) {
@@ -57409,7 +57793,8 @@ stores.inject(MyMetaStore, storeInstance);
       .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)
@@ -57430,8 +57815,8 @@ stores.inject(MyMetaStore, storeInstance);
       .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);
@@ -58249,6 +58634,7 @@ stores.inject(MyMetaStore, storeInstance);
         .o-icon {
           height: 18px;
           width: 18px;
+          font-size: 18px;
         }
       }
     }
@@ -59790,6 +60176,8 @@ stores.inject(MyMetaStore, storeInstance);
     display: grid;
     grid-template-columns: auto 350px;
     color: #333;
+    font-size: 14px;
+
     input {
       background-color: white;
     }
@@ -59867,12 +60255,6 @@ stores.inject(MyMetaStore, storeInstance);
     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;
@@ -62775,20 +63157,14 @@ stores.inject(MyMetaStore, storeInstance);
   `;
   }
 
-  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],
@@ -62796,9 +63172,9 @@ stores.inject(MyMetaStore, storeInstance);
       ];
       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);
@@ -62850,6 +63226,16 @@ stores.inject(MyMetaStore, storeInstance);
         </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) {
@@ -62906,7 +63292,10 @@ stores.inject(MyMetaStore, storeInstance);
                   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
@@ -63404,6 +63793,8 @@ stores.inject(MyMetaStore, storeInstance);
       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);
@@ -63473,12 +63864,17 @@ stores.inject(MyMetaStore, storeInstance);
           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
           owl.markRaw(this);
+          console.info("Model created in", performance.now() - start, "ms");
+          console.groupEnd();
       }
       joinSession() {
           this.session.join(this.config.client);
@@ -63693,11 +64089,16 @@ stores.inject(MyMetaStore, storeInstance);
                   }
                   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 */;
@@ -64146,9 +64547,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = 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.6";
+  __info__.date = "2024-04-26T07:39:53.611Z";
+  __info__.hash = "f58a0d5";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);