From c045f4f2490912eb09cc8bc8754a35e6f9def28f Mon Sep 17 00:00:00 2001
From: "m.novikov" <m.novikov@qvant.ru>
Date: Mon, 21 Dec 2020 19:32:58 +0300
Subject: [PATCH 01/12] fix when cell larger than maxWidth prop

---
 .../QTable/src/components/QTableRow/index.vue         | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/qComponents/QTable/src/components/QTableRow/index.vue b/src/qComponents/QTable/src/components/QTableRow/index.vue
index e0bc7e8b..266ce912 100644
--- a/src/qComponents/QTable/src/components/QTableRow/index.vue
+++ b/src/qComponents/QTable/src/components/QTableRow/index.vue
@@ -24,6 +24,7 @@
     </td>
     <td
       v-for="(column, columnIndex) in columns"
+      :ref="`td${columnIndex}`"
       :key="column.key"
       :class="getFixedColumnClass(column.key)"
       :style="getCellStyle(column.key, columnIndex, column.width)"
@@ -31,7 +32,7 @@
     >
       <div
         class="q-table__cell-wrapper"
-        :style="getCellWrapperStyle(column)"
+        :style="getCellWrapperStyle(column, columnIndex)"
       >
         <div
           v-if="!selectable && canRowExpand(columnIndex)"
@@ -238,13 +239,17 @@ export default {
         paddingLeft: `${Number(paddingLeft) + this.indent}px`
       };
     },
