@odoo/o-spreadsheet 17.2.0-alpha.4 → 17.2.0-alpha.6

package/dist/o_spreadsheet.xml

@@ -1,9 +1,9 @@
 <!--
  This file is generated by o-spreadsheet build tools. Do not edit it.
  @see https://github.com/odoo/o-spreadsheet
- @version 17.2.0-alpha.4
- @date 2024-02-09T13:11:01.066Z
- @hash 1b33cf4
+ @version 17.2.0-alpha.6
+ @date 2024-02-28T12:29:23.715Z
+ @hash 318a04e
 -->
 <odoo>
   <t t-name="o-spreadsheet-ActionButton">
@@ -53,7 +53,7 @@
     <div
       class="o-autofill-handler"
       t-att-style="handlerStyle"
-      t-on-mousedown="onMouseDown"
+      t-on-pointerdown="onMouseDown"
       t-on-dblclick="onDblClick"
     />
     <t t-set="tooltip" t-value="getTooltip()"/>
@@ -260,7 +260,7 @@
     <Ripple>
       <div
         class="o-sheet d-flex align-items-center user-select-none text-nowrap "
-        t-on-mousedown="(ev) => this.onMouseDown(ev)"
+        t-on-pointerdown="(ev) => this.onMouseDown(ev)"
         t-on-contextmenu.prevent="(ev) => this.onContextMenu(ev)"
         t-ref="sheetDiv"
         t-att-style="props.style"
@@ -356,13 +356,13 @@
           <div
             class="o-gradient"
             t-on-click.stop=""
-            t-on-mousedown="dragGradientPointer"
+            t-on-pointerdown="dragGradientPointer"
             t-att-style="gradientHueStyle">
             <div class="saturation w-100 h-100 position-absolute pe-none"/>
             <div class="lightness w-100 h-100 position-absolute pe-none"/>
             <div class="magnifier pe-none" t-att-style="pointerStyle"/>
           </div>
-          <div class="o-hue-container" t-on-mousedown="dragHuePointer">
+          <div class="o-hue-container" t-on-pointerdown="dragHuePointer">
             <div class="o-hue-picker" t-on-click.stop=""/>
             <div class="o-hue-slider pe-none" t-att-style="sliderStyle">
               <t t-call="o-spreadsheet-Icon.TRIANGLE_UP"/>
@@ -421,17 +421,17 @@
 
   <t t-name="o-spreadsheet-TextValueProvider">
     <div
+      t-ref="autoCompleteList"
       t-att-class="{
-          'o-autocomplete-dropdown':props.values.length,
-          'shadow':props.values.length}">
-      <t t-foreach="props.values" t-as="v" t-key="v.text">
+          'o-autocomplete-dropdown': props.proposals.length}">
+      <t t-foreach="props.proposals" t-as="proposal" t-key="proposal.text">
         <div
           class="d-flex flex-column text-start"
-          t-att-class="{'o-autocomplete-value-focus': props.selectedIndex === v_index}"
-          t-on-click="() => this.props.onValueSelected(v.text)"
-          t-on-mousemove="() => this.props.onValueHovered(v_index)">
+          t-att-class="{'o-autocomplete-value-focus': props.selectedIndex === proposal_index}"
+          t-on-click="() => this.props.onValueSelected(proposal.text)"
+          t-on-pointermove="() => this.props.onValueHovered(proposal_index)">
           <div class="o-autocomplete-value text-truncate">
-            <t t-set="htmlContent" t-value="props.getHtmlContent(v.text)"/>
+            <t t-set="htmlContent" t-value="proposal.htmlContent || [{ value: proposal.text}]"/>
             <span
               t-foreach="htmlContent"
               t-as="content"
@@ -443,8 +443,8 @@
           </div>
           <div
             class="o-autocomplete-description text-truncate"
-            t-esc="v.description"
-            t-if="props.selectedIndex === v_index"
+            t-esc="proposal.description"
+            t-if="props.selectedIndex === proposal_index"
           />
         </div>
       </t>
@@ -464,7 +464,7 @@
         t-on-keydown="onKeydown"
         t-on-mousewheel.stop=""
         t-on-input="onInput"
-        t-on-mousedown="onMousedown"
+        t-on-pointerdown="onMousedown"
         t-on-click="onClick"
         t-on-keyup="onKeyup"
         t-on-paste="onPaste"
