From 91243d525cce5405c3361453feedd88150d0ab3a Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Mon, 28 May 2018 06:51:37 +0530
Subject: [PATCH] First cut

---
 index.html           |  8 ++++----
 src/body-renderer.js | 28 +++++++++++++++++++++++++++-
 src/columnmanager.js | 26 ++++++++++++++++++++++----
 src/datatable.js     | 25 +++++++++++++++++--------
 src/rowmanager.js    | 37 +++++++++++++++++++++++++++++++++++--
 src/style.css        | 19 ++++++++++++++++---
 src/style.js         | 36 +++++++++++++++++++++++++++---------
 7 files changed, 148 insertions(+), 31 deletions(-)

diff --git a/index.html b/index.html
index 36cee9e..a81b596 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
 	<title>Frappé DataTable</title>
 	<style>
 		body {
-			font-family: 'Tahoma';
+			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 			font-weight: normal;
 			font-size: 14px;
 		}
@@ -23,7 +23,7 @@
 		<input type="checkbox" id="input-large-data" />
 		<span>Large Data</span>
 	</label>
-	<section style="font-size: 12px; width: 60%; margin: 0 auto;">
+	<section style="font-size: 12px; width: 40%; margin: 0 auto;">
 
 	</section>
 
@@ -57,7 +57,7 @@
 					{ name: "Start Date" },
 					{ name: "Salary" }
 				];
