@itfin/components 1.2.96 → 1.2.98

package/src/components/table/Table2.vue

@@ -1,40 +1,78 @@
 <template>
 
   <div class="scrollable scrollable-x big-scrollbar">
-    <itf-table-group
-      :columns="columns"
-      :rows="rows"
-      :add-new-rows="addNewRows"
-    >
-      <template v-for="(_, name) in $slots" #[name]="slotData">
-        <slot :name="name" v-bind="slotData || {}" />
-      </template>
-      <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
-        <slot :name="name" v-bind="slotData || {}" />
-      </template>
-    </itf-table-group>
+    <template v-for="(group, index) in groups">
+      <div class="table-view-body">
+        <itf-table-group
+          :key="index"
+          :style="`--table-row-height: ${rowHeight}px`"
+          :columns="columns"
+          @update:columns="onColumnsUpdate"
+          :rows="group.rows"
+          :title="group.name"
+          :add-new-rows="addNewRows"
+          :column-sorting="columnSorting"
+          :column-resizing="columnResizing"
+          :show-grouping="showGrouping"
+          :show-summary="showSummary"
+          :show-add-column="showAddColumn"
+          :row-height="rowHeight"
+          :show-header="index === 0"
+          @add-column="$emit('add-column', $event)"
+        >
+          <template v-for="(_, name) in $slots" #[name]="slotData">
+            <slot :name="name" v-bind="slotData || {}" />
+          </template>
+          <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+            <slot :name="name" v-bind="slotData || {}" />
+          </template>
+        </itf-table-group>
+      </div>
+    </template>
   </div>
 
 </template>
 <style lang="scss">