@@ -474,19 +474,19 @@
       />
 
       <div
-        t-if="props.focus !== 'inactive' and (autoCompleteState.showProvider or functionDescriptionState.showDescription)"
-        class="o-composer-assistant"
+        t-if="props.focus !== 'inactive' and (autoCompleteState.provider or functionDescriptionState.showDescription)"
+        class="o-composer-assistant shadow"
         t-att-style="assistantStyle"
-        t-on-mousedown.prevent.stop=""
+        t-on-wheel.stop=""
+        t-on-pointerdown.prevent.stop=""
         t-on-click.prevent.stop=""
-        t-on-mouseup.prevent.stop="">
+        t-on-pointerup.prevent.stop="">
         <TextValueProvider
-          t-if="autoCompleteState.showProvider"
-          values="autoCompleteState.values"
+          t-if="autoCompleteState.provider"
+          proposals="autoCompleteState.provider.proposals"
           selectedIndex="autoCompleteState.selectedIndex"
           onValueSelected.bind="this.autoComplete"
           onValueHovered.bind="this.updateAutoCompleteIndex"
-          getHtmlContent="autoCompleteState.getHtmlContent"
         />
         <FunctionDescriptionProvider
           t-if="functionDescriptionState.showDescription"
@@ -509,7 +509,7 @@
       <div
         class="o-formula-assistant bg-white"
         t-if="context.functionName"
-        t-on-mousemove="onMouseMove"
+        t-on-pointermove="onMouseMove"
         t-att-class="{'opacity-25': assistantState.allowCellSelectionBehind}">
         <div class="o-formula-assistant-head">
           <span t-esc="context.functionName"/>
@@ -663,6 +663,10 @@
     <canvas class="o-figure-canvas w-100 h-100" t-att-style="canvasStyle" t-ref="graphContainer"/>
   </t>
 
+  <t t-name="o-spreadsheet-GaugeChartComponent">
+    <canvas class="o-figure-canvas w-100 h-100" t-ref="chartContainer"/>
+  </t>
+
   <t t-name="o-spreadsheet-ScorecardChart">
     <canvas class="o-figure-canvas w-100 h-100" t-ref="chartContainer"/>
   </t>
@@ -671,7 +675,7 @@
     <div class="o-figure-wrapper pe-auto" t-att-style="wrapperStyle">
       <div
         class="o-figure w-100 h-100"
-        t-on-mousedown.stop="(ev) => this.onMouseDown(ev)"
+        t-on-pointerdown.stop="(ev) => this.onMouseDown(ev)"
         t-on-contextmenu.prevent.stop="(ev) => !env.model.getters.isReadonly() and this.onContextMenu(ev)"
         t-ref="figure"
         t-att-style="props.style"
@@ -707,42 +711,42 @@
         <div
           class="o-fig-anchor o-top"
           t-att-style="this.getResizerPosition('top')"
-          t-on-mousedown="(ev) => this.clickAnchor(0,-1, ev)"
+          t-on-pointerdown="(ev) => this.clickAnchor(0,-1, ev)"
         />
         <div
           class="o-fig-anchor o-topRight"
           t-att-style="this.getResizerPosition('top right')"
-          t-on-mousedown="(ev) => this.clickAnchor(1,-1, ev)"
+          t-on-pointerdown="(ev) => this.clickAnchor(1,-1, ev)"
         />
         <div
           class="o-fig-anchor o-right"
           t-att-style="this.getResizerPosition('right')"
-          t-on-mousedown="(ev) => this.clickAnchor(1,0, ev)"
+          t-on-pointerdown="(ev) => this.clickAnchor(1,0, ev)"
         />
         <div
           class="o-fig-anchor o-bottomRight"
           t-att-style="this.getResizerPosition('bottom right')"
-          t-on-mousedown="(ev) => this.clickAnchor(1,1, ev)"
+          t-on-pointerdown="(ev) => this.clickAnchor(1,1, ev)"
         />
         <div
           class="o-fig-anchor o-bottom"
           t-att-style="this.getResizerPosition('bottom')"
-          t-on-mousedown="(ev) => this.clickAnchor(0,1, ev)"
+          t-on-pointerdown="(ev) => this.clickAnchor(0,1, ev)"
         />
         <div
           class="o-fig-anchor o-bottomLeft"
           t-att-style="this.getResizerPosition('bottom left')"
