jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

Better handling of 0 rows

Browse Source
This commit is contained in:
Faris Ansari 2018-03-30 07:12:41 +05:30
parent f2ab07f516
commit e5af37fb07
9 changed files with 126 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
dist/frappe-datatable.cjs.js vendored
View File

@ -1838,7 +1838,10 @@ class ColumnManager {
}; };
index = this.style.setStyle(selector, styles, index); index = this.style.setStyle(selector, styles, index);
this._columnWidthMap[colIndex] = index;
if (index !== undefined) {
this._columnWidthMap[colIndex] = index;
}
} }
setColumnHeaderWidth(colIndex) { setColumnHeaderWidth(colIndex) {
@ -2938,7 +2941,11 @@ class BodyRenderer {
renderBodyWithClusterize() { renderBodyWithClusterize() {
// first page // first page
const rows = this.datamanager.getRowsForView(0, 20); 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) { if (!this.clusterize) {
// empty body // empty body
@ -2960,8 +2967,7 @@ class BodyRenderer {
} }
}, },
/* eslint-disable */ /* eslint-disable */
no_data_text: this.options.noDataMessage, show_no_data_row: false,
no_data_class: 'empty-state'
/* eslint-enable */ /* eslint-enable */
}); });
@ -3023,11 +3029,14 @@ class Style {
const styleEl = document.createElement('style'); const styleEl = document.createElement('style');
instance.wrapper.insertBefore(styleEl, instance.datatableWrapper); instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
this.styleEl = styleEl; this.styleEl = styleEl;
this.styleSheet = styleEl.sheet;
this.bindResizeWindow(); this.bindResizeWindow();
} }
get stylesheet() {
return this.styleEl.sheet;
}
bindResizeWindow() { bindResizeWindow() {
if (this.options.layout === 'fluid') { if (this.options.layout === 'fluid') {
$.on(window, 'resize', throttle$1(() => { $.on(window, 'resize', throttle$1(() => {
@ -3059,14 +3068,16 @@ class Style {
let ruleString = `${prefixedSelector} { ${styles} }`; let ruleString = `${prefixedSelector} { ${styles} }`;
let _index = this.styleSheet.cssRules.length; if (!this.stylesheet) return;
let _index = this.stylesheet.cssRules.length;
if (index !== -1) { if (index !== -1) {
this.styleSheet.deleteRule(index); this.stylesheet.deleteRule(index);
_index = index; _index = index;
} }
this.styleSheet.insertRule(ruleString, _index); this.stylesheet.insertRule(ruleString, _index);
return _index; return _index; // eslint-disable-line
} }
setDimensions() { setDimensions() {
@ -3218,8 +3229,10 @@ class Style {
setDefaultCellHeight() { setDefaultCellHeight() {
if (this.__cellHeightSet) return; if (this.__cellHeightSet) return;
const height = this.options.cellHeight || const $firstCell = $('.data-table-cell', this.instance.bodyScrollable);
$.style($('.data-table-cell', this.instance.datatableWrapper), 'height'); if (!$firstCell) return;
const height = this.options.cellHeight || $.style($firstCell, 'height');
if (height) { if (height) {
this.setCellHeight(height); this.setCellHeight(height);
this.__cellHeightSet = true; this.__cellHeightSet = true;
@ -3272,7 +3285,8 @@ class Style {
}); });
$.style($('table', this.bodyScrollable), { $.style($('table', this.bodyScrollable), {
margin: 0 margin: 0,
width: '100%'
}); });
} }
@ -3443,12 +3457,8 @@ class DataTable {
this.options || {}, options this.options || {}, options
); );
this.options.headerDropdown = this.options.headerDropdown
DEFAULT_OPTIONS.headerDropdown .push(...(options.headerDropdown || []));
.concat(
this.options.headerDropdown || [],
options.headerDropdown || []
);
// custom user events // custom user events
this.events = Object.assign( this.events = Object.assign(
@ -3602,7 +3612,7 @@ class DataTable {
DataTable.instances = 0; DataTable.instances = 0;
var name = "frappe-datatable"; var name = "frappe-datatable";
var version = "0.0.2"; var version = "0.0.3";
var description = "A modern datatable library for the web"; var description = "A modern datatable library for the web";
var main = "dist/frappe-datatable.cjs.js"; 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"}; 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"};

6
dist/frappe-datatable.css vendored
View File

@ -108,6 +108,12 @@
background-color: #f5f7fa; background-color: #f5f7fa;
} }
.body-scrollable .no-data td {
text-align: center;
padding: 8px;
padding: 0.5rem;
}
.data-table-header { .data-table-header {
position: absolute; position: absolute;
top: 0; top: 0;

48
dist/frappe-datatable.js vendored
View File

@ -1837,7 +1837,10 @@ class ColumnManager {
}; };
index = this.style.setStyle(selector, styles, index); index = this.style.setStyle(selector, styles, index);
this._columnWidthMap[colIndex] = index;
if (index !== undefined) {
this._columnWidthMap[colIndex] = index;
}
} }
setColumnHeaderWidth(colIndex) { setColumnHeaderWidth(colIndex) {
@ -2937,7 +2940,11 @@ class BodyRenderer {
renderBodyWithClusterize() { renderBodyWithClusterize() {
// first page // first page
const rows = this.datamanager.getRowsForView(0, 20); 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) { if (!this.clusterize) {
// empty body // empty body
@ -2959,8 +2966,7 @@ class BodyRenderer {
} }
}, },
/* eslint-disable */ /* eslint-disable */
no_data_text: this.options.noDataMessage, show_no_data_row: false,
no_data_class: 'empty-state'
/* eslint-enable */ /* eslint-enable */
}); });
@ -3022,11 +3028,14 @@ class Style {
const styleEl = document.createElement('style'); const styleEl = document.createElement('style');
instance.wrapper.insertBefore(styleEl, instance.datatableWrapper); instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
this.styleEl = styleEl; this.styleEl = styleEl;
this.styleSheet = styleEl.sheet;
this.bindResizeWindow(); this.bindResizeWindow();
} }
get stylesheet() {
return this.styleEl.sheet;
}
bindResizeWindow() { bindResizeWindow() {
if (this.options.layout === 'fluid') { if (this.options.layout === 'fluid') {
$.on(window, 'resize', throttle$1(() => { $.on(window, 'resize', throttle$1(() => {
@ -3058,14 +3067,16 @@ class Style {
let ruleString = `${prefixedSelector} { ${styles} }`; let ruleString = `${prefixedSelector} { ${styles} }`;
let _index = this.styleSheet.cssRules.length; if (!this.stylesheet) return;
let _index = this.stylesheet.cssRules.length;
if (index !== -1) { if (index !== -1) {
this.styleSheet.deleteRule(index); this.stylesheet.deleteRule(index);
_index = index; _index = index;
} }
this.styleSheet.insertRule(ruleString, _index); this.stylesheet.insertRule(ruleString, _index);
return _index; return _index; // eslint-disable-line
} }
setDimensions() { setDimensions() {
@ -3217,8 +3228,10 @@ class Style {
setDefaultCellHeight() { setDefaultCellHeight() {
if (this.__cellHeightSet) return; if (this.__cellHeightSet) return;
const height = this.options.cellHeight || const $firstCell = $('.data-table-cell', this.instance.bodyScrollable);
$.style($('.data-table-cell', this.instance.datatableWrapper), 'height'); if (!$firstCell) return;
const height = this.options.cellHeight || $.style($firstCell, 'height');
if (height) { if (height) {
this.setCellHeight(height); this.setCellHeight(height);
this.__cellHeightSet = true; this.__cellHeightSet = true;
@ -3271,7 +3284,8 @@ class Style {
}); });
$.style($('table', this.bodyScrollable), { $.style($('table', this.bodyScrollable), {
margin: 0 margin: 0,
width: '100%'
}); });
} }
@ -3442,12 +3456,8 @@ class DataTable {
this.options || {}, options this.options || {}, options
); );
this.options.headerDropdown = this.options.headerDropdown
DEFAULT_OPTIONS.headerDropdown .push(...(options.headerDropdown || []));
.concat(
this.options.headerDropdown || [],
options.headerDropdown || []
);
// custom user events // custom user events
this.events = Object.assign( this.events = Object.assign(
@ -3601,7 +3611,7 @@ class DataTable {
DataTable.instances = 0; DataTable.instances = 0;
var name = "frappe-datatable"; var name = "frappe-datatable";
var version = "0.0.2"; var version = "0.0.3";
var description = "A modern datatable library for the web"; var description = "A modern datatable library for the web";
var main = "dist/frappe-datatable.cjs.js"; 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"}; 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"};

48
docs/assets/frappe-datatable.js
View File

@ -1837,7 +1837,10 @@ class ColumnManager {
}; };
index = this.style.setStyle(selector, styles, index); index = this.style.setStyle(selector, styles, index);
this._columnWidthMap[colIndex] = index;
if (index !== undefined) {
this._columnWidthMap[colIndex] = index;
}
} }
setColumnHeaderWidth(colIndex) { setColumnHeaderWidth(colIndex) {
@ -2937,7 +2940,11 @@ class BodyRenderer {
renderBodyWithClusterize() { renderBodyWithClusterize() {
// first page // first page
const rows = this.datamanager.getRowsForView(0, 20); 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) { if (!this.clusterize) {
// empty body // empty body
@ -2959,8 +2966,7 @@ class BodyRenderer {
} }
}, },
/* eslint-disable */ /* eslint-disable */
no_data_text: this.options.noDataMessage, show_no_data_row: false,
no_data_class: 'empty-state'
/* eslint-enable */ /* eslint-enable */
}); });
@ -3022,11 +3028,14 @@ class Style {
const styleEl = document.createElement('style'); const styleEl = document.createElement('style');
instance.wrapper.insertBefore(styleEl, instance.datatableWrapper); instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
this.styleEl = styleEl; this.styleEl = styleEl;
this.styleSheet = styleEl.sheet;
this.bindResizeWindow(); this.bindResizeWindow();
} }
get stylesheet() {
return this.styleEl.sheet;
}
bindResizeWindow() { bindResizeWindow() {
if (this.options.layout === 'fluid') { if (this.options.layout === 'fluid') {
$.on(window, 'resize', throttle$1(() => { $.on(window, 'resize', throttle$1(() => {
@ -3058,14 +3067,16 @@ class Style {
let ruleString = `${prefixedSelector} { ${styles} }`; let ruleString = `${prefixedSelector} { ${styles} }`;
let _index = this.styleSheet.cssRules.length; if (!this.stylesheet) return;
let _index = this.stylesheet.cssRules.length;
if (index !== -1) { if (index !== -1) {
this.styleSheet.deleteRule(index); this.stylesheet.deleteRule(index);
_index = index; _index = index;
} }
this.styleSheet.insertRule(ruleString, _index); this.stylesheet.insertRule(ruleString, _index);
return _index; return _index; // eslint-disable-line
} }
setDimensions() { setDimensions() {
@ -3217,8 +3228,10 @@ class Style {
setDefaultCellHeight() { setDefaultCellHeight() {
if (this.__cellHeightSet) return; if (this.__cellHeightSet) return;
const height = this.options.cellHeight || const $firstCell = $('.data-table-cell', this.instance.bodyScrollable);
$.style($('.data-table-cell', this.instance.datatableWrapper), 'height'); if (!$firstCell) return;
const height = this.options.cellHeight || $.style($firstCell, 'height');
if (height) { if (height) {
this.setCellHeight(height); this.setCellHeight(height);
this.__cellHeightSet = true; this.__cellHeightSet = true;
@ -3271,7 +3284,8 @@ class Style {
}); });
$.style($('table', this.bodyScrollable), { $.style($('table', this.bodyScrollable), {
margin: 0 margin: 0,
width: '100%'
}); });
} }
@ -3442,12 +3456,8 @@ class DataTable {
this.options || {}, options this.options || {}, options
); );
this.options.headerDropdown = this.options.headerDropdown
DEFAULT_OPTIONS.headerDropdown .push(...(options.headerDropdown || []));
.concat(
this.options.headerDropdown || [],
options.headerDropdown || []
);
// custom user events // custom user events
this.events = Object.assign( this.events = Object.assign(
@ -3601,7 +3611,7 @@ class DataTable {
DataTable.instances = 0; DataTable.instances = 0;
var name = "frappe-datatable"; var name = "frappe-datatable";
var version = "0.0.2"; var version = "0.0.3";
var description = "A modern datatable library for the web"; var description = "A modern datatable library for the web";
var main = "dist/frappe-datatable.cjs.js"; 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"}; 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"};

9
src/body-renderer.js
View File

@ -39,7 +39,11 @@ export default class BodyRenderer {
renderBodyWithClusterize() { renderBodyWithClusterize() {
// first page // first page
const rows = this.datamanager.getRowsForView(0, 20); 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) { if (!this.clusterize) {
// empty body // empty body
@ -61,8 +65,7 @@ export default class BodyRenderer {
} }
}, },
/* eslint-disable */ /* eslint-disable */
no_data_text: this.options.noDataMessage, show_no_data_row: false,
no_data_class: 'empty-state'
/* eslint-enable */ /* eslint-enable */
}); });

5
src/columnmanager.js
View File

@ -376,7 +376,10 @@ export default class ColumnManager {
}; };
index = this.style.setStyle(selector, styles, index); index = this.style.setStyle(selector, styles, index);
this._columnWidthMap[colIndex] = index;
if (index !== undefined) {
this._columnWidthMap[colIndex] = index;
}
} }
setColumnHeaderWidth(colIndex) { setColumnHeaderWidth(colIndex) {

8
src/datatable.js
View File

@ -46,12 +46,8 @@ class DataTable {
this.options || {}, options this.options || {}, options
); );
this.options.headerDropdown = this.options.headerDropdown
DEFAULT_OPTIONS.headerDropdown .push(...(options.headerDropdown || []));
.concat(
this.options.headerDropdown || [],
options.headerDropdown || []
);
// custom user events // custom user events
this.events = Object.assign( this.events = Object.assign(

5
src/style.css
View File

@ -108,6 +108,11 @@
&.row-highlight-all .data-table-row:not(.row-unhighlight) { &.row-highlight-all .data-table-row:not(.row-unhighlight) {
background-color: var(--light-bg); background-color: var(--light-bg);
} }
.no-data td {
text-align: center;
padding: var(--spacer-2);
}
} }
.data-table-header { .data-table-header {

24
src/style.js
View File

@ -21,11 +21,14 @@ export default class Style {
const styleEl = document.createElement('style'); const styleEl = document.createElement('style');
instance.wrapper.insertBefore(styleEl, instance.datatableWrapper); instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
this.styleEl = styleEl; this.styleEl = styleEl;
this.styleSheet = styleEl.sheet;
this.bindResizeWindow(); this.bindResizeWindow();
} }
get stylesheet() {
return this.styleEl.sheet;
}
bindResizeWindow() { bindResizeWindow() {
if (this.options.layout === 'fluid') { if (this.options.layout === 'fluid') {
$.on(window, 'resize', throttle(() => { $.on(window, 'resize', throttle(() => {
@ -57,14 +60,16 @@ export default class Style {
let ruleString = `${prefixedSelector} { ${styles} }`; let ruleString = `${prefixedSelector} { ${styles} }`;
let _index = this.styleSheet.cssRules.length; if (!this.stylesheet) return;
let _index = this.stylesheet.cssRules.length;
if (index !== -1) { if (index !== -1) {
this.styleSheet.deleteRule(index); this.stylesheet.deleteRule(index);
_index = index; _index = index;
} }
this.styleSheet.insertRule(ruleString, _index); this.stylesheet.insertRule(ruleString, _index);
return _index; return _index; // eslint-disable-line
} }
setDimensions() { setDimensions() {
@ -216,8 +221,10 @@ export default class Style {
setDefaultCellHeight() { setDefaultCellHeight() {
if (this.__cellHeightSet) return; if (this.__cellHeightSet) return;
const height = this.options.cellHeight || const $firstCell = $('.data-table-cell', this.instance.bodyScrollable);
$.style($('.data-table-cell', this.instance.bodyScrollable), 'height'); if (!$firstCell) return;
const height = this.options.cellHeight || $.style($firstCell, 'height');
if (height) { if (height) {
this.setCellHeight(height); this.setCellHeight(height);
this.__cellHeightSet = true; this.__cellHeightSet = true;
@ -270,7 +277,8 @@ export default class Style {
}); });
$.style($('table', this.bodyScrollable), { $.style($('table', this.bodyScrollable), {
margin: 0 margin: 0,
width: '100%'
}); });
} }