diff --git a/.DS_Store b/.DS_Store
index 3251544..912933a 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/dist/frappe-datatable.cjs.css b/dist/frappe-datatable.cjs.css
index ef507fe..8ce9ace 100644
--- a/dist/frappe-datatable.cjs.css
+++ b/dist/frappe-datatable.cjs.css
@@ -4,7 +4,6 @@
.data-table {
/* styling */
- width: 100%;
position: relative;
overflow: auto;
}
@@ -77,20 +76,28 @@
transform: translateY(-50%);
}
-.data-table .trash-container {
- position: absolute;
- bottom: 0;
- left: 30%;
- right: 30%;
- height: 70px;
- background: palevioletred;
- opacity: 0.5;
- }
-
.data-table .hide {
display: none;
}
+.data-table .toast-message {
+ position: absolute;
+ bottom: 16px;
+ bottom: 1rem;
+ left: 50%;
+ -webkit-transform: translateX(-50%);
+ transform: translateX(-50%);
+ }
+
+.data-table .toast-message span {
+ display: inline-block;
+ background-color: rgba(0, 0, 0, .8);
+ color: #dfe2e5;
+ border-radius: 3px;
+ padding: 8px 16px;
+ padding: 0.5rem 1rem;
+ }
+
.body-scrollable {
max-height: 500px;
overflow: auto;
@@ -272,4 +279,4 @@
body.data-table-resize {
cursor: col-resize;
-}
\ No newline at end of file
+}
diff --git a/dist/frappe-datatable.cjs.js b/dist/frappe-datatable.cjs.js
index 05459d0..abf345f 100644
--- a/dist/frappe-datatable.cjs.js
+++ b/dist/frappe-datatable.cjs.js
@@ -2417,8 +2417,13 @@ class CellManager {
const {
colIndex
} = $.data($cell);
- const $aboveRow = $cell.parentElement.previousElementSibling;
+ let $aboveRow = $cell.parentElement.previousElementSibling;
+ while ($aboveRow && $aboveRow.classList.contains('hide')) {
+ $aboveRow = $aboveRow.previousElementSibling;
+ }
+
+ if (!$aboveRow) return $cell;
return $(`[data-col-index="${colIndex}"]`, $aboveRow);
}
@@ -2426,8 +2431,13 @@ class CellManager {
const {
colIndex
} = $.data($cell);
- const $belowRow = $cell.parentElement.nextElementSibling;
+ let $belowRow = $cell.parentElement.nextElementSibling;
+ while ($belowRow && $belowRow.classList.contains('hide')) {
+ $belowRow = $belowRow.nextElementSibling;
+ }
+
+ if (!$belowRow) return $cell;
return $(`[data-col-index="${colIndex}"]`, $belowRow);
}
@@ -2569,7 +2579,8 @@ class RowManager {
linkProperties(this, this.instance, [
'options',
'wrapper',
- 'bodyScrollable'
+ 'bodyScrollable',
+ 'bodyRenderer'
]);
this.bindEvents();
@@ -2628,16 +2639,15 @@ class RowManager {
return [];
}
- return this.checkMap
- .map((c, rowIndex) => {
- if (c) {
- return rowIndex;
- }
- return null;
- })
- .filter(c => {
- return c !== null || c !== undefined;
- });
+ let out = [];
+ for (let rowIndex in this.checkMap) {
+ const checked = this.checkMap[rowIndex];
+ if (checked === 1) {
+ out.push(rowIndex);
+ }
+ }
+
+ return out;
}
highlightCheckedRows() {
@@ -2658,6 +2668,7 @@ class RowManager {
});
// highlight row
this.highlightRow(rowIndex, toggle);
+ this.showCheckStatus();
}
checkAll(toggle) {
@@ -2676,6 +2687,16 @@ class RowManager {
});
// highlight all
this.highlightAll(toggle);
+ this.showCheckStatus();
+ }
+
+ showCheckStatus() {
+ const checkedRows = this.getCheckedRows();
+ if (checkedRows.length > 0) {
+ this.bodyRenderer.showToastMessage(checkedRows.length + ' rows selected');
+ } else {
+ this.bodyRenderer.clearToastMessage();
+ }
}
highlightRow(rowIndex, toggle = true) {
@@ -2909,6 +2930,14 @@ class BodyRenderer {
this.clusterize.append(data);
}
+ showToastMessage(message) {
+ this.instance.toastMessage.innerHTML = `${message}`;
+ }
+
+ clearToastMessage() {
+ this.instance.toastMessage.innerHTML = '';
+ }
+
getDataForClusterize(rows) {
return rows.map((row) => this.rowmanager.getRowHTML(row, row.meta));
}
@@ -3315,23 +3344,25 @@ class DataTable {
prepareDom() {
this.wrapper.innerHTML = `
-
-
-
-
-
- ${this.options.freezeMessage}
-
-
-
- `;
+
+
+
+
+
+ ${this.options.freezeMessage}
+
+
+
+
+ `;
this.datatableWrapper = $('.data-table', this.wrapper);
this.header = $('.data-table-header', this.wrapper);
this.bodyScrollable = $('.body-scrollable', this.wrapper);
this.freezeContainer = $('.freeze-container', this.wrapper);
+ this.toastMessage = $('.toast-message', this.wrapper);
}
refresh(data) {
@@ -3371,6 +3402,14 @@ class DataTable {
this.style.setDimensions();
}
+ showToastMessage(message) {
+ this.bodyRenderer.showToastMessage(message);
+ }
+
+ clearToastMessage() {
+ this.bodyRenderer.clearToastMessage();
+ }
+
getColumn(colIndex) {
return this.datamanager.getColumn(colIndex);
}
diff --git a/dist/frappe-datatable.css b/dist/frappe-datatable.css
index ef507fe..8ce9ace 100644
--- a/dist/frappe-datatable.css
+++ b/dist/frappe-datatable.css
@@ -4,7 +4,6 @@
.data-table {
/* styling */
- width: 100%;
position: relative;
overflow: auto;
}
@@ -77,20 +76,28 @@
transform: translateY(-50%);
}
-.data-table .trash-container {
- position: absolute;
- bottom: 0;
- left: 30%;
- right: 30%;
- height: 70px;
- background: palevioletred;
- opacity: 0.5;
- }
-
.data-table .hide {
display: none;
}
+.data-table .toast-message {
+ position: absolute;
+ bottom: 16px;
+ bottom: 1rem;
+ left: 50%;
+ -webkit-transform: translateX(-50%);
+ transform: translateX(-50%);
+ }
+
+.data-table .toast-message span {
+ display: inline-block;
+ background-color: rgba(0, 0, 0, .8);
+ color: #dfe2e5;
+ border-radius: 3px;
+ padding: 8px 16px;
+ padding: 0.5rem 1rem;
+ }
+
.body-scrollable {
max-height: 500px;
overflow: auto;
@@ -272,4 +279,4 @@
body.data-table-resize {
cursor: col-resize;
-}
\ No newline at end of file
+}
diff --git a/dist/frappe-datatable.js b/dist/frappe-datatable.js
index f0d4581..d7c9795 100644
--- a/dist/frappe-datatable.js
+++ b/dist/frappe-datatable.js
@@ -2416,8 +2416,13 @@ class CellManager {
const {
colIndex
} = $.data($cell);
- const $aboveRow = $cell.parentElement.previousElementSibling;
+ let $aboveRow = $cell.parentElement.previousElementSibling;
+ while ($aboveRow && $aboveRow.classList.contains('hide')) {
+ $aboveRow = $aboveRow.previousElementSibling;
+ }
+
+ if (!$aboveRow) return $cell;
return $(`[data-col-index="${colIndex}"]`, $aboveRow);
}
@@ -2425,8 +2430,13 @@ class CellManager {
const {
colIndex
} = $.data($cell);
- const $belowRow = $cell.parentElement.nextElementSibling;
+ let $belowRow = $cell.parentElement.nextElementSibling;
+ while ($belowRow && $belowRow.classList.contains('hide')) {
+ $belowRow = $belowRow.nextElementSibling;
+ }
+
+ if (!$belowRow) return $cell;
return $(`[data-col-index="${colIndex}"]`, $belowRow);
}
@@ -2568,7 +2578,8 @@ class RowManager {
linkProperties(this, this.instance, [
'options',
'wrapper',
- 'bodyScrollable'
+ 'bodyScrollable',
+ 'bodyRenderer'
]);
this.bindEvents();
@@ -2627,16 +2638,15 @@ class RowManager {
return [];
}
- return this.checkMap
- .map((c, rowIndex) => {
- if (c) {
- return rowIndex;
- }
- return null;
- })
- .filter(c => {
- return c !== null || c !== undefined;
- });
+ let out = [];
+ for (let rowIndex in this.checkMap) {
+ const checked = this.checkMap[rowIndex];
+ if (checked === 1) {
+ out.push(rowIndex);
+ }
+ }
+
+ return out;
}
highlightCheckedRows() {
@@ -2657,6 +2667,7 @@ class RowManager {
});
// highlight row
this.highlightRow(rowIndex, toggle);
+ this.showCheckStatus();
}
checkAll(toggle) {
@@ -2675,6 +2686,16 @@ class RowManager {
});
// highlight all
this.highlightAll(toggle);
+ this.showCheckStatus();
+ }
+
+ showCheckStatus() {
+ const checkedRows = this.getCheckedRows();
+ if (checkedRows.length > 0) {
+ this.bodyRenderer.showToastMessage(checkedRows.length + ' rows selected');
+ } else {
+ this.bodyRenderer.clearToastMessage();
+ }
}
highlightRow(rowIndex, toggle = true) {
@@ -2908,6 +2929,14 @@ class BodyRenderer {
this.clusterize.append(data);
}
+ showToastMessage(message) {
+ this.instance.toastMessage.innerHTML = `${message}`;
+ }
+
+ clearToastMessage() {
+ this.instance.toastMessage.innerHTML = '';
+ }
+
getDataForClusterize(rows) {
return rows.map((row) => this.rowmanager.getRowHTML(row, row.meta));
}
@@ -3314,23 +3343,25 @@ class DataTable {
prepareDom() {
this.wrapper.innerHTML = `
-
-
-
-
-
- ${this.options.freezeMessage}
-
-
-
- `;
+
+
+
+
+
+ ${this.options.freezeMessage}
+
+
+
+
+ `;
this.datatableWrapper = $('.data-table', this.wrapper);
this.header = $('.data-table-header', this.wrapper);
this.bodyScrollable = $('.body-scrollable', this.wrapper);
this.freezeContainer = $('.freeze-container', this.wrapper);
+ this.toastMessage = $('.toast-message', this.wrapper);
}
refresh(data) {
@@ -3370,6 +3401,14 @@ class DataTable {
this.style.setDimensions();
}
+ showToastMessage(message) {
+ this.bodyRenderer.showToastMessage(message);
+ }
+
+ clearToastMessage() {
+ this.bodyRenderer.clearToastMessage();
+ }
+
getColumn(colIndex) {
return this.datamanager.getColumn(colIndex);
}
diff --git a/docs/assets/Sortable.min.js b/docs/assets/Sortable.min.js
new file mode 100644
index 0000000..938811f
--- /dev/null
+++ b/docs/assets/Sortable.min.js
@@ -0,0 +1,2 @@
+/*! Sortable 1.7.0 - MIT | git://github.com/rubaxa/Sortable.git */
+!function(a){"use strict";"function"==typeof define&&define.amd?define(a):"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=a():window.Sortable=a()}(function(){"use strict";function a(b,c){if(!b||!b.nodeType||1!==b.nodeType)throw"Sortable: `el` must be HTMLElement, and not "+{}.toString.call(b);this.el=b,this.options=c=t({},c),b[V]=this;var d={group:Math.random(),sort:!0,disabled:!1,store:null,handle:null,scroll:!0,scrollSensitivity:30,scrollSpeed:10,draggable:/[uo]l/i.test(b.nodeName)?"li":">*",ghostClass:"sortable-ghost",chosenClass:"sortable-chosen",dragClass:"sortable-drag",ignore:"a, img",filter:null,preventOnFilter:!0,animation:0,setData:function(a,b){a.setData("Text",b.textContent)},dropBubble:!1,dragoverBubble:!1,dataIdAttr:"data-id",delay:0,forceFallback:!1,fallbackClass:"sortable-fallback",fallbackOnBody:!1,fallbackTolerance:0,fallbackOffset:{x:0,y:0},supportPointer:a.supportPointer!==!1};for(var e in d)!(e in c)&&(c[e]=d[e]);ka(c);for(var g in this)"_"===g.charAt(0)&&"function"==typeof this[g]&&(this[g]=this[g].bind(this));this.nativeDraggable=!c.forceFallback&&ca,f(b,"mousedown",this._onTapStart),f(b,"touchstart",this._onTapStart),c.supportPointer&&f(b,"pointerdown",this._onTapStart),this.nativeDraggable&&(f(b,"dragover",this),f(b,"dragenter",this)),ia.push(this._onDragOver),c.store&&this.sort(c.store.get(this))}function b(a,b){"clone"!==a.lastPullMode&&(b=!0),B&&B.state!==b&&(i(B,"display",b?"none":""),b||B.state&&(a.options.group.revertClone?(C.insertBefore(B,D),a._animate(y,B)):C.insertBefore(B,y)),B.state=b)}function c(a,b,c){if(a){c=c||X;do if(">*"===b&&a.parentNode===c||r(a,b))return a;while(a=d(a))}return null}function d(a){var b=a.host;return b&&b.nodeType?b:a.parentNode}function e(a){a.dataTransfer&&(a.dataTransfer.dropEffect="move"),a.preventDefault()}function f(a,b,c){a.addEventListener(b,c,aa)}function g(a,b,c){a.removeEventListener(b,c,aa)}function h(a,b,c){if(a)if(a.classList)a.classList[c?"add":"remove"](b);else{var d=(" "+a.className+" ").replace(T," ").replace(" "+b+" "," ");a.className=(d+(c?" "+b:"")).replace(T," ")}}function i(a,b,c){var d=a&&a.style;if(d){if(void 0===c)return X.defaultView&&X.defaultView.getComputedStyle?c=X.defaultView.getComputedStyle(a,""):a.currentStyle&&(c=a.currentStyle),void 0===b?c:c[b];b in d||(b="-webkit-"+b),d[b]=c+("string"==typeof c?"":"px")}}function j(a,b,c){if(a){var d=a.getElementsByTagName(b),e=0,f=d.length;if(c)for(;e5||b.clientX-(d.left+d.width)>5}function p(a){for(var b=a.tagName+a.className+a.src+a.href+a.textContent,c=b.length,d=0;c--;)d+=b.charCodeAt(c);return d.toString(36)}function q(a,b){var c=0;if(!a||!a.parentNode)return-1;for(;a&&(a=a.previousElementSibling);)"TEMPLATE"===a.nodeName.toUpperCase()||">*"!==b&&!r(a,b)||c++;return c}function r(a,b){if(a){b=b.split(".");var c=b.shift().toUpperCase(),d=new RegExp("\\s("+b.join("|")+")(?=\\s)","g");return!(""!==c&&a.nodeName.toUpperCase()!=c||b.length&&((" "+a.className+" ").match(d)||[]).length!=b.length)}return!1}function s(a,b){var c,d;return function(){void 0===c&&(c=arguments,d=this,Z(function(){1===c.length?a.call(d,c[0]):a.apply(d,c),c=void 0},b))}}function t(a,b){if(a&&b)for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}function u(a){return _&&_.dom?_.dom(a).cloneNode(!0):$?$(a).clone(!0)[0]:a.cloneNode(!0)}function v(a){for(var b=a.getElementsByTagName("input"),c=b.length;c--;){var d=b[c];d.checked&&ha.push(d)}}function w(a){return Z(a,0)}function x(a){return clearTimeout(a)}if("undefined"==typeof window||!window.document)return function(){throw new Error("Sortable.js requires a window with a document")};var y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S={},T=/\s+/g,U=/left|right|inline/,V="Sortable"+(new Date).getTime(),W=window,X=W.document,Y=W.parseInt,Z=W.setTimeout,$=W.jQuery||W.Zepto,_=W.Polymer,aa=!1,ba=!1,ca="draggable"in X.createElement("div"),da=function(a){return!navigator.userAgent.match(/(?:Trident.*rv[ :]?11\.|msie)/i)&&(a=X.createElement("x"),a.style.cssText="pointer-events:auto","auto"===a.style.pointerEvents)}(),ea=!1,fa=Math.abs,ga=Math.min,ha=[],ia=[],ja=s(function(a,b,c){if(c&&b.scroll){var d,e,f,g,h,i,j=c[V],k=b.scrollSensitivity,l=b.scrollSpeed,m=a.clientX,n=a.clientY,o=window.innerWidth,p=window.innerHeight;if(G!==c&&(F=b.scroll,G=c,H=b.scrollFn,F===!0)){F=c;do if(F.offsetWidth-1:e==a)}}var c={},d=a.group;d&&"object"==typeof d||(d={name:d}),c.name=d.name,c.checkPull=b(d.pull,!0),c.checkPut=b(d.put),c.revertClone=d.revertClone,a.group=c};try{window.addEventListener("test",null,Object.defineProperty({},"passive",{get:function(){ba=!1,aa={capture:!1,passive:ba}}}))}catch(a){}return a.prototype={constructor:a,_onTapStart:function(a){var b,d=this,e=this.el,f=this.options,g=f.preventOnFilter,h=a.type,i=a.touches&&a.touches[0],j=(i||a).target,l=a.target.shadowRoot&&a.path&&a.path[0]||j,m=f.filter;if(v(e),!y&&!(/mousedown|pointerdown/.test(h)&&0!==a.button||f.disabled)&&!l.isContentEditable&&(j=c(j,f.draggable,e),j&&E!==j)){if(b=q(j,f.draggable),"function"==typeof m){if(m.call(this,a,j,this))return k(d,l,"filter",j,e,e,b),void(g&&a.preventDefault())}else if(m&&(m=m.split(",").some(function(a){if(a=c(l,a.trim(),e))return k(d,a,"filter",j,e,e,b),!0})))return void(g&&a.preventDefault());f.handle&&!c(l,f.handle,e)||this._prepareDragStart(a,i,j,b)}},_prepareDragStart:function(a,b,c,d){var e,g=this,i=g.el,l=g.options,n=i.ownerDocument;c&&!y&&c.parentNode===i&&(P=a,C=i,y=c,z=y.parentNode,D=y.nextSibling,E=c,N=l.group,L=d,this._lastX=(b||a).clientX,this._lastY=(b||a).clientY,y.style["will-change"]="all",e=function(){g._disableDelayedDrag(),y.draggable=g.nativeDraggable,h(y,l.chosenClass,!0),g._triggerDragStart(a,b),k(g,C,"choose",y,C,C,L)},l.ignore.split(",").forEach(function(a){j(y,a.trim(),m)}),f(n,"mouseup",g._onDrop),f(n,"touchend",g._onDrop),f(n,"touchcancel",g._onDrop),f(n,"selectstart",g),l.supportPointer&&f(n,"pointercancel",g._onDrop),l.delay?(f(n,"mouseup",g._disableDelayedDrag),f(n,"touchend",g._disableDelayedDrag),f(n,"touchcancel",g._disableDelayedDrag),f(n,"mousemove",g._disableDelayedDrag),f(n,"touchmove",g._disableDelayedDrag),l.supportPointer&&f(n,"pointermove",g._disableDelayedDrag),g._dragStartTimer=Z(e,l.delay)):e())},_disableDelayedDrag:function(){var a=this.el.ownerDocument;clearTimeout(this._dragStartTimer),g(a,"mouseup",this._disableDelayedDrag),g(a,"touchend",this._disableDelayedDrag),g(a,"touchcancel",this._disableDelayedDrag),g(a,"mousemove",this._disableDelayedDrag),g(a,"touchmove",this._disableDelayedDrag),g(a,"pointermove",this._disableDelayedDrag)},_triggerDragStart:function(a,b){b=b||("touch"==a.pointerType?a:null),b?(P={target:y,clientX:b.clientX,clientY:b.clientY},this._onDragStart(P,"touch")):this.nativeDraggable?(f(y,"dragend",this),f(C,"dragstart",this._onDragStart)):this._onDragStart(P,!0);try{X.selection?w(function(){X.selection.empty()}):window.getSelection().removeAllRanges()}catch(a){}},_dragStarted:function(){if(C&&y){var b=this.options;h(y,b.ghostClass,!0),h(y,b.dragClass,!1),a.active=this,k(this,C,"start",y,C,C,L)}else this._nulling()},_emulateDragOver:function(){if(Q){if(this._lastX===Q.clientX&&this._lastY===Q.clientY)return;this._lastX=Q.clientX,this._lastY=Q.clientY,da||i(A,"display","none");var a=X.elementFromPoint(Q.clientX,Q.clientY),b=a,c=ia.length;if(a&&a.shadowRoot&&(a=a.shadowRoot.elementFromPoint(Q.clientX,Q.clientY),b=a),b)do{if(b[V]){for(;c--;)ia[c]({clientX:Q.clientX,clientY:Q.clientY,target:a,rootEl:b});break}a=b}while(b=b.parentNode);da||i(A,"display","")}},_onTouchMove:function(b){if(P){var c=this.options,d=c.fallbackTolerance,e=c.fallbackOffset,f=b.touches?b.touches[0]:b,g=f.clientX-P.clientX+e.x,h=f.clientY-P.clientY+e.y,j=b.touches?"translate3d("+g+"px,"+h+"px,0)":"translate("+g+"px,"+h+"px)";if(!a.active){if(d&&ga(fa(f.clientX-this._lastX),fa(f.clientY-this._lastY))y.offsetWidth,x=e.offsetHeight>y.offsetHeight,E=(v?(d.clientX-g.left)/t:(d.clientY-g.top)/u)>.5,F=e.nextElementSibling,G=!1;if(v){var H=y.offsetTop,L=e.offsetTop;G=H===L?e.previousElementSibling===y&&!w||E&&w:e.previousElementSibling===y||y.previousElementSibling===e?(d.clientY-g.top)/u>.5:L>H}else r||(G=F!==y&&!x||E&&x);var M=l(C,j,y,f,e,g,d,G);M!==!1&&(1!==M&&M!==-1||(G=1===M),ea=!0,Z(n,30),b(p,q),y.contains(j)||(G&&!F?j.appendChild(y):e.parentNode.insertBefore(y,G?F:e)),z=y.parentNode,this._animate(f,y),this._animate(g,e))}}},_animate:function(a,b){var c=this.options.animation;if(c){var d=b.getBoundingClientRect();1===a.nodeType&&(a=a.getBoundingClientRect()),i(b,"transition","none"),i(b,"transform","translate3d("+(a.left-d.left)+"px,"+(a.top-d.top)+"px,0)"),b.offsetWidth,i(b,"transition","all "+c+"ms"),i(b,"transform","translate3d(0,0,0)"),clearTimeout(b.animated),b.animated=Z(function(){i(b,"transition",""),i(b,"transform",""),b.animated=!1},c)}},_offUpEvents:function(){var a=this.el.ownerDocument;g(X,"touchmove",this._onTouchMove),g(X,"pointermove",this._onTouchMove),g(a,"mouseup",this._onDrop),g(a,"touchend",this._onDrop),g(a,"pointerup",this._onDrop),g(a,"touchcancel",this._onDrop),g(a,"pointercancel",this._onDrop),g(a,"selectstart",this)},_onDrop:function(b){var c=this.el,d=this.options;clearInterval(this._loopId),clearInterval(S.pid),clearTimeout(this._dragStartTimer),x(this._cloneId),x(this._dragStartId),g(X,"mouseover",this),g(X,"mousemove",this._onTouchMove),this.nativeDraggable&&(g(X,"drop",this),g(c,"dragstart",this._onDragStart)),this._offUpEvents(),b&&(R&&(b.preventDefault(),!d.dropBubble&&b.stopPropagation()),A&&A.parentNode&&A.parentNode.removeChild(A),C!==z&&"clone"===a.active.lastPullMode||B&&B.parentNode&&B.parentNode.removeChild(B),y&&(this.nativeDraggable&&g(y,"dragend",this),m(y),y.style["will-change"]="",h(y,this.options.ghostClass,!1),h(y,this.options.chosenClass,!1),k(this,C,"unchoose",y,z,C,L),C!==z?(M=q(y,d.draggable),M>=0&&(k(null,z,"add",y,z,C,L,M),k(this,C,"remove",y,z,C,L,M),k(null,z,"sort",y,z,C,L,M),k(this,C,"sort",y,z,C,L,M))):y.nextSibling!==D&&(M=q(y,d.draggable),M>=0&&(k(this,C,"update",y,z,C,L,M),k(this,C,"sort",y,z,C,L,M))),a.active&&(null!=M&&M!==-1||(M=L),k(this,C,"end",y,z,C,L,M),this.save()))),this._nulling()},_nulling:function(){C=y=z=A=D=B=E=F=G=P=Q=R=M=I=J=O=N=a.active=null,ha.forEach(function(a){a.checked=!0}),ha.length=0},handleEvent:function(a){switch(a.type){case"drop":case"dragend":this._onDrop(a);break;case"dragover":case"dragenter":y&&(this._onDragOver(a),e(a));break;case"mouseover":this._onDrop(a);break;case"selectstart":a.preventDefault()}},toArray:function(){for(var a,b=[],d=this.el.children,e=0,f=d.length,g=this.options;e=l&&!c.tag&&(c.tag=b[0].match(/<([^>\s/]*)/)[1].toLowerCase()),1>=this.content_elem.children.length&&(a.data=this.html(b[0]+b[0]+b[0])),c.tag||(c.tag=this.content_elem.children[0].tagName.toLowerCase()),
+this.getRowsHeight(b))},getRowsHeight:function(b){var a=this.options,c=a.item_height;a.cluster_height=0;if(b.length){b=this.content_elem.children;var d=b[Math.floor(b.length/2)];a.item_height=d.offsetHeight;"tr"==a.tag&&"collapse"!=m("borderCollapse",this.content_elem)&&(a.item_height+=parseInt(m("borderSpacing",this.content_elem),10)||0);"tr"!=a.tag&&(b=parseInt(m("marginTop",d),10)||0,d=parseInt(m("marginBottom",d),10)||0,a.item_height+=Math.max(b,d));a.block_height=a.item_height*a.rows_in_block;
+a.rows_in_cluster=a.blocks_in_cluster*a.rows_in_block;a.cluster_height=a.blocks_in_cluster*a.block_height;return c!=a.item_height}},getClusterNum:function(){this.options.scroll_top=this.scroll_elem.scrollTop;return Math.floor(this.options.scroll_top/(this.options.cluster_height-this.options.block_height))||0},generateEmptyRow:function(){var b=this.options;if(!b.tag||!b.show_no_data_row)return[];var a=document.createElement(b.tag),c=document.createTextNode(b.no_data_text);a.className=b.no_data_class;
+if("tr"==b.tag){var d=document.createElement("td");d.colSpan=100;d.appendChild(c)}a.appendChild(d||c);return[a.outerHTML]},generate:function(b,a){var c=this.options,d=b.length;if(de&&g++;f=l&&"tr"==this.options.tag){var c=document.createElement("div");for(c.innerHTML="";b=a.lastChild;)a.removeChild(b);for(c=this.getChildNodes(c.firstChild.firstChild);c.length;)a.appendChild(c.shift())}else a.innerHTML=b},getChildNodes:function(b){b=b.children;for(var a=[],c=0,d=b.length;c {
- if (c) {
- return rowIndex;
- }
- return null;
- })
- .filter(c => {
- return c !== null || c !== undefined;
- });
+ let out = [];
+ for (let rowIndex in this.checkMap) {
+ const checked = this.checkMap[rowIndex];
+ if (checked === 1) {
+ out.push(rowIndex);
+ }
+ }
+
+ return out;
}
highlightCheckedRows() {
@@ -2657,6 +2667,7 @@ class RowManager {
});
// highlight row
this.highlightRow(rowIndex, toggle);
+ this.showCheckStatus();
}
checkAll(toggle) {
@@ -2675,6 +2686,16 @@ class RowManager {
});
// highlight all
this.highlightAll(toggle);
+ this.showCheckStatus();
+ }
+
+ showCheckStatus() {
+ const checkedRows = this.getCheckedRows();
+ if (checkedRows.length > 0) {
+ this.bodyRenderer.showToastMessage(checkedRows.length + ' rows selected');
+ } else {
+ this.bodyRenderer.clearToastMessage();
+ }
}
highlightRow(rowIndex, toggle = true) {
@@ -2908,6 +2929,14 @@ class BodyRenderer {
this.clusterize.append(data);
}
+ showToastMessage(message) {
+ this.instance.toastMessage.innerHTML = `${message}`;
+ }
+
+ clearToastMessage() {
+ this.instance.toastMessage.innerHTML = '';
+ }
+
getDataForClusterize(rows) {
return rows.map((row) => this.rowmanager.getRowHTML(row, row.meta));
}
@@ -3314,23 +3343,25 @@ class DataTable {
prepareDom() {
this.wrapper.innerHTML = `
-
-
-
-
-
- ${this.options.freezeMessage}
-
-
-
- `;
+
+
+
+
+
+ ${this.options.freezeMessage}
+
+
+
+
+ `;
this.datatableWrapper = $('.data-table', this.wrapper);
this.header = $('.data-table-header', this.wrapper);
this.bodyScrollable = $('.body-scrollable', this.wrapper);
this.freezeContainer = $('.freeze-container', this.wrapper);
+ this.toastMessage = $('.toast-message', this.wrapper);
}
refresh(data) {
@@ -3370,6 +3401,14 @@ class DataTable {
this.style.setDimensions();
}
+ showToastMessage(message) {
+ this.bodyRenderer.showToastMessage(message);
+ }
+
+ clearToastMessage() {
+ this.bodyRenderer.clearToastMessage();
+ }
+
getColumn(colIndex) {
return this.datamanager.getColumn(colIndex);
}
diff --git a/docs/assets/highlight.pack.js b/docs/assets/highlight.pack.js
new file mode 100644
index 0000000..c020b11
--- /dev/null
+++ b/docs/assets/highlight.pack.js
@@ -0,0 +1,2 @@
+/*! highlight.js v9.12.0 | BSD3 License | git.io/hljslicense */
+!function(e){var n="object"==typeof window&&window||"object"==typeof self&&self;"undefined"!=typeof exports?e(exports):n&&(n.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return n.hljs}))}(function(e){function n(e){return e.replace(/&/g,"&").replace(//g,">")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0===t.index}function a(e){return k.test(e)}function i(e){var n,t,r,i,o=e.className+" ";if(o+=e.parentNode?e.parentNode.className:"",t=B.exec(o))return w(t[1])?t[1]:"no-highlight";for(o=o.split(/\s+/),n=0,r=o.length;r>n;n++)if(i=o[n],a(i)||w(i))return i}function o(e){var n,t={},r=Array.prototype.slice.call(arguments,1);for(n in e)t[n]=e[n];return r.forEach(function(e){for(n in e)t[n]=e[n]}),t}function u(e){var n=[];return function r(e,a){for(var i=e.firstChild;i;i=i.nextSibling)3===i.nodeType?a+=i.nodeValue.length:1===i.nodeType&&(n.push({event:"start",offset:a,node:i}),a=r(i,a),t(i).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:i}));return a}(e,0),n}function c(e,r,a){function i(){return e.length&&r.length?e[0].offset!==r[0].offset?e[0].offset"}function u(e){s+=""+t(e)+">"}function c(e){("start"===e.event?o:u)(e.node)}for(var l=0,s="",f=[];e.length||r.length;){var g=i();if(s+=n(a.substring(l,g[0].offset)),l=g[0].offset,g===e){f.reverse().forEach(u);do c(g.splice(0,1)[0]),g=i();while(g===e&&g.length&&g[0].offset===l);f.reverse().forEach(o)}else"start"===g[0].event?f.push(g[0].node):f.pop(),c(g.splice(0,1)[0])}return s+n(a.substr(l))}function l(e){return e.v&&!e.cached_variants&&(e.cached_variants=e.v.map(function(n){return o(e,{v:null},n)})),e.cached_variants||e.eW&&[o(e)]||[e]}function s(e){function n(e){return e&&e.source||e}function t(t,r){return new RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var o={},u=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");o[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?u("keyword",a.k):x(a.k).forEach(function(e){u(e,a.k[e])}),a.k=o}a.lR=t(a.l||/\w+/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),null==a.r&&(a.r=1),a.c||(a.c=[]),a.c=Array.prototype.concat.apply([],a.c.map(function(e){return l("self"===e?a:e)})),a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var c=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=c.length?t(c.join("|"),!0):{exec:function(){return null}}}}r(e)}function f(e,t,a,i){function o(e,n){var t,a;for(t=0,a=n.c.length;a>t;t++)if(r(n.c[t].bR,e))return n.c[t]}function u(e,n){if(r(e.eR,n)){for(;e.endsParent&&e.parent;)e=e.parent;return e}return e.eW?u(e.parent,n):void 0}function c(e,n){return!a&&r(n.iR,e)}function l(e,n){var t=N.cI?n[0].toLowerCase():n[0];return e.k.hasOwnProperty(t)&&e.k[t]}function p(e,n,t,r){var a=r?"":I.classPrefix,i='',i+n+o}function h(){var e,t,r,a;if(!E.k)return n(k);for(a="",t=0,E.lR.lastIndex=0,r=E.lR.exec(k);r;)a+=n(k.substring(t,r.index)),e=l(E,r),e?(B+=e[1],a+=p(e[0],n(r[0]))):a+=n(r[0]),t=E.lR.lastIndex,r=E.lR.exec(k);return a+n(k.substr(t))}function d(){var e="string"==typeof E.sL;if(e&&!y[E.sL])return n(k);var t=e?f(E.sL,k,!0,x[E.sL]):g(k,E.sL.length?E.sL:void 0);return E.r>0&&(B+=t.r),e&&(x[E.sL]=t.top),p(t.language,t.value,!1,!0)}function b(){L+=null!=E.sL?d():h(),k=""}function v(e){L+=e.cN?p(e.cN,"",!0):"",E=Object.create(e,{parent:{value:E}})}function m(e,n){if(k+=e,null==n)return b(),0;var t=o(n,E);if(t)return t.skip?k+=n:(t.eB&&(k+=n),b(),t.rB||t.eB||(k=n)),v(t,n),t.rB?0:n.length;var r=u(E,n);if(r){var a=E;a.skip?k+=n:(a.rE||a.eE||(k+=n),b(),a.eE&&(k=n));do E.cN&&(L+=C),E.skip||(B+=E.r),E=E.parent;while(E!==r.parent);return r.starts&&v(r.starts,""),a.rE?0:n.length}if(c(n,E))throw new Error('Illegal lexeme "'+n+'" for mode "'+(E.cN||"")+'"');return k+=n,n.length||1}var N=w(e);if(!N)throw new Error('Unknown language: "'+e+'"');s(N);var R,E=i||N,x={},L="";for(R=E;R!==N;R=R.parent)R.cN&&(L=p(R.cN,"",!0)+L);var k="",B=0;try{for(var M,j,O=0;;){if(E.t.lastIndex=O,M=E.t.exec(t),!M)break;j=m(t.substring(O,M.index),M[0]),O=M.index+j}for(m(t.substr(O)),R=E;R.parent;R=R.parent)R.cN&&(L+=C);return{r:B,value:L,language:e,top:E}}catch(T){if(T.message&&-1!==T.message.indexOf("Illegal"))return{r:0,value:n(t)};throw T}}function g(e,t){t=t||I.languages||x(y);var r={r:0,value:n(e)},a=r;return t.filter(w).forEach(function(n){var t=f(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}),a.language&&(r.second_best=a),r}function p(e){return I.tabReplace||I.useBR?e.replace(M,function(e,n){return I.useBR&&"\n"===e?"
":I.tabReplace?n.replace(/\t/g,I.tabReplace):""}):e}function h(e,n,t){var r=n?L[n]:t,a=[e.trim()];return e.match(/\bhljs\b/)||a.push("hljs"),-1===e.indexOf(r)&&a.push(r),a.join(" ").trim()}function d(e){var n,t,r,o,l,s=i(e);a(s)||(I.useBR?(n=document.createElementNS("http://www.w3.org/1999/xhtml","div"),n.innerHTML=e.innerHTML.replace(/\n/g,"").replace(/
/g,"\n")):n=e,l=n.textContent,r=s?f(s,l,!0):g(l),t=u(n),t.length&&(o=document.createElementNS("http://www.w3.org/1999/xhtml","div"),o.innerHTML=r.value,r.value=c(t,u(o),l)),r.value=p(r.value),e.innerHTML=r.value,e.className=h(e.className,s,r.language),e.result={language:r.language,re:r.r},r.second_best&&(e.second_best={language:r.second_best.language,re:r.second_best.r}))}function b(e){I=o(I,e)}function v(){if(!v.called){v.called=!0;var e=document.querySelectorAll("pre code");E.forEach.call(e,d)}}function m(){addEventListener("DOMContentLoaded",v,!1),addEventListener("load",v,!1)}function N(n,t){var r=y[n]=t(e);r.aliases&&r.aliases.forEach(function(e){L[e]=n})}function R(){return x(y)}function w(e){return e=(e||"").toLowerCase(),y[e]||y[L[e]]}var E=[],x=Object.keys,y={},L={},k=/^(no-?highlight|plain|text)$/i,B=/\blang(?:uage)?-([\w-]+)\b/i,M=/((^(<[^>]+>|\t|)+|(?:\n)))/gm,C="",I={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0};return e.highlight=f,e.highlightAuto=g,e.fixMarkup=p,e.highlightBlock=d,e.configure=b,e.initHighlighting=v,e.initHighlightingOnLoad=m,e.registerLanguage=N,e.listLanguages=R,e.getLanguage=w,e.inherit=o,e.IR="[a-zA-Z]\\w*",e.UIR="[a-zA-Z_]\\w*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/},e.C=function(n,t,r){var a=e.inherit({cN:"comment",b:n,e:t,c:[]},r||{});return a.c.push(e.PWM),a.c.push({cN:"doctag",b:"(?:TODO|FIXME|NOTE|BUG|XXX):",r:0}),a},e.CLCM=e.C("//","$"),e.CBCM=e.C("/\\*","\\*/"),e.HCM=e.C("#","$"),e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e.METHOD_GUARD={b:"\\.\\s*"+e.UIR,r:0},e});hljs.registerLanguage("javascript",function(e){var r="[A-Za-z$_][0-9A-Za-z$_]*",t={keyword:"in of if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const export super debugger as async await static import from as",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document Symbol Set Map WeakSet WeakMap Proxy Reflect Promise"},a={cN:"number",v:[{b:"\\b(0[bB][01]+)"},{b:"\\b(0[oO][0-7]+)"},{b:e.CNR}],r:0},n={cN:"subst",b:"\\$\\{",e:"\\}",k:t,c:[]},c={cN:"string",b:"`",e:"`",c:[e.BE,n]};n.c=[e.ASM,e.QSM,c,a,e.RM];var s=n.c.concat([e.CBCM,e.CLCM]);return{aliases:["js","jsx"],k:t,c:[{cN:"meta",r:10,b:/^\s*['"]use (strict|asm)['"]/},{cN:"meta",b:/^#!/,e:/$/},e.ASM,e.QSM,c,e.CLCM,e.CBCM,a,{b:/[{,]\s*/,r:0,c:[{b:r+"\\s*:",rB:!0,r:0,c:[{cN:"attr",b:r,r:0}]}]},{b:"("+e.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[e.CLCM,e.CBCM,e.RM,{cN:"function",b:"(\\(.*?\\)|"+r+")\\s*=>",rB:!0,e:"\\s*=>",c:[{cN:"params",v:[{b:r},{b:/\(\s*\)/},{b:/\(/,e:/\)/,eB:!0,eE:!0,k:t,c:s}]}]},{b:/,e:/(\/\w+|\w+\/)>/,sL:"xml",c:[{b:/<\w+\s*\/>/,skip:!0},{b:/<\w+/,e:/(\/\w+|\w+\/)>/,skip:!0,c:[{b:/<\w+\s*\/>/,skip:!0},"self"]}]}],r:0},{cN:"function",bK:"function",e:/\{/,eE:!0,c:[e.inherit(e.TM,{b:r}),{cN:"params",b:/\(/,e:/\)/,eB:!0,eE:!0,c:s}],i:/\[|%/},{b:/\$[(.]/},e.METHOD_GUARD,{cN:"class",bK:"class",e:/[{;=]/,eE:!0,i:/[:"\[\]]/,c:[{bK:"extends"},e.UTM]},{bK:"constructor",e:/\{/,eE:!0}],i:/#(?!!)/}});hljs.registerLanguage("xml",function(s){var e="[A-Za-z0-9\\._:-]+",t={eW:!0,i:/,r:0,c:[{cN:"attr",b:e,r:0},{b:/=\s*/,r:0,c:[{cN:"string",endsParent:!0,v:[{b:/"/,e:/"/},{b:/'/,e:/'/},{b:/[^\s"'=<>`]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xjb","xsd","xsl","plist"],cI:!0,c:[{cN:"meta",b:"",r:10,c:[{b:"\\[",e:"\\]"}]},s.C("",{r:10}),{b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{b:/<\?(php)?/,e:/\?>/,sL:"php",c:[{b:"/\\*",e:"\\*/",skip:!0}]},{cN:"tag",b:"",rE:!0,sL:["css","xml"]}},{cN:"tag",b:"",rE:!0,sL:["actionscript","javascript","handlebars","xml"]}},{cN:"meta",v:[{b:/<\?xml/,e:/\?>/,r:10},{b:/<\?\w+/,e:/\?>/}]},{cN:"tag",b:"?",e:"/?>",c:[{cN:"name",b:/[^\/><\s]+/,r:0},t]}]}});
\ No newline at end of file
diff --git a/docs/assets/hljs-default.css b/docs/assets/hljs-default.css
new file mode 100644
index 0000000..f1bfade
--- /dev/null
+++ b/docs/assets/hljs-default.css
@@ -0,0 +1,99 @@
+/*
+
+Original highlight.js style (c) Ivan Sagalaev
+
+*/
+
+.hljs {
+ display: block;
+ overflow-x: auto;
+ padding: 0.5em;
+ background: #F0F0F0;
+}
+
+
+/* Base color: saturation 0; */
+
+.hljs,
+.hljs-subst {
+ color: #444;
+}
+
+.hljs-comment {
+ color: #888888;
+}
+
+.hljs-keyword,
+.hljs-attribute,
+.hljs-selector-tag,
+.hljs-meta-keyword,
+.hljs-doctag,
+.hljs-name {
+ font-weight: bold;
+}
+
+
+/* User color: hue: 0 */
+
+.hljs-type,
+.hljs-string,
+.hljs-number,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-deletion {
+ color: #880000;
+}
+
+.hljs-title,
+.hljs-section {
+ color: #880000;
+ font-weight: bold;
+}
+
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+ color: #BC6060;
+}
+
+
+/* Language color: hue: 90; */
+
+.hljs-literal {
+ color: #78A960;
+}
+
+.hljs-built_in,
+.hljs-bullet,
+.hljs-code,
+.hljs-addition {
+ color: #397300;
+}
+
+
+/* Meta color: hue: 200 */
+
+.hljs-meta {
+ color: #1f7199;
+}
+
+.hljs-meta-string {
+ color: #4d99bf;
+}
+
+
+/* Misc effects */
+
+.hljs-emphasis {
+ font-style: italic;
+}
+
+.hljs-strong {
+ font-weight: bold;
+}
diff --git a/docs/assets/index.css b/docs/assets/index.css
new file mode 100644
index 0000000..fbf9def
--- /dev/null
+++ b/docs/assets/index.css
@@ -0,0 +1,65 @@
+*, *::after, *::before {
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+}
+
+html, body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ font-size: 14px;
+}
+
+code {
+ font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+h1 {
+ font-size: 3rem;
+ margin: 1rem 0;
+}
+
+h2 {
+ font-size: 2.5rem;
+}
+
+.padding-1 {
+ padding: 0.5rem;
+}
+
+.installation .code {
+ width: 50%;
+}
+
+.showcase {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 4rem;
+ text-align: center;
+}
+
+.showcase p {
+ font-size: 2rem;
+ margin: 1rem 0;
+}
+
+[class^="example-"] {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.code {
+ text-align: left;
+ width: 100%;
+ margin: 1rem 0;
+}
+
+.hljs {
+ border-radius: 3px;
+}
+
+footer {
+ border-top: 1px solid #d1d8dd;
+}
\ No newline at end of file
diff --git a/docs/index.js b/docs/assets/index.js
similarity index 78%
rename from docs/index.js
rename to docs/assets/index.js
index 224fc81..9dacbff 100644
--- a/docs/index.js
+++ b/docs/assets/index.js
@@ -6,76 +6,98 @@ const {
data
} = getSampleData();
-let datatable1 = new DataTable('.datatable-1', {
+// Hero
+let datatable1 = new DataTable('.example-1 .target', {
columns,
data
});
-let datatable2 = new DataTable('.datatable-2', Object.assign(getTreeData(), {
- enableInlineFilters: true,
- addCheckboxColumn: true
-}));
+// Formatted Cells
+let datatable2 = new DataTable('.example-2', {
+ columns: ['Name', 'Position', 'Office', 'Extn.', 'Start Date',
+ { content: 'Salary', format: val => '$' + val, align: 'right' }],
+ data
+});
+
+// Inline Filters
+let datatable3 = new DataTable('.example-3', {
+ columns,
+ data,
+ enableInlineFilters: true
+});
+datatable3.showToastMessage('Click on a cell and press Ctrl/Cmd + F');
+
+// Keyboard
+let datatable4 = new DataTable('.example-4', {
+ columns,
+ data
+});
+datatable4.showToastMessage('Double click to edit');
+
+// Tree Structured Rows
+let datatable5 = new DataTable('.example-5', getTreeData());
+datatable5.showToastMessage('Expand/Collapse tree nodes');
function getSampleData(multiplier) {
let columns = ['Name', 'Position', 'Office', 'Extn.', 'Start Date', 'Salary'];
let data = [
- ['Tiger Nixon', 'System Architect', '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']
+ ['Tiger Nixon', 'System Architect', '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 (multiplier) {
@@ -101,13 +123,16 @@ function getTreeData() {
}, {
'id': 'opening_credit',
'content': 'Opening (Cr)'
- }, {
- 'id': 'debit',
- 'content': 'Debit'
- }, {
- 'id': 'credit',
- 'content': 'Credit'
- }, {
+ },
+ // {
+ // 'id': 'debit',
+ // 'content': 'Debit'
+ // },
+ // {
+ // 'id': 'credit',
+ // 'content': 'Credit'
+ // },
+ {
'id': 'closing_debit',
'content': 'Closing (Dr)'
}, {
@@ -120,7 +145,7 @@ function getTreeData() {
}],
data: [{
'account_name': 'Application of Funds (Assets)',
- 'account': 'Application of Funds (Assets) - GTPL',
+ 'account': 'Application of Funds (Assets)',
'parent_account': null,
'indent': 0,
'from_date': '2018-04-01',
@@ -135,8 +160,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Current Assets',
- 'account': 'Current Assets - GTPL',
- 'parent_account': 'Application of Funds (Assets) - GTPL',
+ 'account': 'Current Assets',
+ 'parent_account': 'Application of Funds (Assets)',
'indent': 1,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -150,8 +175,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Accounts Receivable',
- 'account': 'Accounts Receivable - GTPL',
- 'parent_account': 'Current Assets - GTPL',
+ 'account': 'Accounts Receivable',
+ 'parent_account': 'Current Assets',
'indent': 2,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -165,8 +190,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Debtors',
- 'account': 'Debtors - GTPL',
- 'parent_account': 'Accounts Receivable - GTPL',
+ 'account': 'Debtors',
+ 'parent_account': 'Accounts Receivable',
'indent': 3,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -180,8 +205,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Bank Accounts',
- 'account': 'Bank Accounts - GTPL',
- 'parent_account': 'Current Assets - GTPL',
+ 'account': 'Bank Accounts',
+ 'parent_account': 'Current Assets',
'indent': 2,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -195,8 +220,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Corporation Bank',
- 'account': 'Corporation Bank - GTPL',
- 'parent_account': 'Bank Accounts - GTPL',
+ 'account': 'Corporation Bank',
+ 'parent_account': 'Bank Accounts',
'indent': 3,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -210,8 +235,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'HDFC Bank',
- 'account': 'HDFC Bank - GTPL',
- 'parent_account': 'Bank Accounts - GTPL',
+ 'account': 'HDFC Bank',
+ 'parent_account': 'Bank Accounts',
'indent': 3,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -225,8 +250,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Cash In Hand',
- 'account': 'Cash In Hand - GTPL',
- 'parent_account': 'Current Assets - GTPL',
+ 'account': 'Cash In Hand',
+ 'parent_account': 'Current Assets',
'indent': 2,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -240,8 +265,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Cash',
- 'account': 'Cash - GTPL',
- 'parent_account': 'Cash In Hand - GTPL',
+ 'account': 'Cash',
+ 'parent_account': 'Cash In Hand',
'indent': 3,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -255,8 +280,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Stock Assets',
- 'account': 'Stock Assets - GTPL',
- 'parent_account': 'Current Assets - GTPL',
+ 'account': 'Stock Assets',
+ 'parent_account': 'Current Assets',
'indent': 2,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -270,8 +295,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'All Warehouses',
- 'account': 'All Warehouses - GTPL',
- 'parent_account': 'Stock Assets - GTPL',
+ 'account': 'All Warehouses',
+ 'parent_account': 'Stock Assets',
'indent': 3,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -285,8 +310,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Finished Goods',
- 'account': 'Finished Goods - GTPL',
- 'parent_account': 'All Warehouses - GTPL',
+ 'account': 'Finished Goods',
+ 'parent_account': 'All Warehouses',
'indent': 4,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -300,8 +325,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Retail Stores',
- 'account': 'Retail Stores - GTPL',
- 'parent_account': 'All Warehouses - GTPL',
+ 'account': 'Retail Stores',
+ 'parent_account': 'All Warehouses',
'indent': 4,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -315,8 +340,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Bandra Store',
- 'account': 'Bandra Store - GTPL',
- 'parent_account': 'Retail Stores - GTPL',
+ 'account': 'Bandra Store',
+ 'parent_account': 'Retail Stores',
'indent': 5,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -330,8 +355,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Central Warehouse',
- 'account': 'Central Warehouse - GTPL',
- 'parent_account': 'Retail Stores - GTPL',
+ 'account': 'Central Warehouse',
+ 'parent_account': 'Retail Stores',
'indent': 5,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -345,8 +370,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Lower Parel Store',
- 'account': 'Lower Parel Store - GTPL',
- 'parent_account': 'Retail Stores - GTPL',
+ 'account': 'Lower Parel Store',
+ 'parent_account': 'Retail Stores',
'indent': 5,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -360,8 +385,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Stores',
- 'account': 'Stores - GTPL',
- 'parent_account': 'All Warehouses - GTPL',
+ 'account': 'Stores',
+ 'parent_account': 'All Warehouses',
'indent': 4,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -375,8 +400,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Work In Progress',
- 'account': 'Work In Progress - GTPL',
- 'parent_account': 'All Warehouses - GTPL',
+ 'account': 'Work In Progress',
+ 'parent_account': 'All Warehouses',
'indent': 4,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -390,8 +415,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Fixed Assets',
- 'account': 'Fixed Assets - GTPL',
- 'parent_account': 'Application of Funds (Assets) - GTPL',
+ 'account': 'Fixed Assets',
+ 'parent_account': 'Application of Funds (Assets)',
'indent': 1,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -405,8 +430,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Electronic Equipments',
- 'account': 'Electronic Equipments - GTPL',
- 'parent_account': 'Fixed Assets - GTPL',
+ 'account': 'Electronic Equipments',
+ 'parent_account': 'Fixed Assets',
'indent': 2,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -420,8 +445,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Furnitures and Fixtures',
- 'account': 'Furnitures and Fixtures - GTPL',
- 'parent_account': 'Fixed Assets - GTPL',
+ 'account': 'Furnitures and Fixtures',
+ 'parent_account': 'Fixed Assets',
'indent': 2,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -435,8 +460,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Temporary Accounts',
- 'account': 'Temporary Accounts - GTPL',
- 'parent_account': 'Application of Funds (Assets) - GTPL',
+ 'account': 'Temporary Accounts',
+ 'parent_account': 'Application of Funds (Assets)',
'indent': 1,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -450,8 +475,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Temporary Opening',
- 'account': 'Temporary Opening - GTPL',
- 'parent_account': 'Temporary Accounts - GTPL',
+ 'account': 'Temporary Opening',
+ 'parent_account': 'Temporary Accounts',
'indent': 2,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -465,7 +490,7 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Source of Funds (Liabilities)',
- 'account': 'Source of Funds (Liabilities) - GTPL',
+ 'account': 'Source of Funds (Liabilities)',
'parent_account': null,
'indent': 0,
'from_date': '2018-04-01',
@@ -480,8 +505,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Current Liabilities',
- 'account': 'Current Liabilities - GTPL',
- 'parent_account': 'Source of Funds (Liabilities) - GTPL',
+ 'account': 'Current Liabilities',
+ 'parent_account': 'Source of Funds (Liabilities)',
'indent': 1,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -495,8 +520,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Accounts Payable',
- 'account': 'Accounts Payable - GTPL',
- 'parent_account': 'Current Liabilities - GTPL',
+ 'account': 'Accounts Payable',
+ 'parent_account': 'Current Liabilities',
'indent': 2,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -510,8 +535,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Creditors',
- 'account': 'Creditors - GTPL',
- 'parent_account': 'Accounts Payable - GTPL',
+ 'account': 'Creditors',
+ 'parent_account': 'Accounts Payable',
'indent': 3,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -525,8 +550,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Salary Payable',
- 'account': 'Salary Payable - GTPL',
- 'parent_account': 'Accounts Payable - GTPL',
+ 'account': 'Salary Payable',
+ 'parent_account': 'Accounts Payable',
'indent': 3,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -540,8 +565,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Duties and Taxes',
- 'account': 'Duties and Taxes - GTPL',
- 'parent_account': 'Current Liabilities - GTPL',
+ 'account': 'Duties and Taxes',
+ 'parent_account': 'Current Liabilities',
'indent': 2,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -555,8 +580,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'CGST',
- 'account': 'CGST - GTPL',
- 'parent_account': 'Duties and Taxes - GTPL',
+ 'account': 'CGST',
+ 'parent_account': 'Duties and Taxes',
'indent': 3,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -570,8 +595,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'IGST',
- 'account': 'IGST - GTPL',
- 'parent_account': 'Duties and Taxes - GTPL',
+ 'account': 'IGST',
+ 'parent_account': 'Duties and Taxes',
'indent': 3,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -585,8 +610,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'SGST',
- 'account': 'SGST - GTPL',
- 'parent_account': 'Duties and Taxes - GTPL',
+ 'account': 'SGST',
+ 'parent_account': 'Duties and Taxes',
'indent': 3,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -600,8 +625,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'UGST',
- 'account': 'UGST - GTPL',
- 'parent_account': 'Duties and Taxes - GTPL',
+ 'account': 'UGST',
+ 'parent_account': 'Duties and Taxes',
'indent': 3,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -615,8 +640,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Stock Liabilities',
- 'account': 'Stock Liabilities - GTPL',
- 'parent_account': 'Current Liabilities - GTPL',
+ 'account': 'Stock Liabilities',
+ 'parent_account': 'Current Liabilities',
'indent': 2,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -630,8 +655,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Stock Received But Not Billed',
- 'account': 'Stock Received But Not Billed - GTPL',
- 'parent_account': 'Stock Liabilities - GTPL',
+ 'account': 'Stock Received But Not Billed',
+ 'parent_account': 'Stock Liabilities',
'indent': 3,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
@@ -645,7 +670,7 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Equity',
- 'account': 'Equity - GTPL',
+ 'account': 'Equity',
'parent_account': null,
'indent': 0,
'from_date': '2018-04-01',
@@ -660,8 +685,8 @@ function getTreeData() {
'has_value': true
}, {
'account_name': 'Capital Stock',
- 'account': 'Capital Stock - GTPL',
- 'parent_account': 'Equity - GTPL',
+ 'account': 'Capital Stock',
+ 'parent_account': 'Equity',
'indent': 1,
'from_date': '2018-04-01',
'to_date': '2019-03-31',
diff --git a/docs/index.css b/docs/index.css
deleted file mode 100644
index 786b20d..0000000
--- a/docs/index.css
+++ /dev/null
@@ -1,40 +0,0 @@
-*, *::after, *::before {
- box-sizing: border-box;
- padding: 0;
- margin: 0;
-}
-
-html, body {
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
- font-size: 14px;
-}
-
-h1 {
- font-size: 3rem;
- margin: 1rem 0;
-}
-
-h2 {
- font-size: 2.5rem;
-}
-
-.showcase {
- margin: 0 auto;
- padding: 4rem;
- text-align: center;
-}
-
-.showcase p {
- font-size: 2rem;
- margin: 1rem 0;
-}
-
-.datatable-1, .datatable-2 {
- width: 735px;
- margin: 0 auto;
- margin-top: 2rem;
-}
-
-.datatable-2 {
- width: 934px;
-}
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index aef8ca7..77d6316 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -5,23 +5,122 @@
Frappe DataTable - A simple, modern datatable library for the web
-
-
+
+
+
Frappe DataTable
A simple, modern and interactive datatable for the web
-
+
+
+
+ Format Cells
+ Show custom formatted cells based on context
+
+
+
+ Inline Filters
+ Filter rows based on search text per column
+
+
+
+ Keyboard Navigation
+ Full Keyboard Navigation support
+
Tree Structure
Show tree structured rows in your table
-
+
-
-
-
-
+
+ Installation
+
+
// Install using yarn
+yarn add frappe-datatable
+
+// or npm
+npm install frappe-datatable
+
+
+ Usage
+
+
let datatable = new DataTable({
+ columns: ['Name', 'Position', ...],
+ data: [
+ ['Tiger Nixon', 'System Architect', ...],
+ ['Garrett Winters', 'Accountant', ...],
+ ...
+ ]
+ })
+
+
+
+
+
+ List of configurable options
+
+
{
+ columns: [],
+ data: [],
+ dropdownButton: '▼',
+ headerDropdown: [
+ {
+ label: 'Custom Action',
+ action: console.log
+ }
+ ],
+ events: {
+ onRemoveColumn(column) {
+
+ },
+ onSwitchColumn(column1, column2) {
+
+ },
+ onSortColumn(column) {
+
+ }
+ },
+ sortIndicator: {
+ asc: '↑',
+ desc: '↓',
+ none: ''
+ },
+ freezeMessage: '',
+ getEditor: () => {
+
+ },
+ addSerialNoColumn: true,
+ addCheckboxColumn: false,
+ enableClusterize: true,
+ enableLogs: false,
+ layout: 'fixed', // fixed, fluid
+ noDataMessage: 'No Data',
+ cellHeight: null,
+ enableInlineFilters: false
+};
+
+
+
+
+
+
+
+
+
+
-