-          t-on-mousedown="(ev) => this.clickAnchor(-1,1, ev)"
+          t-on-pointerdown="(ev) => this.clickAnchor(-1,1, ev)"
         />
         <div
           class="o-fig-anchor o-left"
           t-att-style="this.getResizerPosition('left')"
-          t-on-mousedown="(ev) => this.clickAnchor(-1,0, ev)"
+          t-on-pointerdown="(ev) => this.clickAnchor(-1,0, ev)"
         />
         <div
           class="o-fig-anchor o-topLeft"
           t-att-style="this.getResizerPosition('top left')"
-          t-on-mousedown="(ev) => this.clickAnchor(-1,-1, ev)"
+          t-on-pointerdown="(ev) => this.clickAnchor(-1,-1, ev)"
         />
       </t>
     </div>
@@ -802,7 +806,7 @@
   </t>
 
   <t t-name="o-spreadsheet-FilterIcon">
-    <div class="o-filter-icon" t-on-click.stop="onClick">
+    <div class="o-filter-icon" t-att-class="iconClass" t-on-click.stop="onClick">
       <t t-if="isFilterActive" t-call="o-spreadsheet-Icon.FILTER_ICON_ACTIVE"/>
       <t t-else="" t-call="o-spreadsheet-Icon.FILTER_ICON"/>
     </div>
@@ -882,7 +886,7 @@
   <t t-name="o-spreadsheet-FilterMenuValueItem">
     <div
       t-on-click="this.props.onClick"
-      t-on-mousemove="this.props.onMouseMove"
+      t-on-pointermove="this.props.onMouseMove"
       class="o-filter-menu-item o-filter-menu-value"
       t-ref="menuValueItem"
       t-att-class="{'selected': this.props.isSelected}">
@@ -909,7 +913,7 @@
           type="number"
           min="1"
           max="400"
-          class="o-font-size bg-transparent border-0"
+          class="o-font-size o-number-input bg-transparent border-0"
           t-on-keydown="onInputKeydown"
           t-on-click.stop=""
           t-on-focus.stop="onInputFocused"
@@ -1003,7 +1007,7 @@
     <div
       class="o-grid-add-rows mt-2 ms-2 w-100 d-flex position-relative align-items-center"
       t-att-style="addRowsPosition"
-      t-on-mousedown.stop.prevent="">
+      t-on-pointerdown.stop.prevent="">
       <button t-on-click="onConfirm" t-att-disabled="state.errorFlag" class="o-button">Add</button>
       <input
         type="text"
@@ -1012,7 +1016,7 @@
         value="100"
         t-on-click.stop=""
         t-on-keydown.stop="onKeydown"
-        t-on-mousedown.stop=""
+        t-on-pointerdown.stop=""
         t-on-input.stop="onInput"
       />
       <span>more rows at the bottom</span>
@@ -1035,7 +1039,7 @@
       class="o-grid-overlay overflow-hidden"
       t-att-class="{'o-paint-format-cursor': isPaintingFormat}"
       t-att-style="style"
-      t-on-mousedown="onMouseDown"
+      t-on-pointerdown="onMouseDown"
       t-on-dblclick.self="onDoubleClick"
       t-on-contextmenu.stop.prevent="onContextMenu">
       <FiguresContainer onFigureDeleted="props.onFigureDeleted"/>
@@ -1161,18 +1165,18 @@
     <div class="o-overlay">
       <ColResizer onOpenContextMenu="props.onOpenContextMenu"/>
       <RowResizer onOpenContextMenu="props.onOpenContextMenu"/>
-      <div class="all" t-on-mousedown.self="selectAll"/>
+      <div class="all" t-on-pointerdown.self="selectAll"/>
     </div>
   </t>
 
   <t t-name="o-spreadsheet-RowResizer">
     <div
       class="o-row-resizer"
-      t-on-mousemove.self="onMouseMove"
+      t-on-pointermove.self="onMouseMove"
       t-on-mouseleave="onMouseLeave"
-      t-on-mousedown.self.prevent="select"
+      t-on-pointerdown.self.prevent="select"
       t-ref="rowResizer"
-      t-on-mouseup.self="onMouseUp"
+      t-on-pointerup.self="onMouseUp"
       t-on-contextmenu.self="onContextMenu"
       t-att-class="{'o-grab': state.waitingForMove, 'o-dragging': state.isMoving}">
       <div