-				data = [[ "Tiger Nixon", {content: "System Architect<br>New line", editable: false}, "Edinburgh", "5421", "2011/04/25", "$320,800"], [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"], [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"], [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"], [ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"], [ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000"], [ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500"], [ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900"], [ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500"], [ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600"], [ "Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560"], [ "Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000"], [ "Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600"], [ "Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500"], [ "Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750"], [ "Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500"], [ "Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000"], [ "Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "$237,500"], [ "Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "$132,000"], [ "Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500"], [ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000"], [ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000"], [ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450"], [ "Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600"], [ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000"], [ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575"], [ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650"], [ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850"], [ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000"], [ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000"], [ "Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", "$95,400"], [ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500"], [ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000"], [ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500"], [ "Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050"], [ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"], [ "Howard Hatfield", "Office Manager", "San Francisco", "7031", "2008/12/16", "$164,500"], [ "Hope Fuentes", "Secretary", "San Francisco", "6318", "2010/02/12", "$109,850"], [ "Vivian Harrell", "Financial Controller", "San Francisco", "9422", "2009/02/14", "$452,500"], [ "Timothy Mooney", "Office Manager", "London", "7580", "2008/12/11", "$136,200"], [ "Jackson Bradshaw", "Director", "New York", "1042", "2008/09/26", "$645,750"], [ "Olivia Liang", "Support Engineer", "Singapore", "2120", "2011/02/03", "$234,500"], [ "Bruno Nash", "Software Engineer", "London", "6222", "2011/05/03", "$163,500"], [ "Sakura Yamamoto", "Support Engineer", "Tokyo", "9383", "2009/08/19", "$139,575"], [ "Thor Walton", "Developer", "New York", "8327", "2013/08/11", "$98,540"], [ "Finn Camacho", "Support Engineer", "San Francisco", "2927", "2009/07/07", "$87,500"], [ "Serge Baldwin", "Data Coordinator", "Singapore", "8352", "2012/04/09", "$138,575"], [ "Zenaida Frank", "Software Engineer", "New York", "7439", "2010/01/04", "$125,250"], [ "Zorita Serrano", "Software Engineer", "San Francisco", "4389", "2012/06/01", "$115,000"], [ "Jennifer Acosta", "Junior Javascript Developer", "Edinburgh", "3431", "2013/02/01", "$75,650"], [ "Cara Stevens", "Sales Assistant", "New York", "3990", "2011/12/06", "$145,600"], [ "Hermione Butler", "Regional Director", "London", "1016", "2011/03/21", "$356,250"], [ "Lael Greer", "Systems Administrator", "London", "6733", "2009/02/27", "$103,500"], [ "Jonas Alexander", "Developer", "San Francisco", "8196", "2010/07/14", "$86,500"], [ "Shad Decker", "Regional Director", "Edinburgh", "6373", "2008/11/13", "$183,000"], [ "Michael Bruce", "Javascript Developer", "Singapore", "5384", "2011/06/27", "$183,000"], [ "Donna Snider", "Customer Support", "New York", "4226", "2011/01/25", "$112,000"]];
+				data = [[ "Tiger Nixon", {content: "System Architect", editable: false}, "Edinburgh", "5421", "2011/04/25", "$320,800"], [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"], [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"], [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"], [ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"], [ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000"], [ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500"], [ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900"], [ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500"], [ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600"], [ "Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560"], [ "Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000"], [ "Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600"], [ "Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500"], [ "Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750"], [ "Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500"], [ "Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000"], [ "Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "$237,500"], [ "Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "$132,000"], [ "Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500"], [ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000"], [ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000"], [ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450"], [ "Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600"], [ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000"], [ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575"], [ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650"], [ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850"], [ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000"], [ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000"], [ "Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", "$95,400"], [ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500"], [ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000"], [ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500"], [ "Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050"], [ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"], [ "Howard Hatfield", "Office Manager", "San Francisco", "7031", "2008/12/16", "$164,500"], [ "Hope Fuentes", "Secretary", "San Francisco", "6318", "2010/02/12", "$109,850"], [ "Vivian Harrell", "Financial Controller", "San Francisco", "9422", "2009/02/14", "$452,500"], [ "Timothy Mooney", "Office Manager", "London", "7580", "2008/12/11", "$136,200"], [ "Jackson Bradshaw", "Director", "New York", "1042", "2008/09/26", "$645,750"], [ "Olivia Liang", "Support Engineer", "Singapore", "2120", "2011/02/03", "$234,500"], [ "Bruno Nash", "Software Engineer", "London", "6222", "2011/05/03", "$163,500"], [ "Sakura Yamamoto", "Support Engineer", "Tokyo", "9383", "2009/08/19", "$139,575"], [ "Thor Walton", "Developer", "New York", "8327", "2013/08/11", "$98,540"], [ "Finn Camacho", "Support Engineer", "San Francisco", "2927", "2009/07/07", "$87,500"], [ "Serge Baldwin", "Data Coordinator", "Singapore", "8352", "2012/04/09", "$138,575"], [ "Zenaida Frank", "Software Engineer", "New York", "7439", "2010/01/04", "$125,250"], [ "Zorita Serrano", "Software Engineer", "San Francisco", "4389", "2012/06/01", "$115,000"], [ "Jennifer Acosta", "Junior Javascript Developer", "Edinburgh", "3431", "2013/02/01", "$75,650"], [ "Cara Stevens", "Sales Assistant", "New York", "3990", "2011/12/06", "$145,600"], [ "Hermione Butler", "Regional Director", "London", "1016", "2011/03/21", "$356,250"], [ "Lael Greer", "Systems Administrator", "London", "6733", "2009/02/27", "$103,500"], [ "Jonas Alexander", "Developer", "San Francisco", "8196", "2010/07/14", "$86,500"], [ "Shad Decker", "Regional Director", "Edinburgh", "6373", "2008/11/13", "$183,000"], [ "Michael Bruce", "Javascript Developer", "Singapore", "5384", "2011/06/27", "$183,000"], [ "Donna Snider", "Customer Support", "New York", "4226", "2011/01/25", "$112,000"]];
 
 
 				if (largeData) {
@@ -74,7 +74,7 @@
 				var datatable = new DataTable('section', {
 					checkboxColumn: true,
 					serialNoColumn: true,
-					layout: 'fluid',
+					layout: 'fixed',
 					columns,
 					data,
 					inlineFilters: true,
diff --git a/src/body-renderer.js b/src/body-renderer.js
index 2032cc0..1f66684 100644
--- a/src/body-renderer.js
+++ b/src/body-renderer.js
@@ -10,6 +10,7 @@ export default class BodyRenderer {
         this.rowmanager = instance.rowmanager;
         this.cellmanager = instance.cellmanager;
         this.bodyScrollable = instance.bodyScrollable;
+        this.datatableWrapperLeft = instance.datatableWrapperLeft;
         this.log = instance.log;
         this.appendRemainingData = nextTick(this.appendRemainingData, this);
     }
@@ -20,6 +21,11 @@ export default class BodyRenderer {
         } else {
             this.renderBodyHTML();
         }
+        this.renderLeftColumns();
+    }
+
+    renderLeftColumns() {
+        $('.dt-scrollable', this.datatableWrapperLeft).innerHTML = this.getLeftBodyHTML();
     }
 
     renderBodyHTML() {
@@ -48,7 +54,7 @@ export default class BodyRenderer {
             this.clusterize = new Clusterize({
                 rows: initialData,
                 scrollElem: this.bodyScrollable,
-                contentElem: $('tbody', this.bodyScrollable),
+                contentElem: $('.dt-body', this.bodyScrollable),
                 callbacks: {
                     clusterChanged: () => this.restoreState()
                 },
@@ -106,6 +112,26 @@ export default class BodyRenderer {
         `;
     }
 
+    getLeftBodyHTML(rows) {
+        if (!rows) rows = this.datamanager.getRowsForView();
+
+        const columns = this.datamanager.getColumns();
+        const leftColumns = columns.filter(col => {
+            return (col.id === '_checkbox' || col.id === '_rowIndex' || col.fixed);
+        }).map(col => col.colIndex);
+
+        return `
+            <table class="dt-body">
+                <tbody>
+                    ${rows.map(row => {
+                        const leftRow = row.filter(cell => leftColumns.includes(cell.colIndex));
+                        return this.rowmanager.getRowHTML(leftRow, row.meta);
+                    }).join('')}
+                </tbody>
+            </table>
+        `;
+    }
+
     getNoDataHTML() {
         return `<div class="dt-scrollable__no-data">${this.options.noDataMessage}</div>`;
     }
diff --git a/src/columnmanager.js b/src/columnmanager.js
index 7113ae9..7052c6f 100644
--- a/src/columnmanager.js
+++ b/src/columnmanager.js
@@ -17,22 +17,25 @@ export default class ColumnManager {
             'style',
             'wrapper',
             'rowmanager',
-            'bodyScrollable'
+            'bodyScrollable',
+            'datatableWrapperLeft'
         ]);
 
         this.bindEvents();
     }
 
     renderHeader() {
-        this.header.innerHTML = '<thead></thead>';
         this.refreshHeader();
+        this.refreshHeaderLeft();
     }
 
     refreshHeader() {
         const columns = this.datamanager.getColumns();
 
         // refresh html
-        $('thead', this.header).innerHTML = this.getHeaderHTML(columns);
+        this.header.innerHTML = `
+            <thead>${this.getHeaderHTML(columns)}</thead>
+        `;
 
         this.$filterRow = $('.dt-row[data-is-filter]', this.header);
         if (this.$filterRow) {
@@ -43,6 +46,16 @@ export default class ColumnManager {
         this.bindMoveColumn();
     }
 
+    refreshHeaderLeft() {
+        let columns = this.datamanager.getColumns();
+
+        const leftColumns = columns.filter(col => {
+            return (col.id === '_checkbox' || col.id === '_rowIndex' || col.fixed);
+        });
+
+        $('.dt-header', this.datatableWrapperLeft).innerHTML = this.getHeaderHTML(leftColumns);
+    }
+
     getHeaderHTML(columns) {
         let html = this.rowmanager.getRowHTML(columns, {
             isHeader: 1
@@ -315,8 +328,13 @@ export default class ColumnManager {
             $column = this.header.querySelector(selector);
             this.$columnMap[colIndex] = $column;
         }
-
         $column.style.width = width + 'px';
+
+        // fixed left column
+        const $leftColumn = $(selector, this.datatableWrapperLeft);
+        if ($leftColumn) {
+            $leftColumn.style.width = width + 'px';
+        }
     }
 
     getColumnMinWidth(colIndex) {
diff --git a/src/datatable.js b/src/datatable.js
index a7f70a6..c2672c6 100644
--- a/src/datatable.js
+++ b/src/datatable.js
@@ -68,9 +68,17 @@ class DataTable {
     prepareDom() {
         this.wrapper.innerHTML = `
             <div class="datatable">
-                <table class="dt-header">
-                </table>
-                <div class="dt-scrollable">
+                <div class="datatable-main">
+                    <table class="dt-header">
+                    </table>
+                    <div class="dt-scrollable">
+                    </div>
+                </div>
+                <div class="datatable-left">
+                    <table class="dt-header">
+                    </table>
+                    <div class="dt-scrollable">
+                    </div>
                 </div>
                 <div class="dt-freeze">
                     <span class="dt-freeze__message">
@@ -83,11 +91,12 @@ class DataTable {
         `;
 
         this.datatableWrapper = $('.datatable', this.wrapper);
-        this.header = $('.dt-header', this.wrapper);
-        this.bodyScrollable = $('.dt-scrollable', this.wrapper);
-        this.freezeContainer = $('.dt-freeze', this.wrapper);
-        this.toastMessage = $('.dt-toast', this.wrapper);
-        this.pasteTarget = $('.dt-paste-target', this.wrapper);
+        this.datatableWrapperLeft = $('.datatable-left', this.wrapper);
+        this.header = $('.dt-header', this.datatableWrapper);
+        this.bodyScrollable = $('.dt-scrollable', this.datatableWrapper);
+        this.freezeContainer = $('.dt-freeze', this.datatableWrapper);
+        this.toastMessage = $('.dt-toast', this.datatableWrapper);
+        this.pasteTarget = $('.dt-paste-target', this.datatableWrapper);
     }
 
     refresh(data, columns) {
diff --git a/src/rowmanager.js b/src/rowmanager.js
index 99de615..dc00bab 100644
--- a/src/rowmanager.js
+++ b/src/rowmanager.js
@@ -3,7 +3,8 @@ import {
     makeDataAttributeString,
     nextTick,
     ensureArray,
-    linkProperties
+    linkProperties,
+    throttle
 } from './utils';
 
 export default class RowManager {
@@ -14,7 +15,8 @@ export default class RowManager {
             'fireEvent',
             'wrapper',
             'bodyScrollable',
-            'bodyRenderer'
+            'bodyRenderer',
+            'datatableWrapperLeft'
         ]);
 
         this.bindEvents();
@@ -31,6 +33,7 @@ export default class RowManager {
 
     bindEvents() {
         this.bindCheckbox();
+        this.bindScrollSync();
     }
 
     bindCheckbox() {
@@ -55,6 +58,36 @@ export default class RowManager {
         });
     }
 
+    bindScrollSync() {
+        // $.on(this.wrapper, 'scroll', '.dt-scrollable', (e, $el) => {
+        //     console.log(e, $el);
+        // });
+
+        if (!this._$leftBodyScrollable) {
+            this._$leftBodyScrollable = $('.dt-scrollable', this.datatableWrapperLeft);
+        }
+
+        $.on(this.bodyScrollable, 'scroll', throttle((e) => {
+            console.log('main scrolled');
+            requestAnimationFrame(() => {
+                if (this._$leftBodyScrollable.scrollTop === this.bodyScrollable.scrollTop) {
+                    return;
+                }
+                this._$leftBodyScrollable.scrollTop = this.bodyScrollable.scrollTop;
+            });
+        }, 16));
+
+        $.on(this._$leftBodyScrollable, 'scroll', throttle((e) => {
+            console.log('left scrolled');
+            requestAnimationFrame(() => {
+                if (this._$leftBodyScrollable.scrollTop === this.bodyScrollable.scrollTop) {
+                    return;
+                }
+                this.bodyScrollable.scrollTop = this._$leftBodyScrollable.scrollTop;
+            });
+        }, 16));
+    }
+
     refreshRows() {
         this.instance.renderBody();
         this.instance.setDimensions();
diff --git a/src/style.css b/src/style.css
index 0f8ef1b..81cab36 100644
--- a/src/style.css
+++ b/src/style.css
@@ -25,16 +25,25 @@
 
 .datatable {
 	position: relative;
+}
+
+.datatable-main {
 	overflow: auto;
 }
 
+.datatable-left {
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 1;
+	background-color: white;
+}
+
 .dt-header {
 	border-collapse: collapse;
 	border-bottom: 1px solid var(--border-color);
 
-	position: absolute;
-	top: 0;
-	left: 0;
+	position: relative;
 	background-color: var(--cell-bg);
 }
 
@@ -257,3 +266,7 @@
 body.dt-resize {
 	cursor: col-resize;
 }
+
+.datatable-left [data-is-filter] {
+	display: none;
+}
\ No newline at end of file
diff --git a/src/style.js b/src/style.js
index f285b3b..4deb438 100644
--- a/src/style.js
+++ b/src/style.js
@@ -12,14 +12,14 @@ export default class Style {
         linkProperties(this, this.instance, [
             'options', 'datamanager', 'columnmanager',
             'header', 'bodyScrollable', 'datatableWrapper',
-            'getColumn'
+            'datatableWrapperLeft', 'getColumn'
         ]);
 
         this.scopeClass = 'dt-instance-' + instance.constructor.instances;
         instance.datatableWrapper.classList.add(this.scopeClass);
 
         const styleEl = document.createElement('style');
-        instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
+        document.head.appendChild(styleEl);
         this.styleEl = styleEl;
 
         this.bindResizeWindow();
@@ -102,15 +102,17 @@ export default class Style {
 
         this.setDefaultCellHeight();
         this.setBodyStyle();
+
+        this.setDatatableLeftStyle();
     }
 
     setHeaderStyle() {
         if (this.options.layout === 'fluid') {
             // setting width as 0 will ensure that the
             // header doesn't take the available space
-            $.style(this.header, {
-                width: 0
-            });
+            // $.style(this.header, {
+            //     width: 0
+            // });
         }
 
         $.style(this.header, {
@@ -291,17 +293,33 @@ export default class Style {
                 });
             }
 
-            $.style(this.bodyScrollable, {
-                marginTop: $.style(this.header, 'height') + 'px'
-            });
+            // $.style(this.bodyScrollable, {
+            //     marginTop: $.style(this.header, 'height') + 'px'
+            // });
 
-            $.style($('table', this.bodyScrollable), {
+            $.style($('.dt-body', this.bodyScrollable), {
                 margin: 0,
                 width: '100%'
             });
         });
     }
 
+    setDatatableLeftStyle() {
+        const wrapperWidth = $.style(this.datatableWrapperLeft, 'width');
+        $.style(this.datatableWrapperLeft, {
+            width: wrapperWidth + 'px',
+            overflow: 'hidden'
+        });
+
+        const scrollable = $('.dt-scrollable', this.datatableWrapperLeft);
+
+        const width = $.style(scrollable, 'width');
+        $.style(scrollable, {
+            width: (width + 20) + 'px',
+            paddingRight: '20px'
+        });
+    }
+
     getColumnHeaderElement(colIndex) {
         colIndex = +colIndex;
         if (colIndex < 0) return null;