diff --git a/dist/frappe-datatable.cjs.js b/dist/frappe-datatable.cjs.js
index 21c9307..e9e98cc 100644
--- a/dist/frappe-datatable.cjs.js
+++ b/dist/frappe-datatable.cjs.js
@@ -1838,7 +1838,10 @@ class ColumnManager {
         };
 
         index = this.style.setStyle(selector, styles, index);
-        this._columnWidthMap[colIndex] = index;
+
+        if (index !== undefined) {
+            this._columnWidthMap[colIndex] = index;
+        }
     }
 
     setColumnHeaderWidth(colIndex) {
@@ -2938,7 +2941,11 @@ class BodyRenderer {
     renderBodyWithClusterize() {
         // first page
         const rows = this.datamanager.getRowsForView(0, 20);
-        const initialData = this.getDataForClusterize(rows);
+        let initialData = this.getDataForClusterize(rows);
+
+        if (initialData.length === 0) {
+            initialData = [`<tr class="no-data"><td>${this.options.noDataMessage}</td></tr>`];
+        }
 
         if (!this.clusterize) {
             // empty body
@@ -2960,8 +2967,7 @@ class BodyRenderer {
                     }
                 },
                 /* eslint-disable */
-                no_data_text: this.options.noDataMessage,
-                no_data_class: 'empty-state'
+                show_no_data_row: false,
                 /* eslint-enable */
             });
 
@@ -3023,11 +3029,14 @@ class Style {
         const styleEl = document.createElement('style');
         instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
         this.styleEl = styleEl;
-        this.styleSheet = styleEl.sheet;
 
         this.bindResizeWindow();
     }
 
+    get stylesheet() {
+        return this.styleEl.sheet;
+    }
+
     bindResizeWindow() {
         if (this.options.layout === 'fluid') {
             $.on(window, 'resize', throttle$1(() => {
@@ -3059,14 +3068,16 @@ class Style {
 
         let ruleString = `${prefixedSelector} { ${styles} }`;
 
-        let _index = this.styleSheet.cssRules.length;
+        if (!this.stylesheet) return;
+
+        let _index = this.stylesheet.cssRules.length;
         if (index !== -1) {
-            this.styleSheet.deleteRule(index);
+            this.stylesheet.deleteRule(index);
             _index = index;
         }
 
-        this.styleSheet.insertRule(ruleString, _index);
-        return _index;
+        this.stylesheet.insertRule(ruleString, _index);
+        return _index; // eslint-disable-line
     }
 
     setDimensions() {
@@ -3218,8 +3229,10 @@ class Style {
 
     setDefaultCellHeight() {
         if (this.__cellHeightSet) return;
-        const height = this.options.cellHeight ||
-            $.style($('.data-table-cell', this.instance.datatableWrapper), 'height');
+        const $firstCell = $('.data-table-cell', this.instance.bodyScrollable);
+        if (!$firstCell) return;
+
+        const height = this.options.cellHeight || $.style($firstCell, 'height');
         if (height) {
             this.setCellHeight(height);
             this.__cellHeightSet = true;
@@ -3272,7 +3285,8 @@ class Style {
         });
 
         $.style($('table', this.bodyScrollable), {
-            margin: 0
+            margin: 0,
+            width: '100%'
         });
     }
 
@@ -3443,12 +3457,8 @@ class DataTable {
             this.options || {}, options
         );
 
-        this.options.headerDropdown =
-            DEFAULT_OPTIONS.headerDropdown
-                .concat(
-                    this.options.headerDropdown || [],
-                    options.headerDropdown || []
-                );
+        this.options.headerDropdown
+            .push(...(options.headerDropdown || []));
 
         // custom user events
         this.events = Object.assign(
@@ -3602,7 +3612,7 @@ class DataTable {
 DataTable.instances = 0;
 
 var name = "frappe-datatable";
-var version = "0.0.2";
+var version = "0.0.3";
 var description = "A modern datatable library for the web";
 var main = "dist/frappe-datatable.cjs.js";
 var scripts = {"start":"yarn run dev","build":"rollup -c","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"};
diff --git a/dist/frappe-datatable.css b/dist/frappe-datatable.css
index 8ce9ace..45602ab 100644
--- a/dist/frappe-datatable.css
+++ b/dist/frappe-datatable.css
@@ -108,6 +108,12 @@
 		background-color: #f5f7fa;
 	}
 
+.body-scrollable .no-data td {
+		text-align: center;
+		padding: 8px;
+		padding: 0.5rem;
+	}
+
 .data-table-header {
 	position: absolute;
 	top: 0;
diff --git a/dist/frappe-datatable.js b/dist/frappe-datatable.js
index 85d028b..a17604f 100644
--- a/dist/frappe-datatable.js
+++ b/dist/frappe-datatable.js
@@ -1837,7 +1837,10 @@ class ColumnManager {
         };
 
         index = this.style.setStyle(selector, styles, index);
-        this._columnWidthMap[colIndex] = index;
+
+        if (index !== undefined) {
+            this._columnWidthMap[colIndex] = index;
+        }
     }
 
     setColumnHeaderWidth(colIndex) {
@@ -2937,7 +2940,11 @@ class BodyRenderer {
     renderBodyWithClusterize() {
         // first page
         const rows = this.datamanager.getRowsForView(0, 20);
-        const initialData = this.getDataForClusterize(rows);
+        let initialData = this.getDataForClusterize(rows);
+
+        if (initialData.length === 0) {
+            initialData = [`<tr class="no-data"><td>${this.options.noDataMessage}</td></tr>`];
+        }
 
         if (!this.clusterize) {
             // empty body
@@ -2959,8 +2966,7 @@ class BodyRenderer {
                     }
                 },
                 /* eslint-disable */
-                no_data_text: this.options.noDataMessage,
-                no_data_class: 'empty-state'
+                show_no_data_row: false,
                 /* eslint-enable */
             });
 
@@ -3022,11 +3028,14 @@ class Style {
         const styleEl = document.createElement('style');
         instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
         this.styleEl = styleEl;
-        this.styleSheet = styleEl.sheet;
 
         this.bindResizeWindow();
     }
 
+    get stylesheet() {
+        return this.styleEl.sheet;
+    }
+
     bindResizeWindow() {
         if (this.options.layout === 'fluid') {
             $.on(window, 'resize', throttle$1(() => {
@@ -3058,14 +3067,16 @@ class Style {
 
         let ruleString = `${prefixedSelector} { ${styles} }`;
 
-        let _index = this.styleSheet.cssRules.length;
+        if (!this.stylesheet) return;
+
+        let _index = this.stylesheet.cssRules.length;
         if (index !== -1) {
-            this.styleSheet.deleteRule(index);
+            this.stylesheet.deleteRule(index);
             _index = index;
         }
 
-        this.styleSheet.insertRule(ruleString, _index);
-        return _index;
+        this.stylesheet.insertRule(ruleString, _index);
+        return _index; // eslint-disable-line
     }
 
     setDimensions() {
@@ -3217,8 +3228,10 @@ class Style {
 
     setDefaultCellHeight() {
         if (this.__cellHeightSet) return;
-        const height = this.options.cellHeight ||
-            $.style($('.data-table-cell', this.instance.datatableWrapper), 'height');
+        const $firstCell = $('.data-table-cell', this.instance.bodyScrollable);
+        if (!$firstCell) return;
+
+        const height = this.options.cellHeight || $.style($firstCell, 'height');
         if (height) {
             this.setCellHeight(height);
             this.__cellHeightSet = true;
@@ -3271,7 +3284,8 @@ class Style {
         });
 
         $.style($('table', this.bodyScrollable), {
-            margin: 0
+            margin: 0,
+            width: '100%'
         });
     }
 
@@ -3442,12 +3456,8 @@ class DataTable {
             this.options || {}, options
         );
 
-        this.options.headerDropdown =
-            DEFAULT_OPTIONS.headerDropdown
-                .concat(
-                    this.options.headerDropdown || [],
-                    options.headerDropdown || []
-                );
+        this.options.headerDropdown
+            .push(...(options.headerDropdown || []));
 
         // custom user events
         this.events = Object.assign(
@@ -3601,7 +3611,7 @@ class DataTable {
 DataTable.instances = 0;
 
 var name = "frappe-datatable";
-var version = "0.0.2";
+var version = "0.0.3";
 var description = "A modern datatable library for the web";
 var main = "dist/frappe-datatable.cjs.js";
 var scripts = {"start":"yarn run dev","build":"rollup -c","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"};
diff --git a/docs/assets/frappe-datatable.js b/docs/assets/frappe-datatable.js
index 85d028b..a17604f 100644
--- a/docs/assets/frappe-datatable.js
+++ b/docs/assets/frappe-datatable.js
@@ -1837,7 +1837,10 @@ class ColumnManager {
         };
 
         index = this.style.setStyle(selector, styles, index);
-        this._columnWidthMap[colIndex] = index;
+
+        if (index !== undefined) {
+            this._columnWidthMap[colIndex] = index;
+        }
     }
 
     setColumnHeaderWidth(colIndex) {
@@ -2937,7 +2940,11 @@ class BodyRenderer {
     renderBodyWithClusterize() {
         // first page
         const rows = this.datamanager.getRowsForView(0, 20);
-        const initialData = this.getDataForClusterize(rows);
+        let initialData = this.getDataForClusterize(rows);
+
+        if (initialData.length === 0) {
+            initialData = [`<tr class="no-data"><td>${this.options.noDataMessage}</td></tr>`];
+        }
 
         if (!this.clusterize) {
             // empty body
@@ -2959,8 +2966,7 @@ class BodyRenderer {
                     }
                 },
                 /* eslint-disable */
-                no_data_text: this.options.noDataMessage,
-                no_data_class: 'empty-state'
+                show_no_data_row: false,
                 /* eslint-enable */
             });
 
@@ -3022,11 +3028,14 @@ class Style {
         const styleEl = document.createElement('style');
         instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
         this.styleEl = styleEl;
-        this.styleSheet = styleEl.sheet;
 
         this.bindResizeWindow();
     }
 
+    get stylesheet() {
+        return this.styleEl.sheet;
+    }
+
     bindResizeWindow() {
         if (this.options.layout === 'fluid') {
             $.on(window, 'resize', throttle$1(() => {
@@ -3058,14 +3067,16 @@ class Style {
 
         let ruleString = `${prefixedSelector} { ${styles} }`;
 
-        let _index = this.styleSheet.cssRules.length;
+        if (!this.stylesheet) return;
+
+        let _index = this.stylesheet.cssRules.length;
         if (index !== -1) {
-            this.styleSheet.deleteRule(index);
+            this.stylesheet.deleteRule(index);
             _index = index;
         }
 
-        this.styleSheet.insertRule(ruleString, _index);
-        return _index;
+        this.stylesheet.insertRule(ruleString, _index);
+        return _index; // eslint-disable-line
     }
 
     setDimensions() {
@@ -3217,8 +3228,10 @@ class Style {
 
     setDefaultCellHeight() {
         if (this.__cellHeightSet) return;
-        const height = this.options.cellHeight ||
-            $.style($('.data-table-cell', this.instance.datatableWrapper), 'height');
+        const $firstCell = $('.data-table-cell', this.instance.bodyScrollable);
+        if (!$firstCell) return;
+
+        const height = this.options.cellHeight || $.style($firstCell, 'height');
         if (height) {
             this.setCellHeight(height);
             this.__cellHeightSet = true;
@@ -3271,7 +3284,8 @@ class Style {
         });
 
         $.style($('table', this.bodyScrollable), {
-            margin: 0
+            margin: 0,
+            width: '100%'
         });
     }
 
@@ -3442,12 +3456,8 @@ class DataTable {
             this.options || {}, options
         );
 
-        this.options.headerDropdown =
-            DEFAULT_OPTIONS.headerDropdown
-                .concat(
-                    this.options.headerDropdown || [],
-                    options.headerDropdown || []
-                );
+        this.options.headerDropdown
+            .push(...(options.headerDropdown || []));
 
         // custom user events
         this.events = Object.assign(
@@ -3601,7 +3611,7 @@ class DataTable {
 DataTable.instances = 0;
 
 var name = "frappe-datatable";
-var version = "0.0.2";
+var version = "0.0.3";
 var description = "A modern datatable library for the web";
 var main = "dist/frappe-datatable.cjs.js";
 var scripts = {"start":"yarn run dev","build":"rollup -c","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"};
diff --git a/src/body-renderer.js b/src/body-renderer.js
index a3320f7..55f2462 100644
--- a/src/body-renderer.js
+++ b/src/body-renderer.js
@@ -39,7 +39,11 @@ export default class BodyRenderer {
     renderBodyWithClusterize() {
         // first page
         const rows = this.datamanager.getRowsForView(0, 20);
-        const initialData = this.getDataForClusterize(rows);
+        let initialData = this.getDataForClusterize(rows);
+
+        if (initialData.length === 0) {
+            initialData = [`<tr class="no-data"><td>${this.options.noDataMessage}</td></tr>`];
+        }
 
         if (!this.clusterize) {
             // empty body
@@ -61,8 +65,7 @@ export default class BodyRenderer {
                     }
                 },
                 /* eslint-disable */
-                no_data_text: this.options.noDataMessage,
-                no_data_class: 'empty-state'
+                show_no_data_row: false,
                 /* eslint-enable */
             });
 
diff --git a/src/columnmanager.js b/src/columnmanager.js
index 978821b..030b337 100644
--- a/src/columnmanager.js
+++ b/src/columnmanager.js
@@ -376,7 +376,10 @@ export default class ColumnManager {
         };
 
         index = this.style.setStyle(selector, styles, index);
-        this._columnWidthMap[colIndex] = index;
+
+        if (index !== undefined) {
+            this._columnWidthMap[colIndex] = index;
+        }
     }
 
     setColumnHeaderWidth(colIndex) {
diff --git a/src/datatable.js b/src/datatable.js
index 02453ac..8640a8c 100644
--- a/src/datatable.js
+++ b/src/datatable.js
@@ -46,12 +46,8 @@ class DataTable {
             this.options || {}, options
         );
 
-        this.options.headerDropdown =
-            DEFAULT_OPTIONS.headerDropdown
-                .concat(
-                    this.options.headerDropdown || [],
-                    options.headerDropdown || []
-                );
+        this.options.headerDropdown
+            .push(...(options.headerDropdown || []));
 
         // custom user events
         this.events = Object.assign(
diff --git a/src/style.css b/src/style.css
index 62d53f0..129f599 100644
--- a/src/style.css
+++ b/src/style.css
@@ -108,6 +108,11 @@
 	&.row-highlight-all .data-table-row:not(.row-unhighlight) {
 		background-color: var(--light-bg);
 	}
+
+	.no-data td {
+		text-align: center;
+		padding: var(--spacer-2);
+	}
 }
 
 .data-table-header {
diff --git a/src/style.js b/src/style.js
index b24daf7..5a086bc 100644
--- a/src/style.js
+++ b/src/style.js
@@ -21,11 +21,14 @@ export default class Style {
         const styleEl = document.createElement('style');
         instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
         this.styleEl = styleEl;
-        this.styleSheet = styleEl.sheet;
 
         this.bindResizeWindow();
     }
 
+    get stylesheet() {
+        return this.styleEl.sheet;
+    }
+
     bindResizeWindow() {
         if (this.options.layout === 'fluid') {
             $.on(window, 'resize', throttle(() => {
@@ -57,14 +60,16 @@ export default class Style {
 
         let ruleString = `${prefixedSelector} { ${styles} }`;
 
-        let _index = this.styleSheet.cssRules.length;
+        if (!this.stylesheet) return;
+
+        let _index = this.stylesheet.cssRules.length;
         if (index !== -1) {
-            this.styleSheet.deleteRule(index);
+            this.stylesheet.deleteRule(index);
             _index = index;
         }
 
-        this.styleSheet.insertRule(ruleString, _index);
-        return _index;
+        this.stylesheet.insertRule(ruleString, _index);
+        return _index; // eslint-disable-line
     }
 
     setDimensions() {
@@ -216,8 +221,10 @@ export default class Style {
 
     setDefaultCellHeight() {
         if (this.__cellHeightSet) return;
-        const height = this.options.cellHeight ||
-            $.style($('.data-table-cell', this.instance.bodyScrollable), 'height');
+        const $firstCell = $('.data-table-cell', this.instance.bodyScrollable);
+        if (!$firstCell) return;
+
+        const height = this.options.cellHeight || $.style($firstCell, 'height');
         if (height) {
             this.setCellHeight(height);
             this.__cellHeightSet = true;
@@ -270,7 +277,8 @@ export default class Style {
         });
 
         $.style($('table', this.bodyScrollable), {
-            margin: 0
+            margin: 0,
+            width: '100%'
         });
     }