@@ -1188,7 +1192,7 @@
       <t t-if="state.resizerIsActive">
         <div
           class="o-handle"
-          t-on-mousedown="onMouseDown"
+          t-on-pointerdown="onMouseDown"
           t-on-dblclick="onDblClick"
           t-on-contextmenu.prevent=""
           t-attf-style="top:{{state.draggerLinePosition - 2}}px;">
@@ -1227,11 +1231,11 @@
   <t t-name="o-spreadsheet-ColResizer">
     <div
       class="o-col-resizer"
-      t-on-mousemove.self="onMouseMove"
+      t-on-pointermove.self="onMouseMove"
       t-on-mouseleave="onMouseLeave"
-      t-on-mousedown.self.prevent="select"
+      t-on-pointerdown.self.prevent="select"
       t-ref="colResizer"
-      t-on-mouseup.self="onMouseUp"
+      t-on-pointerup.self="onMouseUp"
       t-on-contextmenu.self="onContextMenu"
       t-att-class="{'o-grab': state.waitingForMove, 'o-dragging': state.isMoving, }">
       <div
@@ -1247,7 +1251,7 @@
       <t t-if="state.resizerIsActive">
         <div
           class="o-handle"
-          t-on-mousedown="onMouseDown"
+          t-on-pointerdown="onMouseDown"
           t-on-dblclick="onDblClick"
           t-on-contextmenu.prevent=""
           t-attf-style="left:{{state.draggerLinePosition - 2}}px;">
@@ -1286,7 +1290,7 @@
   <t t-name="o-spreadsheet-Border">
     <div
       class="o-border"
-      t-on-mousedown.prevent="onMouseDown"
+      t-on-pointerdown.prevent="onMouseDown"
       t-att-style="style"
       t-att-class="{
           'o-moving': props.isMoving,
@@ -1301,7 +1305,7 @@
   <t t-name="o-spreadsheet-Corner">
     <div
       class="o-corner"
-      t-on-mousedown.prevent="onMouseDown"
+      t-on-pointerdown.prevent="onMouseDown"
       t-att-style="style"
       t-att-class="{
           'o-resizing': props.isResizing,
@@ -1488,15 +1492,15 @@
       />
     </svg>
   </t>
-  <t t-name="o-spreadsheet-Icon.SHOW_HIDE_GRID">
-    <svg class="o-icon">
-      <path
-        fill="currentColor"
-        d="M.5 2A1.5 1.5 0 0 1 2 .5h14A1.5 1.5 0 0 1 17.5 2v7H11V7H7v4s-.5 0-1.5 1h-1v5h-3a1.5 1.5 0 0 1-1-1M6 6V2H2v4m9 0V2H7v4m9 0V2h-4v4m-6 5V7H2v4m14-2V7h-4v2m-7.5 6.5V12H2v3.5 M14 10.5c1 0 1 .5 1 1-1.5 2.5-3.5 4.5-5 6.5-.5 0-1-.5-1-1-1-.5-1.5-1-2.5-2 0 0-.5-.5 0-1 1.5-2 4-3 7-3m-1 1.5C13.5 12 4 14 10 16c0 0-1.5-2 2.5-3.5m5 1.5c.5.5.5 1 .5 1-1.5 2-3.5 3-6 2.5.5-.5.5-1 1-1s5.5-1 2-3.5l1-1"
-      />
+  <t t-name="o-spreadsheet-Icon.SHOW">
+    <svg class="o-icon" viewBox="0 0 24 24" fill="none" stroke="currentcolor">
+      <path stroke-width="1.35" d="M1,12 S11.5,0 23,12 M1,12 S11.5,24 23,12"/>
+      <path d="M1.26,11.7 A .4 .3 1 0 0 1.2,12.3"/>
+      <path d="M22.8,11.7 A .4 .3 1 0 1 22.75,12.3"/>
+      <circle stroke-width="1.35" stroke="currentcolor" cx="12" cy="12" r="3"/>
     </svg>
   </t>
-  <t t-name="o-spreadsheet-Icon.SHOW_HIDE_FORMULA">
+  <t t-name="o-spreadsheet-Icon.FORMULA">
     <svg class="o-icon">
       <path
         fill="currentColor"
