@odoo/o-spreadsheet 17.2.0-alpha.5 → 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.5
- @date 2024-02-16T14:28:32.318Z
- @hash 0c69dd8
+ @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"/>
@@ -423,15 +423,15 @@
     <div
       t-ref="autoCompleteList"
       t-att-class="{
-          'o-autocomplete-dropdown':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,20 +474,19 @@
       />
 
       <div
-        t-if="props.focus !== 'inactive' and (autoCompleteState.showProvider or functionDescriptionState.showDescription)"
+        t-if="props.focus !== 'inactive' and (autoCompleteState.provider or functionDescriptionState.showDescription)"
         class="o-composer-assistant shadow"
         t-att-style="assistantStyle"
         t-on-wheel.stop=""
-        t-on-mousedown.prevent.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"
@@ -510,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"/>
@@ -664,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>
@@ -672,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"
@@ -708,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>
@@ -803,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>
@@ -883,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}">
@@ -910,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"
@@ -1004,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"
@@ -1013,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>
@@ -1036,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"/>
@@ -1162,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
@@ -1189,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;">
@@ -1228,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
@@ -1248,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;">
@@ -1287,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,
@@ -1302,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,
@@ -2128,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"
@@ -2141,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"
@@ -2316,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">
@@ -3143,9 +3139,13 @@ https://fontawesome.com/license -->
   </t>
 
   <t t-name="o-spreadsheet.Checkbox">
-    <label class="o-checkbox" t-att-title="props.title">
+    <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"
@@ -3553,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"/>
@@ -4077,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>
@@ -4191,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"
@@ -4218,12 +4302,91 @@ https://fontawesome.com/license -->
             <Grid exposeFocus="(focus) => this._focusGrid = focus"/>
           </div>
         </div>
-        <SidePanel t-if="sidePanel.isOpen"/>
+        <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>
@@ -4389,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/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/o-spreadsheet",
-  "version": "17.2.0-alpha.5",
+  "version": "17.2.0-alpha.6",
   "description": "A spreadsheet component",
   "type": "module",
   "main": "dist/o-spreadsheet.cjs.js",