From e5af37fb07ddaaa43cfb42dd84ac4f98d93816bc Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Fri, 30 Mar 2018 07:12:41 +0530 Subject: [PATCH] Better handling of 0 rows --- dist/frappe-datatable.cjs.js | 48 ++++++++++++++++++++------------- dist/frappe-datatable.css | 6 +++++ dist/frappe-datatable.js | 48 ++++++++++++++++++++------------- docs/assets/frappe-datatable.js | 48 ++++++++++++++++++++------------- src/body-renderer.js | 9 ++++--- src/columnmanager.js | 5 +++- src/datatable.js | 8 ++---- src/style.css | 5 ++++ src/style.js | 24 +++++++++++------ 9 files changed, 126 insertions(+), 75 deletions(-) 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 = [`${this.options.noDataMessage}`]; + } 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 = [`${this.options.noDataMessage}`]; + } 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 = [`${this.options.noDataMessage}`]; + } 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 = [`${this.options.noDataMessage}`]; + } 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%' }); }