@@ -2127,12 +2131,7 @@ https://fontawesome.com/license -->
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.FILTER_ICON">
-    <svg
-      class="o-cf-icon filter-icon"
-      width="10"
-      height="10"
-      focusable="false"
-      viewBox="0 0 850 850">
+    <svg class="o-cf-icon filter-icon" viewBox="0 0 850 850">
       <path
         fill="currentColor"
         d="M 339.667 681 L 510.333 681 L 510.333 595.667 L 339.667 595.667 L 339.667 681 Z M 41 169 L 41 254.333 L 809 254.333 L 809 169 L 41 169 Z M 169 467.667 L 681 467.667 L 681 382.333 L 169 382.333 L 169 467.667 Z"
@@ -2140,33 +2139,7 @@ https://fontawesome.com/license -->
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.FILTER_ICON_ACTIVE">
-    <svg
-      class="o-cf-icon filter-icon-active"
-      width="10"
-      height="10"
-      focusable="false"
-      viewBox="0 0 512 512">
-      <path
-        fill="currentColor"
-        d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
-      />
-    </svg>
-  </t>
-  <t t-name="o-spreadsheet-Icon.FILTER_ICON_INACTIVE">
-    <svg
-      class="o-cf-icon filter-icon-inactive"
-      width="10"
-      height="10"
-      focusable="false"
-      viewBox="0 0 512 512">
-      <path
-        fill="currentColor"
-        d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
-      />
-    </svg>
-  </t>
-  <t t-name="o-spreadsheet-Icon.MENU_FILTER_ICON">
-    <svg class="o-icon">
+    <svg class="o-cf-icon filter-icon-active" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M16.6.5H1.29C.59.5.23 1.35.73 1.85l6.1 6.1v6.8c0 .26.13.5.34.65l2.64 1.85a.79.79 0 0 0 1.25-.65V7.96l6.1-6.1A.79.79 0 0 0 16.6.51"
@@ -2315,6 +2288,30 @@ https://fontawesome.com/license -->
       <circle cx="2" cy="12.5" r="1"/>
     </svg>
   </t>
+  <t t-name="o-spreadsheet-Icon.EDIT_TABLE">
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+      <path
+        fill="currentColor"
+        d="M2.5 1A1.5 1.5 0 0 0 1 2.5v11A1.5 1.5 0 0 0 2.5 15H7l1.5-1.5H7v-2.75h3.5v.75l2.25-2.25H12v-2.5h3.5v.75c.1-.2.45-.05.5.02l1 1V2.5A1.5 1.5 0 0 0 15.5 1m-13 1.5h13v2.75h-13m0 1.5h3v2.5h-3M7 6.75h3.5v2.5H7m-4.5 1.5h3v2.75h-3 M8.2 15.7v1.8h1.8l5.4-5.4-1.8-1.8-5.4 5.4Zm8.8-5.2a.5.5 0 0 0 0-.7l-1.1-1.1a.5.5 0 0 0-.7 0l-.9.9 1.8 1.8.9-.9Z"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-Icon.DELETE_TABLE">
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+      <path
+        fill="currentColor"
+        d="M2.5 1A1.5 1.5 0 0 0 1 2.5v11A1.5 1.5 0 0 0 2.5 15H7l1.5-1.5H7V6.75h3.5v.75L12 9V6.75h3.5l1.5 1.5V2.5A1.5 1.5 0 0 0 15.5 1m-13 1.5h13v2.75h-13m0 1.5h3v2.5h-3m0 1.5h3v2.75h-3m10-2.25 3-3 1.5 1.5-3 3 3 3-1.5 1.5-3-3-3 3-1.5-1.5 3-3-3-3 1.5-1.5"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-Icon.PAINT_TABLE">
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+      <path
+        fill="currentColor"
+        d="M2.5 1A1.5 1.5 0 0 0 1 2.5v11A1.5 1.5 0 0 0 2.5 15h5c0-.5 0-1 .5-1.5H7v-2.75h3.5v.75l2.25-2.25H12v-2.5h3.5v.75c1-.7 1.5-.4 1.5-.4V2.5A1.5 1.5 0 0 0 15.5 1m-13 1.5h13v2.75h-13m0 1.5h3v2.5h-3M7 6.75h3.5v2.5H7m-4.5 1.5h3v2.75h-3m7.5-.3c.7-.3 1.5-.1 2.1.6.6.7.8 1.4.5 1.9-.6 1.4-3.7 1.6-4 1.7l-.6.1.3-.5s.5-.8.5-2.1c0-.7.5-1.4 1.1-1.7Zm6.7-5.1a.9.9 0 0 1 1 1c-.1 1.3-2.5 3.7-4.3 5.3a3.9 3.9 0 0 0-.6-1.1c-.4-.4-.8-.7-1.3-.8 1.5-1.7 4-4.3 5.4-4.4"
+      />
+    </svg>
+  </t>
 
   <t t-name="o-spreadsheet-LinkDisplay">
     <div class="o-link-tool d-flex align-items-center">
