@itfin/components 2.0.8 → 2.0.9

package/src/components/icon/new-icons/eye.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.08422 11.626C4.97192 11.8628 4.97193 12.1375 5.08423 12.3743C6.303 14.9438 8.94045 16.7231 11.9977 16.7231C15.055 16.7231 17.6925 14.9437 18.9112 12.3741C19.0235 12.1373 19.0235 11.8625 18.9112 11.6258C17.6924 9.0562 15.055 7.27698 11.9978 7.27698C8.94046 7.27698 6.30294 9.05631 5.08422 11.626ZM15 12C15 13.6569 13.6569 15 12 15C10.3432 15 9.00003 13.6569 9.00003 12C9.00003 10.3432 10.3432 9.00002 12 9.00002C12.3075 9.00002 12.6042 9.04627 12.8834 9.1322C12.3625 9.36738 12 9.89137 12 10.5C12 11.3284 12.6716 12 13.5 12C14.1087 12 14.6327 11.6375 14.8678 11.1166C14.9538 11.3959 15 11.6926 15 12Z" fill="currentColor"/>
+</svg>

package/src/components/pagination/Pagination2.vue

@@ -16,7 +16,7 @@
 
           <div v-if="page.type === 'page'" class="d-flex flex-nowrap text-nowrap align-items-center gap-1 text-muted">
             <itf-text-field :invalid="!isValid" type="number" small :min="1" :max="9999" :value="value" @change="onPageChange" />
-            / {{pages}}
+            / {{pagesCount}}
           </div>
           <a v-if="page.type === 'next'" href="" class="page-link" :aria-label="$t('components.pagination.previous')" @click.prevent="onPage(page.number)">
             <span class="visually-hidden">{{$t('components.pagination.next')}}</span>