-    getCellWrapperStyle({ width, minWidth, maxWidth }) {
+    getCellWrapperStyle({ width, minWidth, maxWidth }, columnIndex) {
       return {
         width: width ? `${width}px` : '',
         minWidth: minWidth ? `${minWidth}px` : '',
-        maxWidth: maxWidth ? `${maxWidth}px` : ''
+        maxWidth: maxWidth ? this.getCellMaxWidth(maxWidth, columnIndex) : ''
       };
     },
+    getCellMaxWidth(maxWidth, columnIndex) {
+      const tdWidth = this.$refs[`td${columnIndex}`]?.[0].offsetWidth ?? 0;
+      return Math.max(tdWidth, maxWidth);
+    },
     getCellStyle(key, columnIndex, width) {
       const style = {};
 

From 09929a07f7df7258db1bfdca26cc7079c749f01c Mon Sep 17 00:00:00 2001
From: "m.novikov" <m.novikov@qvant.ru>
Date: Thu, 24 Dec 2020 17:49:33 +0300
Subject: [PATCH 02/12] add fixed table

---
 src/qComponents/QTable/src/QTable.vue         | 57 ++++++-----
 .../QTable/src/components/QTableRow/index.vue | 99 +++++++------------
 src/qComponents/QTable/src/q-table.scss       |  7 +-
 3 files changed, 70 insertions(+), 93 deletions(-)

diff --git a/src/qComponents/QTable/src/QTable.vue b/src/qComponents/QTable/src/QTable.vue
index 3405f90b..5d5b85b3 100644
--- a/src/qComponents/QTable/src/QTable.vue
+++ b/src/qComponents/QTable/src/QTable.vue
@@ -3,7 +3,7 @@
     <div
       v-if="isLeftShadowShown"
       class="q-table__column-shadow q-table__column-shadow_left"
-      :style="getCellWidth({ key: 'shadow' })"
+      :style="getColWidth({ key: 'shadow' })"
     />
 
     <div
@@ -47,10 +47,23 @@
             v-if="rows.length"
             ref="QTable"
             class="q-table__table"
+            :style="{ 'table-layout': fixedLayout && 'fixed' }"
             :class="tableClasses"
             cellspacing="0"
             cellpadding="0"
           >
+            <colgroup v-if="fixedLayout">
+              <col
+                v-if="selectable"
+                width="64"
+              />
+              <col
+                v-for="(column, index) in columns"
+                :key="index"
+                :style="getColWidth(column)"
+              />
+            </colgroup>
+
             <thead>
               <tr>
                 <th
@@ -69,7 +82,6 @@
                 <th
                   v-for="(column, index) in columns"
                   :key="index"
-                  :style="getCellWidth(column)"
                   :class="getCellClass(column)"
                   class="q-table__header-cell"
                   @click="handleHeaderClick(column)"
@@ -168,7 +180,6 @@
                 <td
                   v-for="(column, index) in columns"
                   :key="index"
-                  :style="getCellWidth(column)"
                   :class="getCellClass(column)"
                   class="q-table__cell q-table__total-cell"
                 >
@@ -199,7 +210,6 @@
                   :columns="columns"
                   :class="levelClass(row.indent)"
                   :fixed-column="fixedColumn"
-                  :fixed-column-width="fixedColumnWidth"
                   :expandable="expandable"
                   :indent-size="indentSize"
                   :indent="row.indent"
@@ -269,6 +279,20 @@ export default {
   },
 
   props: {
+    /**
+     * Whether width of columns automatically fits its container
+     */
+    fixedLayout: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Default columns width, required `fixedLayout: true`
+     */
+    defaultColWidth: {
+      type: String,
+      default: '150px'
+    },
     isLoading: {
       type: Boolean,
       default: false
@@ -329,11 +353,11 @@ export default {
       default: 'children'
     },
     /**
-     * Width of fixed column
+     * Width of fixed column. If `fixedLayout: true`, width is equal to `defaultColWidth` prop.
      */
     fixedColumnWidth: {
       type: Number,
-      default: 200
+      default: null
     },
     expandable: {
       type: Boolean,
@@ -784,25 +808,14 @@ export default {
       return sortableClass;
     },
 
-    getCellWidth(column) {
-      const style = {};
-
-      if (column.width) {
-        style.width = `${column.width}px`;
-      }
-
-      if (column.minWidth) {
-        style.minWidth = `${column.minWidth}px`;
-      }
-      if (column.maxWidth) {
-        style.maxWidth = `${column.maxWidth}px`;
-      }
+    getColWidth(column) {
       if (this.fixedColumn !== column.key && column.key !== 'shadow')
-        return style;
+        return {
+          width: column.width ? `${column.width}px` : this.defaultColWidth
+        };
 
       return {
-        minWidth: `${this.fixedColumnWidth}px`,
-        maxWidth: `${this.fixedColumnWidth}px`
+        width: `${this.fixedColumnWidth ?? this.defaultColWidth}px`
       };
     },
 
diff --git a/src/qComponents/QTable/src/components/QTableRow/index.vue b/src/qComponents/QTable/src/components/QTableRow/index.vue
index 266ce912..2177fe69 100644
--- a/src/qComponents/QTable/src/components/QTableRow/index.vue
+++ b/src/qComponents/QTable/src/components/QTableRow/index.vue
@@ -24,54 +24,48 @@
     </td>
     <td
       v-for="(column, columnIndex) in columns"
-      :ref="`td${columnIndex}`"
       :key="column.key"
       :class="getFixedColumnClass(column.key)"
-      :style="getCellStyle(column.key, columnIndex, column.width)"
+      :style="getCellStyle(column.key, columnIndex)"
       class="q-table__cell"
     >
       <div
-        class="q-table__cell-wrapper"
-        :style="getCellWrapperStyle(column, columnIndex)"
+        v-if="!selectable && canRowExpand(columnIndex)"
+        class="q-table__expand-arrow"
+        :class="openedTreeClass"
+        @click="handleExpandClick"
       >
-        <div
-          v-if="!selectable && canRowExpand(columnIndex)"
-          class="q-table__expand-arrow"
-          :class="openedTreeClass"
-          @click="handleExpandClick"
-        >
-          <span class="q-icon-triangle-right" />
-        </div>
+        <span class="q-icon-triangle-right" />
+      </div>
 
-        <div
-          v-if="column.customCellClass"
-          :class="column.customCellClass"
-        >
-          <slot
-            :row-data="updateRow(row, columnIndex, column.key, column)"
-            name="row"
-          />
+      <div
+        v-if="column.customCellClass"
+        :class="column.customCellClass"
+      >
+        <slot
+          :row-data="updateRow(row, columnIndex, column.key, column)"
+          name="row"
+        />
 
-          <slot
-            v-if="checkLoader(columnIndex)"
-            :row-data="row"
-            name="loader"
-          />
-        </div>
+        <slot
+          v-if="checkLoader(columnIndex)"
+          :row-data="row"
+          name="loader"
+        />
+      </div>
 
-        <template v-else>
-          <slot
-            :row-data="updateRow(row, columnIndex, column.key, column)"
-            name="row"
-          />
+      <template v-else>
+        <slot
+          :row-data="updateRow(row, columnIndex, column.key, column)"
+          name="row"
+        />
 
-          <slot
-            v-if="checkLoader(columnIndex)"
-            :row-data="row"
-            name="loader"
-          />
-        </template>
-      </div>
+        <slot
+          v-if="checkLoader(columnIndex)"
+          :row-data="row"
+          name="loader"
+        />
+      </template>
     </td>
   </tr>
 </template>
@@ -103,10 +97,6 @@ export default {
       type: String,
       default: ''
     },
-    fixedColumnWidth: {
-      type: Number,
-      default: 250
-    },
     expandable: {
       type: Boolean,
       default: false
@@ -239,24 +229,9 @@ export default {
         paddingLeft: `${Number(paddingLeft) + this.indent}px`
       };
     },
-    getCellWrapperStyle({ width, minWidth, maxWidth }, columnIndex) {
-      return {
-        width: width ? `${width}px` : '',
-        minWidth: minWidth ? `${minWidth}px` : '',
-        maxWidth: maxWidth ? this.getCellMaxWidth(maxWidth, columnIndex) : ''
-      };
-    },
-    getCellMaxWidth(maxWidth, columnIndex) {
-      const tdWidth = this.$refs[`td${columnIndex}`]?.[0].offsetWidth ?? 0;
-      return Math.max(tdWidth, maxWidth);
-    },
-    getCellStyle(key, columnIndex, width) {
+    getCellStyle(key, columnIndex) {
       const style = {};
 
-      if (width) {
-        style.width = `${width}px`;
-      }
-
       if (
         columnIndex === 0 &&
         !this.selectable &&
@@ -274,13 +249,7 @@ export default {
         }
       }
 
-      if (this.fixedColumn !== key && key !== 'shadow') return style;
-
-      return {
-        ...style,
-        minWidth: `${this.fixedColumnWidth}px`,
-        maxWidth: `${this.fixedColumnWidth}px`
-      };
+      return style;
     },
     getFixedColumnClass(key) {
       return this.fixedColumn && this.fixedColumn === key
diff --git a/src/qComponents/QTable/src/q-table.scss b/src/qComponents/QTable/src/q-table.scss
index db7dd09e..ca20c4bf 100644
--- a/src/qComponents/QTable/src/q-table.scss
+++ b/src/qComponents/QTable/src/q-table.scss
@@ -271,6 +271,7 @@
   }
 
   &__cell {
+    height: 64px;
     padding: 12px 24px;
     overflow: hidden;
     font-weight: var(--font-weight-base);
@@ -278,12 +279,6 @@
     background-color: var(--color-tertiary-gray-light);
     box-shadow: var(--custom-box-shadow);
 
-    &-wrapper {
-      display: flex;
-      align-items: center;
-      min-height: 40px;
-    }
-
     &:first-child {
       padding-left: 16px;
     }

From 7cfb13aa62c13dea2d025d69ca2976a1aaaa64ff Mon Sep 17 00:00:00 2001
From: "m.novikov" <m.novikov@qvant.ru>
Date: Thu, 24 Dec 2020 18:51:25 +0300
Subject: [PATCH 03/12] refactoring

---
 src/qComponents/QTable/src/QTable.vue   | 93 ++++++++++++-------------
 src/qComponents/QTable/src/q-table.scss |  4 ++
 stories/components/QTable.stories.js    | 10 ++-
 3 files changed, 54 insertions(+), 53 deletions(-)

diff --git a/src/qComponents/QTable/src/QTable.vue b/src/qComponents/QTable/src/QTable.vue
index 5d5b85b3..c5bbf7b2 100644
--- a/src/qComponents/QTable/src/QTable.vue
+++ b/src/qComponents/QTable/src/QTable.vue
@@ -47,7 +47,6 @@
             v-if="rows.length"
             ref="QTable"
             class="q-table__table"
-            :style="{ 'table-layout': fixedLayout && 'fixed' }"
             :class="tableClasses"
             cellspacing="0"
             cellpadding="0"
@@ -201,47 +200,45 @@
                 </td>
               </tr>
 
-              <template>
-                <row-hoc
-                  v-for="(row, rowIndex) in computedRows"
-                  :key="rowIndex"
-                  :row="row"
-                  :row-index="rowIndex"
-                  :columns="columns"
-                  :class="levelClass(row.indent)"
-                  :fixed-column="fixedColumn"
-                  :expandable="expandable"
-                  :indent-size="indentSize"
-                  :indent="row.indent"
-                  :children-key="childrenKey"
-                  :pages-in-expand="pagesInExpand"
-                  :custom-row-class="customRowClass"
-                  :custom-row-style="customRowStyle"
-                  :checked-rows="checkedRows"
-                  :selectable="selectable"
-                  :row-click="$listeners['row-click'] && handleRowClick"
-                  @expand-click="handleExpandClick"
-                  @check="handleRowCheck"
-                >
-                  <template #row="{ rowData }">
-                    <slot
-                      v-if="$scopedSlots.row"
-                      name="row"
-                      :row="rowData"
-                    />
-
-                    <slot
-                      v-else-if="findSlotForRow(rowData.$key)"
-                      :name="findSlotForRow(rowData.$key)"
-                      :row="rowData"
-                    />
-
-                    <template v-else>
-                      {{ rowData.value }}
-                    </template>
+              <row-hoc
+                v-for="(row, rowIndex) in computedRows"
+                :key="rowIndex"
+                :row="row"
+                :row-index="rowIndex"
+                :columns="columns"
+                :class="levelClass(row.indent)"
+                :fixed-column="fixedColumn"
+                :expandable="expandable"
+                :indent-size="indentSize"
+                :indent="row.indent"
+                :children-key="childrenKey"
+                :pages-in-expand="pagesInExpand"
+                :custom-row-class="customRowClass"
+                :custom-row-style="customRowStyle"
+                :checked-rows="checkedRows"
+                :selectable="selectable"
+                :row-click="$listeners['row-click'] && handleRowClick"
+                @expand-click="handleExpandClick"
+                @check="handleRowCheck"
+              >
+                <template #row="{ rowData }">
+                  <slot
+                    v-if="$scopedSlots.row"
+                    name="row"
+                    :row="rowData"
+                  />
+
+                  <slot
+                    v-else-if="findSlotForRow(rowData.$key)"
+                    :name="findSlotForRow(rowData.$key)"
+                    :row="rowData"
+                  />
+
+                  <template v-else>
+                    {{ rowData.value }}
                   </template>
-                </row-hoc>
-              </template>
+                </template>
+              </row-hoc>
             </tbody>
           </table>
 
@@ -280,7 +277,7 @@ export default {
 
   props: {
     /**
-     * Whether width of columns automatically fits its container
+     * Whether to spread columns proportionally to the table\'s width
      */
     fixedLayout: {
       type: Boolean,
@@ -299,7 +296,8 @@ export default {
     },
     /**
      * Array of objects, each object must contain `key` and `value`.
-     * Can be extended by `sortable`, `slots` and `type` (if `isSeparated` flag is `true`)
+     * Can be extended by `sortable`, `slots`, `width` (works with `fixedLayout: true`)
+     * and `type` (if `isSeparated` flag is `true`)
      */
     columns: {
       type: Array,
@@ -356,7 +354,7 @@ export default {
      * Width of fixed column. If `fixedLayout: true`, width is equal to `defaultColWidth` prop.
      */
     fixedColumnWidth: {
-      type: Number,
+      type: String,
       default: null
     },
     expandable: {
@@ -461,7 +459,8 @@ export default {
         'q-table__selectable': this.selectable,
         'q-table__separated': this.isSeparated,
         'q-table__grid': this.grid,
-        'q-table__fixed-cols': this.fixedColumn.length
+        'q-table__fixed-cols': this.fixedColumn.length,
+        'q-table__fixed': this.fixedLayout
       };
     },
 
@@ -811,11 +810,11 @@ export default {
     getColWidth(column) {
       if (this.fixedColumn !== column.key && column.key !== 'shadow')
         return {
-          width: column.width ? `${column.width}px` : this.defaultColWidth
+          width: column.width ?? this.defaultColWidth
         };
 
       return {
-        width: `${this.fixedColumnWidth ?? this.defaultColWidth}px`
+        width: this.fixedColumnWidth ?? this.defaultColWidth
       };
     },
 
diff --git a/src/qComponents/QTable/src/q-table.scss b/src/qComponents/QTable/src/q-table.scss
index ca20c4bf..c8e5d791 100644
--- a/src/qComponents/QTable/src/q-table.scss
+++ b/src/qComponents/QTable/src/q-table.scss
@@ -13,6 +13,10 @@
   --custom-box-shadow: -1px -1px 3px rgba(var(--color-rgb-white), 0.25),
     2px 1px 3px rgba(var(--color-rgb-blue), 0.4);
 
+  &__fixed {
+    table-layout: fixed;
+  }
+
   &__expand-arrow {
     display: inline-block;
     font-size: 23px;
diff --git a/stories/components/QTable.stories.js b/stories/components/QTable.stories.js
index a3bbe641..5d226845 100644
--- a/stories/components/QTable.stories.js
+++ b/stories/components/QTable.stories.js
@@ -38,7 +38,7 @@ const defaultArgs = {
     },
     {
       left1: '4',
-      left2: '5',
+      left2: '5 very very very very long string',
       left3: '6',
       right1: '4',
       right2: '5',
@@ -130,7 +130,7 @@ export const QTableStory = (_, { argTypes }) => ({
           key: 'right1',
           value: 'Right 1',
           type: 'right',
-          percentable: true,
+          percent: true,
           sortable: true,
           slots: {
             header: 'customHeader',
@@ -140,14 +140,12 @@ export const QTableStory = (_, { argTypes }) => ({
         {
           key: 'right2',
           value: 'Right 2',
-          type: 'right',
-          percentable: true
+          type: 'right'
         },
         {
           key: 'right3',
           value: 'Right 3',
-          type: 'right',
-          percentable: true
+          type: 'right'
         }
       ]
     };

From 77e53e03f1c3c6c0201df0991755df7c23c1910b Mon Sep 17 00:00:00 2001
From: "m.novikov" <m.novikov@qvant.ru>
Date: Fri, 25 Dec 2020 10:46:26 +0300
Subject: [PATCH 04/12] change tables height on window resize

---
 src/qComponents/QTable/src/QTable.vue | 22 ++++++++++++++++++----
 stories/components/QTable.stories.js  | 12 ++++++------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/qComponents/QTable/src/QTable.vue b/src/qComponents/QTable/src/QTable.vue
index c5bbf7b2..f7110da2 100644
--- a/src/qComponents/QTable/src/QTable.vue
+++ b/src/qComponents/QTable/src/QTable.vue
@@ -556,11 +556,17 @@ export default {
   },
 
   updated() {
-    if (this.isLoading || !this.isLoadingAnimationComplete) return;
+    this.changeWrapperHeight();
+  },
+
+  created() {
+    window.addEventListener('resize', this.changeWrapperHeight, {
+      passive: true
+    });
+  },
 
-    this.loaderWrapperHeight = this.$refs.QTable
-      ? this.$refs.QTable.clientHeight + shadowDropOffset
-      : MIN_BLANK_TABLE_HEIGHT;
+  destroyed() {
+    window.removeEventListener('resize', this.changeWrapperHeight);
   },
 
   mounted() {
@@ -591,6 +597,14 @@ export default {
   },
 
   methods: {
+    changeWrapperHeight() {
+      if (this.isLoading || !this.isLoadingAnimationComplete) return;
+
+      this.loaderWrapperHeight = this.$refs.QTable
+        ? this.$refs.QTable.clientHeight + shadowDropOffset
+        : MIN_BLANK_TABLE_HEIGHT;
+    },
+
     updateChildrenRows(childs, row, updatedRow) {
       return childs.map(child => {
         const updatedChildRow = {
diff --git a/stories/components/QTable.stories.js b/stories/components/QTable.stories.js
index 5d226845..10f9dca2 100644
--- a/stories/components/QTable.stories.js
+++ b/stories/components/QTable.stories.js
@@ -96,7 +96,7 @@ export const QTableStory = (_, { argTypes }) => ({
         {
           action: 'action1',
           name: 'Action One',
-          icon: 'q-icon-percent'
+          icon: 'q-icon-iconClass'
         },
         {
           action: 'action2',
@@ -130,7 +130,7 @@ export const QTableStory = (_, { argTypes }) => ({
           key: 'right1',
           value: 'Right 1',
           type: 'right',
-          percent: true,
+          iconClass: true,
           sortable: true,
           slots: {
             header: 'customHeader',
@@ -162,7 +162,7 @@ export const QTableStory = (_, { argTypes }) => ({
       if (a === 'action1') {
         const cols = [...this.columns];
         const currentCol = cols.find(column => key === column.key);
-        currentCol.percent = !currentCol.percent;
+        currentCol.iconClass = !currentCol.iconClass;
         this.columns = cols;
       }
 
@@ -185,8 +185,8 @@ export const QTableStory = (_, { argTypes }) => ({
       v-bind="$props"
     >
       <template #customHeader="{ column }">
-        <template v-if="column.percent">
-          <span class="q-icon-percent" />
+        <template v-if="column.iconClass">
+          <span class="q-icon-iconClass" />
         </template>
         <span class="text" style="margin-left:8px">{{ column.value }}</span>
         <q-context-menu
@@ -197,7 +197,7 @@ export const QTableStory = (_, { argTypes }) => ({
 
       <template #customRow="{ row }">
         {{ row.value }}
-        <span v-if="row.column.percent">
+        <span v-if="row.column.iconClass">
           %
         </span>
       </template>

From 18c02ae3b77cda7e70fda7da48979de5f3b70b69 Mon Sep 17 00:00:00 2001
From: "m.novikov" <m.novikov@qvant.ru>
Date: Fri, 25 Dec 2020 11:05:33 +0300
Subject: [PATCH 05/12] refactoring

---
 stories/components/QTable.stories.js | 51 +++-------------------------
 1 file changed, 4 insertions(+), 47 deletions(-)

diff --git a/stories/components/QTable.stories.js b/stories/components/QTable.stories.js
index 10f9dca2..dcd5e7fd 100644
--- a/stories/components/QTable.stories.js
+++ b/stories/components/QTable.stories.js
@@ -92,23 +92,6 @@ export const QTableStory = (_, { argTypes }) => ({
   props: Object.keys(argTypes).filter(arg => arg !== 'columns'),
   data() {
     return {
-      contextMenu: [
-        {
-          action: 'action1',
-          name: 'Action One',
-          icon: 'q-icon-iconClass'
-        },
-        {
-          action: 'action2',
-          name: 'Action Two',
-          icon: 'q-icon-arrow-down'
-        },
-        {
-          action: 'action3',
-          name: 'Action Three',
-          icon: 'q-icon-arrow-up'
-        }
-      ],
       columns: [
         {
           key: 'left1',
@@ -124,13 +107,13 @@ export const QTableStory = (_, { argTypes }) => ({
         {
           key: 'left3',
           value: 'Left 3',
-          type: 'left'
+          type: 'left',
+          sortable: true
         },
         {
           key: 'right1',
           value: 'Right 1',
           type: 'right',
-          iconClass: true,
           sortable: true,
           slots: {
             header: 'customHeader',
@@ -157,22 +140,6 @@ export const QTableStory = (_, { argTypes }) => ({
     changeColumnsOrder({ oldPositionIndex, newPositionIndex }) {
       const cols = this.columns;
       cols.splice(newPositionIndex, 0, cols.splice(oldPositionIndex, 1)[0]);
-    },
-    handleAction(a, key) {
-      if (a === 'action1') {
-        const cols = [...this.columns];
-        const currentCol = cols.find(column => key === column.key);
-        currentCol.iconClass = !currentCol.iconClass;
-        this.columns = cols;
-      }
-
-      if (a === 'action2') {
-        this.$refs.table.setSort(key, 'descending');
-      }
-
-      if (a === 'action3') {
-        this.$refs.table.setSort(key, 'ascending');
-      }
     }
   },
   template: `
@@ -185,21 +152,11 @@ export const QTableStory = (_, { argTypes }) => ({
       v-bind="$props"
     >
       <template #customHeader="{ column }">
-        <template v-if="column.iconClass">
-          <span class="q-icon-iconClass" />
-        </template>
-        <span class="text" style="margin-left:8px">{{ column.value }}</span>
-        <q-context-menu
-          :menu-items="contextMenu"
-          @action="handleAction($event, column.key)"
-        />
+      {{ column.value }} custom
       </template>
 
       <template #customRow="{ row }">
-        {{ row.value }}
-        <span v-if="row.column.iconClass">
-          %
-        </span>
+        {{ row.value }} custom
       </template>
     </q-table>
   `

From 38673c8ff4bd98b3eddd907ab6e58c70f9a065c0 Mon Sep 17 00:00:00 2001
From: "m.novikov" <m.novikov@qvant.ru>
Date: Fri, 25 Dec 2020 14:26:45 +0300
Subject: [PATCH 06/12] add ability to set colors to delimited cols

---
 src/qComponents/QTable/src/QTable.vue         | 136 +++++++++---------
 .../QTable/src/components/QTableRow/index.vue |   5 +-
 src/qComponents/QTable/src/q-table.scss       |  28 +---
 stories/components/QTable.stories.js          |  20 ++-
 4 files changed, 90 insertions(+), 99 deletions(-)

diff --git a/src/qComponents/QTable/src/QTable.vue b/src/qComponents/QTable/src/QTable.vue
index f7110da2..15367480 100644
--- a/src/qComponents/QTable/src/QTable.vue
+++ b/src/qComponents/QTable/src/QTable.vue
@@ -81,15 +81,45 @@
                 <th
                   v-for="(column, index) in columns"
                   :key="index"
-                  :class="getCellClass(column)"
+                  :class="getCellClasses(column)"
+                  :style="getHeaderCellStyle(column.group)"
                   class="q-table__header-cell"
-                  @click="handleHeaderClick(column)"
                 >
                   <div class="q-table__header-cell-wrapper">
+                    <div
+                      class="q-table__header-cell-content"
+                      @click="handleHeaderClick(column)"
+                    >
+                      <slot
+                        v-if="$scopedSlots.header"
+                        name="header"
+                        :column="updateItem(column, index, column.key)"
+                      />
+
+                      <slot
+                        v-else-if="column.slots && column.slots.header"
+                        :name="column.slots.header"
+                        :column="updateItem(column, index, column.key)"
+                      />
+
+                      <template v-else>
+                        {{ column.value }}
+                      </template>
+
+                      <span
+                        v-if="column.sortable"
+                        class="q-table__sort-arrow"
+                        :class="{
+                          'q-icon-arrow-up': sort.direction !== 'descending',
+                          'q-icon-arrow-down': sort.direction === 'descending'
+                        }"
+                      />
+                    </div>
+
                     <template v-if="draggable">
                       <div
                         class="drop-handler dnd-before"
-                        :class="getHandlerClass(column.type)"
+                        :class="getHandlerClass(column.group)"
                         :dndidx="index"
                       />
 
@@ -100,7 +130,9 @@
                         separator-selector=".dnd-separator"
                         target-selector=".q-table__header-cell"
                         limit-box-selector=".q-table__table"
-                        :drop-zone-selector="`.${getHandlerClass(column.type)}`"
+                        :drop-zone-selector="
+                          `.${getHandlerClass(column.group)}`
+                        "
                         :is-first-blocked="selectable"
                         @change-order="changeColumnsOrder"
                       >
@@ -114,46 +146,10 @@
 
                       <div
                         class="drop-handler dnd-after"
-                        :class="getHandlerClass(column.type)"
+                        :class="getHandlerClass(column.group)"
                         :dndidx="index + 1"
                       />
                     </template>
-
-                    <div class="q-table__header-cell-content">
-                      <span
-                        v-if="column.sortable && draggable"
-                        class="q-table__sort-arrow"
-                        :class="{
-                          'q-icon-arrow-up': sort.direction !== 'descending',
-                          'q-icon-arrow-down': sort.direction === 'descending'
-                        }"
-                      />
-
-                      <slot
-                        v-if="$scopedSlots.header"
-                        name="header"
-                        :column="updateItem(column, index, column.key)"
-                      />
-
-                      <slot
-                        v-else-if="column.slots && column.slots.header"
-                        :name="column.slots.header"
-                        :column="updateItem(column, index, column.key)"
-                      />
-
-                      <template v-else>
-                        {{ column.value }}
-                      </template>
-
-                      <span
-                        v-if="column.sortable && !draggable"
-                        class="q-table__sort-arrow"
-                        :class="{
-                          'q-icon-arrow-up': sort.direction !== 'descending',
-                          'q-icon-arrow-down': sort.direction === 'descending'
-                        }"
-                      />
-                    </div>
                   </div>
                 </th>
               </tr>
@@ -179,7 +175,7 @@
                 <td
                   v-for="(column, index) in columns"
                   :key="index"
-                  :class="getCellClass(column)"
+                  :class="getCellClasses(column)"
                   class="q-table__cell q-table__total-cell"
                 >
                   <slot
@@ -288,7 +284,7 @@ export default {
      */
     defaultColWidth: {
       type: String,
-      default: '150px'
+      default: '200px'
     },
     isLoading: {
       type: Boolean,
@@ -318,19 +314,18 @@ export default {
       default: false
     },
     /**
-     * Whether delimit table by types, required `separatorKeys`
+     * Whether delimit table by types, required `group` prop in columns
      */
     isSeparated: {
       type: Boolean,
       default: false
     },
     /**
-     * Column's keys for delimeter, first for left part and second for right part
+     * Object with `key: color` for each of separated groups
      */
-    separatorKeys: {
-      type: Array,
-      default: null,
-      validate: val => val.length === 2
+    groupsColors: {
+      type: Object,
+      default: null
     },
     /**
      * Object, `[column.key]: value` pair, not all are required
@@ -629,12 +624,12 @@ export default {
     },
 
     handleHeaderClick({ key, sortable }) {
-      if (this.draggable || !sortable) return;
+      if (!sortable) return;
       this.setSort(key);
     },
 
-    getHandlerClass(type) {
-      return `${this.isSeparated ? type : 'column'}-handler`;
+    getHandlerClass(group) {
+      return `${this.isSeparated ? group : 'column'}-handler`;
     },
 
     findSlotForRow(columnKey) {
@@ -660,8 +655,6 @@ export default {
     },
 
     setSort(key, direction) {
-      if (!direction && this.draggable) return;
-
       if (direction) {
         this.sort = {
           key,
@@ -787,21 +780,34 @@ export default {
       this.scrolled = target.scrollLeft;
     },
 
-    getCellClass(column = {}) {
-      const sortableClass = this.getSortableClass(column);
-      let separatedClass = '';
+    getHeaderCellStyle(group) {
+      if (!this.isSeparated || !group) return {};
 
-      if (this.isSeparated && this.separatorKeys?.length > 1) {
-        separatedClass =
-          column?.type === this.separatorKeys[0]
-            ? 'q-table__header-cell_left'
-            : 'q-table__header-cell_right';
+      return {
+        borderColor: this.groupsColors?.[group] ?? ''
+      };
+    },
+
+    getCellClasses(column = {}) {
+      const classes = [this.getSortableClass(column)];
+
+      if (this.isSeparated) {
+        if (!column.group)
+          console.warn(
+            `[QTable] Column ${column.key} must have \`group\` prop`
+          );
+        else classes.push(`q-table__header-cell_${column.group}`);
+      }
+
+      if (column.align) {
+        classes.push(`q-table__header-cell_align-${column.align}`);
       }
 
-      if (this.fixedColumn.length && this.fixedColumn === column.key)
-        return `q-table__cell_fixed ${sortableClass} ${separatedClass}`;
+      if (this.fixedColumn.length && this.fixedColumn === column.key) {
+        classes.push('q-table__cell_fixed');
+      }
 
-      return `${sortableClass} ${separatedClass}`;
+      return classes;
     },
 
     getSortableClass(column) {
diff --git a/src/qComponents/QTable/src/components/QTableRow/index.vue b/src/qComponents/QTable/src/components/QTableRow/index.vue
index 2177fe69..ba9ffa7a 100644
--- a/src/qComponents/QTable/src/components/QTableRow/index.vue
+++ b/src/qComponents/QTable/src/components/QTableRow/index.vue
@@ -26,7 +26,8 @@
       v-for="(column, columnIndex) in columns"
       :key="column.key"
       :class="getFixedColumnClass(column.key)"
-      :style="getCellStyle(column.key, columnIndex)"
+      :style="getCellStyle(columnIndex)"
+      :align="column.align || 'left'"
       class="q-table__cell"
     >
       <div
@@ -229,7 +230,7 @@ export default {
         paddingLeft: `${Number(paddingLeft) + this.indent}px`
       };
     },
-    getCellStyle(key, columnIndex) {
+    getCellStyle(columnIndex) {
       const style = {};
 
       if (
diff --git a/src/qComponents/QTable/src/q-table.scss b/src/qComponents/QTable/src/q-table.scss
index c8e5d791..6920cfdd 100644
--- a/src/qComponents/QTable/src/q-table.scss
+++ b/src/qComponents/QTable/src/q-table.scss
@@ -180,25 +180,15 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
+    }
 
-      .q-table__header-cell_right & {
-        flex-direction: row-reverse;
-      }
+    &_align-right .q-table__header-cell-wrapper {
+      flex-direction: row-reverse;
     }
 
     &-content {
       display: flex;
       align-items: center;
-
-      .q-table__draggable {
-        margin-left: 16px;
-      }
-
-      .q-table__header-cell_right & {
-        flex-direction: row-reverse;
-        margin-right: 16px;
-        margin-left: 0;
-      }
     }
 
     .q-context-wrapper {
@@ -228,14 +218,6 @@
       }
     }
 
-    &_left {
-      border-color: var(--color-primary-blue-light);
-    }
-
-    &_right {
-      border-color: var(--color-primary);
-    }
-
     &:first-child {
       padding-left: 16px;
     }
@@ -261,10 +243,6 @@
         .q-table__sort-arrow {
           color: var(--color-primary-blue);
           visibility: visible;
-
-          .q-table__separated & {
-            color: var(--color-primary-black);
-          }
         }
       }
 
diff --git a/stories/components/QTable.stories.js b/stories/components/QTable.stories.js
index dcd5e7fd..8320d440 100644
--- a/stories/components/QTable.stories.js
+++ b/stories/components/QTable.stories.js
@@ -27,6 +27,11 @@ const defaultArgs = {
     key: 'right1',
     direction: 'descending'
   },
+  groupsColors: {
+    group1: '#74aff8',
+    group2: '#de4b7a',
+    group3: '#f2d22b'
+  },
   rows: [
     {
       left1: '1',
@@ -96,24 +101,25 @@ export const QTableStory = (_, { argTypes }) => ({
         {
           key: 'left1',
           value: 'Left 1',
-          type: 'left',
+          group: 'group1',
           formatter: val => `formatted_${val}`
         },
         {
           key: 'left2',
           value: 'Left 2',
-          type: 'left'
+          group: 'group1',
+          align: 'right'
         },
         {
           key: 'left3',
           value: 'Left 3',
-          type: 'left',
+          group: 'group1',
           sortable: true
         },
         {
           key: 'right1',
           value: 'Right 1',
-          type: 'right',
+          group: 'group2',
           sortable: true,
           slots: {
             header: 'customHeader',
@@ -123,12 +129,12 @@ export const QTableStory = (_, { argTypes }) => ({
         {
           key: 'right2',
           value: 'Right 2',
-          type: 'right'
+          group: 'group2'
         },
         {
           key: 'right3',
           value: 'Right 3',
-          type: 'right'
+          group: 'group2'
         }
       ]
     };
@@ -152,7 +158,7 @@ export const QTableStory = (_, { argTypes }) => ({
       v-bind="$props"
     >
       <template #customHeader="{ column }">
-      {{ column.value }} custom
+        {{ column.value }} custom
       </template>
 
       <template #customRow="{ row }">

From 4b5a45b2019a665bac016a6c589ce7b4d24bc40b Mon Sep 17 00:00:00 2001
From: Tim <darknelmail.com@mail.ru>
Date: Tue, 29 Dec 2020 10:18:41 +0300
Subject: [PATCH 07/12] add groups

---
 src/qComponents/QTable/src/QTable.vue         | 306 +++++++++---------
 .../QTable/src/components/QTableRow/index.vue |  16 +-
 stories/components/QTable.stories.js          |  84 ++---
 3 files changed, 197 insertions(+), 209 deletions(-)

diff --git a/src/qComponents/QTable/src/QTable.vue b/src/qComponents/QTable/src/QTable.vue
index 15367480..2bcdcad3 100644
--- a/src/qComponents/QTable/src/QTable.vue
+++ b/src/qComponents/QTable/src/QTable.vue
@@ -38,7 +38,7 @@
             </div>
           </div>
 
-          <template v-if="draggable">
+          <template v-if="isDraggable">
             <div class="dnd-handler" />
             <div class="dnd-separator" />
           </template>
@@ -56,12 +56,14 @@
                 v-if="selectable"
                 width="64"
               />
+            </colgroup>
+            <template v-for="(group, groupIndex) in columns">
               <col
-                v-for="(column, index) in columns"
-                :key="index"
+                v-for="(column, index) in group.data"
+                :key="`fixCol${groupIndex}${index}`"
                 :style="getColWidth(column)"
               />
-            </colgroup>
+            </template>
 
             <thead>
               <tr>
@@ -69,7 +71,7 @@
                   v-if="selectable"
                   class="q-table__header-cell q-table__header-cell__checkbox"
                   :class="{
-                    'q-table__cell_fixed': fixedColumn.length
+                    'q-table__cell_fixed': stickyColumnKeys.length > 0
                   }"
                 >
                   <q-checkbox
@@ -78,80 +80,82 @@
                     :indeterminate="isIndeterminate"
                   />
                 </th>
-                <th
-                  v-for="(column, index) in columns"
-                  :key="index"
-                  :class="getCellClasses(column)"
-                  :style="getHeaderCellStyle(column.group)"
-                  class="q-table__header-cell"
-                >
-                  <div class="q-table__header-cell-wrapper">
-                    <div
-                      class="q-table__header-cell-content"
-                      @click="handleHeaderClick(column)"
-                    >
-                      <slot
-                        v-if="$scopedSlots.header"
-                        name="header"
-                        :column="updateItem(column, index, column.key)"
-                      />
-
-                      <slot
-                        v-else-if="column.slots && column.slots.header"
-                        :name="column.slots.header"
-                        :column="updateItem(column, index, column.key)"
-                      />
-
-                      <template v-else>
-                        {{ column.value }}
-                      </template>
-
-                      <span
-                        v-if="column.sortable"
-                        class="q-table__sort-arrow"
-                        :class="{
-                          'q-icon-arrow-up': sort.direction !== 'descending',
-                          'q-icon-arrow-down': sort.direction === 'descending'
-                        }"
-                      />
-                    </div>
-
-                    <template v-if="draggable">
+                <template v-for="(group, groupIndex) in columns">
+                  <th
+                    v-for="(column, index) in group.data"
+                    :key="`group${groupIndex}${index}`"
+                    :class="getCellClasses(column, group)"
+                    :style="getHeaderCellStyle(group)"
+                    class="q-table__header-cell"
+                  >
+                    <div class="q-table__header-cell-wrapper">
                       <div
-                        class="drop-handler dnd-before"
-                        :class="getHandlerClass(column.group)"
-                        :dndidx="index"
-                      />
-
-                      <drag-elements
-                        :col-index="index"
-                        parent-selector=".q-table__scroll-wrapper"
-                        dummy-selector=".dnd-handler"
-                        separator-selector=".dnd-separator"
-                        target-selector=".q-table__header-cell"
-                        limit-box-selector=".q-table__table"
-                        :drop-zone-selector="
-                          `.${getHandlerClass(column.group)}`
-                        "
-                        :is-first-blocked="selectable"
-                        @change-order="changeColumnsOrder"
+                        class="q-table__header-cell-content"
+                        @click="handleHeaderClick(column)"
                       >
-                        <div class="drag-n-drop-icon">
-                          <span
-                            v-if="draggable"
-                            class="q-icon-drag-linear"
-                          />
-                        </div>
-                      </drag-elements>
-
-                      <div
-                        class="drop-handler dnd-after"
-                        :class="getHandlerClass(column.group)"
-                        :dndidx="index + 1"
-                      />
-                    </template>
-                  </div>
-                </th>
+                        <slot
+                          v-if="$scopedSlots.header"
+                          name="header"
+                          :column="updateItem(column, index, column.key)"
+                        />
+
+                        <slot
+                          v-else-if="column.slots && column.slots.header"
+                          :name="column.slots.header"
+                          :column="updateItem(column, index, column.key)"
+                        />
+
+                        <template v-else>
+                          {{ column.value }}
+                        </template>
+
+                        <span
+                          v-if="column.sortable"
+                          class="q-table__sort-arrow"
+                          :class="{
+                            'q-icon-arrow-up': sort.direction !== 'descending',
+                            'q-icon-arrow-down': sort.direction === 'descending'
+                          }"
+                        />
+                      </div>
+
+                      <template v-if="group.draggable">
+                        <div
+                          class="drop-handler dnd-before"
+                          :class="getHandlerClass(column.group)"
+                          :dndidx="index"
+                        />
+
+                        <drag-elements
+                          :col-index="index"
+                          parent-selector=".q-table__scroll-wrapper"
+                          dummy-selector=".dnd-handler"
+                          separator-selector=".dnd-separator"
+                          target-selector=".q-table__header-cell"
+                          limit-box-selector=".q-table__table"
+                          :drop-zone-selector="
+                            `.${getHandlerClass(column.group)}`
+                          "
+                          :is-first-blocked="selectable"
+                          @change-order="changeColumnsOrder"
+                        >
+                          <div class="drag-n-drop-icon">
+                            <span
+                              v-if="group.draggable"
+                              class="q-icon-drag-linear"
+                            />
+                          </div>
+                        </drag-elements>
+
+                        <div
+                          class="drop-handler dnd-after"
+                          :class="getHandlerClass(column.group)"
+                          :dndidx="index + 1"
+                        />
+                      </template>
+                    </div>
+                  </th>
+                </template>
               </tr>
             </thead>
 
@@ -163,7 +167,7 @@
                   :class="{
                     'q-table__total-cell_selectable':
                       totalCheckboxPosition === 'total',
-                    'q-table__cell_fixed': fixedColumn.length
+                    'q-table__cell_fixed': stickyColumnKeys.length > 0
                   }"
                 >
                   <q-checkbox
@@ -172,28 +176,30 @@
                     :indeterminate="isIndeterminate"
                   />
                 </th>
-                <td
-                  v-for="(column, index) in columns"
-                  :key="index"
-                  :class="getCellClasses(column)"
-                  class="q-table__cell q-table__total-cell"
-                >
-                  <slot
-                    v-if="$scopedSlots.total"
-                    name="total"
-                    :total="updateItem(total, index, column.key)"
-                  />
-
-                  <slot
-                    v-else-if="column.slots && column.slots.total"
-                    :name="column.slots.total"
-                    :total="updateItem(total, index, column.key)"
-                  />
-
-                  <template v-else-if="total[column.key]">
-                    {{ total[column.key] }}
-                  </template>
-                </td>
+                <template v-for="(group, groupIndex) in columns">
+                  <td
+                    v-for="(column, index) in group.data"
+                    :key="`col${groupIndex}${index}`"
+                    :class="getCellClasses(column, group)"
+                    class="q-table__cell q-table__total-cell"
+                  >
+                    <slot
+                      v-if="$scopedSlots.total"
+                      name="total"
+                      :total="updateItem(total, index, column.key)"
+                    />
+
+                    <slot
+                      v-else-if="column.slots && column.slots.total"
+                      :name="column.slots.total"
+                      :total="updateItem(total, index, column.key)"
+                    />
+
+                    <template v-else-if="total[column.key]">
+                      {{ total[column.key] }}
+                    </template>
+                  </td>
+                </template>
               </tr>
 
               <row-hoc
@@ -201,9 +207,9 @@
                 :key="rowIndex"
                 :row="row"
                 :row-index="rowIndex"
-                :columns="columns"
+                :columns="allColumns"
                 :class="levelClass(row.indent)"
-                :fixed-column="fixedColumn"
+                :sticky-column-keys="stickyColumnKeys"
                 :expandable="expandable"
                 :indent-size="indentSize"
                 :indent="row.indent"
@@ -273,7 +279,7 @@ export default {
 
   props: {
     /**
-     * Whether to spread columns proportionally to the table\'s width
+     * do not shrink column's width as native table does (change `defaultColWidth` or pass the `width` to column object for managing the width)
      */
     fixedLayout: {
       type: Boolean,
@@ -291,7 +297,8 @@ export default {
       default: false
     },
     /**
-     * Array of objects, each object must contain `key` and `value`.
+     * MAY contain 'color' (hex string), 'draggabble' (boolean)
+     * MUST contsain 'data' - array of objects, each object must contain `key` and `value`.
      * Can be extended by `sortable`, `slots`, `width` (works with `fixedLayout: true`)
      * and `type` (if `isSeparated` flag is `true`)
      */
@@ -313,20 +320,6 @@ export default {
       type: Boolean,
       default: false
     },
-    /**
-     * Whether delimit table by types, required `group` prop in columns
-     */
-    isSeparated: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Object with `key: color` for each of separated groups
-     */
-    groupsColors: {
-      type: Object,
-      default: null
-    },
     /**
      * Object, `[column.key]: value` pair, not all are required
      */
@@ -334,24 +327,10 @@ export default {
       type: Object,
       default: () => ({})
     },
-    /**
-     * Key of column to fix
-     */
-    fixedColumn: {
-      type: String,
-      default: ''
-    },
     childrenKey: {
       type: String,
       default: 'children'
     },
-    /**
-     * Width of fixed column. If `fixedLayout: true`, width is equal to `defaultColWidth` prop.
-     */
-    fixedColumnWidth: {
-      type: String,
-      default: null
-    },
     expandable: {
       type: Boolean,
       default: false
@@ -397,13 +376,6 @@ export default {
       type: Boolean,
       default: false
     },
-    /**
-     * Whether to drag columns, on end of a drag throw `{ oldPositionIndex, newPositionIndex }` to `@change-order` handler
-     */
-    draggable: {
-      type: Boolean,
-      default: false
-    },
     defaultSort: {
       type: Object,
       default: () => ({
@@ -437,6 +409,22 @@ export default {
   },
 
   computed: {
+    allColumns() {
+      return this.columns.reduce((acc, group) => {
+        return acc.concat(group.data);
+      }, []);
+    },
+    stickyColumnKeys() {
+      return this.allColumns
+        .filter(column => column.fixed)
+        .map(column => column.key);
+    },
+    isDraggable() {
+      return this.columns.find(group => group.draggable);
+    },
+    isSeparated() {
+      return this.columns.length > 1;
+    },
     areAllChecked: {
       get() {
         return this.checkedRows.length === this.rows.length;
@@ -450,11 +438,11 @@ export default {
 
     tableClasses() {
       return {
-        'q-table__draggable': this.draggable,
+        'q-table__draggable': this.isDraggable,
         'q-table__selectable': this.selectable,
         'q-table__separated': this.isSeparated,
         'q-table__grid': this.grid,
-        'q-table__fixed-cols': this.fixedColumn.length,
+        'q-table__fixed-cols': this.stickyColumnKeys.length,
         'q-table__fixed': this.fixedLayout
       };
     },
@@ -470,11 +458,13 @@ export default {
     },
 
     isLeftShadowShown() {
-      return this.fixedColumn.length && this.scrolled > 0;
+      return this.stickyColumnKeys.length && this.scrolled > 0;
     },
 
     isRightShadowShown() {
-      return this.fixedColumn.length && this.tableClass !== 'scrolled-right';
+      return (
+        this.stickyColumnKeys.length && this.tableClass !== 'scrolled-right'
+      );
     },
 
     loadingWrapperClass() {
@@ -495,6 +485,7 @@ export default {
     },
 
     computedRows() {
+      console.log(this.treeRows);
       const rows = this.treeRows.length ? this.treeRows : this.rows;
 
       return rows.map((row, index) => ({
@@ -633,7 +624,9 @@ export default {
     },
 
     findSlotForRow(columnKey) {
-      const currentCol = this.columns.find(({ key }) => key === columnKey);
+      const currentCol = this.columns[0].data?.find(
+        ({ key }) => key === columnKey
+      );
 
       return currentCol?.slots?.row ?? null;
     },
@@ -784,26 +777,24 @@ export default {
       if (!this.isSeparated || !group) return {};
 
       return {
-        borderColor: this.groupsColors?.[group] ?? ''
+        borderColor: group.color ?? ''
       };
     },
 
-    getCellClasses(column = {}) {
+    getCellClasses(column = {}, group) {
       const classes = [this.getSortableClass(column)];
 
       if (this.isSeparated) {
-        if (!column.group)
-          console.warn(
-            `[QTable] Column ${column.key} must have \`group\` prop`
-          );
-        else classes.push(`q-table__header-cell_${column.group}`);
+        classes.push(`q-table__header-cell_${group.key}`);
       }
 
-      if (column.align) {
-        classes.push(`q-table__header-cell_align-${column.align}`);
+      if (group.align || column.align) {
+        classes.push(
+          `q-table__header-cell_align-${column.align ?? group.align}`
+        );
       }
 
-      if (this.fixedColumn.length && this.fixedColumn === column.key) {
+      if (this.stickyColumnKeys.includes(column.key)) {
         classes.push('q-table__cell_fixed');
       }
 
@@ -828,13 +819,8 @@ export default {
     },
 
     getColWidth(column) {
-      if (this.fixedColumn !== column.key && column.key !== 'shadow')
-        return {
-          width: column.width ?? this.defaultColWidth
-        };
-
       return {
-        width: this.fixedColumnWidth ?? this.defaultColWidth
+        width: column.width ?? this.defaultColWidth
       };
     },
 
diff --git a/src/qComponents/QTable/src/components/QTableRow/index.vue b/src/qComponents/QTable/src/components/QTableRow/index.vue
index ba9ffa7a..1f856da9 100644
--- a/src/qComponents/QTable/src/components/QTableRow/index.vue
+++ b/src/qComponents/QTable/src/components/QTableRow/index.vue
@@ -8,7 +8,7 @@
       v-if="selectable"
       class="q-table__cell q-table__cell_selectable"
       :class="{
-        'q-table__cell_fixed': fixedColumn.length
+        'q-table__cell_fixed': stickyColumnKeys.length > 0
       }"
       :style="firstTdStyle"
     >
@@ -25,7 +25,7 @@
     <td
       v-for="(column, columnIndex) in columns"
       :key="column.key"
-      :class="getFixedColumnClass(column.key)"
+      :class="getStickyColumnClass(column.key)"
       :style="getCellStyle(columnIndex)"
       :align="column.align || 'left'"
       class="q-table__cell"
@@ -94,9 +94,9 @@ export default {
       type: String,
       default: 'children'
     },
-    fixedColumn: {
-      type: String,
-      default: ''
+    stickyColumnKeys: {
+      type: Array,
+      default: () => []
     },
     expandable: {
       type: Boolean,
@@ -252,10 +252,8 @@ export default {
 
       return style;
     },
-    getFixedColumnClass(key) {
-      return this.fixedColumn && this.fixedColumn === key
-        ? 'q-table__cell_fixed'
-        : '';
+    getStickyColumnClass(key) {
+      return this.stickyColumnKeys.includes(key) ? 'q-table__cell_fixed' : '';
     },
     updateRow(row, index, key, column) {
       let value = row.value ?? get(row, key);
diff --git a/stories/components/QTable.stories.js b/stories/components/QTable.stories.js
index 8320d440..68ae7c1e 100644
--- a/stories/components/QTable.stories.js
+++ b/stories/components/QTable.stories.js
@@ -22,16 +22,10 @@ const argtypes = {
 };
 
 const defaultArgs = {
-  separatorKeys: ['left', 'right'],
   defaultSort: {
     key: 'right1',
     direction: 'descending'
   },
-  groupsColors: {
-    group1: '#74aff8',
-    group2: '#de4b7a',
-    group3: '#f2d22b'
-  },
   rows: [
     {
       left1: '1',
@@ -99,42 +93,52 @@ export const QTableStory = (_, { argTypes }) => ({
     return {
       columns: [
         {
-          key: 'left1',
-          value: 'Left 1',
-          group: 'group1',
-          formatter: val => `formatted_${val}`
-        },
-        {
-          key: 'left2',
-          value: 'Left 2',
-          group: 'group1',
-          align: 'right'
-        },
-        {
-          key: 'left3',
-          value: 'Left 3',
-          group: 'group1',
-          sortable: true
-        },
-        {
-          key: 'right1',
-          value: 'Right 1',
-          group: 'group2',
-          sortable: true,
-          slots: {
-            header: 'customHeader',
-            row: 'customRow'
-          }
-        },
-        {
-          key: 'right2',
-          value: 'Right 2',
-          group: 'group2'
+          key: 'one',
+          draggable: true,
+          color: 'black',
+          align: 'left',
+          data: [
+            {
+              fixed: true,
+              key: 'left1',
+              value: 'Left 1',
+              formatter: val => `formatted_${val}`
+            },
+            {
+              fixed: true,
+              key: 'left2',
+              value: 'Left 2'
+            },
+            {
+              key: 'left3',
+              value: 'Left 3',
+              sortable: true
+            }
+          ]
         },
         {
-          key: 'right3',
-          value: 'Right 3',
-          group: 'group2'
+          key: 'two',
+          color: 'blue',
+          draggable: true,
+          data: [
+            {
+              key: 'right1',
+              value: 'Right 1',
+              sortable: true,
+              slots: {
+                header: 'customHeader',
+                row: 'customRow'
+              }
+            },
+            {
+              key: 'right2',
+              value: 'Right 2'
+            },
+            {
+              key: 'right3',
+              value: 'Right 3'
+            }
+          ]
         }
       ]
     };

From 42203bf9c807b65bf4e51c61d5bab64dad517b96 Mon Sep 17 00:00:00 2001
From: Tim <darknelmail.com@mail.ru>
Date: Tue, 29 Dec 2020 17:49:24 +0300
Subject: [PATCH 08/12] add stories

---
 src/qComponents/QTable/src/QTable.vue         | 119 +++++++-----
 .../QTable/src/components/QTableRow/index.vue |  14 +-
 src/qComponents/QTable/src/q-table.scss       |   6 +-
 stories/components/QTable.stories.js          | 176 ------------------
 stories/components/QTable/CustomRows.js       |  26 +++
 stories/components/QTable/CustomWidth.js      |   9 +
 stories/components/QTable/Default.js          |  29 +++
 stories/components/QTable/Draggable.js        |  49 +++++
 stories/components/QTable/Groups.js           |  55 ++++++
 stories/components/QTable/QTable.stories.js   | 130 +++++++++++++
 stories/components/QTable/Selectable.js       |   9 +
 stories/components/QTable/StickyColumn.js     |  10 +
 stories/components/QTable/Total.js            |  16 ++
 13 files changed, 412 insertions(+), 236 deletions(-)
 delete mode 100644 stories/components/QTable.stories.js
 create mode 100644 stories/components/QTable/CustomRows.js
 create mode 100644 stories/components/QTable/CustomWidth.js
 create mode 100644 stories/components/QTable/Default.js
 create mode 100644 stories/components/QTable/Draggable.js
 create mode 100644 stories/components/QTable/Groups.js
 create mode 100644 stories/components/QTable/QTable.stories.js
 create mode 100644 stories/components/QTable/Selectable.js
 create mode 100644 stories/components/QTable/StickyColumn.js
 create mode 100644 stories/components/QTable/Total.js

diff --git a/src/qComponents/QTable/src/QTable.vue b/src/qComponents/QTable/src/QTable.vue
index 2bcdcad3..6d44a78e 100644
--- a/src/qComponents/QTable/src/QTable.vue
+++ b/src/qComponents/QTable/src/QTable.vue
@@ -51,15 +51,12 @@
             cellspacing="0"
             cellpadding="0"
           >
-            <colgroup v-if="fixedLayout">
-              <col
-                v-if="selectable"
-                width="64"
-              />
+            <colgroup v-if="selectable">
+              <col width="64" />
             </colgroup>
-            <template v-for="(group, groupIndex) in columns">
+            <template v-for="(group, groupIndex) in groupsOfColumns">
               <col
-                v-for="(column, index) in group.data"
+                v-for="(column, index) in group.columns"
                 :key="`fixCol${groupIndex}${index}`"
                 :style="getColWidth(column)"
               />
@@ -71,7 +68,7 @@
                   v-if="selectable"
                   class="q-table__header-cell q-table__header-cell__checkbox"
                   :class="{
-                    'q-table__cell_fixed': stickyColumnKeys.length > 0
+                    'q-table__cell_sticky': Boolean(stickyColumnKey)
                   }"
                 >
                   <q-checkbox
@@ -80,9 +77,9 @@
                     :indeterminate="isIndeterminate"
                   />
                 </th>
-                <template v-for="(group, groupIndex) in columns">
+                <template v-for="(group, groupIndex) in groupsOfColumns">
                   <th
-                    v-for="(column, index) in group.data"
+                    v-for="(column, index) in group.columns"
                     :key="`group${groupIndex}${index}`"
                     :class="getCellClasses(column, group)"
                     :style="getHeaderCellStyle(group)"
@@ -122,7 +119,7 @@
                       <template v-if="group.draggable">
                         <div
                           class="drop-handler dnd-before"
-                          :class="getHandlerClass(column.group)"
+                          :class="getHandlerClass(group.key)"
                           :dndidx="index"
                         />
 
@@ -133,11 +130,11 @@
                           separator-selector=".dnd-separator"
                           target-selector=".q-table__header-cell"
                           limit-box-selector=".q-table__table"
-                          :drop-zone-selector="
-                            `.${getHandlerClass(column.group)}`
-                          "
+                          :drop-zone-selector="`.${getHandlerClass(group.key)}`"
                           :is-first-blocked="selectable"
-                          @change-order="changeColumnsOrder"
+                          @change-order="
+                            data => changeColumnsOrder(data, group.key)
+                          "
                         >
                           <div class="drag-n-drop-icon">
                             <span
@@ -149,7 +146,7 @@
 
                         <div
                           class="drop-handler dnd-after"
-                          :class="getHandlerClass(column.group)"
+                          :class="getHandlerClass(group.key)"
                           :dndidx="index + 1"
                         />
                       </template>
@@ -167,7 +164,7 @@
                   :class="{
                     'q-table__total-cell_selectable':
                       totalCheckboxPosition === 'total',
-                    'q-table__cell_fixed': stickyColumnKeys.length > 0
+                    'q-table__cell_sticky': Boolean(stickyColumnKey)
                   }"
                 >
                   <q-checkbox
@@ -176,9 +173,9 @@
                     :indeterminate="isIndeterminate"
                   />
                 </th>
-                <template v-for="(group, groupIndex) in columns">
+                <template v-for="(group, groupIndex) in groupsOfColumns">
                   <td
-                    v-for="(column, index) in group.data"
+                    v-for="(column, index) in group.columns"
                     :key="`col${groupIndex}${index}`"
                     :class="getCellClasses(column, group)"
                     class="q-table__cell q-table__total-cell"
@@ -209,7 +206,7 @@
                 :row-index="rowIndex"
                 :columns="allColumns"
                 :class="levelClass(row.indent)"
-                :sticky-column-keys="stickyColumnKeys"
+                :sticky-column-key="stickyColumnKey"
                 :expandable="expandable"
                 :indent-size="indentSize"
                 :indent="row.indent"
@@ -260,6 +257,7 @@
 </template>
 
 <script>
+import { cloneDeep } from 'lodash-es';
 import QTableRow from './components/QTableRow';
 import DragElements from './components/DragElements';
 
@@ -279,7 +277,7 @@ export default {
 
   props: {
     /**
-     * do not shrink column's width as native table does (change `defaultColWidth` or pass the `width` to column object for managing the width)
+     * do not shrink column's width as native table does (change `defaultColWidth` or pass the `width` to each column object for managing the width)
      */
     fixedLayout: {
       type: Boolean,
@@ -297,15 +295,23 @@ export default {
       default: false
     },
     /**
-     * MAY contain 'color' (hex string), 'draggabble' (boolean)
-     * MUST contsain 'data' - array of objects, each object must contain `key` and `value`.
-     * Can be extended by `sortable`, `slots`, `width` (works with `fixedLayout: true`)
-     * and `type` (if `isSeparated` flag is `true`)
+     * `groupsOfColumns` MUST contain one or more groups of columns,
+     * Each group MUST contain `key` and `columns` - array of objects.
+     * Each group MAY contain:
+     *  `color` (hex string) - column's header color.
+     *  `draggabble` (boolean) - whether to drag and drop columns inside the group.
+     *  `align` (left/right) - content's align.
+     * Each column MUST contain `key` and `value`.
+     * Each column MAY contain `sortable`, `slots`, `width` (works with `fixedLayout: true`)
      */
-    columns: {
+    groupsOfColumns: {
       type: Array,
       required: true
     },
+    stickyColumnKey: {
+      type: String,
+      default: null
+    },
     /**
      * Array of objects, each object must contain `[column.key]: value` pair
      */
@@ -356,7 +362,13 @@ export default {
       default: false
     },
     /**
-     * Get row as argument, must return class `String`
+     * Get row as argument, must return style `String`,
+     * you can also return one:
+     * `green-row`
+     * `red-row`
+     * `grey-row`
+     * `dark-row`
+     * `yellow-row`
      */
     customRowClass: {
       type: Function,
@@ -410,20 +422,23 @@ export default {
 
   computed: {
     allColumns() {
-      return this.columns.reduce((acc, group) => {
-        return acc.concat(group.data);
+      return this.groupsOfColumns.reduce((acc, group) => {
+        const eachGroup = group.columns.map(col => {
+          const newCol = {
+            ...col,
+            align: col.align ?? group.align ?? 'left'
+          };
+
+          return newCol;
+        });
+        return acc.concat(eachGroup);
       }, []);
     },
-    stickyColumnKeys() {
-      return this.allColumns
-        .filter(column => column.fixed)
-        .map(column => column.key);
-    },
     isDraggable() {
-      return this.columns.find(group => group.draggable);
+      return this.groupsOfColumns.find(group => group.draggable);
     },
     isSeparated() {
-      return this.columns.length > 1;
+      return this.groupsOfColumns.length > 1;
     },
     areAllChecked: {
       get() {
@@ -442,7 +457,6 @@ export default {
         'q-table__selectable': this.selectable,
         'q-table__separated': this.isSeparated,
         'q-table__grid': this.grid,
-        'q-table__fixed-cols': this.stickyColumnKeys.length,
         'q-table__fixed': this.fixedLayout
       };
     },
@@ -458,13 +472,11 @@ export default {
     },
 
     isLeftShadowShown() {
-      return this.stickyColumnKeys.length && this.scrolled > 0;
+      return this.stickyColumnKey && this.scrolled > 0;
     },
 
     isRightShadowShown() {
-      return (
-        this.stickyColumnKeys.length && this.tableClass !== 'scrolled-right'
-      );
+      return this.stickyColumnKey && this.tableClass !== 'scrolled-right';
     },
 
     loadingWrapperClass() {
@@ -485,7 +497,6 @@ export default {
     },
 
     computedRows() {
-      console.log(this.treeRows);
       const rows = this.treeRows.length ? this.treeRows : this.rows;
 
       return rows.map((row, index) => ({
@@ -624,9 +635,7 @@ export default {
     },
 
     findSlotForRow(columnKey) {
-      const currentCol = this.columns[0].data?.find(
-        ({ key }) => key === columnKey
-      );
+      const currentCol = this.allColumns.find(({ key }) => key === columnKey);
 
       return currentCol?.slots?.row ?? null;
     },
@@ -777,7 +786,7 @@ export default {
       if (!this.isSeparated || !group) return {};
 
       return {
-        borderColor: group.color ?? ''
+        borderColor: group.color ?? 'transparent'
       };
     },
 
@@ -794,8 +803,8 @@ export default {
         );
       }
 
-      if (this.stickyColumnKeys.includes(column.key)) {
-        classes.push('q-table__cell_fixed');
+      if (this.stickyColumnKey === column.key) {
+        classes.push('q-table__cell_sticky');
       }
 
       return classes;
@@ -843,8 +852,18 @@ export default {
       };
     },
 
-    changeColumnsOrder(positions) {
-      this.$emit('change-order', positions);
+    changeColumnsOrder({ newPositionIndex, oldPositionIndex }, groupKey) {
+      const columns = cloneDeep(this.groupsOfColumns);
+      const group = columns.find(({ key }) => key === groupKey);
+      if (group?.columns) {
+        group.columns.splice(
+          newPositionIndex,
+          0,
+          group.columns.splice(oldPositionIndex, 1)[0]
+        );
+      }
+
+      this.$emit('change-order', columns);
     }
   }
 };
diff --git a/src/qComponents/QTable/src/components/QTableRow/index.vue b/src/qComponents/QTable/src/components/QTableRow/index.vue
index 1f856da9..706e478b 100644
--- a/src/qComponents/QTable/src/components/QTableRow/index.vue
+++ b/src/qComponents/QTable/src/components/QTableRow/index.vue
@@ -8,7 +8,7 @@
       v-if="selectable"
       class="q-table__cell q-table__cell_selectable"
       :class="{
-        'q-table__cell_fixed': stickyColumnKeys.length > 0
+        'q-table__cell_sticky': stickyColumnKey
       }"
       :style="firstTdStyle"
     >
@@ -26,7 +26,7 @@
       v-for="(column, columnIndex) in columns"
       :key="column.key"
       :class="getStickyColumnClass(column.key)"
-      :style="getCellStyle(columnIndex)"
+      :style="getCellStyle(column, columnIndex)"
       :align="column.align || 'left'"
       class="q-table__cell"
     >
@@ -94,9 +94,9 @@ export default {
       type: String,
       default: 'children'
     },
-    stickyColumnKeys: {
-      type: Array,
-      default: () => []
+    stickyColumnKey: {
+      type: String,
+      default: null
     },
     expandable: {
       type: Boolean,
@@ -230,7 +230,7 @@ export default {
         paddingLeft: `${Number(paddingLeft) + this.indent}px`
       };
     },
-    getCellStyle(columnIndex) {
+    getCellStyle(column, columnIndex) {
       const style = {};
 
       if (
@@ -253,7 +253,7 @@ export default {
       return style;
     },
     getStickyColumnClass(key) {
-      return this.stickyColumnKeys.includes(key) ? 'q-table__cell_fixed' : '';
+      return this.stickyColumnKey === key ? 'q-table__cell_sticky' : '';
     },
     updateRow(row, index, key, column) {
       let value = row.value ?? get(row, key);
diff --git a/src/qComponents/QTable/src/q-table.scss b/src/qComponents/QTable/src/q-table.scss
index 6920cfdd..523c4714 100644
--- a/src/qComponents/QTable/src/q-table.scss
+++ b/src/qComponents/QTable/src/q-table.scss
@@ -105,7 +105,7 @@
     width: 100%;
     height: 100%;
     min-height: 115px;
-    padding-top: 25px;
+    padding-top: 120px;
     background-color: var(--color-tertiary-gray-light);
     opacity: 0;
     transition: height 0.2s, background-color 0.5s, opacity 0.2s 0.6s;
@@ -222,7 +222,7 @@
       padding-left: 16px;
     }
 
-    &.q-table__cell_fixed {
+    &.q-table__cell_sticky {
       background-color: var(--color-tertiary-gray-light);
     }
 
@@ -301,7 +301,7 @@
     }
   }
 
-  &__cell_fixed {
+  &__cell_sticky {
     position: sticky;
     left: 0;
     z-index: 1;
diff --git a/stories/components/QTable.stories.js b/stories/components/QTable.stories.js
deleted file mode 100644
index 68ae7c1e..00000000
--- a/stories/components/QTable.stories.js
+++ /dev/null
@@ -1,176 +0,0 @@
-import QTable from '../../src/qComponents/QTable';
-
-const argtypes = {
-  total: {
-    control: { type1: 'object' }
-  },
-  childrenKey: {
-    table: { disable: true }
-  },
-  expandable: {
-    table: { disable: true }
-  },
-  indentSize: {
-    table: { disable: true }
-  },
-  uniqueKey: {
-    table: { disable: true }
-  },
-  pagesInExpand: {
-    table: { disable: true }
-  }
-};
-
-const defaultArgs = {
-  defaultSort: {
-    key: 'right1',
-    direction: 'descending'
-  },
-  rows: [
-    {
-      left1: '1',
-      left2: '2',
-      left3: '3',
-      right1: '1',
-      right2: '2',
-      right3: '3'
-    },
-    {
-      left1: '4',
-      left2: '5 very very very very long string',
-      left3: '6',
-      right1: '4',
-      right2: '5',
-      right3: '6'
-    },
-    {
-      left1: '7',
-      left2: '8',
-      left3: '9',
-      right1: '7',
-      right2: '8',
-      right3: '9'
-    }
-  ],
-  selectable: true,
-  total: {
-    grouping: 'total: 3',
-    right1: '1',
-    right2: '2',
-    right3: '3'
-  },
-  changeSort(sort) {
-    console.log('sort', sort);
-  },
-  customRowClass: ({ rowIndex }) => {
-    if (rowIndex === 0) {
-      return 'green-row';
-    }
-
-    return '';
-  },
-  customRowStyle: ({ rowIndex }) => {
-    if (rowIndex === 2) {
-      return { '--row-custom-border-color': '#ff0' };
-    }
-
-    return '';
-  }
-};
-
-export default {
-  title: 'Components/QTable',
-  component: QTable,
-  argTypes: argtypes,
-  decorators: [
-    () => ({ template: '<div style="width: 90vw;"><story /></div>' })
-  ]
-};
-
-export const QTableStory = (_, { argTypes }) => ({
-  props: Object.keys(argTypes).filter(arg => arg !== 'columns'),
-  data() {
-    return {
-      columns: [
-        {
-          key: 'one',
-          draggable: true,
-          color: 'black',
-          align: 'left',
-          data: [
-            {
-              fixed: true,
-              key: 'left1',
-              value: 'Left 1',
-              formatter: val => `formatted_${val}`
-            },
-            {
-              fixed: true,
-              key: 'left2',
-              value: 'Left 2'
-            },
-            {
-              key: 'left3',
-              value: 'Left 3',
-              sortable: true
-            }
-          ]
-        },
-        {
-          key: 'two',
-          color: 'blue',
-          draggable: true,
-          data: [
-            {
-              key: 'right1',
-              value: 'Right 1',
-              sortable: true,
-              slots: {
-                header: 'customHeader',
-                row: 'customRow'
-              }
-            },
-            {
-              key: 'right2',
-              value: 'Right 2'
-            },
-            {
-              key: 'right3',
-              value: 'Right 3'
-            }
-          ]
-        }
-      ]
-    };
-  },
-  methods: {
-    handleRowClick(row) {
-      console.log(row);
-    },
-    changeColumnsOrder({ oldPositionIndex, newPositionIndex }) {
-      const cols = this.columns;
-      cols.splice(newPositionIndex, 0, cols.splice(oldPositionIndex, 1)[0]);
-    }
-  },
-  template: `
-    <q-table
-      ref="table"
-      :columns="columns"
-      @change-order="changeColumnsOrder"
-      @change-sort="changeSort"
-      @row-click="handleRowClick"
-      v-bind="$props"
-    >
-      <template #customHeader="{ column }">
-        {{ column.value }} custom
-      </template>
-
-      <template #customRow="{ row }">
-        {{ row.value }} custom
-      </template>
-    </q-table>
-  `
-});
-
-QTableStory.storyName = 'Default';
-QTableStory.args = defaultArgs;
diff --git a/stories/components/QTable/CustomRows.js b/stories/components/QTable/CustomRows.js
new file mode 100644
index 00000000..d9e5d2e2
--- /dev/null
+++ b/stories/components/QTable/CustomRows.js
@@ -0,0 +1,26 @@
+import Template from './Default';
+
+const CustomRows = Template.bind({});
+
+CustomRows.args = {
+  customRowClass: ({ rowIndex }) => {
+    if (rowIndex === 0) {
+      return 'red-row';
+    }
+
+    if (rowIndex === 1) {
+      return 'green-row';
+    }
+
+    return '';
+  },
+  customRowStyle: ({ rowIndex }) => {
+    if (rowIndex === 2) {
+      return { '--row-custom-border-color': '#ff0' };
+    }
+
+    return '';
+  }
+};
+
+export default CustomRows;
diff --git a/stories/components/QTable/CustomWidth.js b/stories/components/QTable/CustomWidth.js
new file mode 100644
index 00000000..de89fedf
--- /dev/null
+++ b/stories/components/QTable/CustomWidth.js
@@ -0,0 +1,9 @@
+import Template from './Default';
+
+const CustomWidth = Template.bind({});
+
+CustomWidth.args = {
+  fixedLayout: true
+};
+
+export default CustomWidth;
diff --git a/stories/components/QTable/Default.js b/stories/components/QTable/Default.js
new file mode 100644
index 00000000..6ef86fa3
--- /dev/null
+++ b/stories/components/QTable/Default.js
@@ -0,0 +1,29 @@
+export default (_, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  methods: {
+    handleRowClick(row) {
+      console.log(row);
+    },
+    changeColumnsOrder(groupsOfColumns) {
+      this.groupsOfColumns = groupsOfColumns;
+    }
+  },
+  template: `
+    <q-table
+      ref="table"
+      :groups-of-columns="groupsOfColumns"
+      @change-order="changeColumnsOrder"
+      @change-sort="changeSort"
+      @row-click="handleRowClick"
+      v-bind="$props"
+    >
+      <template #customHeader="{ column }">
+        {{ column.value }} custom
+      </template>
+
+      <template #customRow="{ row }">
+        {{ row.value }} custom
+      </template>
+    </q-table>
+  `
+});
diff --git a/stories/components/QTable/Draggable.js b/stories/components/QTable/Draggable.js
new file mode 100644
index 00000000..1bc1fd0b
--- /dev/null
+++ b/stories/components/QTable/Draggable.js
@@ -0,0 +1,49 @@
+import Template from './Default';
+
+const Draggable = Template.bind({});
+
+Draggable.args = {
+  fixedLayout: true,
+  groupsOfColumns: [
+    {
+      key: 'one',
+      color: '#de4b7a',
+      draggable: true,
+      columns: [
+        {
+          key: 'col1',
+          value: 'Column 1',
+          formatter: val => `formatted_${val}`
+        },
+        {
+          key: 'col2',
+          value: 'Column 2'
+        },
+        {
+          key: 'col3',
+          value: 'Column 3',
+          sortable: true
+        },
+        {
+          key: 'col4',
+          value: 'Column 4',
+          sortable: true,
+          slots: {
+            header: 'customHeader',
+            row: 'customRow'
+          }
+        },
+        {
+          key: 'col5',
+          value: 'Column 5'
+        },
+        {
+          key: 'col6',
+          value: 'Column 6'
+        }
+      ]
+    }
+  ]
+};
+
+export default Draggable;
diff --git a/stories/components/QTable/Groups.js b/stories/components/QTable/Groups.js
new file mode 100644
index 00000000..2b33fcda
--- /dev/null
+++ b/stories/components/QTable/Groups.js
@@ -0,0 +1,55 @@
+import Template from './Default';
+
+const Groups = Template.bind({});
+
+Groups.args = {
+  fixedLayout: true,
+  groupsOfColumns: [
+    {
+      key: 'one',
+      color: '#de4b7a',
+      columns: [
+        {
+          key: 'col1',
+          value: 'Column 1',
+          formatter: val => `formatted_${val}`
+        },
+        {
+          key: 'col2',
+          value: 'Column 2'
+        },
+        {
+          key: 'col3',
+          value: 'Column 3',
+          sortable: true
+        }
+      ]
+    },
+    {
+      color: '#74aff8',
+      align: 'right',
+      key: 'two',
+      columns: [
+        {
+          key: 'col4',
+          value: 'Column 4',
+          sortable: true,
+          slots: {
+            header: 'customHeader',
+            row: 'customRow'
+          }
+        },
+        {
+          key: 'col5',
+          value: 'Column 6'
+        },
+        {
+          key: 'col6',
+          value: 'Column 6'
+        }
+      ]
+    }
+  ]
+};
+
+export default Groups;
diff --git a/stories/components/QTable/QTable.stories.js b/stories/components/QTable/QTable.stories.js
new file mode 100644
index 00000000..d6f3aa68
--- /dev/null
+++ b/stories/components/QTable/QTable.stories.js
@@ -0,0 +1,130 @@
+import QTable from '../../../src/qComponents/QTable';
+
+import Default from './Default';
+import CustomWidth from './CustomWidth';
+import Selectable from './Selectable';
+import Total from './Total';
+import StickyColumn from './StickyColumn';
+import CustomRows from './CustomRows';
+import Groups from './Groups';
+import Draggable from './Draggable';
+
+export default {
+  title: 'Components/QTable',
+  component: QTable,
+  decorators: [
+    () => ({ template: '<div style="width: 90vw;"><story /></div>' })
+  ],
+  argTypes: {
+    total: {
+      control: { type1: 'object' }
+    },
+    childrenKey: {
+      table: { disable: true }
+    },
+    expandable: {
+      table: { disable: true }
+    },
+    indentSize: {
+      table: { disable: true }
+    },
+    uniqueKey: {
+      table: { disable: true }
+    },
+    pagesInExpand: {
+      table: { disable: true }
+    }
+  },
+  args: {
+    defaultSort: {
+      key: 'col1',
+      direction: 'descending'
+    },
+    fixedLayout: false,
+    selectable: false,
+    groupsOfColumns: [
+      {
+        key: 'one',
+        columns: [
+          {
+            key: 'col1',
+            value: 'Column 1',
+            formatter: val => `formatted_${val}`
+          },
+          {
+            key: 'col2',
+            value: 'Column 2'
+          },
+          {
+            key: 'col3',
+            value: 'Column 3',
+            sortable: true
+          },
+          {
+            key: 'col4',
+            value: 'Column 4',
+            sortable: true,
+            slots: {
+              header: 'customHeader',
+              row: 'customRow'
+            }
+          },
+          {
+            key: 'col5',
+            value: 'Column 5'
+          },
+          {
+            key: 'col6',
+            value: 'Column 6'
+          }
+        ]
+      }
+    ],
+    rows: [
+      {
+        col1: 'Lorem ipsum dolor sit amet',
+        col2: 'consectetur adipiscing elit',
+        col3: 'sed do eiusmod tempor incididunt',
+        col4: 'ut labore et dolore magna aliqua.',
+        col5: 'Ut enim ad minim veniam',
+        col6: 'quis nostrud exercitation ullamco laboris'
+      },
+      {
+        col1: 'nisi ut aliquip ex ea commodo consequat',
+        col2: 'Duis aute irure dolor in reprehenderit',
+        col3: 'in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
+        col4: 'Excepteur sint occaecat cupidatat non proident',
+        col5: 'sunt in culpa qui officia deserunt mollit anim id est laborum',
+        col6: 'sunt in culpa qui officia deserunt mollit anim id est laborum'
+      },
+      {
+        col1:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+        col2:
+          'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+        col3:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+        col4:
+          'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+        col5:
+          'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+        col6:
+          'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
+      }
+    ],
+    changeSort(sort) {
+      console.log('sort', sort);
+    }
+  }
+};
+
+export {
+  Default,
+  CustomWidth,
+  Selectable,
+  Total,
+  StickyColumn,
+  CustomRows,
+  Groups,
+  Draggable
+};
diff --git a/stories/components/QTable/Selectable.js b/stories/components/QTable/Selectable.js
new file mode 100644
index 00000000..12fe8e57
--- /dev/null
+++ b/stories/components/QTable/Selectable.js
@@ -0,0 +1,9 @@
+import Template from './Default';
+
+const Selectable = Template.bind({});
+
+Selectable.args = {
+  selectable: true
+};
+
+export default Selectable;
diff --git a/stories/components/QTable/StickyColumn.js b/stories/components/QTable/StickyColumn.js
new file mode 100644
index 00000000..93ea5630
--- /dev/null
+++ b/stories/components/QTable/StickyColumn.js
@@ -0,0 +1,10 @@
+import Template from './Default';
+
+const StickyColumn = Template.bind({});
+
+StickyColumn.args = {
+  stickyColumnKey: 'col1',
+  fixedLayout: true
+};
+
+export default StickyColumn;
diff --git a/stories/components/QTable/Total.js b/stories/components/QTable/Total.js
new file mode 100644
index 00000000..2ea23c2f
--- /dev/null
+++ b/stories/components/QTable/Total.js
@@ -0,0 +1,16 @@
+import Template from './Default';
+
+const Total = Template.bind({});
+
+Total.args = {
+  total: {
+    col1: 'Total 100',
+    col2: 'Total 200',
+    col3: 'Total 300',
+    col4: 'Total 400',
+    col5: 'Total 500',
+    col6: 'Total 600'
+  }
+};
+
+export default Total;

From c0b6acbfac316caa00bf5f4676f2fb6cdbab96f6 Mon Sep 17 00:00:00 2001
From: "m.novikov" <m.novikov@qvant.ru>
Date: Tue, 29 Dec 2020 19:32:40 +0300
Subject: [PATCH 09/12] refactoring updated row

---
 src/qComponents/QTable/src/QTable.vue              | 14 +++++++-------
 .../QTable/src/components/QTableRow/index.vue      | 12 ++++++------
 stories/components/QTable/Default.js               |  4 ++--
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/qComponents/QTable/src/QTable.vue b/src/qComponents/QTable/src/QTable.vue
index 6d44a78e..3ee48361 100644
--- a/src/qComponents/QTable/src/QTable.vue
+++ b/src/qComponents/QTable/src/QTable.vue
@@ -224,17 +224,17 @@
                   <slot
                     v-if="$scopedSlots.row"
                     name="row"
-                    :row="rowData"
+                    :row="rowData.data"
                   />
 
                   <slot
                     v-else-if="findSlotForRow(rowData.$key)"
                     :name="findSlotForRow(rowData.$key)"
-                    :row="rowData"
+                    :row="rowData.data"
                   />
 
                   <template v-else>
-                    {{ rowData.value }}
+                    {{ rowData.$value }}
                   </template>
                 </template>
               </row-hoc>
@@ -834,21 +834,21 @@ export default {
     },
 
     updateItem(item, index, key) {
-      let value = null;
+      let $value = null;
 
       if (item[key] === 0 || Boolean(item[key])) {
-        value = item[key];
+        $value = item[key];
       }
 
       if (item.value) {
-        value = item.value;
+        $value = item.value;
       }
 
       return {
         ...item,
         $key: key || null,
         $index: index,
-        value
+        $value
       };
     },
 
diff --git a/src/qComponents/QTable/src/components/QTableRow/index.vue b/src/qComponents/QTable/src/components/QTableRow/index.vue
index 706e478b..1310b49a 100644
--- a/src/qComponents/QTable/src/components/QTableRow/index.vue
+++ b/src/qComponents/QTable/src/components/QTableRow/index.vue
@@ -256,19 +256,19 @@ export default {
       return this.stickyColumnKey === key ? 'q-table__cell_sticky' : '';
     },
     updateRow(row, index, key, column) {
-      let value = row.value ?? get(row, key);
+      let $value = get(row, key);
 
       if (column.formatter) {
-        value = column.formatter(value, row, column);
+        $value = column.formatter($value, row, column);
       }
 
       return {
-        ...row,
         $key: key,
         $index: index,
-        value,
-        indent: this.indent,
-        column
+        $value,
+        $indent: this.indent,
+        $column: column,
+        data: row
       };
     }
   }
diff --git a/stories/components/QTable/Default.js b/stories/components/QTable/Default.js
index 6ef86fa3..cc83afbb 100644
--- a/stories/components/QTable/Default.js
+++ b/stories/components/QTable/Default.js
@@ -18,11 +18,11 @@ export default (_, { argTypes }) => ({
       v-bind="$props"
     >
       <template #customHeader="{ column }">
-        {{ column.value }} custom
+        {{ column.$value }} custom
       </template>
 
       <template #customRow="{ row }">
-        {{ row.value }} custom
+        {{ row.$value }} custom
       </template>
     </q-table>
   `

From 512db70422345eaa1c08def0f39eb597ec77eb22 Mon Sep 17 00:00:00 2001
From: "m.novikov" <m.novikov@qvant.ru>
Date: Wed, 30 Dec 2020 09:27:55 +0300
Subject: [PATCH 10/12] refactoring

---
 src/qComponents/QTable/src/QTable.vue | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/qComponents/QTable/src/QTable.vue b/src/qComponents/QTable/src/QTable.vue
index 3ee48361..98cb2b2d 100644
--- a/src/qComponents/QTable/src/QTable.vue
+++ b/src/qComponents/QTable/src/QTable.vue
@@ -51,16 +51,19 @@
             cellspacing="0"
             cellpadding="0"
           >
-            <colgroup v-if="selectable">
-              <col width="64" />
-            </colgroup>
-            <template v-for="(group, groupIndex) in groupsOfColumns">
+            <colgroup>
               <col
-                v-for="(column, index) in group.columns"
-                :key="`fixCol${groupIndex}${index}`"
-                :style="getColWidth(column)"
+                v-if="selectable"
+                style="width: 64px"
               />
-            </template>
+              <template v-for="(group, groupIndex) in groupsOfColumns">
+                <col
+                  v-for="(column, index) in group.columns"
+                  :key="`fixCol${groupIndex}${index}`"
+                  :style="getColWidth(column)"
+                />
+              </template>
+            </colgroup>
 
             <thead>
               <tr>
@@ -786,7 +789,7 @@ export default {
       if (!this.isSeparated || !group) return {};
 
       return {
-        borderColor: group.color ?? 'transparent'
+        borderColor: group.color ?? ''
       };
     },
 

From 75794865d5508cfb50905c8d9f67e2e313693a55 Mon Sep 17 00:00:00 2001
From: "m.novikov" <m.novikov@qvant.ru>
Date: Wed, 30 Dec 2020 17:13:00 +0300
Subject: [PATCH 11/12] refactoring

---
 src/qComponents/QTable/src/QTable.vue         | 69 +++++++++++--------
 .../QTable/src/components/QTableRow/index.vue | 31 ++++-----
 .../QTable/src/hocs/withQTableRow/index.js    | 15 ++--
 src/qComponents/QTable/src/q-table.scss       |  4 ++
 stories/components/QTable/Default.js          |  4 +-
 5 files changed, 69 insertions(+), 54 deletions(-)

diff --git a/src/qComponents/QTable/src/QTable.vue b/src/qComponents/QTable/src/QTable.vue
index 98cb2b2d..bbb4b875 100644
--- a/src/qComponents/QTable/src/QTable.vue
+++ b/src/qComponents/QTable/src/QTable.vue
@@ -208,11 +208,11 @@
                 :row="row"
                 :row-index="rowIndex"
                 :columns="allColumns"
-                :class="levelClass(row.indent)"
+                :class="levelClass(row.$indent)"
                 :sticky-column-key="stickyColumnKey"
                 :expandable="expandable"
                 :indent-size="indentSize"
-                :indent="row.indent"
+                :indent="row.$indent"
                 :children-key="childrenKey"
                 :pages-in-expand="pagesInExpand"
                 :custom-row-class="customRowClass"
@@ -227,17 +227,22 @@
                   <slot
                     v-if="$scopedSlots.row"
                     name="row"
-                    :row="rowData.data"
+                    :row="rowData"
                   />
 
                   <slot
-                    v-else-if="findSlotForRow(rowData.$key)"
-                    :name="findSlotForRow(rowData.$key)"
+                    v-else-if="findSlotForRow(rowData.key)"
+                    :name="findSlotForRow(rowData.key)"
                     :row="rowData.data"
+                    :rowKey="rowData.key"
+                    :index="rowData.index"
+                    :value="rowData.value"
+                    :indent="rowData.indent"
+                    :column="rowData.column"
                   />
 
                   <template v-else>
-                    {{ rowData.$value }}
+                    {{ rowData.value }}
                   </template>
                 </template>
               </row-hoc>
@@ -437,12 +442,15 @@ export default {
         return acc.concat(eachGroup);
       }, []);
     },
+
     isDraggable() {
       return this.groupsOfColumns.find(group => group.draggable);
     },
+
     isSeparated() {
       return this.groupsOfColumns.length > 1;
     },
+
     areAllChecked: {
       get() {
         return this.checkedRows.length === this.rows.length;
@@ -527,14 +535,14 @@ export default {
       handler(rows) {
         this.treeRows = rows.map((row, index) => {
           const updatedRow = {
-            ...row,
+            data: row,
             $treeIndex: index
           };
 
-          const childs = updatedRow[this.childrenKey];
+          const childs = updatedRow.data[this.childrenKey];
 
           if (childs) {
-            updatedRow[this.childrenKey] = this.updateChildrenRows(
+            updatedRow.data[this.childrenKey] = this.updateChildrenRows(
               childs,
               row,
               updatedRow
@@ -607,17 +615,20 @@ export default {
 
     updateChildrenRows(childs, row, updatedRow) {
       return childs.map(child => {
+        const childlessRow = { ...row };
+        this.$delete(childlessRow, [this.childrenKey]);
+
         const updatedChildRow = {
-          ...child,
-          $parentRow: row,
-          indent: updatedRow.indent + this.indentSize || this.indentSize,
+          data: child,
+          $parentRow: childlessRow,
+          $indent: updatedRow.$indent + this.indentSize || this.indentSize,
           $treeIndex: updatedRow.$treeIndex
         };
 
-        const rowChilds = updatedChildRow[this.childrenKey];
+        const rowChilds = updatedChildRow.data[this.childrenKey];
 
         if (rowChilds) {
-          updatedChildRow[this.childrenKey] = this.updateChildrenRows(
+          updatedChildRow.data[this.childrenKey] = this.updateChildrenRows(
             rowChilds,
             child,
             updatedChildRow
@@ -704,20 +715,19 @@ export default {
     },
 
     handleExpandClick(row) {
-      if (!row.$isTreeOpened) {
-        this.$emit('load-by-expand', row, this.resolve);
-      }
+      const currentRow = this.treeRows[row.$treeIndex];
 
-      this.treeRows = this.computedRows;
+      if (!row.$isTreeOpened) {
+        const updatedRow = {
+          ...currentRow,
+          $isTreeOpened: true
+        };
 
-      const parentRow = this.findScopedRow(
-        this.treeRows[row.$treeIndex],
-        this.uniqueKey,
-        row[this.uniqueKey]
-      );
+        this.treeRows.splice(currentRow, 1, updatedRow);
+        return;
+      }
 
-      this.$delete(parentRow, [this.childrenKey]);
-      this.$delete(parentRow, '$isTreeOpened');
+      this.$delete(currentRow, '$isTreeOpened');
     },
 
     findScopedRow(row, key, value) {
@@ -748,13 +758,16 @@ export default {
       let loaderRow = null;
 
       let updatedChilds = newChilds.map(child => {
+        const childlessRow = { ...row };
+        this.$delete(childlessRow, [this.childrenKey]);
+
         if (child[this.pagesInExpand]) {
-          loaderRow = { ...child, $parentRow: row };
+          loaderRow = { ...child, $parentRow: childlessRow };
         }
         return {
           ...child,
-          $parentRow: row,
-          indent: row.indent + this.indentSize || this.indentSize,
+          $parentRow: childlessRow,
+          $indent: row.$indent + this.indentSize || this.indentSize,
           $treeIndex: row.$treeIndex
         };
       });
diff --git a/src/qComponents/QTable/src/components/QTableRow/index.vue b/src/qComponents/QTable/src/components/QTableRow/index.vue
index 1310b49a..4544f19a 100644
--- a/src/qComponents/QTable/src/components/QTableRow/index.vue
+++ b/src/qComponents/QTable/src/components/QTableRow/index.vue
@@ -44,7 +44,7 @@
         :class="column.customCellClass"
       >
         <slot
-          :row-data="updateRow(row, columnIndex, column.key, column)"
+          :row-data="updateRow(row.data, columnIndex, column.key, column)"
           name="row"
         />
 
@@ -57,7 +57,7 @@
 
       <template v-else>
         <slot
-          :row-data="updateRow(row, columnIndex, column.key, column)"
+          :row-data="updateRow(row.data, columnIndex, column.key, column)"
           name="row"
         />
 
@@ -209,14 +209,14 @@ export default {
       return (
         this.expandable &&
         columnIndex === 0 &&
-        Boolean(this.row[this.childrenKey]?.length)
+        Boolean(this.row.data[this.childrenKey]?.length)
       );
     },
     handleExpandClick() {
       this.$emit('expand-click', this.row);
     },
     getFirstTdStyle() {
-      if (!this.selectable || !this.row[this.childrenKey]?.length) return;
+      if (!this.selectable || !this.row.data[this.childrenKey]?.length) return;
 
       const elm = this.$el?.querySelector('td:first-child');
 
@@ -231,14 +231,11 @@ export default {
       };
     },
     getCellStyle(column, columnIndex) {
+      if (!this.indent) return {};
+
       const style = {};
 
-      if (
-        columnIndex === 0 &&
-        !this.selectable &&
-        this.$el &&
-        this.row[this.childrenKey]?.length
-      ) {
+      if (columnIndex === 0 && !this.selectable && this.$el) {
         const elm = this.$el.querySelector('td:first-child');
 
         if (elm) {
@@ -256,18 +253,18 @@ export default {
       return this.stickyColumnKey === key ? 'q-table__cell_sticky' : '';
     },
     updateRow(row, index, key, column) {
-      let $value = get(row, key);
+      let value = get(row.data || row, key);
 
       if (column.formatter) {
-        $value = column.formatter($value, row, column);
+        value = column.formatter(value, row, column);
       }
 
       return {
-        $key: key,
-        $index: index,
-        $value,
-        $indent: this.indent,
-        $column: column,
+        key,
+        index,
+        value,
+        indent: this.indent,
+        column,
         data: row
       };
     }
diff --git a/src/qComponents/QTable/src/hocs/withQTableRow/index.js b/src/qComponents/QTable/src/hocs/withQTableRow/index.js
index 5ab1cea7..8e80fb17 100644
--- a/src/qComponents/QTable/src/hocs/withQTableRow/index.js
+++ b/src/qComponents/QTable/src/hocs/withQTableRow/index.js
@@ -3,18 +3,18 @@ const renderedChilds = ({
   childrenKey,
   listeners,
   component,
-  childrens,
+  children,
   props,
   scopedSlots
 }) => {
-  return childrens.reduce((acc, row) => {
+  return children.reduce((acc, row) => {
     const renderingArray = [];
 
     renderingArray.push(
       renderContext(component, {
         props: {
           ...props,
-          indent: row.indent,
+          indent: row.$indent,
           row
         },
         on: { ...listeners },
@@ -30,7 +30,7 @@ const renderedChilds = ({
         listeners,
         props,
         scopedSlots,
-        childrens: row[childrenKey]
+        children: row.data[childrenKey]
       };
 
       renderingArray.push(renderedChilds(renderedData));
@@ -51,17 +51,18 @@ const withQTableRow = QTableRow => ({
 
     const renderingArray = [];
 
-    if (row[childrenKey]) {
+    if (row.data[childrenKey]) {
       const renderedData = {
         renderContext,
         childrenKey,
         component: QTableRow,
         listeners,
-        childrens: row[childrenKey],
+        children: row.data[childrenKey],
         props,
         scopedSlots
       };
-      renderingArray.push(renderedChilds(renderedData));
+
+      if (row.$isTreeOpened) renderingArray.push(renderedChilds(renderedData));
     }
 
     return [renderContext(QTableRow, { ...data }), ...renderingArray];
diff --git a/src/qComponents/QTable/src/q-table.scss b/src/qComponents/QTable/src/q-table.scss
index 523c4714..3dc20a45 100644
--- a/src/qComponents/QTable/src/q-table.scss
+++ b/src/qComponents/QTable/src/q-table.scss
@@ -21,6 +21,10 @@
     display: inline-block;
     font-size: 23px;
     vertical-align: middle;
+
+    &_opened {
+      transform: rotate(90deg);
+    }
   }
 
   &__drag-elements {
diff --git a/stories/components/QTable/Default.js b/stories/components/QTable/Default.js
index cc83afbb..51e0c3ce 100644
--- a/stories/components/QTable/Default.js
+++ b/stories/components/QTable/Default.js
@@ -21,8 +21,8 @@ export default (_, { argTypes }) => ({
         {{ column.$value }} custom
       </template>
 
-      <template #customRow="{ row }">
-        {{ row.$value }} custom
+      <template #customRow="{ value }">
+        {{ value }} custom
       </template>
     </q-table>
   `

From 06fc073f01cdd026b56d12fabb185fdad20f5e03 Mon Sep 17 00:00:00 2001
From: "m.novikov" <m.novikov@qvant.ru>
Date: Wed, 30 Dec 2020 17:59:07 +0300
Subject: [PATCH 12/12] refactoring

---
 src/qComponents/QTable/src/QTable.vue         | 61 ++++++++++---------
 .../QTable/src/components/QTableRow/index.vue |  2 +-
 .../QTable/src/hocs/withQTableRow/index.js    |  4 +-
 stories/components/QTable/Default.js          |  4 +-
 4 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/src/qComponents/QTable/src/QTable.vue b/src/qComponents/QTable/src/QTable.vue
index bbb4b875..8205808b 100644
--- a/src/qComponents/QTable/src/QTable.vue
+++ b/src/qComponents/QTable/src/QTable.vue
@@ -96,13 +96,15 @@
                         <slot
                           v-if="$scopedSlots.header"
                           name="header"
-                          :column="updateItem(column, index, column.key)"
+                          :data="column"
+                          v-bind="updateItem(column, index, column.key)"
                         />
 
                         <slot
                           v-else-if="column.slots && column.slots.header"
                           :name="column.slots.header"
-                          :column="updateItem(column, index, column.key)"
+                          :data="column"
+                          v-bind="updateItem(column, index, column.key)"
                         />
 
                         <template v-else>
@@ -186,13 +188,15 @@
                     <slot
                       v-if="$scopedSlots.total"
                       name="total"
-                      :total="updateItem(total, index, column.key)"
+                      :data="total"
+                      v-bind="updateItem(total, index, column.key)"
                     />
 
                     <slot
                       v-else-if="column.slots && column.slots.total"
                       :name="column.slots.total"
-                      :total="updateItem(total, index, column.key)"
+                      :data="total"
+                      v-bind="updateItem(total, index, column.key)"
                     />
 
                     <template v-else-if="total[column.key]">
@@ -208,11 +212,11 @@
                 :row="row"
                 :row-index="rowIndex"
                 :columns="allColumns"
-                :class="levelClass(row.$indent)"
+                :class="levelClass(row.indent)"
                 :sticky-column-key="stickyColumnKey"
                 :expandable="expandable"
                 :indent-size="indentSize"
-                :indent="row.$indent"
+                :indent="row.indent"
                 :children-key="childrenKey"
                 :pages-in-expand="pagesInExpand"
                 :custom-row-class="customRowClass"
@@ -234,7 +238,7 @@
                     v-else-if="findSlotForRow(rowData.key)"
                     :name="findSlotForRow(rowData.key)"
                     :row="rowData.data"
-                    :rowKey="rowData.key"
+                    :row-key="rowData.key"
                     :index="rowData.index"
                     :value="rowData.value"
                     :indent="rowData.indent"
@@ -512,7 +516,7 @@ export default {
 
       return rows.map((row, index) => ({
         ...row,
-        $treeIndex: index
+        treeIndex: index
       }));
     }
   },
@@ -536,7 +540,7 @@ export default {
         this.treeRows = rows.map((row, index) => {
           const updatedRow = {
             data: row,
-            $treeIndex: index
+            treeIndex: index
           };
 
           const childs = updatedRow.data[this.childrenKey];
@@ -620,9 +624,9 @@ export default {
 
         const updatedChildRow = {
           data: child,
-          $parentRow: childlessRow,
-          $indent: updatedRow.$indent + this.indentSize || this.indentSize,
-          $treeIndex: updatedRow.$treeIndex
+          parentRow: childlessRow,
+          indent: updatedRow.indent + this.indentSize || this.indentSize,
+          treeIndex: updatedRow.treeIndex
         };
 
         const rowChilds = updatedChildRow.data[this.childrenKey];
@@ -715,19 +719,19 @@ export default {
     },
 
     handleExpandClick(row) {
-      const currentRow = this.treeRows[row.$treeIndex];
+      const currentRow = this.treeRows[row.treeIndex];
 
-      if (!row.$isTreeOpened) {
+      if (!row.isTreeOpened) {
         const updatedRow = {
           ...currentRow,
-          $isTreeOpened: true
+          isTreeOpened: true
         };
 
         this.treeRows.splice(currentRow, 1, updatedRow);
         return;
       }
 
-      this.$delete(currentRow, '$isTreeOpened');
+      this.$delete(currentRow, 'isTreeOpened');
     },
 
     findScopedRow(row, key, value) {
@@ -750,7 +754,7 @@ export default {
       this.treeRows = this.computedRows;
 
       const parentRow = this.findScopedRow(
-        this.treeRows[row.$treeIndex],
+        this.treeRows[row.treeIndex],
         this.uniqueKey,
         row[this.uniqueKey]
       );
@@ -762,13 +766,13 @@ export default {
         this.$delete(childlessRow, [this.childrenKey]);
 
         if (child[this.pagesInExpand]) {
-          loaderRow = { ...child, $parentRow: childlessRow };
+          loaderRow = { ...child, parentRow: childlessRow };
         }
         return {
           ...child,
-          $parentRow: childlessRow,
-          $indent: row.$indent + this.indentSize || this.indentSize,
-          $treeIndex: row.$treeIndex
+          parentRow: childlessRow,
+          indent: row.indent + this.indentSize || this.indentSize,
+          treeIndex: row.treeIndex
         };
       });
 
@@ -789,7 +793,7 @@ export default {
         this.$set(parentRow, [this.childrenKey], updatedChilds);
       }
 
-      parentRow.$isTreeOpened = true;
+      parentRow.isTreeOpened = true;
 
       return this.treeRows;
     },
@@ -850,21 +854,20 @@ export default {
     },
 
     updateItem(item, index, key) {
-      let $value = null;
+      let value = null;
 
       if (item[key] === 0 || Boolean(item[key])) {
-        $value = item[key];
+        value = item[key];
       }
 
       if (item.value) {
-        $value = item.value;
+        value = item.value;
       }
 
       return {
-        ...item,
-        $key: key || null,
-        $index: index,
-        $value
+        columnKey: key || null,
+        index,
+        value
       };
     },
 
diff --git a/src/qComponents/QTable/src/components/QTableRow/index.vue b/src/qComponents/QTable/src/components/QTableRow/index.vue
index 4544f19a..533960d6 100644
--- a/src/qComponents/QTable/src/components/QTableRow/index.vue
+++ b/src/qComponents/QTable/src/components/QTableRow/index.vue
@@ -184,7 +184,7 @@ export default {
       return rowClass;
     },
     openedTreeClass() {
-      return this.row.$isTreeOpened ? 'q-table__expand-arrow_opened' : '';
+      return this.row.isTreeOpened ? 'q-table__expand-arrow_opened' : '';
     },
     getRowStyle() {
       return (
diff --git a/src/qComponents/QTable/src/hocs/withQTableRow/index.js b/src/qComponents/QTable/src/hocs/withQTableRow/index.js
index 8e80fb17..d5a89187 100644
--- a/src/qComponents/QTable/src/hocs/withQTableRow/index.js
+++ b/src/qComponents/QTable/src/hocs/withQTableRow/index.js
@@ -14,7 +14,7 @@ const renderedChilds = ({
       renderContext(component, {
         props: {
           ...props,
-          indent: row.$indent,
+          indent: row.indent,
           row
         },
         on: { ...listeners },
@@ -62,7 +62,7 @@ const withQTableRow = QTableRow => ({
         scopedSlots
       };
 
-      if (row.$isTreeOpened) renderingArray.push(renderedChilds(renderedData));
+      if (row.isTreeOpened) renderingArray.push(renderedChilds(renderedData));
     }
 
     return [renderContext(QTableRow, { ...data }), ...renderingArray];
diff --git a/stories/components/QTable/Default.js b/stories/components/QTable/Default.js
index 51e0c3ce..46ac3f2f 100644
--- a/stories/components/QTable/Default.js
+++ b/stories/components/QTable/Default.js
@@ -17,8 +17,8 @@ export default (_, { argTypes }) => ({
       @row-click="handleRowClick"
       v-bind="$props"
     >
-      <template #customHeader="{ column }">
-        {{ column.$value }} custom
+      <template #customHeader="{ value }">
+        {{ value }} custom
       </template>
 
       <template #customRow="{ value }">