@@ -2971,26 +2968,26 @@ https://fontawesome.com/license -->
   </t>
 
   <t t-name="o-spreadsheet-ChartPanel">
-    <div class="o-chart">
+    <div class="o-chart" t-if="figureId">
       <div class="o-panel">
         <div
           class="o-panel-element o-panel-configuration"
-          t-att-class="state.panel !== 'configuration' ? 'inactive' : ''"
-          t-on-click="() => this.activatePanel('configuration')">
+          t-att-class="store.panel !== 'configuration' ? 'inactive' : ''"
+          t-on-click="() => this.store.activatePanel('configuration')">
           <i class="fa fa-sliders"/>
           Configuration
         </div>
         <div
           class="o-panel-element o-panel-design"
-          t-att-class="state.panel !== 'design' ? 'inactive' : ''"
-          t-on-click="() => this.activatePanel('design')">
+          t-att-class="store.panel !== 'design' ? 'inactive' : ''"
+          t-on-click="() => this.store.activatePanel('design')">
           <i class="fa fa-paint-brush"/>
           Design
         </div>
       </div>
 
-      <t t-set="definition" t-value="getChartDefinition()"/>
-      <t t-if="state.panel === 'configuration'">
+      <t t-set="definition" t-value="getChartDefinition(this.figureId)"/>
+      <t t-if="store.panel === 'configuration'">
         <Section>
           <t t-set-slot="title">Chart type</t>
           <t t-set="types" t-value="chartTypes"/>
@@ -3032,12 +3029,12 @@ https://fontawesome.com/license -->
   <t t-name="o-spreadsheet-ScatterConfigPanel">
     <div>
       <ChartDataSeries
-        ranges="() => this.getDataSeriesRanges()"
+        ranges="this.getDataSeriesRanges()"
         onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
         onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
       />
       <ChartLabelRange
-        range="() => this.getLabelRange()"
+        range="this.getLabelRange()"
         isInvalid="isLabelInvalid"
         onSelectionChanged="(ranges) => this.onLabelRangeChanged(ranges)"
         onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
@@ -3142,9 +3139,13 @@ https://fontawesome.com/license -->
   </t>
 
   <t t-name="o-spreadsheet.Checkbox">
-    <label class="o-checkbox">
+    <label
+      class="o-checkbox"
+      t-att-title="props.title"
+      t-att-class="{'text-muted': props.disabled }">
       <input
         type="checkbox"
+        t-att-disabled="props.disabled"
         t-att-name="props.name"
         t-att-checked="props.value"
         t-on-change="onChange"
@@ -3552,7 +3553,7 @@ https://fontawesome.com/license -->
       t-att-class="props.class"
       t-att-data-id="cf.id"
       t-on-click="props.onPreviewClick"
-      t-on-mousedown="(ev) => this.onMouseDown(ev)">
+      t-on-pointerdown="(ev) => this.onMouseDown(ev)">
       <div class="position-relative h-100 w-100 d-flex align-items-center">
         <div class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center text-muted">
           <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
@@ -4076,7 +4077,7 @@ https://fontawesome.com/license -->
     <select
       t-att-class="props.class"
       t-ref="select"
-      t-on-mousedown.stop.prevent=""
+      t-on-pointerdown.stop.prevent=""
       t-on-click="onClick">
       <option selected="true" t-esc="props.selectedValue"/>
     </select>
@@ -4121,24 +4122,24 @@ https://fontawesome.com/license -->
   </t>
 
   <t t-name="o-spreadsheet-SidePanel">
-    <div class="o-sidePanel">
+    <div class="o-sidePanel" t-if="sidePanelStore.isOpen">
       <div class="o-sidePanelHeader">
         <div class="o-sidePanelTitle" t-esc="getTitle()"/>