@@ -93,6 +93,10 @@ class itfPagination extends Vue {
 
   isValid = true;
 
+  get pagesCount() {
+    return this.pages || 1;
+  }
+
   onPage(page) {
     this.$emit('input', page);
   }

package/src/components/panels/PanelLink.vue

@@ -4,6 +4,7 @@
 <script lang="ts">
 import { Vue, Component, Inject, Prop } from 'vue-property-decorator';
 import { IPanel } from './PanelList.vue';
+import {stackToHash} from "@itfin/components/src/components/panels/helpers";
 
 @Component({
   components: {
@@ -17,9 +18,11 @@ export default class PanelLink extends Vue {
   @Inject({ default: null }) panelList;
   @Inject({ default: null }) currentPanel;
 
+  @Prop(Boolean) global: boolean;
   @Prop(String) panel: string;
   @Prop() payload: payload;
   @Prop() target: string;
+  @Prop() list;
   @Prop({ type: String, default: 'active' }) activeClass: string;
   @Prop(Boolean) append: boolean;
 
@@ -31,30 +34,41 @@ export default class PanelLink extends Vue {
     return handlers;
   }
 
+  get activeList() {
+    return this.list ?? this.panelList;
+  }
+
   get isActive() {
-    let stack = this.panelList.getCurrentStack();
+    if (!this.activeList) {
+      return false;
+    }
+    let stack = this.activeList.getCurrentStack();
     return stack.find(s => s.type === this.panel);
   }
 
   get link() {
-    let stack = this.panelList.getCurrentStack();
+    let stack = this.activeList?.getCurrentStack() ?? [];
     if (!this.append) {
-      stack = stack.splice(0, this.currentPanel.index + 1);
+      stack = stack.splice(0, this.currentPanel?.index + 1);
     }
-    const hash = this.panelList.getLink([
+    const hash = stackToHash([
       ...stack,
       {
         type: this.panel,
         payload: this.payload || {}
       }
     ]);
-    return `#${hash}`;
+    return hash;
   }
 
   onClick(e) {
+    console.info(this.activeList);
+    if (!this.activeList) {
+      return;
+    }
     e.preventDefault();
     e.stopPropagation();
-    this.panelList.openPanel(this.panel, this.payload || {}, this.append ? undefined : this.currentPanel.index + 1);
+    this.activeList.openPanel(this.panel, this.payload || {}, this.append ? undefined : this.currentPanel?.index + 1);
   }
 }
 </script>

package/src/components/panels/PanelList.vue

@@ -134,21 +134,22 @@ $double-an-time: $an-time * 2;
   transition: min-width $an-time linear, flex-grow $an-time linear;
 
   > div {
-    transition: opacity $an-time linear;
+    //transition: opacity $an-time linear;
   }
 }
 
-.slide-enter-active > div {
-  opacity: 0;
-}
-
-.opacity-null > div {
-  opacity: 0 !important;
-}
+//.slide-enter-active > div {
+//  opacity: 0;
+//}
+//
+//.opacity-null > div {
+//  opacity: 0 !important;
+//}
 </style>
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import Panel from './Panel.vue';
+import {hashToStack, stackToHash} from "@itfin/components/src/components/panels/helpers";
 
 interface VisualOptions {
   title: string;
@@ -200,7 +201,6 @@ export default class PanelList extends Vue {
 
   nextId:number = 0;
 
-
   created() {
     if (this.firstPanel) {
       this.internalOpenPanel(this.firstPanel.type, this.firstPanel.payload);
@@ -276,6 +276,8 @@ export default class PanelList extends Vue {
     if (!this.panelsStack.length || openIndex === 0) {
       newPanel.isCloseable = false;
     }
+    console.info(newPanel, this.panelsStack)
+    console.trace();
     let newStack = [...this.panelsStack];
     if (this.panels[type].permanentExpanded && newStack.length) {
       for (const panel of newStack) {
@@ -389,30 +391,17 @@ export default class PanelList extends Vue {
     return [...this.panelsStack];
   }
 
-  getLink(stack: IPanel[]) {
-    return stack.map(panel => {
-      return `${panel.type}${panel.isCollapsed ? '' : '!'}=${JSON.stringify(panel.payload || {})}`;
-    }).join('&');
-  }
-
   setPanelHash() {
-    const hash = this.getLink(this.panelsStack);
+    const hash = stackToHash(this.panelsStack).replace(/^#/, '');
     this.$router.push({ hash });
   }
 
   async parsePanelHash() {
     const {hash} = location;
     if (hash) {
-      const panels = hash.slice(1).split('&').map(item => {
-        const [type, payload] = item.split('=');
-        const isCollapsed = !item.includes('!');
-        return {
-          type: type.replace('!', ''),
-          isCollapsed,
-          payload: JSON.parse(decodeURIComponent(payload))
-        };
-      });
+      const panels = hashToStack(hash);
       const newStack = [];
+      this.panelsStack = [];
       for (const panelIndex in panels) {
         const panel = panels[panelIndex];
         if (this.panelsStack[panelIndex] && this.panelsStack[panelIndex].type === panel.type) {

package/src/components/panels/helpers.spec.ts

@@ -0,0 +1,27 @@
+import {stackToHash, hashToStack} from "./helpers";
+
+describe('panel helpers', () => {
+  test('stackToHash', () => {
+    const stack = [
+      { type: 'a', payload: { a: 1 }, isCollapsed: false },
+      { type: 'b', payload: { b: 2 }, isCollapsed: true },
+      { type: 'c', payload: { c: 3 }, isCollapsed: false }
+    ];
+    expect(stackToHash(stack)).toBe('a!={"a":1}&b={"b":2}&c!={"c":3}');
+  });
+  test('hashToStack', () => {
+    const stack = [
+      { type: 'a', payload: { a: 1 }, isCollapsed: false },
+      { type: 'b', payload: { b: 2 }, isCollapsed: true },
+      { type: 'c', payload: { c: 3 }, isCollapsed: false }
+    ];
+    expect(hashToStack('a!={"a":1}&b={"b":2}&c!={"c":3}')).toEqual(stack);
+    expect(hashToStack('a!={"a')).toEqual([
+      {
+        "isCollapsed": false,
+        "payload": {},
+        "type": "a"
+      }
+    ]);
+  });
+});

package/src/components/panels/helpers.ts

@@ -0,0 +1,37 @@
+export interface IPanel {
+  type: string;
+  payload?: any;
+  isCollapsed?: boolean;
+}
+
+export function stackToHash(stack: IPanel[]) {
+  const hash = stack.map(panel => {
+    return `${panel.type}${panel.isCollapsed ? '' : '!'}=${JSON.stringify(panel.payload || {})}`;
+  }).join('&');
+  return `#${hash}`;
+}
+
+
+export function hashToStack(hash: string|undefined): IPanel[] {
+  let stack:IPanel[] = [];
+  if (hash) {
+    const str = hash.replace(/^#/, '');
+
+    stack = str.split('&').map(item => {
+      const [type, payload] = item.split('=');
+      const isCollapsed = !type.includes('!');
+      let payloadObj:any = {};
+      try {
+        payloadObj = JSON.parse(decodeURIComponent(payload));
+      } catch (e) {
+        // ignore
+      }
+      return {
+        type: type.replace('!', ''),
+        isCollapsed,
+        payload: payloadObj
+      };
+    });
+  }
+  return stack;
+}

package/src/components/table/Table2.vue

@@ -5,7 +5,7 @@
     'table-absolute': absolute,
     'table-clickable': clickable,
     'permanent-checkboxes': selectedIds.length
-  }" :style="{ '--indicator-area-width': `${indicatorType === 'none' ? 1 : indicatorWidth}px` }">
+  }" :style="{ '--indicator-area-width': `${indicatorType === 'none' ? 1 : indicatorWidth}px`, '--shadow-area-width': `${shadowWidth}px` }">
     <itf-notice-popout :visible="showGroupOperations" class="rounded-pill bg-dark text-light">
       <div class="d-flex gap-3 px-3 align-items-center">
         <div><strong>{{selectedIds.length}}</strong> selected</div>
@@ -29,6 +29,7 @@
             :title="group.name"
             :selected-ids.sync="selectedIds"
             :add-new-rows="addNewRows"
+            :shadow-width="shadowWidth"
             :column-sorting="columnSorting"
             :column-resizing="columnResizing"
             :show-grouping="showGrouping"
@@ -43,6 +44,7 @@
             :currencies="currencies"
             :currency="currency"
             :subrows-property="subrowsProperty"
+            :divider-property="dividerProperty"
             :indicator-type="indicatorType"
             :expanded-all="expandedAll"
             :indicatorWidth="indicatorWidth"
@@ -103,9 +105,11 @@ class itfTable2 extends Vue {
   @Prop({ type: String, default: null }) idProperty;
   @Prop({ type: String, default: null }) cssProperty;
   @Prop({ type: String, default: null }) subrowsProperty;
+  @Prop({ type: String, default: null }) dividerProperty;
   @Prop({ type: String, default: null }) editableProperty;
   @Prop({ default: null }) active;
   @Prop({ default: 45 }) indicatorWidth;
+  @Prop({ default: 0 }) shadowWidth;
   @Prop({ type: String, default: null, validator: (val) => ['order', 'checkbox', 'toggle', 'property', 'none'].includes(val) }) indicatorType;
   @Prop({ type: String, default: null }) stateName; // save state to storage
   @Prop({ type: Object, default: () => ({}) }) schema;

package/src/components/table/TableBody.vue

@@ -7,6 +7,7 @@
       :columns="columns"
       :id-property="idProperty"
       :subrows-property="subrowsProperty"
+      :divider-property="dividerProperty"
       :show-add-column="showAddColumn"
       :show-actions="showActions"
       :no-select-all="noSelectAll"
@@ -91,7 +92,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: var(--itf-table-min-width);
+  min-width: 1rem;//var(--itf-table-min-width);
 }
 
 .table-row-template, .table-view-header-value {
@@ -109,21 +110,6 @@
     }
   }
 }
-.table-row-template {
-  .on-hover {
-    display: none;
-  }
-  &:hover, .permanent-checkboxes & {
-    .on-rest {
-      display: none;
-    }
-
-    .on-hover {
-      opacity: 1;
-      display: block;
-    }
-  }
-}
 
 .table-small-row .table-view-item {
   // height: var(--table-row-height);
@@ -158,6 +144,7 @@ class itfTableBody extends Vue {
   @Prop() rows;
   @Prop() idProperty;
   @Prop() subrowsProperty;
+  @Prop() dividerProperty;
   @Prop() active;
   @Prop(Boolean) showAddColumn;
   @Prop(Boolean) showActions;

package/src/components/table/TableGroup.vue

@@ -61,6 +61,7 @@
             @row-click="$emit('row-click', $event)"
             :id-property="idProperty"
             :subrows-property="subrowsProperty"
+            :divider-property="dividerProperty"
             :rows="rows"
             :editable="editable"
             :currency="currency"
@@ -112,7 +113,7 @@
               :key="n"
               :data-column="n"
               class="position-relative line-overflow px-1"
-              :style="column.grow ? `min-width: ${column.minWidth}px; flex-grow: 1;` : `width: ${column.width}px; max-width: ${column.width}px;`">
+              :style="`width: ${column.width}px; max-width: ${column.width}px;`">
               <itf-dropdown append-to-context text right @open="persistSummary = true" @close="persistSummary = false" autoclose="outside">
                 <template #button>
                   <span data-test="summary-column" class="invisible-summary d-flex align-items-center justify-content-end flex-auto">
@@ -358,6 +359,7 @@ class itfTableGroup extends Vue {
   @Prop() title;
   @Prop() idProperty;
   @Prop() subrowsProperty;
+  @Prop() dividerProperty;
   @Prop() currency;
   @Prop() currencies;
   @Prop() active;
@@ -377,6 +379,7 @@ class itfTableGroup extends Vue {
   @Prop(Boolean) striped;
   @Prop(Boolean) stickyHeader;
   @Prop() indicatorWidth;
+  @Prop() shadowWidth;
   @Prop() cssProperty;
   @PropSync('sorting') _sorting;
   @Prop({ type: String, default: null }) indicatorType;
@@ -390,7 +393,7 @@ class itfTableGroup extends Vue {
   get visibleColumns() {
     let list = this.columns;
     list = sortBy(list, (column) => column.index);
-    let left = 12 + (this.indicatorType === 'none' ? 1 : Number(this.indicatorWidth)); // sum of first 2 cells
+    let left = Number(this.shadowWidth) + (this.indicatorType === 'none' ? 1 : Math.max(Number(this.indicatorWidth), 16)); // sum of first 2 cells
     const pinned = list.filter((column) => column.pinned && column.visible !== false);
     list = list.map((column, index) => {
       const item = {...column};

package/src/components/table/TableHeader.vue

@@ -15,9 +15,9 @@
           data-test="table-header-column"
           :data-column="n"
           :data-id="column.Id"
-          :class="{'sticky': column.pinned, 'active': sortColumnParams[column.property], 'last-sticky-column': n === lastPinnedIndex, 'flex-grow-1': column.grow, [`justify-content-${column.align || 'start'}`]: true}"
+          :class="{'sticky': column.pinned, 'active': sortColumnParams[column.property], 'last-sticky-column': n === lastPinnedIndex, [`justify-content-${column.align || 'start'}`]: true}"
           class="table-view-header-value"
-          :style="column.grow ? `left: ${column.left}px; flex-grow: 1` : `width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`">
+          :style="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`">
           <!-- Не треба видаляти колонки, бо вони потрібні для збереження ширини -->
           <div v-if="visibleHeader" accept-group="tablecolumns"
                class="table-view-header-space"
@@ -32,9 +32,9 @@
                v-draggable="{ handle: true, payload: { index: n, item: column }, mirror: {yAxis:false} }">
             <itf-dropdown text append-to-body shadow ref="dropdown" class="w-100" :disabled="noColumnMenu">
               <template #button>
-                <div class="itf-table2__header-title d-flex w-100 align-items-start" :title="getTitle(column.title)" :class="{'ms-auto': column.align === 'end'}">
+                <div class="itf-table2__header-title d-flex w-100 align-items-center" :title="getTitle(column.title)">
                   <itf-icon class="itf-table2__header-icon" new v-if="column.icon" :name="column.icon"></itf-icon>
-                  <div class="flex-grow-1 w-100 itf-table2__title-container">
+                  <div class="flex-grow-1 w-100 itf-table2__title-container d-flex align-items-center" :class="{'justify-content-end': column.align === 'end'}">
                     <div class="itf-table2__title text-truncate">{{getTitle(column.title)}}</div>
                     <div v-if="column.prefix" class="itf-table2__subtitle text-truncate" v-text="column.prefix" />
                   </div>
@@ -139,7 +139,7 @@
                v-dropzone="{payload:{ last: true }}">
             <div class="table-view-header-dropzone"></div>
           </div>
-          <div v-if="visibleHeader && columnResizing && !column.grow" ref="resizeHandle" class="resize-handle"></div>
+          <div v-if="visibleHeader && columnResizing" ref="resizeHandle" class="resize-handle"></div>
         </div>
       </template>
       <div class="table-view-item-value extra flex-grow-1"></div>
@@ -341,15 +341,27 @@ class itfTableHeader extends Vue {
           const delta = event.pageX - startX;
           newWidth = Math.max(columnWidth + delta, 50);
           columns.forEach((column) => {
-            if (!this.sortedColumns[index].grow) {
-              column.style.width = `${newWidth}px`;
-              column.style['max-width'] = `${newWidth}px`;
+            const { maxWidth, minWidth } = this.sortedColumns[index];
+            if (minWidth && newWidth < minWidth) {
+              newWidth = minWidth;
             }
+            if (maxWidth && newWidth > maxWidth) {
+              newWidth = maxWidth;
+            }
+            column.style.width = `${newWidth}px`;
+            column.style['max-width'] = `${newWidth}px`;
           });
         };
         const mouseUpHandler = () => {
           document.removeEventListener('mousemove', mouseMoveHandler);
           document.removeEventListener('mouseup', mouseUpHandler);
+          const { minWidth, maxWidth } = this.sortedColumns[index];
+          if (minWidth && newWidth < minWidth) {
+            newWidth = minWidth;
+          }
+          if (maxWidth && newWidth > maxWidth) {
+            newWidth = maxWidth;
+          }
           this.changeColumn(index, { width: newWidth });
         };
         document.addEventListener('mousemove', mouseMoveHandler);

package/src/components/table/TableRowToggle.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div @click.prevent.stop="toggle" class="d-flex align-items-center flex-nowrap" :class="{'active-toggle': visible}">
+      <div class="item-toggle text-muted">
+        <template v-if="visible && expanded">
+          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+               width="16" height="16" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path d="M184.7,413.1l2.1-1.8l156.5-136c5.3-4.6,8.6-11.5,8.6-19.2c0-7.7-3.4-14.6-8.6-19.2L187.1,101l-2.6-2.3
+	C182,97,179,96,175.8,96c-8.7,0-15.8,7.4-15.8,16.6h0v286.8h0c0,9.2,7.1,16.6,15.8,16.6C179.1,416,182.2,414.9,184.7,413.1z" fill="currentColor" />
+</svg>
+        </template>
+        <template v-else-if="visible">
+          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+               width="16" height="16" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path d="M98.9,184.7l1.8,2.1l136,156.5c4.6,5.3,11.5,8.6,19.2,8.6c7.7,0,14.6-3.4,19.2-8.6L411,187.1l2.3-2.6
+	c1.7-2.5,2.7-5.5,2.7-8.7c0-8.7-7.4-15.8-16.6-15.8v0H112.6v0c-9.2,0-16.6,7.1-16.6,15.8C96,179.1,97.1,182.2,98.9,184.7z" fill="currentColor" />
+</svg>
+        </template>
+      </div>
+
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.active-toggle {
+  cursor: pointer;
+}
+.item-toggle {
+  width: 1.5rem;
+  display: flex;
+  align-items: center;
+}
+</style>
+<script>
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+export default @Component({
+  components: {
+  }
+})
+class itfTableRowToggle extends Vue {
+  @Prop(Boolean) expanded;
+  @Prop(Boolean) visible;
+
+  toggle() {
+    this.$emit('toggle');
+  }
+}
+</script>

package/src/components/table/TableRows.vue

@@ -20,29 +20,11 @@
               </a>
             </div>
           </div>
-          <div v-if="indicatorType !== 'none'" class="indicator sticky">
-            <div class="fill table-view-row-count" :class="{'on-rest': indicatorType !== 'checkbox' && indicatorType !== 'toggle'}">
+          <div class="indicator sticky">
+            <div v-if="indicatorType !== 'none'" class="table-view-row-count">
               <span v-if="indicatorType === 'order'">{{ (n + 1) }}</span>
               <span v-else-if="indicatorType === 'property'">{{ item[idProperty] }}</span>
-              <a href="" @click.prevent.stop="$emit('toggle', item)" v-else-if="indicatorType === 'toggle'">
-                <template v-if="subrowsProperty && item[subrowsProperty] && item[subrowsProperty].length">
-                  <template v-if="item[subrowsProperty] && item[subrowsProperty].length && !isExpanded(item)">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16">
-                      <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
-                      <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>
-                    </svg>
-                  </template>
-                  <template v-else>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-square" viewBox="0 0 16 16">
-                      <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
-                      <path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8"/>
-                    </svg>
-                  </template>
-                </template>
-              </a>
-            </div>
-            <div v-if="indicatorType !== 'toggle'" class="fill" :class="{'on-hover': indicatorType !== 'checkbox'}">
-              <itf-checkbox :value="item[idProperty]" />
+              <span v-else-if="indicatorType === 'checkbox'"><itf-checkbox :value="item[idProperty]" /></span>
             </div>
           </div>
           <div accept-group="items" class="table-item-inner" @click="$emit('row-click', item)">
@@ -50,11 +32,16 @@
               <div
                 v-if="column.visible !== false"
                 :data-column="k"
-                :style="column.grow ? `left: ${column.left}px; flex-grow: 1` : `width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`"
-                :class="{'justify-content-end': column.align === 'end', 'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow, 'editable': column.editable && editable}"
+                :style="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`"
+                :class="{'justify-content-end': column.align === 'end', 'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'editable': column.editable && editable}"
                 class="table-view-item-value d-flex h-100">
                 <div class="table-view-item-value-content" :class="{'px-2': !(column.editable && editable)}">
-                <slot :name="`column.${column.property}`" :toggle="() => $emit('toggle', item)" :level="level" :editable="column.editable && editable" :item="item" :column="column" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)">
+                <slot
+                  :name="`column.${column.property}`"
+                  :toggle="() => $emit('toggle', item)"
+                  :hasSubitems="!!(subrowsProperty && item[subrowsProperty] && item[subrowsProperty].length)"
+                  :isExpanded="!!(item[subrowsProperty] && item[subrowsProperty].length && !isExpanded(item))"
+                  :level="level" :editable="column.editable && editable" :item="item" :column="column" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)">
                   <template v-if="column.editable && editable && (!editableProperty || item[editableProperty])">
                     <slot :name="`edit.${column.type}`" :level="level" :toggle="() => $emit('toggle', item)" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)" :item="item" :column="column">
                       <itf-text-field class="w-100 h-100" v-if="column.type === 'text'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
@@ -122,6 +109,7 @@
           </template>
         </itf-table-rows>
       </template>
+      <div v-if="dividerProperty && item[dividerProperty]" :key="`divider-${n}`" class="itf-table2__row-divider"></div>
     </template>
   </div>
 </template>
@@ -157,6 +145,7 @@ class itfTableRows extends Vue {
   @Prop() rows;
   @Prop() idProperty;
   @Prop() subrowsProperty;
+  @Prop() dividerProperty;
   @Prop() active;
   @Prop(Boolean) showAddColumn;
   @Prop(Boolean) noSelectAll;

package/src/components/table/table2.scss

@@ -13,7 +13,7 @@
   --itf-table-header-border-color: #8E97A533;
   --itf-table-border-base-color: var(--itf-table-header-bg); // кольори границь таблиці без внутрішніх рядків
   --itf-table-border-base-width: 2px;
-  --itf-table-hover-header-bg: #1A4A971A;
+  --itf-table-hover-header-bg: #dfe5ef;
   --itf-table-hover-bg: #e9edf5;
   --itf-table-bg: var(--bs-body-bg);
   --itf-table-min-width: 45px;
@@ -211,8 +211,8 @@ body[data-theme="dark"] {
       background: var(--itf-table-bg);
       min-height: var(--itf-table-header-height);
 
-      &:not(.draggable-container--is-dragging) .table-view-header-value {
-        z-index: 9;
+      &:not(.draggable-container--is-dragging):hover .table-view-header-value {
+        z-index: 39;
       }
       &:after {
         content: "";
@@ -258,9 +258,11 @@ body[data-theme="dark"] {
         border-left: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
         left: var(--shadow-area-width);
         width: var(--indicator-area-width);
+        min-width: 1rem;
 
         &.sticky {
-            border-top-left-radius: var(--itf-table-table-border-radius);
+          border-top-left-radius: var(--itf-table-table-border-radius);
+          z-index: 13;
         }
       }
       &.sticky {
@@ -422,6 +424,13 @@ body[data-theme="dark"] {
     }
   }
 
+  &__row-divider {
+    background-color: #F7F8FA;
+    height: 5px;
+    padding: 0;
+    border-top: 1px solid rgba(238, 238, 238, 1);
+    border-bottom: 1px solid rgba(238, 238, 238, 1);
+  }
   //&:hover, &.permanent-editable-border {
   //  .table-view-item-value.editable {
   //    .form-control {