@itfin/components 1.3.100 → 1.4.1

package/src/components/table/TableGroup.vue

@@ -17,10 +17,10 @@
               <div class="shadow-area"></div>
               <div class="header-wrapper" :class="{'header-additional-column': showAddColumn}" @click.prevent="toggleGroup">
                 <a class="header-content position-sticky d-flex align-items-center">
-                  <span class="collapse-arrow">
+                  <itf-button squircle icon small secondary class="collapse-arrow">
                     <itf-icon :name="isShowTable ? 'chevron_down' : 'chevron_right'"/>
-                  </span>
-                  <span class="d-flex align-items-center line-overflow group-header-value"
+                  </itf-button>
+                  <span class="d-flex align-items-center line-overflow group-header-value text-primary"
                         data-test="group-value-group-label-value">
                     <slot name="group-title" :rows="rows" :title="title">{{ title }}</slot>
                   </span>
@@ -39,10 +39,10 @@
             :show-add-column="showAddColumn"
             :show-actions="showActions"
             :id-property="idProperty"
+            :sort-as-string="sortAsString"
             :rows="rows"
             :schema="schema"
             :editable="editable"
-            :sort-as-string="sortAsString"
             :no-column-menu="noColumnMenu"
             :no-select-all="noSelectAll"
             :selected-ids="selectedIds"
@@ -50,6 +50,7 @@
             :sorting.sync="_sorting"
             @update:selectedIds="$emit('update:selectedIds', $event)"
             @update:columns="$emit('update:columns', $event)"
+            @filter="$emit('filter', $event)"
             @add-column="$emit('add-column', $event)"
           />
         </div>
@@ -61,10 +62,12 @@
             @row-click="$emit('row-click', $event)"
             :id-property="idProperty"
             :subrows-property="subrowsProperty"
+            :divider-property="dividerProperty"
             :rows="rows"
             :editable="editable"
             :currency="currency"
             :currencies="currencies"
+            :sort-as-string="sortAsString"
             :columns="visibleColumns"
             :no-select-all="noSelectAll"
             :selected-ids="selectedIds"
@@ -154,7 +157,7 @@
 
   &.no-indicator {
     .shadow-area + .table-view-header-value, .table-item-inner {
-      border-left: 1px solid var(--itf-table-border-color);
+      border-left: var(--itf-table-border-base-width) solid var(--itf-table-border-color);
     }
   }
 
@@ -230,7 +233,7 @@
       border-radius: 0;
     }
     &:hover {
-      background: var(--itf-table-hover-bg);
+      //background: var(--itf-table-hover-bg); // видно, що група не на всю ширину коли є нижній скролінг
     }
   }
 