-        <div class="o-sidePanelClose" t-on-click="() => this.props.onCloseSidePanel()">✕</div>
+        <div class="o-sidePanelClose" t-on-click="close">✕</div>
       </div>
       <div class="o-sidePanelBody">
         <t
-          t-component="state.panel.Body"
-          t-props="props.panelProps"
-          onCloseSidePanel="props.onCloseSidePanel"
-          t-key="'Body_' + props.component"
+          t-component="panel.Body"
+          t-props="sidePanelStore.panelProps"
+          onCloseSidePanel.bind="close"
+          t-key="'Body_' + sidePanelStore.componentTag"
         />
       </div>
-      <div class="o-sidePanelFooter" t-if="state.panel.Footer">
+      <div class="o-sidePanelFooter" t-if="panel?.Footer">
         <t
-          t-component="state.panel.Footer"
-          t-props="props.panelProps"
-          t-key="'Footer_' + props.component"
+          t-component="panel.Footer"
+          t-props="sidePanelStore.panelProps"
+          t-key="'Footer_' + sidePanelStore.componentTag"
         />
       </div>
     </div>
@@ -4190,6 +4191,90 @@ https://fontawesome.com/license -->
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-TablePanel">
+    <div class="o-table-panel">
+      <Section>
+        <t t-set-slot="title">Style options</t>
+        <div class="d-flex flex-row">
+          <div class="w-50">
+            <div class="d-flex align-items-center">
+              <Checkbox
+                label="getCheckboxLabel('headerRow')"
+                name="'headerRow'"
+                value="tableConfig.numberOfHeaders > 0"
+                onChange.bind="this.updateHasHeaders"
+              />
+              <input
+                t-if="tableConfig.numberOfHeaders > 0"
+                t-att-value="tableConfig.numberOfHeaders"
+                type="number"
+                class="o-table-n-of-headers ms-2 o-number-input"
+                t-on-change="onChangeNumberOfHeaders"
+              />
+            </div>
+            <Checkbox
+              label="getCheckboxLabel('totalRow')"
+              name="'totalRow'"
+              value="tableConfig.totalRow"
+              onChange="(val) => this.updateTableConfig('totalRow', val)"
+            />
+            <Checkbox
+              label="getCheckboxLabel('bandedRows')"
+              name="'bandedRows'"
+              value="tableConfig.bandedRows"
+              onChange="(val) => this.updateTableConfig('bandedRows', val)"
+            />
+            <Checkbox
+              label="getCheckboxLabel('hasFilters')"
+              name="'hasFilters'"
+              value="tableConfig.hasFilters"
+              title="hasFilterCheckboxTooltip"
+              disabled="!this.canHaveFilters"
+              onChange.bind="this.updateHasFilters"
+            />
+          </div>
+          <div>
+            <Checkbox
+              label="getCheckboxLabel('firstColumn')"
+              name="'firstColumn'"
+              value="tableConfig.firstColumn"
+              onChange="(val) => this.updateTableConfig('firstColumn', val)"
+            />
+            <Checkbox
+              label="getCheckboxLabel('lastColumn')"
+              name="'lastColumn'"
+              value="tableConfig.lastColumn"
+              onChange="(val) => this.updateTableConfig('lastColumn', val)"
+            />
+            <Checkbox
+              label="getCheckboxLabel('bandedColumns')"
+              name="'bandedColumns'"
+              value="tableConfig.bandedColumns"
+              onChange="(val) => this.updateTableConfig('bandedColumns', val)"
+            />
+          </div>
+        </div>
+      </Section>
+      <Section>
+        <TableStylePicker table="props.table"/>
+      </Section>
+      <Section>
+        <t t-set-slot="title">Data range</t>
+        <SelectionInput
+          t-key="props.table.id"
+          ranges="[this.state.tableXc]"
+          hasSingleRange="true"
+          onSelectionChanged="(ranges) => this.onRangeChanged(ranges)"
+          onSelectionConfirmed.bind="this.onRangeConfirmed"
+        />
+        <ValidationMessages messages="errorMessages" msgType="'error'"/>
+      </Section>
+      <div class="o-sidePanelButtons">
+        <button t-on-click="deleteTable" class="o-table-delete o-button">Delete table</button>
+      </div>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-Spreadsheet">
     <div
       class="o-spreadsheet"