-//.scrollable {
-//  -webkit-overflow-scrolling: touch;
-//  overflow: hidden auto;
-//
-//  &.scrollable-x {
-//    overflow-x: auto;
-//  }
-//}
+.scrollable {
+  --itf-table-hover-bg: #f2f2f2;
+  --table-min-width: 45px;
+
+  body[data-theme="dark"] & {
+    --itf-table-hover-bg: #393b41;
+  }
+
+  -webkit-overflow-scrolling: touch;
+  //overflow: hidden auto;
+  //
+  //&.scrollable-x {
+  //  overflow-x: auto;
+  //}
+}
+.last-sticky-column:after {
+  content: '';
+  background: linear-gradient(to right,#dfe0e2,rgba(255,0,0,0));
+  height: 100%;
+  width: 6px;
+  position: absolute;
+  bottom: 0;
+  right: -7px;
+
+  body[data-theme="dark"] & {
+    background: linear-gradient(to right, #707070,rgba(255,0,0,0));
+  }
+}
 </style>
 <script>
 import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
 import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
 import itfTableGroup from './TableGroup.vue';
+import itfTableHeader from './TableHeader.vue';
 
 export default @Component({
   name: 'itfTable2',
   components: {
+    itfTableHeader,
     itfButton,
     itfIcon,
     itfTableGroup
@@ -43,6 +81,33 @@ export default @Component({
 class itfTable2 extends Vue {
   @Prop({ required: true, type: Array }) columns;
   @Prop({ required: true, type: Array }) rows;
+  @Prop({ type: Number, default: 40 }) rowHeight;
+  @Prop({ type: String, default: null }) groupBy;
   @Prop(Boolean) addNewRows;
+  @Prop(Boolean) columnSorting;
+  @Prop(Boolean) columnResizing;
+  @Prop(Boolean) showAddColumn;
+  @Prop(Boolean) showGrouping;
+  @Prop(Boolean) showSummary;
+
+  get groups() {
+    const { groupBy, rows } = this;
+    if (!groupBy) {
+      return [];
+    }
+    const groups = rows.reduce((acc, row) => {
+      const group = row[groupBy];
+      if (!acc[group]) {
+        acc[group] = [];
+      }
+      acc[group].push(row);
+      return acc;
+    }, {});
+    return Object.entries(groups).map(([name, rows]) => ({ name, rows }));
+  }
+
+  onColumnsUpdate(columns) {
+    this.$emit('update:columns', columns);
+  }
 }
 </script>

package/src/components/table/TableBody.vue

@@ -4,7 +4,7 @@
     class="scroller"
     page-mode
     :items="rows"
-    :item-size="36"
+    :item-size="rowHeight"
     key-field="Id"
     v-slot="{ item }"
     direction="vertical"
@@ -22,7 +22,7 @@
             </a>
           </div>
         </div>
-        <div class="indicator sticky tw-border-gray dark:tw-border-gray-invert tw-border-r tw-bg-white dark:tw-bg-white-invert tw-border-b ">
+        <div class="indicator sticky">
           <div class="fill on-rest table-view-row-count">
             <span>{{ item.Id }}</span>
           </div>
@@ -37,17 +37,23 @@
             </div>
           </div>
         </div>
-        <div accept-group="items" class="hbox table-item-inner">
-          <div v-for="(column, n) in columns" :data-column="n" :style="`width: ${column.width}px`" class="table-view-item-value d-flex position-relative h-100 align-items-stretch px-2">
-            <slot :name="`column.${column.name}`" :item="item" :column="column">
-              <template v-if="editTypes[column.Type]">
-                <property-inline-edit :value="item[column.field]" :field="column" editable focused />
-              </template>
-              <div v-else v-text="item.Name" />
-            </slot>
-          </div>
-
-          <div class="table-view-item-value extra"></div>
+        <div accept-group="items" class="table-item-inner">
+          <template v-for="(column, n) in visibleAttributes">
+            <div
+              v-if="column.visible !== false"
+              :data-column="n"
+              :style="`width: ${column.width}px; left: ${column.left}px;`"
+              :class="{'sticky': column.pinned, 'last-sticky-column': n === lastPinnedIndex}"
+              class="table-view-item-value d-flex h-100 align-items-stretch px-2">
+              <slot :name="`column.${column.name}`" :item="item" :column="column">
+                <template v-if="editTypes[column.Type]">
+                  <property-inline-edit :value="item[column.field]" :field="column" editable focused />
+                </template>
+                <div v-else v-text="item.Name" />
+              </slot>
+            </div>
+          </template>
+          <div v-if="showAddColumn" class="table-view-item-value extra bg-light"></div>
           <div class="boundary top"></div>
           <div class="boundary right"></div>
           <div class="boundary bottom"></div>
@@ -63,7 +69,6 @@
   height: 100%;
   align-items: stretch;
 }
-
 .table-item-inner {
   height: 100%;
   flex-grow: 1;
@@ -74,24 +79,49 @@
 
 .table-view-item-value {
   text-overflow: ellipsis;
-  background-color: rgb(255 255 255 / 1);
-  border-right: 1px solid rgb(238 238 238 / 1);
-  border-bottom: 1px solid rgb(238 238 238 / 1);
+  background-color: var(--bs-body-bg);
+  border-right: 1px solid var(--bs-border-color);
+  border-bottom: 1px solid var(--bs-border-color);
   align-items: stretch;
   height: 100%;
   display: flex;
   position: relative;
   line-height: 35px;
-
+  min-width: var(--table-min-width);
+
+  &.highlight-drop-column {
+    position: relative;
+
+    &:after {
+      content: "";
+      height: 100%;
+      z-index: 100;
+      width: 2px;
+      background: #47beff;
+      margin-left: -1px;
+      position: absolute;
+      left: 0;
+    }
+    &.right:after {
+      left: auto;
+      right: 0;
+    }
+  }
   &:hover {
-    background-color: rgb(250 251 252 / 1);
+    background-color: var(--itf-table-hover-bg);
+  }
+
+  &.sticky {
+    z-index: 4;
+    position: -webkit-sticky;
+    position: sticky;
   }
 }
 
 .table-item-inner .extra {
   height: 100%;
   flex-grow: 1;
-  border-color: rgb(238 238 238 / 1);
+  border-color: var(--bs-border-color);
 }
 
 .indicator {
@@ -101,12 +131,13 @@
   z-index: 4;
   position: -webkit-sticky;
   position: sticky;
-  background-color: rgb(255 255 255 / 1);
-  border-right: 1px solid rgb(238 238 238 / 1);
-  border-bottom: 1px solid rgb(238 238 238 / 1);
+  background-color: var(--bs-body-bg);
+  border-right: 1px solid var(--bs-border-color);
+  border-bottom: 1px solid var(--bs-border-color);
   display: flex;
   align-items: center;
   justify-content: center;
+  min-width: var(--table-min-width);
 }
 
 .table-item-inner .boundary {
@@ -141,7 +172,7 @@
   bottom: 0;
 }
 .table-small-row .table-view-item {
-  height: 36px;
+  height: var(--table-row-height);
 }
 .vue-recycle-scroller {
   position: relative;
@@ -164,8 +195,9 @@
 <script>
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import { RecycleScroller } from 'vue-virtual-scroller'
+import sortBy from 'lodash/sortBy';
 import PropertyInlineEdit from '../customize/PropertyInlineEdit.vue';
-import { INLINE_TYPES } from '@/components/customize/constants';
+import { INLINE_TYPES } from '../customize/constants';
 
 export default @Component({
   name: 'itfTableBody',
@@ -177,9 +209,19 @@ export default @Component({
 class itfTableBody extends Vue {
   @Prop() columns;
   @Prop() rows;
+  @Prop(Boolean) showAddColumn;
+  @Prop({ type: Number, default: 40 }) rowHeight;
 
   editTypes = {};
 
+  get visibleAttributes() {
+    return this.columns;
+  }
+
+  get lastPinnedIndex() {
+    return this.columns.findIndex((column) => column.lastPinned);
+  }
+
   mounted() {
     for (const { Type } of INLINE_TYPES) {
       this.editTypes[Type] = true;