@@ -239,7 +242,7 @@
   }
   .header-content:not(.draggable-mirror *) {
     left: var(--shadow-area-width);
-    padding-left: 0.75rem;
+    //padding-left: 0.75rem;
     padding-right: 0.75rem;
     gap: 1rem;
     align-items: center;
@@ -264,15 +267,18 @@
   }
 
   .table-add-new-item {
-    border-right: 1px solid var(--itf-table-border-color);
-    border-bottom: 1px solid var(--itf-table-border-color);
+    border-right:var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
+    border-left:var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
+    border-bottom: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
     outline: none;
+    border-bottom-left-radius: var(--itf-table-table-border-radius);
+    border-bottom-right-radius: var(--itf-table-table-border-radius);
 
     & > span {
       left: var(--shadow-area-width);
       position: sticky;
       padding-left: var(--shadow-area-width);
-      border-left: 1px solid var(--itf-table-border-color);
+      //border-left: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
       height: 100%;
     }
     &:hover, &:active {
@@ -281,9 +287,20 @@
   }
 
   .sticky-group {
+    top: 0px;
     position: sticky;
-    top: 0;
     z-index: 10;
+
+    & > .draggable-item {
+      margin-bottom: 8px;
+    }
+    .collapse-arrow {
+      padding: 0;
+
+      &:after {
+        display: none;
+      }
+    }
   }
   .table-summary {
     .shadow-area {
@@ -344,6 +361,7 @@ class itfTableGroup extends Vue {
   @Prop() title;
   @Prop() idProperty;
   @Prop() subrowsProperty;
+  @Prop() dividerProperty;
   @Prop() currency;
   @Prop() currencies;
   @Prop() active;
@@ -364,6 +382,7 @@ class itfTableGroup extends Vue {
   @Prop(Boolean) stickyHeader;
   @Prop(Boolean) sortAsString;
   @Prop() indicatorWidth;
+  @Prop() shadowWidth;
   @Prop() cssProperty;
   @PropSync('sorting') _sorting;
   @Prop({ type: String, default: null }) indicatorType;
@@ -377,7 +396,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,7 +15,7 @@
           data-test="table-header-column"
           :data-column="n"
           :data-id="column.Id"
-          :class="{'sticky': column.pinned, 'last-sticky-column': n === lastPinnedIndex, [`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="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`">
           <!-- Не треба видаляти колонки, бо вони потрібні для збереження ширини -->
@@ -29,30 +29,22 @@
           <div v-if="visibleHeader" group="tablecolumns"
                class="table-header"
                @drop="reorderColumns"
-               v-drag-handle
                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>
-                <span class="itf-table2__header-title text-truncate" :title="getTitle(column.title)" :class="{'ms-auto': column.align === 'end'}">
-                  <span v-if="column.icon" :class="column.icon"></span>
-                  {{getTitle(column.title)}}
-                  <div v-if="column.prefix" class="itf-table2__subtitle" v-text="column.prefix" />
-                </span>
-                <itf-icon v-if="sortColumnParams[column.property]" :name="sortColumnParams[column.property] === 'asc' ? 'arrow_up' : 'arrow_down'" :size="16" class="ms-1" />
+                <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 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>
+                </div>
+                <itf-icon v-if="sortColumnParams[column.property]" :name="sortColumnParams[column.property] === 'asc' ? 'sort-asc' : 'sort-desc'" new :size="20" class="ms-1" />
               </template>
-
-              <div v-if="column.sortable">
-                <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="sortBy(column, 'asc')">
-                  <itf-icon name="arrow_up" :size="16" class="me-1" />
-                  {{$t('components.table.sortAscending')}}
-                </a>
-              </div>
-              <div v-if="column.sortable">
-                <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="sortBy(column, 'desc')">
-                  <itf-icon name="arrow_down" :size="16" class="me-1" />
-                  {{$t('components.table.sortDescending')}}
-                </a>
+              <div class="dropdown-header">
+                {{$t('components.table.actions')}}
               </div>
+
               <div v-if="column.groupable">
                 <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
                   <itf-icon name="episodes" :size="16" class="me-1" />
@@ -60,19 +52,84 @@
                 </a>
               </div>
               <div>
-                <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="togglePinned(n)">
-                  <itf-icon :name="column.pinned ? 'checkbox_checked' : 'checkbox_empty'" :size="16" class="me-1" />
+                <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="togglePinned(n)">
+                  <itf-icon v-if="column.pinned" name="pin" new />
+                  <itf-icon v-else name="pin" new />
+
                   <span v-if="column.pinned">{{$t('components.table.unfreezeColumn')}}</span>
                   <span v-else>{{$t('components.table.freezeColumn')}}</span>
                 </a>
               </div>
               <div v-if="showAddColumn">
-                <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="hideColumn(n)">
-                  <itf-icon name="eye_no" :size="16" class="me-1" />
+                <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="hideColumn(n)">
+                  <itf-icon name="hide" new />
+
                   {{$t('components.table.hideColumn')}}
                 </a>
               </div>
+              <div v-if="column.filtrable">
+                <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="$emit('filter', column)">
+                  <itf-icon name="filter" new />
+
+                  {{$t('components.table.filter')}}
+                </a>
+              </div>
+              <div v-if="canMoveColumn(1, column)">
+                <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="moveColumn(1, column)">
+                  <itf-icon name="move-right" new />
+
+                  {{$t('components.table.moveRight')}}
+                </a>
+              </div>
+
+              <div v-if="canMoveColumn(-1, column)">
+                <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="moveColumn(-1, column)">
+                  <itf-icon name="move-left" new />
+
+                  {{$t('components.table.moveLeft')}}
+                </a>
+              </div>
+
+              <template v-if="column.sortable">
+                <div class="dropdown-header">
+                  {{$t('components.table.sorting')}}
+                </div>
+                <div>
+                  <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="sortBy(column, 'asc')">
+                    <itf-icon name="sort-asc" new />
+                    {{$t('components.table.sortAscending')}}
+                  </a>
+                </div>
+                <div>
+                  <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="sortBy(column, 'desc')">
+                    <itf-icon name="sort-desc" new />
+                    {{$t('components.table.sortDescending')}}
+                  </a>
+                </div>
+              </template>
             </itf-dropdown>
+            <div v-if="columnSorting" v-drag-handle class="itf-table2__drag-column">
+              <svg width="35" height="23" viewBox="0 0 35 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g filter="url(#filter0_d_1081_25763)">
+                  <rect x="4" y="2" width="27" height="15" rx="4" fill="#1A4A97"/>
+                  <circle cx="23.5" cy="9.5" r="1.5" fill="white"/>
+                  <circle cx="17.5" cy="9.5" r="1.5" fill="white"/>
+                  <circle cx="11.5" cy="9.5" r="1.5" fill="white"/>
+                </g>
+                <defs>
+                  <filter id="filter0_d_1081_25763" x="0" y="0" width="35" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                    <feOffset dy="2"/>
+                    <feGaussianBlur stdDeviation="2"/>
+                    <feComposite in2="hardAlpha" operator="out"/>
+                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1081_25763"/>
+                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1081_25763" result="shape"/>
+                  </filter>
+                </defs>
+              </svg>
+            </div>
           </div>
           <div v-if="visibleHeader && n === sortedColumns.length - 1"
                @enter="columnHighlightLast('enter')"
@@ -86,43 +143,6 @@
         </div>
       </template>
       <div class="table-view-item-value extra flex-grow-1"></div>
-      <itf-dropdown v-if="showAddColumn && visibleHeader" ref="newDd" text append-to-context shadow autoclose="outside" class="table-header-add-column table-view-item-actions" data-test="table-header-add-column">
-          <template #button>
-            <itf-button icon small><span class="nom-gear"></span></itf-button>
-          </template>
-
-          <itf-sortable :value="sortedColumns" @input="onSortColumns">
-            <template v-for="(column, k) in sortedColumns">
-              <div :key="`column${k}`" class="d-flex align-items-center justify-content-between" :class="{'px-2 py-1': column.visible !== false}">
-                <template v-if="column.visible !== false">
-                  <div class="d-flex justify-content-between flex-grow-1">
-                    <div>
-                      <span class="nom-grip-vertical"></span>
-                      <span v-if="column.icon" :class="column.icon"></span>
-                      {{getTitle(column.title)}}
-                    </div>
-                    <span v-if="column.pinned" class="nom-pin-fill"></span>
-                  </div>
-                  <a sortable-skip href="" class="text-decoration-none" @click.prevent="hideColumn(k)">
-                    <span class="nom-trash"></span>
-                  </a>
-                </template>
-              </div>
-            </template>
-          </itf-sortable>
-
-          <div v-if="invisibleColumns.length">
-            <div class="dropdown-header">{{$t('components.table.addColumn')}}</div>
-            <template v-for="(column, k) in invisibleColumns">
-              <a href="" @click.prevent="addColumn(column)" :key="`inv-column${k}`" class="dropdown-item d-flex align-items-center justify-content-between px-2 py-1">
-                <div>
-                  <span class="nom-plus"></span>
-                  {{getTitle(column.title)}}
-                </div>
-              </a>
-            </template>
-          </div>
-        </itf-dropdown>
 
       <div class="boundary top"></div>
       <div class="boundary right"></div>
@@ -163,7 +183,7 @@ class itfTableHeader extends Vue {
   @Inject() tableEl;
 
   @PropSync('columns', { type: Array, default: () => ([]) }) sortedColumns;
-  @PropSync('sorting', { type: Object, default: () => ({}) }) _sorting;
+  @PropSync('sorting') _sorting;
   @Prop({ type: Array, default: () => ([]) }) rows;
   @Prop({ type: Array, default: () => ([]) }) selectedIds;
   @Prop({ type: Object, default: () => ({}) }) schema;
@@ -192,7 +212,7 @@ class itfTableHeader extends Vue {
     if (typeof this._sorting === 'string'){
       return this._sorting[0] === '-' ? {[this._sorting.substring(1)]: 'desc'} : {[this._sorting]: 'asc'};
     } else {
-      return this._sorting;
+      return this._sorting ?? {};
     }
   }
 
@@ -239,6 +259,26 @@ class itfTableHeader extends Vue {
     return this.sortedColumns.findIndex((column) => column.lastPinned);
   }
 
+  canMoveColumn(direction, column) {
+    if (!this.columnSorting) {
+      return false;
+    }
+    const index = this.sortedColumns.findIndex((c) => c === column);
+    return (index + direction >= 0 && index + direction < this.sortedColumns.length);
+  }
+
+  moveColumn(direction, column) {
+    const index = this.sortedColumns.findIndex((c) => c === column);
+    const newIndex = index + direction;
+    if (newIndex < 0 || newIndex >= this.sortedColumns.length) {
+      return;
+    }
+    const newValue = [...this.sortedColumns];
+    newValue.splice(index, 1);
+    newValue.splice(newIndex, 0, column);
+    this.$emit('update:columns', newValue);
+  }
+
   reorderColumns({ detail }) {
     const { index: fromIndex } = detail.draggablePayload;
     const { index: toIndex, last } = detail.dropzonePayload;
@@ -302,13 +342,27 @@ class itfTableHeader extends Vue {
           const delta = event.pageX - startX;
           newWidth = Math.max(columnWidth + delta, 50);
           columns.forEach((column) => {
-            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,51 @@
+<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;
+  min-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': !noSelectAll}">
+          <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="!noSelectAll" class="fill on-hover">
-              <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)">
@@ -51,23 +33,29 @@
                 v-if="column.visible !== false"
                 :data-column="k"
                 :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, 'px-2': !(column.editable && editable), 'editable': column.editable && editable}"
+                :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">
-                <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)">
+                <div class="table-view-item-value-content" :class="{'px-2': !(column.editable && editable)}">
+                <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" v-if="column.type === 'text'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
-                      <itf-text-field class="w-100" v-if="column.type === 'number'" type="number" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                      <itf-text-field class="w-100 h-100" v-if="column.type === 'text'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                      <itf-text-field class="w-100 h-100" v-if="column.type === 'number'" type="number" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
                       <itf-hours-field
-                        class="w-100"
+                        class="w-100 h-100"
                         placeholder="00h 00m"
                         v-else-if="column.type === 'time'"
                         :hours="getValue(item, column)"
                         @update:hours="updateValue(item, $event, n, column)"
                       />
-                      <itf-textarea class="w-100" :rows="1" autogrow v-else-if="column.type === 'textarea'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
-                      <itf-money-field class="w-100" currency-disabled :currency="currency" :currencies="currencies" v-else-if="column.type === 'money'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
-                      <itf-select class="w-100" v-else-if="column.type === 'select'" :reduce="(item) => item.value" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" :options="column.options"></itf-select>
+                      <itf-textarea class="w-100 h-100" :rows="1" autogrow v-else-if="column.type === 'textarea'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                      <itf-money-field class="w-100 h-100" currency-disabled :currency="currency" :currencies="currencies" v-else-if="column.type === 'money'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                      <itf-select class="w-100 h-100" v-else-if="column.type === 'select'" :reduce="(item) => item.value" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" :options="column.options"></itf-select>
                     </slot>
                   </template>
                   <div v-else class="h-100 align-items-center d-flex w-100">
@@ -76,6 +64,7 @@
                     </slot>
                   </div>
                 </slot>
+                </div>
               </div>
             </template>
             <div class="table-view-item-value extra"></div>
@@ -120,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>
@@ -155,6 +145,7 @@ class itfTableRows extends Vue {
   @Prop() rows;
   @Prop() idProperty;
   @Prop() subrowsProperty;
+  @Prop() dividerProperty;
   @Prop() active;
   @Prop(Boolean) showAddColumn;
   @Prop(Boolean) noSelectAll;