@@ -4214,23 +4299,94 @@ https://fontawesome.com/license -->
             <HeaderGroupContainer layers="rowLayers" dimension="'ROW'"/>
           </div>
           <div class="o-group-grid overflow-hidden">
-            <Grid
-              sidePanelIsOpen="sidePanel.isOpen"
-              exposeFocus="(focus) => this._focusGrid = focus"
-            />
+            <Grid exposeFocus="(focus) => this._focusGrid = focus"/>
           </div>
         </div>
-        <SidePanel
-          t-if="sidePanel.isOpen"
-          onCloseSidePanel="() => this.closeSidePanel()"
-          component="sidePanel.component"
-          panelProps="sidePanel.panelProps"
-        />
+        <SidePanel/>
         <BottomBar onClick="() => this.focusGrid()"/>
       </t>
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-TableDropdownButton">
+    <div class="o-table-widget d-flex align-item-center">
+      <ActionButton
+        action="action"
+        hasTriangleDownIcon="true"
+        t-on-click="onClick"
+        class="'o-hoverable-button'"
+      />
+    </div>
+    <TableStylesPopover
+      tableConfig="tableConfig"
+      onStylePicked.bind="onStylePicked"
+      popoverProps="state.popoverProps"
+      closePopover.bind="closePopover"
+    />
+  </t>
+
+  <t t-name="o-spreadsheet-TableStylePicker">
+    <div class="o-table-style-picker d-flex flew-row justify-content-between ps-1">
+      <div class="d-flex flex-row overflow-hidden">
+        <div
+          class="o-table-style-list-item"
+          t-att-class="{ 'selected': styleId === props.table.config.styleId }"
+          t-foreach="getDisplayedTableStyles()"
+          t-as="styleId"
+          t-key="styleId"
+          t-att-title="getStyleName(styleId)"
+          t-on-click="() => this.onStylePicked(styleId)">
+          <div class="o-table-style-picker-preview">
+            <TableStylePreview tableConfig="getTableConfig(styleId)"/>
+          </div>
+        </div>
+      </div>
+      <div
+        class="o-table-style-picker-arrow d-flex align-items-center px-1"
+        t-on-click.stop="onArrowButtonClick">
+        <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
+      </div>
+    </div>
+    <TableStylesPopover
+      tableConfig="props.table.config"
+      selectedStyleId="props.table.config.styleId"
+      onStylePicked.bind="onStylePicked"
+      popoverProps="state.popoverProps"
+      closePopover.bind="closePopover"
+    />
+  </t>
+
+  <t t-name="o-spreadsheet-TableStylePreview">
+    <canvas t-ref="canvas" class="w-100 h-100"/>
+  </t>
+
+  <t t-name="o-spreadsheet-TableStylesPopover">
+    <Popover t-if="props.popoverProps" t-props="props.popoverProps">
+      <div class="o-table-style-popover d-flex flex-column px-4 py-1" t-ref="tableStyleList">
+        <div t-foreach="categories" t-as="category" t-key="category">
+          <div class="mt-2 mb-1">
+            <b t-esc="category_value"/>
+          </div>
+          <div class="d-flex flex-wrap">
+            <div
+              class="o-table-style-list-item"
+              t-att-class="{ 'selected': styleId === props.selectedStyleId }"
+              t-foreach="getPresetsByCategory(category)"
+              t-as="styleId"
+              t-key="styleId"
+              t-att-title="getStyleName(styleId)"
+              t-on-click="() => this.props.onStylePicked(styleId)">
+              <div class="o-table-style-popover-preview">
+                <TableStylePreview tableConfig="getTableConfig(styleId)"/>
+              </div>
+            </div>
+          </div>
+          <hr t-if="!category_last" class="hr mt-2 mb-0"/>
+        </div>
+      </div>
+    </Popover>
+  </t>
+
   <t t-name="o-spreadsheet-TopBar">
     <t t-set="text_color">Text Color</t>
     <t t-set="fill_color">Fill Color</t>
@@ -4396,7 +4552,8 @@ https://fontawesome.com/license -->
 
             <div class="o-divider"/>
 
-            <ActionButton action="VIEW.createRemoveFilter" class="'o-hoverable-button'"/>
+            <TableDropdownButton/>
+            <ActionButton action="DATA.createRemoveFilterTool" class="'o-hoverable-button'"/>
           </div>
         </div>
         <TopBarComposer/>