diff --git a/src/qComponents/QTable/__snapshots__/QTable.test.js.snap b/src/qComponents/QTable/__snapshots__/QTable.test.js.snap
index 176dc9e0..bc87860b 100644
--- a/src/qComponents/QTable/__snapshots__/QTable.test.js.snap
+++ b/src/qComponents/QTable/__snapshots__/QTable.test.js.snap
@@ -4,10 +4,6 @@ exports[`QTable QTable should match snapshot 1`] = `
 <div
   class="q-table"
 >
-  <!---->
-   
-  <!---->
-   
   <div
     class="q-table__loading-wrapper"
   >
diff --git a/src/qComponents/QTable/src/QTable.vue b/src/qComponents/QTable/src/QTable.vue
index 476ee32c..bc8ec676 100644
--- a/src/qComponents/QTable/src/QTable.vue
+++ b/src/qComponents/QTable/src/QTable.vue
@@ -1,21 +1,14 @@
 <template>
-  <div class="q-table">
-    <div
-      v-if="isLeftShadowShown"
-      class="q-table__column-shadow q-table__column-shadow_left"
-      :style="getColWidth({ key: 'shadow' })"
-    />
-
-    <div
-      v-if="isRightShadowShown"
-      class="q-table__column-shadow"
-    />
-
+  <div
+    ref="root"
+    class="q-table"
+  >
     <div
       ref="loaderWrapper"
       class="q-table__loading-wrapper"
     >
       <q-scrollbar
+        ref="scrollbar"
         wrap-class="q-table__scroll-wrapper"
         theme="secondary"
       >
@@ -52,8 +45,8 @@
           >
             <colgroup>
               <col
-                v-if="selectable"
-                style="width: 64px"
+                v-if="isSelectable"
+                :style="checkboxColWidth"
               />
               <template v-for="(group, groupIndex) in groupsOfColumns">
                 <col
@@ -67,14 +60,14 @@
             <thead v-if="doesHeaderExist">
               <tr>
                 <th
-                  v-if="selectable"
+                  v-if="isSelectable"
+                  :observer-key="
+                    isSelectableColumnSticked && 'q-table-checkboxes'
+                  "
                   class="q-table__header-cell q-table__header-cell__checkbox"
-                  :class="{
-                    'q-table__cell_sticky': Boolean(stickyColumnKey)
-                  }"
                 >
                   <q-checkbox
-                    v-if="totalCheckboxPosition === 'header'"
+                    v-if="selectableColumn.totalCheckboxPosition === 'header'"
                     v-model="areAllChecked"
                     :indeterminate="isIndeterminate"
                   />
@@ -84,7 +77,8 @@
                     v-for="(column, index) in group.columns"
                     :key="`group${groupIndex}${index}`"
                     :class="getCellClasses(column, group)"
-                    :style="getHeaderCellStyle(group, column)"
+                    :style="getHeaderCellStyles(group, column)"
+                    :observer-key="column.sticky ? column.key : null"
                     class="q-table__header-cell"
                   >
                     <div class="q-table__header-cell-wrapper">
@@ -138,7 +132,7 @@
                           target-selector=".q-table__header-cell"
                           limit-box-selector=".q-table__table"
                           :drop-zone-selector="`.${getHandlerClass(group.key)}`"
-                          :is-first-blocked="selectable"
+                          :is-first-blocked="isSelectable"
                           @change-order="
                             data => changeColumnsOrder(data, group.key)
                           "
@@ -165,26 +159,29 @@
 
             <tbody>
               <tr v-if="isTotalExist">
-                <th
-                  v-if="selectable"
+                <td
+                  v-if="isSelectable"
                   class="q-table__total-cell"
+                  :observer-key="
+                    isSelectableColumnSticked && 'q-table-checkboxes'
+                  "
                   :class="{
                     'q-table__total-cell_selectable':
-                      totalCheckboxPosition === 'total',
-                    'q-table__cell_sticky': Boolean(stickyColumnKey)
+                      selectableColumn.totalCheckboxPosition === 'total'
                   }"
                 >
                   <q-checkbox
-                    v-if="totalCheckboxPosition === 'total'"
+                    v-if="selectableColumn.totalCheckboxPosition === 'total'"
                     v-model="areAllChecked"
                     :indeterminate="isIndeterminate"
                   />
-                </th>
+                </td>
                 <template v-for="(group, groupIndex) in groupsOfColumns">
                   <td
                     v-for="(column, index) in group.columns"
                     :key="`col${groupIndex}${index}`"
                     :class="getCellClasses(column, group)"
+                    :observer-key="column.sticky ? column.key : null"
                     class="q-table__cell q-table__total-cell"
                   >
                     <slot
@@ -210,12 +207,12 @@
 
               <row-hoc
                 v-for="(row, rowIndex) in computedRows"
+                :ref="rowIndex === 0 && 'QFirstRow'"
                 :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"
@@ -224,7 +221,8 @@
                 :custom-row-class="customRowClass"
                 :custom-row-style="customRowStyle"
                 :checked-rows="checkedRows"
-                :selectable="selectable"
+                :is-selectable="isSelectable"
+                :is-selectable-column-sticked="isSelectableColumnSticked"
                 :row-click="$listeners['row-click'] && handleRowClick"
                 @expand-click="handleExpandClick"
                 @check="handleRowCheck"
@@ -271,7 +269,7 @@
 </template>
 
 <script>
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, throttle } from 'lodash-es';
 import QTableRow from './components/QTableRow';
 import DragElements from './components/DragElements';
 
@@ -280,6 +278,7 @@ import withQTableRow from './hocs/withQTableRow';
 const RowHoc = withQTableRow(QTableRow);
 const shadowDropOffset = 3;
 const MIN_BLANK_TABLE_HEIGHT = 228;
+const CHECKBOX_COL_WIDTH = 64;
 
 export default {
   name: 'QTable',
@@ -328,10 +327,6 @@ export default {
       type: Array,
       required: true
     },
-    stickyColumnKey: {
-      type: String,
-      default: null
-    },
     /**
      * Array of objects, each object must contain `[column.key]: value` pair
      */
@@ -369,14 +364,6 @@ export default {
       type: String,
       default: ''
     },
-    /**
-     * Where total checkbox need to place, `header` or `total`
-     */
-    totalCheckboxPosition: {
-      type: String,
-      default: 'header',
-      validator: value => ['header', 'total'].includes(value)
-    },
     pagesInExpand: {
       type: [Boolean, String],
       default: false
@@ -402,11 +389,22 @@ export default {
       default: null
     },
     /**
-     * Show/hide checkboxes
+     * Checkboxes column.
+     * `sticky` - whether column should stick.
+     * `totalCheckboxPosition` - where total checkbox need to place, `header` or `total`.
      */
-    selectable: {
-      type: Boolean,
-      default: false
+    selectableColumn: {
+      type: Object,
+      default: () => ({}),
+      required: false,
+      validator: props => {
+        if (!Object.keys(props).length) return true;
+
+        return (
+          props.totalCheckboxPosition &&
+          ['header', 'total'].includes(props.totalCheckboxPosition)
+        );
+      }
     },
     defaultSort: {
       type: Object,
@@ -436,7 +434,14 @@ export default {
       loaderRow: null,
       wrapperClass: '',
       checkedRows: [],
-      sort: this.defaultSort
+      sort: this.defaultSort,
+      stickedOffsets: {
+        left: {},
+        right: {}
+      },
+      observers: {},
+      isRendered: false,
+      QFirstRowEl: null
     };
   },
 
@@ -448,7 +453,6 @@ export default {
             ...col,
             align: col.align ?? group.align ?? 'left'
           };
-
           return newCol;
         });
         return acc.concat(eachGroup);
@@ -480,10 +484,18 @@ export default {
       }
     },
 
+    isSelectable() {
+      return Boolean(Object.keys(this.selectableColumn).length);
+    },
+
+    isSelectableColumnSticked() {
+      return (this.isSelectable && this.selectableColumn?.sticky) ?? false;
+    },
+
     tableClasses() {
       return {
         'q-table__draggable': this.isDraggable,
-        'q-table__selectable': this.selectable,
+        'q-table__selectable': this.isSelectable,
         'q-table__separated': this.isSeparated,
         'q-table__grid': this.grid,
         'q-table__fixed': this.fixedLayout
@@ -500,14 +512,6 @@ export default {
       return Boolean(Object.keys(this.total).length);
     },
 
-    isLeftShadowShown() {
-      return this.stickyColumnKey && this.scrolled > 0;
-    },
-
-    isRightShadowShown() {
-      return this.stickyColumnKey && this.tableClass !== 'scrolled-right';
-    },
-
     loadingWrapperClass() {
       return {
         height: this.loaderWrapperHeight ? `${this.loaderWrapperHeight}px` : '',
@@ -532,6 +536,10 @@ export default {
         ...row,
         treeIndex: index
       }));
+    },
+
+    checkboxColWidth() {
+      return { width: `${CHECKBOX_COL_WIDTH}px` };
     }
   },
 
@@ -585,6 +593,14 @@ export default {
     this.changeWrapperHeight();
   },
 
+  beforeUpdate() {
+    this.QFirstRowEl = this.$refs.QFirstRow[0].$el;
+    this.getStickedOffsets();
+    this.createObservers();
+
+    if (!this.isRendered) this.detectIntersections(0);
+  },
+
   created() {
     window.addEventListener('resize', this.changeWrapperHeight, {
       passive: true
@@ -614,6 +630,13 @@ export default {
 
       this.wrapperWidth = wrapper.offsetWidth;
     }
+
+    if (!this.$refs.scrollbar) return;
+
+    this.$watch(
+      () => this.$refs.scrollbar.moveX,
+      throttle(this.detectIntersections, 100)
+    );
   },
 
   beforeDestroy() {
@@ -623,6 +646,183 @@ export default {
   },
 
   methods: {
+    createObservers() {
+      if (!this.$refs.QTable) return;
+
+      this.observers = {};
+
+      let totalWidth = parseFloat(
+        window.getComputedStyle(this.$refs.tableWrapper).paddingLeft
+      );
+
+      if (this.isSelectable) {
+        if (this.isSelectableColumnSticked) {
+          this.observers['q-table-checkboxes'] = {
+            position: 'left',
+            triggerLeft: totalWidth,
+            triggerRight: totalWidth + CHECKBOX_COL_WIDTH,
+            offset: 0,
+            isSticked: false
+          };
+        }
+
+        totalWidth += CHECKBOX_COL_WIDTH;
+      }
+
+      this.allColumns.forEach(({ sticky, key }, index) => {
+        const elementWidth = this.QFirstRowEl.querySelector(
+          `td:nth-child(${index + (this.isSelectable ? 2 : 1)})`
+        ).offsetWidth;
+
+        if (!sticky) {
+          totalWidth += elementWidth;
+          return;
+        }
+
+        this.observers[key] = {
+          position: sticky.position,
+          triggerLeft: totalWidth,
+          triggerRight: totalWidth + elementWidth,
+          offset: this.getStickyOffset(sticky.position, key),
+          isSticked: false
+        };
+
+        totalWidth += elementWidth;
+      });
+
+      totalWidth += parseFloat(
+        window.getComputedStyle(this.$refs.tableWrapper).paddingRight
+      );
+    },
+
+    detectIntersections(moveX) {
+      const rootWidth = this.$refs.root.offsetWidth;
+      const moveXPixels = (rootWidth * moveX) / 100;
+
+      if (!this.$refs.QTable) return;
+
+      const observers = { ...this.observers };
+
+      Object.entries(observers).forEach(
+        (
+          [key, { position, triggerLeft, triggerRight, offset, isSticked }],
+          index
+        ) => {
+          const intersectableElements = this.$refs.QTable.querySelectorAll(
+            `[observer-key=${key}]`
+          );
+
+          const scroll = moveXPixels + offset;
+
+          let triggerWithinRoot = triggerLeft < scroll;
+          let triggerOutsideRoot = triggerLeft >= scroll;
+
+          if (position === 'right') {
+            const reversedOffset = triggerRight + offset * 2;
+            triggerWithinRoot = reversedOffset > scroll + rootWidth;
+            triggerOutsideRoot = reversedOffset < scroll + rootWidth;
+          }
+
+          const isTriggerConditionChanged =
+            (!isSticked && triggerWithinRoot) ||
+            (isSticked && triggerOutsideRoot);
+
+          if (!isTriggerConditionChanged) return;
+
+          observers[key].isSticked = !isSticked && triggerWithinRoot;
+          intersectableElements.forEach(elem =>
+            this.changeStickyStyles({
+              elem,
+              index,
+              position,
+              offset,
+              isOff: isSticked && triggerOutsideRoot
+            })
+          );
+        }
+      );
+
+      this.observers = observers;
+      this.isRendered = true;
+    },
+
+    changeStickyStyles({ elem, index, position, isOff, offset }) {
+      if (isOff) {
+        elem.classList.remove('q-table__sticked-cell');
+
+        if (position === 'right') {
+          elem.classList.remove('q-table__sticked-cell_is-reversed');
+          /* eslint-disable-next-line no-param-reassign */
+          elem.style.zIndex = null;
+        }
+
+        /* eslint-disable-next-line no-param-reassign */
+        elem.style[position] = null;
+
+        return;
+      }
+
+      elem.classList.add('q-table__sticked-cell');
+
+      let correction = this.grid ? index : 0;
+
+      if (position === 'right') {
+        const reversedIndex =
+          Object.keys(this.stickedOffsets.right).length + 2 - index;
+
+        elem.classList.add('q-table__sticked-cell_is-reversed');
+        /* eslint-disable-next-line no-param-reassign */
+        elem.style.zIndex = reversedIndex;
+
+        correction = this.grid ? reversedIndex : 0;
+      }
+
+      /* eslint-disable-next-line no-param-reassign */
+      elem.style[position] = `${offset + correction}px`;
+    },
+
+    getStickyOffset(position, key) {
+      if (!Object.keys(this.stickedOffsets[position]).length) return 0;
+
+      return this.stickedOffsets[position]?.[key] ?? 0;
+    },
+
+    getStickedOffsets() {
+      if (!this.$refs.QTable) return;
+
+      this.stickedOffsets = {
+        left: {},
+        right: {}
+      };
+
+      let tds = this.QFirstRowEl.querySelectorAll('td');
+
+      if (!tds.length) return;
+
+      let totalLeftWidth = 0;
+      let totalRightWidth = 0;
+
+      if (this.isSelectable && this.isSelectableColumnSticked) {
+        this.stickedOffsets.left['q-table-checkboxes'] = CHECKBOX_COL_WIDTH;
+        totalLeftWidth += CHECKBOX_COL_WIDTH;
+      }
+
+      this.allColumns.forEach((col, index) => {
+        if (col.sticky?.position === 'left') {
+          this.stickedOffsets.left[col.key] = totalLeftWidth;
+          totalLeftWidth += tds[index].offsetWidth;
+        }
+      });
+
+      tds = Array.from(tds).reverse();
+      [...this.allColumns].reverse().forEach((col, index) => {
+        if (col.sticky?.position === 'right') {
+          this.stickedOffsets.right[col.key] = totalRightWidth;
+          totalRightWidth += tds[index].offsetWidth;
+        }
+      });
+    },
+
     getHeaderContentClass({ slots }) {
       const hasSlot = Boolean(slots?.header || this.$scopedSlots.header);
       return hasSlot ? null : 'q-table__header-cell-content_original';
@@ -826,7 +1026,7 @@ export default {
       this.scrolled = target.scrollLeft;
     },
 
-    getHeaderCellStyle(group, column) {
+    getHeaderCellStyles(group, column) {
       const style = {};
 
       if (column?.minWidth) style.minWidth = column.minWidth;
@@ -851,10 +1051,6 @@ export default {
         );
       }
 
-      if (this.stickyColumnKey === column.key) {
-        classes.push('q-table__cell_sticky');
-      }
-
       return classes;
     },
 
diff --git a/src/qComponents/QTable/src/components/QTableRow/index.vue b/src/qComponents/QTable/src/components/QTableRow/index.vue
index 533960d6..4e67f703 100644
--- a/src/qComponents/QTable/src/components/QTableRow/index.vue
+++ b/src/qComponents/QTable/src/components/QTableRow/index.vue
@@ -5,11 +5,9 @@
     @click="rowClick && rowClick(row)"
   >
     <td
-      v-if="selectable"
+      v-if="isSelectable"
       class="q-table__cell q-table__cell_selectable"
-      :class="{
-        'q-table__cell_sticky': stickyColumnKey
-      }"
+      :observer-key="isSelectableColumnSticked && 'q-table-checkboxes'"
       :style="firstTdStyle"
     >
       <div
@@ -25,13 +23,13 @@
     <td
       v-for="(column, columnIndex) in columns"
       :key="column.key"
-      :class="getStickyColumnClass(column.key)"
-      :style="getCellStyle(column, columnIndex)"
+      :style="getCellStyle(columnIndex)"
       :align="column.align || 'left'"
+      :observer-key="column.sticky ? column.key : null"
       class="q-table__cell"
     >
       <div
-        v-if="!selectable && canRowExpand(columnIndex)"
+        v-if="!isSelectable && canRowExpand(columnIndex)"
         class="q-table__expand-arrow"
         :class="openedTreeClass"
         @click="handleExpandClick"
@@ -94,10 +92,6 @@ export default {
       type: String,
       default: 'children'
     },
-    stickyColumnKey: {
-      type: String,
-      default: null
-    },
     expandable: {
       type: Boolean,
       default: false
@@ -126,7 +120,11 @@ export default {
       type: Function,
       default: null
     },
-    selectable: {
+    isSelectable: {
+      type: Boolean,
+      default: false
+    },
+    isSelectableColumnSticked: {
       type: Boolean,
       default: false
     },
@@ -216,7 +214,8 @@ export default {
       this.$emit('expand-click', this.row);
     },
     getFirstTdStyle() {
-      if (!this.selectable || !this.row.data[this.childrenKey]?.length) return;
+      if (!this.isSelectable || !this.row.data[this.childrenKey]?.length)
+        return;
 
       const elm = this.$el?.querySelector('td:first-child');
 
@@ -230,12 +229,12 @@ export default {
         paddingLeft: `${Number(paddingLeft) + this.indent}px`
       };
     },
-    getCellStyle(column, columnIndex) {
-      if (!this.indent) return {};
-
+    getCellStyle(index) {
       const style = {};
 
-      if (columnIndex === 0 && !this.selectable && this.$el) {
+      if (!this.indent) return style;
+
+      if (index === 0 && !this.isSelectable && this.$el) {
         const elm = this.$el.querySelector('td:first-child');
 
         if (elm) {
@@ -249,9 +248,6 @@ export default {
 
       return style;
     },
-    getStickyColumnClass(key) {
-      return this.stickyColumnKey === key ? 'q-table__cell_sticky' : '';
-    },
     updateRow(row, index, key, column) {
       let value = get(row.data || row, key);
 
diff --git a/src/qComponents/QTable/src/q-table.scss b/src/qComponents/QTable/src/q-table.scss
index 3aa1d3bc..df2850c1 100644
--- a/src/qComponents/QTable/src/q-table.scss
+++ b/src/qComponents/QTable/src/q-table.scss
@@ -13,6 +13,9 @@
   --custom-box-shadow: -1px -1px 3px rgba(var(--color-rgb-white), 0.25),
     2px 1px 3px rgba(var(--color-rgb-blue), 0.4);
 
+  --custom-box-shadow-reversed: 1px -1px 3px rgba(var(--color-rgb-white), 0.25),
+    -2px 1px 3px rgba(var(--color-rgb-blue), 0.4);
+
   &__fixed {
     table-layout: fixed;
   }
@@ -85,7 +88,7 @@
 
     &_scrollable {
       .q-table__table {
-        padding-bottom: 3px;
+        padding-bottom: 11px;
       }
     }
 
@@ -239,7 +242,7 @@
       padding-left: 16px;
     }
 
-    &.q-table__cell_sticky {
+    &.q-table__sticked-cell {
       background-color: var(--color-tertiary-gray-light);
     }
 
@@ -316,14 +319,18 @@
     }
   }
 
-  &__cell_sticky {
+  &__cell {
+    position: relative;
+  }
+
+  &__sticked-cell {
     position: sticky;
     left: 0;
-    z-index: 1;
-    text-align: left;
+    z-index: 2;
+    box-shadow: var(--custom-box-shadow);
 
-    .q-table__selectable &:not(:first-child) {
-      left: 64px;
+    &_is-reversed {
+      box-shadow: var(--custom-box-shadow-reversed);
     }
   }
 
diff --git a/stories/components/QTable/QTable.stories.js b/stories/components/QTable/QTable.stories.js
index a587ef34..68b4797c 100644
--- a/stories/components/QTable/QTable.stories.js
+++ b/stories/components/QTable/QTable.stories.js
@@ -19,6 +19,7 @@ export default {
     total: {
       control: { type1: 'object' }
     },
+
     childrenKey: {
       table: { disable: true }
     },
@@ -41,7 +42,6 @@ export default {
       direction: 'descending'
     },
     fixedLayout: false,
-    selectable: false,
     groupsOfColumns: [
       {
         key: 'one',
@@ -86,7 +86,9 @@ export default {
         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'
+        col6: 'quis nostrud exercitation ullamco laboris',
+        col8: 'quis nostrud exercitation ullamco laboris',
+        col7: 'quis nostrud exercitation ullamco laboris'
       },
       {
         col1: 'nisi ut aliquip ex ea commodo consequat',
@@ -94,7 +96,9 @@ export default {
         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'
+        col6: 'sunt in culpa qui officia deserunt mollit anim id est laborum',
+        col7: 'sunt in culpa qui officia deserunt mollit anim id est laborum',
+        col8: 'sunt in culpa qui officia deserunt mollit anim id est laborum'
       },
       {
         col1:
@@ -108,6 +112,10 @@ export default {
         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.',
+        col7:
+          'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+        col8:
           'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
       }
     ],
diff --git a/stories/components/QTable/Selectable.js b/stories/components/QTable/Selectable.js
index 12fe8e57..d7a005e6 100644
--- a/stories/components/QTable/Selectable.js
+++ b/stories/components/QTable/Selectable.js
@@ -3,7 +3,9 @@ import Template from './Default';
 const Selectable = Template.bind({});
 
 Selectable.args = {
-  selectable: true
+  selectableColumn: {
+    totalCheckboxPosition: 'header'
+  }
 };
 
 export default Selectable;
diff --git a/stories/components/QTable/StickyColumn.js b/stories/components/QTable/StickyColumn.js
index 93ea5630..ecdf2941 100644
--- a/stories/components/QTable/StickyColumn.js
+++ b/stories/components/QTable/StickyColumn.js
@@ -3,8 +3,81 @@ import Template from './Default';
 const StickyColumn = Template.bind({});
 
 StickyColumn.args = {
-  stickyColumnKey: 'col1',
-  fixedLayout: true
+  groupsOfColumns: [
+    {
+      key: 'one',
+      columns: [
+        {
+          key: 'col1',
+          value: 'Column 1',
+          formatter: val => `formatted_${val}`,
+          width: '300px'
+        },
+        {
+          key: 'col2',
+          value: 'Column 2 sticky',
+          sticky: {
+            position: 'left'
+          }
+        },
+        {
+          key: 'col3',
+          value: 'Column 3',
+          width: '150px',
+          sortable: true
+        },
+        {
+          key: 'col4',
+          value: 'Column 4',
+          sortable: true,
+          slots: {
+            header: 'customHeader',
+            row: 'customRow'
+          }
+        },
+        {
+          key: 'col5',
+          value: 'Column 5 sticky',
+          sticky: {
+            position: 'right'
+          }
+        },
+        {
+          key: 'col6',
+          value: 'Column 6'
+        },
+        {
+          key: 'col7',
+          value: 'Column 7 sticky',
+          width: '157px',
+          sticky: {
+            position: 'right'
+          }
+        },
+        {
+          key: 'col8',
+          value: 'Column 8',
+          width: '1000px'
+        }
+      ]
+    }
+  ],
+  selectableColumn: {
+    sticky: true,
+    totalCheckboxPosition: 'total'
+  },
+  fixedLayout: true,
+  grid: true,
+  total: {
+    col1: 'Total 100',
+    col2: 'Total 200',
+    col3: 'Total 300',
+    col4: 'Total 400',
+    col5: 'Total 500',
+    col6: 'Total 600',
+    col7: 'Total 700',
+    col8: 'Total 800'
+  }
 };
 
 export default StickyColumn;