diff --git a/src/qComponents/QTable/src/QTable.vue b/src/qComponents/QTable/src/QTable.vue
index 3405f90b..8205808b 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
@@ -38,7 +38,7 @@
             </div>
           </div>
 
-          <template v-if="draggable">
+          <template v-if="isDraggable">
             <div class="dnd-handler" />
             <div class="dnd-separator" />
           </template>
@@ -51,13 +51,27 @@
             cellspacing="0"
             cellpadding="0"
           >
+            <colgroup>
+              <col
+                v-if="selectable"
+                style="width: 64px"
+              />
+              <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>
                 <th
                   v-if="selectable"
                   class="q-table__header-cell q-table__header-cell__checkbox"
                   :class="{
-                    'q-table__cell_fixed': fixedColumn.length
+                    'q-table__cell_sticky': Boolean(stickyColumnKey)
                   }"
                 >
                   <q-checkbox
@@ -66,85 +80,84 @@
                     :indeterminate="isIndeterminate"
                   />
                 </th>
-                <th
-                  v-for="(column, index) in columns"
-                  :key="index"
-                  :style="getCellWidth(column)"
-                  :class="getCellClass(column)"
-                  class="q-table__header-cell"
-                  @click="handleHeaderClick(column)"
-                >
-                  <div class="q-table__header-cell-wrapper">
-                    <template v-if="draggable">
+                <template v-for="(group, groupIndex) in groupsOfColumns">
+                  <th
+                    v-for="(column, index) in group.columns"
+                    :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.type)"
-                        :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.type)}`"
-                        :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.type)"
-                        :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 }}
+                        <slot
+                          v-if="$scopedSlots.header"
+                          name="header"
+                          :data="column"
+                          v-bind="updateItem(column, index, column.key)"
+                        />
+
+                        <slot
+                          v-else-if="column.slots && column.slots.header"
+                          :name="column.slots.header"
+                          :data="column"
+                          v-bind="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(group.key)"
+                          :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(group.key)}`"
+                          :is-first-blocked="selectable"
+                          @change-order="
+                            data => changeColumnsOrder(data, group.key)
+                          "
+                        >
+                          <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(group.key)"
+                          :dndidx="index + 1"
+                        />
                       </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>
+                  </th>
+                </template>
               </tr>
             </thead>
 
@@ -156,7 +169,7 @@
                   :class="{
                     'q-table__total-cell_selectable':
                       totalCheckboxPosition === 'total',
-                    'q-table__cell_fixed': fixedColumn.length
+                    'q-table__cell_sticky': Boolean(stickyColumnKey)
                   }"
                 >
                   <q-checkbox
@@ -165,73 +178,78 @@
                     :indeterminate="isIndeterminate"
                   />
                 </th>
-                <td
-                  v-for="(column, index) in columns"
-                  :key="index"
-                  :style="getCellWidth(column)"
-                  :class="getCellClass(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>
-              </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"
-                  :fixed-column-width="fixedColumnWidth"
-                  :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 }">
+                <template v-for="(group, groupIndex) in groupsOfColumns">
+                  <td
+                    v-for="(column, index) in group.columns"
+                    :key="`col${groupIndex}${index}`"
+                    :class="getCellClasses(column, group)"
+                    class="q-table__cell q-table__total-cell"
+                  >
                     <slot
-                      v-if="$scopedSlots.row"
-                      name="row"
-                      :row="rowData"
+                      v-if="$scopedSlots.total"
+                      name="total"
+                      :data="total"
+                      v-bind="updateItem(total, index, column.key)"
                     />
 
                     <slot
-                      v-else-if="findSlotForRow(rowData.$key)"
-                      :name="findSlotForRow(rowData.$key)"
-                      :row="rowData"
+                      v-else-if="column.slots && column.slots.total"
+                      :name="column.slots.total"
+                      :data="total"
+                      v-bind="updateItem(total, index, column.key)"
                     />
 
-                    <template v-else>
-                      {{ rowData.value }}
+                    <template v-else-if="total[column.key]">
+                      {{ total[column.key] }}
                     </template>
+                  </td>
+                </template>
+              </tr>
+
+              <row-hoc
+                v-for="(row, rowIndex) in computedRows"
+                :key="rowIndex"
+                :row="row"
+                :row-index="rowIndex"
+                :columns="allColumns"
+                :class="levelClass(row.indent)"
+                :sticky-column-key="stickyColumnKey"
+                :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.data"
+                    :row-key="rowData.key"
+                    :index="rowData.index"
+                    :value="rowData.value"
+                    :indent="rowData.indent"
+                    :column="rowData.column"
+                  />
+
+                  <template v-else>
+                    {{ rowData.value }}
                   </template>
-                </row-hoc>
-              </template>
+                </template>
+              </row-hoc>
             </tbody>
           </table>
 
@@ -251,6 +269,7 @@
 </template>
 
 <script>
+import { cloneDeep } from 'lodash-es';
 import QTableRow from './components/QTableRow';
 import DragElements from './components/DragElements';
 
@@ -269,18 +288,42 @@ export default {
   },
 
   props: {
+    /**
+     * 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,
+      default: true
+    },
+    /**
+     * Default columns width, required `fixedLayout: true`
+     */
+    defaultColWidth: {
+      type: String,
+      default: '200px'
+    },
     isLoading: {
       type: Boolean,
       default: false
     },
     /**
-     * Array of objects, each object must contain `key` and `value`.
-     * Can be extended by `sortable`, `slots` 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
      */
@@ -295,21 +338,6 @@ export default {
       type: Boolean,
       default: false
     },
-    /**
-     * Whether delimit table by types, required `separatorKeys`
-     */
-    isSeparated: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Column's keys for delimeter, first for left part and second for right part
-     */
-    separatorKeys: {
-      type: Array,
-      default: null,
-      validate: val => val.length === 2
-    },
     /**
      * Object, `[column.key]: value` pair, not all are required
      */
@@ -317,24 +345,10 @@ export default {
       type: Object,
       default: () => ({})
     },
-    /**
-     * Key of column to fix
-     */
-    fixedColumn: {
-      type: String,
-      default: ''
-    },
     childrenKey: {
       type: String,
       default: 'children'
     },
-    /**
-     * Width of fixed column
-     */
-    fixedColumnWidth: {
-      type: Number,
-      default: 200
-    },
     expandable: {
       type: Boolean,
       default: false
@@ -360,7 +374,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,
@@ -380,13 +400,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: () => ({
@@ -420,6 +433,28 @@ export default {
   },
 
   computed: {
+    allColumns() {
+      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);
+      }, []);
+    },
+
+    isDraggable() {
+      return this.groupsOfColumns.find(group => group.draggable);
+    },
+
+    isSeparated() {
+      return this.groupsOfColumns.length > 1;
+    },
+
     areAllChecked: {
       get() {
         return this.checkedRows.length === this.rows.length;
@@ -433,11 +468,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': this.fixedLayout
       };
     },
 
@@ -452,11 +487,11 @@ export default {
     },
 
     isLeftShadowShown() {
-      return this.fixedColumn.length && this.scrolled > 0;
+      return this.stickyColumnKey && this.scrolled > 0;
     },
 
     isRightShadowShown() {
-      return this.fixedColumn.length && this.tableClass !== 'scrolled-right';
+      return this.stickyColumnKey && this.tableClass !== 'scrolled-right';
     },
 
     loadingWrapperClass() {
@@ -481,7 +516,7 @@ export default {
 
       return rows.map((row, index) => ({
         ...row,
-        $treeIndex: index
+        treeIndex: index
       }));
     }
   },
@@ -504,14 +539,14 @@ export default {
       handler(rows) {
         this.treeRows = rows.map((row, index) => {
           const updatedRow = {
-            ...row,
-            $treeIndex: index
+            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
@@ -533,11 +568,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() {
@@ -568,19 +609,30 @@ 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 childlessRow = { ...row };
+        this.$delete(childlessRow, [this.childrenKey]);
+
         const updatedChildRow = {
-          ...child,
-          $parentRow: row,
+          data: child,
+          parentRow: childlessRow,
           indent: updatedRow.indent + this.indentSize || this.indentSize,
-          $treeIndex: updatedRow.$treeIndex
+          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
@@ -592,16 +644,16 @@ 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) {
-      const currentCol = this.columns.find(({ key }) => key === columnKey);
+      const currentCol = this.allColumns.find(({ key }) => key === columnKey);
 
       return currentCol?.slots?.row ?? null;
     },
@@ -623,8 +675,6 @@ export default {
     },
 
     setSort(key, direction) {
-      if (!direction && this.draggable) return;
-
       if (direction) {
         this.sort = {
           key,
@@ -669,20 +719,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) {
@@ -705,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]
       );
@@ -713,14 +762,17 @@ 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,
+          parentRow: childlessRow,
           indent: row.indent + this.indentSize || this.indentSize,
-          $treeIndex: row.$treeIndex
+          treeIndex: row.treeIndex
         };
       });
 
@@ -741,7 +793,7 @@ export default {
         this.$set(parentRow, [this.childrenKey], updatedChilds);
       }
 
-      parentRow.$isTreeOpened = true;
+      parentRow.isTreeOpened = true;
 
       return this.treeRows;
     },
@@ -750,21 +802,32 @@ export default {
       this.scrolled = target.scrollLeft;
     },
 
-    getCellClass(column = {}) {
-      const sortableClass = this.getSortableClass(column);
-      let separatedClass = '';
+    getHeaderCellStyle(group) {
+      if (!this.isSeparated || !group) return {};
+
+      return {
+        borderColor: group.color ?? ''
+      };
+    },
+
+    getCellClasses(column = {}, group) {
+      const classes = [this.getSortableClass(column)];
 
-      if (this.isSeparated && this.separatorKeys?.length > 1) {
-        separatedClass =
-          column?.type === this.separatorKeys[0]
-            ? 'q-table__header-cell_left'
-            : 'q-table__header-cell_right';
+      if (this.isSeparated) {
+        classes.push(`q-table__header-cell_${group.key}`);
       }
 
-      if (this.fixedColumn.length && this.fixedColumn === column.key)
-        return `q-table__cell_fixed ${sortableClass} ${separatedClass}`;
+      if (group.align || column.align) {
+        classes.push(
+          `q-table__header-cell_align-${column.align ?? group.align}`
+        );
+      }
+
+      if (this.stickyColumnKey === column.key) {
+        classes.push('q-table__cell_sticky');
+      }
 
-      return `${sortableClass} ${separatedClass}`;
+      return classes;
     },
 
     getSortableClass(column) {
@@ -784,25 +847,9 @@ 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`;
-      }
-      if (this.fixedColumn !== column.key && column.key !== 'shadow')
-        return style;
-
+    getColWidth(column) {
       return {
-        minWidth: `${this.fixedColumnWidth}px`,
-        maxWidth: `${this.fixedColumnWidth}px`
+        width: column.width ?? this.defaultColWidth
       };
     },
 
@@ -818,15 +865,24 @@ export default {
       }
 
       return {
-        ...item,
-        $key: key || null,
-        $index: index,
+        columnKey: key || null,
+        index,
         value
       };
     },
 
-    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 e0bc7e8b..533960d6 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_sticky': stickyColumnKey
       }"
       :style="firstTdStyle"
     >
@@ -25,52 +25,48 @@
     <td
       v-for="(column, columnIndex) in columns"
       :key="column.key"
-      :class="getFixedColumnClass(column.key)"
-      :style="getCellStyle(column.key, columnIndex, column.width)"
+      :class="getStickyColumnClass(column.key)"
+      :style="getCellStyle(column, columnIndex)"
+      :align="column.align || 'left'"
       class="q-table__cell"
     >
       <div
-        class="q-table__cell-wrapper"
-        :style="getCellWrapperStyle(column)"
+        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.data, 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.data, 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>
@@ -98,13 +94,9 @@ export default {
       type: String,
       default: 'children'
     },
-    fixedColumn: {
+    stickyColumnKey: {
       type: String,
-      default: ''
-    },
-    fixedColumnWidth: {
-      type: Number,
-      default: 250
+      default: null
     },
     expandable: {
       type: Boolean,
@@ -192,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 (
@@ -217,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');
 
@@ -238,26 +230,12 @@ export default {
         paddingLeft: `${Number(paddingLeft) + this.indent}px`
       };
     },
-    getCellWrapperStyle({ width, minWidth, maxWidth }) {
-      return {
-        width: width ? `${width}px` : '',
-        minWidth: minWidth ? `${minWidth}px` : '',
-        maxWidth: maxWidth ? `${maxWidth}px` : ''
-      };
-    },
-    getCellStyle(key, columnIndex, width) {
-      const style = {};
+    getCellStyle(column, columnIndex) {
+      if (!this.indent) return {};
 
-      if (width) {
-        style.width = `${width}px`;
-      }
+      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) {
@@ -269,33 +247,25 @@ 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
-        ? 'q-table__cell_fixed'
-        : '';
+    getStickyColumnClass(key) {
+      return this.stickyColumnKey === key ? 'q-table__cell_sticky' : '';
     },
     updateRow(row, index, key, column) {
-      let value = row.value ?? get(row, key);
+      let value = get(row.data || row, key);
 
       if (column.formatter) {
         value = column.formatter(value, row, column);
       }
 
       return {
-        ...row,
-        $key: key,
-        $index: index,
+        key,
+        index,
         value,
         indent: this.indent,
-        column
+        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..d5a89187 100644
--- a/src/qComponents/QTable/src/hocs/withQTableRow/index.js
+++ b/src/qComponents/QTable/src/hocs/withQTableRow/index.js
@@ -3,11 +3,11 @@ const renderedChilds = ({
   childrenKey,
   listeners,
   component,
-  childrens,
+  children,
   props,
   scopedSlots
 }) => {
-  return childrens.reduce((acc, row) => {
+  return children.reduce((acc, row) => {
     const renderingArray = [];
 
     renderingArray.push(
@@ -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 db7dd09e..3dc20a45 100644
--- a/src/qComponents/QTable/src/q-table.scss
+++ b/src/qComponents/QTable/src/q-table.scss
@@ -13,10 +13,18 @@
   --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;
     vertical-align: middle;
+
+    &_opened {
+      transform: rotate(90deg);
+    }
   }
 
   &__drag-elements {
@@ -101,7 +109,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;
@@ -176,25 +184,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 {
@@ -224,19 +222,11 @@
       }
     }
 
-    &_left {
-      border-color: var(--color-primary-blue-light);
-    }
-
-    &_right {
-      border-color: var(--color-primary);
-    }
-
     &:first-child {
       padding-left: 16px;
     }
 
-    &.q-table__cell_fixed {
+    &.q-table__cell_sticky {
       background-color: var(--color-tertiary-gray-light);
     }
 
@@ -257,10 +247,6 @@
         .q-table__sort-arrow {
           color: var(--color-primary-blue);
           visibility: visible;
-
-          .q-table__separated & {
-            color: var(--color-primary-black);
-          }
         }
       }
 
@@ -271,6 +257,7 @@
   }
 
   &__cell {
+    height: 64px;
     padding: 12px 24px;
     overflow: hidden;
     font-weight: var(--font-weight-base);
@@ -278,12 +265,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;
     }
@@ -324,7 +305,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 a3bbe641..00000000
--- a/stories/components/QTable.stories.js
+++ /dev/null
@@ -1,211 +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 = {
-  separatorKeys: ['left', 'right'],
-  defaultSort: {
-    key: 'right1',
-    direction: 'descending'
-  },
-  rows: [
-    {
-      left1: '1',
-      left2: '2',
-      left3: '3',
-      right1: '1',
-      right2: '2',
-      right3: '3'
-    },
-    {
-      left1: '4',
-      left2: '5',
-      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 {
-      contextMenu: [
-        {
-          action: 'action1',
-          name: 'Action One',
-          icon: 'q-icon-percent'
-        },
-        {
-          action: 'action2',
-          name: 'Action Two',
-          icon: 'q-icon-arrow-down'
-        },
-        {
-          action: 'action3',
-          name: 'Action Three',
-          icon: 'q-icon-arrow-up'
-        }
-      ],
-      columns: [
-        {
-          key: 'left1',
-          value: 'Left 1',
-          type: 'left',
-          formatter: val => `formatted_${val}`
-        },
-        {
-          key: 'left2',
-          value: 'Left 2',
-          type: 'left'
-        },
-        {
-          key: 'left3',
-          value: 'Left 3',
-          type: 'left'
-        },
-        {
-          key: 'right1',
-          value: 'Right 1',
-          type: 'right',
-          percentable: true,
-          sortable: true,
-          slots: {
-            header: 'customHeader',
-            row: 'customRow'
-          }
-        },
-        {
-          key: 'right2',
-          value: 'Right 2',
-          type: 'right',
-          percentable: true
-        },
-        {
-          key: 'right3',
-          value: 'Right 3',
-          type: 'right',
-          percentable: true
-        }
-      ]
-    };
-  },
-  methods: {
-    handleRowClick(row) {
-      console.log(row);
-    },
-    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.percent = !currentCol.percent;
-        this.columns = cols;
-      }
-
-      if (a === 'action2') {
-        this.$refs.table.setSort(key, 'descending');
-      }
-
-      if (a === 'action3') {
-        this.$refs.table.setSort(key, 'ascending');
-      }
-    }
-  },
-  template: `
-    <q-table
-      ref="table"
-      :columns="columns"
-      @change-order="changeColumnsOrder"
-      @change-sort="changeSort"
-      @row-click="handleRowClick"
-      v-bind="$props"
-    >
-      <template #customHeader="{ column }">
-        <template v-if="column.percent">
-          <span class="q-icon-percent" />
-        </template>
-        <span class="text" style="margin-left:8px">{{ column.value }}</span>
-        <q-context-menu
-          :menu-items="contextMenu"
-          @action="handleAction($event, column.key)"
-        />
-      </template>
-
-      <template #customRow="{ row }">
-        {{ row.value }}
-        <span v-if="row.column.percent">
-          %
-        </span>
-      </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..46ac3f2f
--- /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="{ value }">
+        {{ value }} custom
+      </template>
+
+      <template #customRow="{ value }">
+        {{ 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;