Restructure docs, Add more examples
This commit is contained in:
Faris Ansari
parent
9eaa81f89d
commit
c9b04ddeb9
31
dist/frappe-datatable.cjs.css
vendored
31
dist/frappe-datatable.cjs.css
vendored
@ -4,7 +4,6 @@
|
|||||||
.data-table {
|
.data-table {
|
||||||
|
|
||||||
/* styling */
|
/* styling */
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
@ -77,20 +76,28 @@
|
|||||||
transform: translateY(-50%);
|
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 {
|
.data-table .hide {
|
||||||
display: none;
|
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 {
|
.body-scrollable {
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
@ -272,4 +279,4 @@
|
|||||||
|
|
||||||
body.data-table-resize {
|
body.data-table-resize {
|
||||||
cursor: col-resize;
|
cursor: col-resize;
|
||||||
}
|
}
|
||||||
|
|||||||
89
dist/frappe-datatable.cjs.js
vendored
89
dist/frappe-datatable.cjs.js
vendored
@ -2417,8 +2417,13 @@ class CellManager {
|
|||||||
const {
|
const {
|
||||||
colIndex
|
colIndex
|
||||||
} = $.data($cell);
|
} = $.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);
|
return $(`[data-col-index="${colIndex}"]`, $aboveRow);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2426,8 +2431,13 @@ class CellManager {
|
|||||||
const {
|
const {
|
||||||
colIndex
|
colIndex
|
||||||
} = $.data($cell);
|
} = $.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);
|
return $(`[data-col-index="${colIndex}"]`, $belowRow);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2569,7 +2579,8 @@ class RowManager {
|
|||||||
linkProperties(this, this.instance, [
|
linkProperties(this, this.instance, [
|
||||||
'options',
|
'options',
|
||||||
'wrapper',
|
'wrapper',
|
||||||
'bodyScrollable'
|
'bodyScrollable',
|
||||||
|
'bodyRenderer'
|
||||||
]);
|
]);
|
||||||
|
|
||||||
this.bindEvents();
|
this.bindEvents();
|
||||||
@ -2628,16 +2639,15 @@ class RowManager {
|
|||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
return this.checkMap
|
let out = [];
|
||||||
.map((c, rowIndex) => {
|
for (let rowIndex in this.checkMap) {
|
||||||
if (c) {
|
const checked = this.checkMap[rowIndex];
|
||||||
return rowIndex;
|
if (checked === 1) {
|
||||||
}
|
out.push(rowIndex);
|
||||||
return null;
|
}
|
||||||
})
|
}
|
||||||
.filter(c => {
|
|
||||||
return c !== null || c !== undefined;
|
return out;
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
highlightCheckedRows() {
|
highlightCheckedRows() {
|
||||||
@ -2658,6 +2668,7 @@ class RowManager {
|
|||||||
});
|
});
|
||||||
// highlight row
|
// highlight row
|
||||||
this.highlightRow(rowIndex, toggle);
|
this.highlightRow(rowIndex, toggle);
|
||||||
|
this.showCheckStatus();
|
||||||
}
|
}
|
||||||
|
|
||||||
checkAll(toggle) {
|
checkAll(toggle) {
|
||||||
@ -2676,6 +2687,16 @@ class RowManager {
|
|||||||
});
|
});
|
||||||
// highlight all
|
// highlight all
|
||||||
this.highlightAll(toggle);
|
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) {
|
highlightRow(rowIndex, toggle = true) {
|
||||||
@ -2909,6 +2930,14 @@ class BodyRenderer {
|
|||||||
this.clusterize.append(data);
|
this.clusterize.append(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
showToastMessage(message) {
|
||||||
|
this.instance.toastMessage.innerHTML = `<span>${message}</span>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
clearToastMessage() {
|
||||||
|
this.instance.toastMessage.innerHTML = '';
|
||||||
|
}
|
||||||
|
|
||||||
getDataForClusterize(rows) {
|
getDataForClusterize(rows) {
|
||||||
return rows.map((row) => this.rowmanager.getRowHTML(row, row.meta));
|
return rows.map((row) => this.rowmanager.getRowHTML(row, row.meta));
|
||||||
}
|
}
|
||||||
@ -3315,23 +3344,25 @@ class DataTable {
|
|||||||
|
|
||||||
prepareDom() {
|
prepareDom() {
|
||||||
this.wrapper.innerHTML = `
|
this.wrapper.innerHTML = `
|
||||||
<div class="data-table">
|
<div class="data-table">
|
||||||
<table class="data-table-header">
|
<table class="data-table-header">
|
||||||
</table>
|
</table>
|
||||||
<div class="body-scrollable">
|
<div class="body-scrollable">
|
||||||
</div>
|
</div>
|
||||||
<div class="freeze-container">
|
<div class="freeze-container">
|
||||||
<span>${this.options.freezeMessage}</span>
|
<span>${this.options.freezeMessage}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-table-footer">
|
<div class="data-table-footer">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="toast-message"></div>
|
||||||
`;
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
this.datatableWrapper = $('.data-table', this.wrapper);
|
this.datatableWrapper = $('.data-table', this.wrapper);
|
||||||
this.header = $('.data-table-header', this.wrapper);
|
this.header = $('.data-table-header', this.wrapper);
|
||||||
this.bodyScrollable = $('.body-scrollable', this.wrapper);
|
this.bodyScrollable = $('.body-scrollable', this.wrapper);
|
||||||
this.freezeContainer = $('.freeze-container', this.wrapper);
|
this.freezeContainer = $('.freeze-container', this.wrapper);
|
||||||
|
this.toastMessage = $('.toast-message', this.wrapper);
|
||||||
}
|
}
|
||||||
|
|
||||||
refresh(data) {
|
refresh(data) {
|
||||||
@ -3371,6 +3402,14 @@ class DataTable {
|
|||||||
this.style.setDimensions();
|
this.style.setDimensions();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
showToastMessage(message) {
|
||||||
|
this.bodyRenderer.showToastMessage(message);
|
||||||
|
}
|
||||||
|
|
||||||
|
clearToastMessage() {
|
||||||
|
this.bodyRenderer.clearToastMessage();
|
||||||
|
}
|
||||||
|
|
||||||
getColumn(colIndex) {
|
getColumn(colIndex) {
|
||||||
return this.datamanager.getColumn(colIndex);
|
return this.datamanager.getColumn(colIndex);
|
||||||
}
|
}
|
||||||
|
|||||||
31
dist/frappe-datatable.css
vendored
31
dist/frappe-datatable.css
vendored
@ -4,7 +4,6 @@
|
|||||||
.data-table {
|
.data-table {
|
||||||
|
|
||||||
/* styling */
|
/* styling */
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
@ -77,20 +76,28 @@
|
|||||||
transform: translateY(-50%);
|
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 {
|
.data-table .hide {
|
||||||
display: none;
|
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 {
|
.body-scrollable {
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
@ -272,4 +279,4 @@
|
|||||||
|
|
||||||
body.data-table-resize {
|
body.data-table-resize {
|
||||||
cursor: col-resize;
|
cursor: col-resize;
|
||||||
}
|
}
|
||||||
|
|||||||
89
dist/frappe-datatable.js
vendored
89
dist/frappe-datatable.js
vendored
@ -2416,8 +2416,13 @@ class CellManager {
|
|||||||
const {
|
const {
|
||||||
colIndex
|
colIndex
|
||||||
} = $.data($cell);
|
} = $.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);
|
return $(`[data-col-index="${colIndex}"]`, $aboveRow);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2425,8 +2430,13 @@ class CellManager {
|
|||||||
const {
|
const {
|
||||||
colIndex
|
colIndex
|
||||||
} = $.data($cell);
|
} = $.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);
|
return $(`[data-col-index="${colIndex}"]`, $belowRow);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2568,7 +2578,8 @@ class RowManager {
|
|||||||
linkProperties(this, this.instance, [
|
linkProperties(this, this.instance, [
|
||||||
'options',
|
'options',
|
||||||
'wrapper',
|
'wrapper',
|
||||||
'bodyScrollable'
|
'bodyScrollable',
|
||||||
|
'bodyRenderer'
|
||||||
]);
|
]);
|
||||||
|
|
||||||
this.bindEvents();
|
this.bindEvents();
|
||||||
@ -2627,16 +2638,15 @@ class RowManager {
|
|||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
return this.checkMap
|
let out = [];
|
||||||
.map((c, rowIndex) => {
|
for (let rowIndex in this.checkMap) {
|
||||||
if (c) {
|
const checked = this.checkMap[rowIndex];
|
||||||
return rowIndex;
|
if (checked === 1) {
|
||||||
}
|
out.push(rowIndex);
|
||||||
return null;
|
}
|
||||||
})
|
}
|
||||||
.filter(c => {
|
|
||||||
return c !== null || c !== undefined;
|
return out;
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
highlightCheckedRows() {
|
highlightCheckedRows() {
|
||||||
@ -2657,6 +2667,7 @@ class RowManager {
|
|||||||
});
|
});
|
||||||
// highlight row
|
// highlight row
|
||||||
this.highlightRow(rowIndex, toggle);
|
this.highlightRow(rowIndex, toggle);
|
||||||
|
this.showCheckStatus();
|
||||||
}
|
}
|
||||||
|
|
||||||
checkAll(toggle) {
|
checkAll(toggle) {
|
||||||
@ -2675,6 +2686,16 @@ class RowManager {
|
|||||||
});
|
});
|
||||||
// highlight all
|
// highlight all
|
||||||
this.highlightAll(toggle);
|
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) {
|
highlightRow(rowIndex, toggle = true) {
|
||||||
@ -2908,6 +2929,14 @@ class BodyRenderer {
|
|||||||
this.clusterize.append(data);
|
this.clusterize.append(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
showToastMessage(message) {
|
||||||
|
this.instance.toastMessage.innerHTML = `<span>${message}</span>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
clearToastMessage() {
|
||||||
|
this.instance.toastMessage.innerHTML = '';
|
||||||
|
}
|
||||||
|
|
||||||
getDataForClusterize(rows) {
|
getDataForClusterize(rows) {
|
||||||
return rows.map((row) => this.rowmanager.getRowHTML(row, row.meta));
|
return rows.map((row) => this.rowmanager.getRowHTML(row, row.meta));
|
||||||
}
|
}
|
||||||
@ -3314,23 +3343,25 @@ class DataTable {
|
|||||||
|
|
||||||
prepareDom() {
|
prepareDom() {
|
||||||
this.wrapper.innerHTML = `
|
this.wrapper.innerHTML = `
|
||||||
<div class="data-table">
|
<div class="data-table">
|
||||||
<table class="data-table-header">
|
<table class="data-table-header">
|
||||||
</table>
|
</table>
|
||||||
<div class="body-scrollable">
|
<div class="body-scrollable">
|
||||||
</div>
|
</div>
|
||||||
<div class="freeze-container">
|
<div class="freeze-container">
|
||||||
<span>${this.options.freezeMessage}</span>
|
<span>${this.options.freezeMessage}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-table-footer">
|
<div class="data-table-footer">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="toast-message"></div>
|
||||||
`;
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
this.datatableWrapper = $('.data-table', this.wrapper);
|
this.datatableWrapper = $('.data-table', this.wrapper);
|
||||||
this.header = $('.data-table-header', this.wrapper);
|
this.header = $('.data-table-header', this.wrapper);
|
||||||
this.bodyScrollable = $('.body-scrollable', this.wrapper);
|
this.bodyScrollable = $('.body-scrollable', this.wrapper);
|
||||||
this.freezeContainer = $('.freeze-container', this.wrapper);
|
this.freezeContainer = $('.freeze-container', this.wrapper);
|
||||||
|
this.toastMessage = $('.toast-message', this.wrapper);
|
||||||
}
|
}
|
||||||
|
|
||||||
refresh(data) {
|
refresh(data) {
|
||||||
@ -3370,6 +3401,14 @@ class DataTable {
|
|||||||
this.style.setDimensions();
|
this.style.setDimensions();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
showToastMessage(message) {
|
||||||
|
this.bodyRenderer.showToastMessage(message);
|
||||||
|
}
|
||||||
|
|
||||||
|
clearToastMessage() {
|
||||||
|
this.bodyRenderer.clearToastMessage();
|
||||||
|
}
|
||||||
|
|
||||||
getColumn(colIndex) {
|
getColumn(colIndex) {
|
||||||
return this.datamanager.getColumn(colIndex);
|
return this.datamanager.getColumn(colIndex);
|
||||||
}
|
}
|
||||||
|
|||||||
2
docs/assets/Sortable.min.js
vendored
Normal file
2
docs/assets/Sortable.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
18
docs/assets/clusterize.min.js
vendored
Normal file
18
docs/assets/clusterize.min.js
vendored
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
/*
|
||||||
|
Clusterize.js - v0.18.0 - 2017-11-04
|
||||||
|
http://NeXTs.github.com/Clusterize.js/
|
||||||
|
Copyright (c) 2015 Denis Lukov; Licensed GPLv3 */
|
||||||
|
|
||||||
|
;(function(q,n){"undefined"!=typeof module?module.exports=n():"function"==typeof define&&"object"==typeof define.amd?define(n):this[q]=n()})("Clusterize",function(){function q(b,a,c){return a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent("on"+b,c)}function n(b,a,c){return a.removeEventListener?a.removeEventListener(b,c,!1):a.detachEvent("on"+b,c)}function r(b){return"[object Array]"===Object.prototype.toString.call(b)}function m(b,a){return window.getComputedStyle?window.getComputedStyle(a)[b]:
|
||||||
|
a.currentStyle[b]}var l=function(){for(var b=3,a=document.createElement("b"),c=a.all||[];a.innerHTML="\x3c!--[if gt IE "+ ++b+"]><i><![endif]--\x3e",c[0];);return 4<b?b:document.documentMode}(),x=navigator.platform.toLowerCase().indexOf("mac")+1,p=function(b){if(!(this instanceof p))return new p(b);var a=this,c={rows_in_block:50,blocks_in_cluster:4,tag:null,show_no_data_row:!0,no_data_class:"clusterize-no-data",no_data_text:"No data",keep_parity:!0,callbacks:{}};a.options={};for(var d="rows_in_block blocks_in_cluster show_no_data_row no_data_class no_data_text keep_parity tag callbacks".split(" "),
|
||||||
|
f=0,h;h=d[f];f++)a.options[h]="undefined"!=typeof b[h]&&null!=b[h]?b[h]:c[h];c=["scroll","content"];for(f=0;d=c[f];f++)if(a[d+"_elem"]=b[d+"Id"]?document.getElementById(b[d+"Id"]):b[d+"Elem"],!a[d+"_elem"])throw Error("Error! Could not find "+d+" element");a.content_elem.hasAttribute("tabindex")||a.content_elem.setAttribute("tabindex",0);var e=r(b.rows)?b.rows:a.fetchMarkup(),g={};b=a.scroll_elem.scrollTop;a.insertToDOM(e,g);a.scroll_elem.scrollTop=b;var k=!1,m=0,l=!1,t=function(){x&&(l||(a.content_elem.style.pointerEvents=
|
||||||
|
"none"),l=!0,clearTimeout(m),m=setTimeout(function(){a.content_elem.style.pointerEvents="auto";l=!1},50));k!=(k=a.getClusterNum())&&a.insertToDOM(e,g);a.options.callbacks.scrollingProgress&&a.options.callbacks.scrollingProgress(a.getScrollProgress())},u=0,v=function(){clearTimeout(u);u=setTimeout(a.refresh,100)};q("scroll",a.scroll_elem,t);q("resize",window,v);a.destroy=function(b){n("scroll",a.scroll_elem,t);n("resize",window,v);a.html((b?a.generateEmptyRow():e).join(""))};a.refresh=function(b){(a.getRowsHeight(e)||
|
||||||
|
b)&&a.update(e)};a.update=function(b){e=r(b)?b:[];b=a.scroll_elem.scrollTop;e.length*a.options.item_height<b&&(k=a.scroll_elem.scrollTop=0);a.insertToDOM(e,g);a.scroll_elem.scrollTop=b};a.clear=function(){a.update([])};a.getRowsAmount=function(){return e.length};a.getScrollProgress=function(){return this.options.scroll_top/(e.length*this.options.item_height)*100||0};var w=function(b,c){var d=r(c)?c:[];d.length&&(e="append"==b?e.concat(d):d.concat(e),a.insertToDOM(e,g))};a.append=function(a){w("append",
|
||||||
|
a)};a.prepend=function(a){w("prepend",a)}};p.prototype={constructor:p,fetchMarkup:function(){for(var b=[],a=this.getChildNodes(this.content_elem);a.length;)b.push(a.shift().outerHTML);return b},exploreEnvironment:function(b,a){var c=this.options;c.content_tag=this.content_elem.tagName.toLowerCase();b.length&&(l&&9>=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(d<c.rows_in_block)return{top_offset:0,bottom_offset:0,rows_above:0,rows:d?b:this.generateEmptyRow()};var f=Math.max((c.rows_in_cluster-c.rows_in_block)*a,0),h=f+c.rows_in_cluster,e=Math.max(f*c.item_height,0);c=Math.max((d-h)*c.item_height,0);d=[];var g=f;for(1>e&&g++;f<h;f++)b[f]&&d.push(b[f]);return{top_offset:e,bottom_offset:c,
|
||||||
|
rows_above:g,rows:d}},renderExtraTag:function(b,a){var c=document.createElement(this.options.tag);c.className=["clusterize-extra-row","clusterize-"+b].join(" ");a&&(c.style.height=a+"px");return c.outerHTML},insertToDOM:function(b,a){this.options.cluster_height||this.exploreEnvironment(b,a);var c=this.generate(b,this.getClusterNum()),d=c.rows.join(""),f=this.checkChanges("data",d,a),h=this.checkChanges("top",c.top_offset,a),e=this.checkChanges("bottom",c.bottom_offset,a),g=this.options.callbacks,
|
||||||
|
k=[];f||h?(c.top_offset&&(this.options.keep_parity&&k.push(this.renderExtraTag("keep-parity")),k.push(this.renderExtraTag("top-space",c.top_offset))),k.push(d),c.bottom_offset&&k.push(this.renderExtraTag("bottom-space",c.bottom_offset)),g.clusterWillChange&&g.clusterWillChange(),this.html(k.join("")),"ol"==this.options.content_tag&&this.content_elem.setAttribute("start",c.rows_above),this.content_elem.style["counter-increment"]="clusterize-counter "+(c.rows_above-1),g.clusterChanged&&g.clusterChanged()):
|
||||||
|
e&&(this.content_elem.lastChild.style.height=c.bottom_offset+"px")},html:function(b){var a=this.content_elem;if(l&&9>=l&&"tr"==this.options.tag){var c=document.createElement("div");for(c.innerHTML="<table><tbody>"+b+"</tbody></table>";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<d;c++)a.push(b[c]);return a},checkChanges:function(b,a,c){var d=
|
||||||
|
a!=c[b];c[b]=a;return d}};return p});
|
||||||
@ -4,7 +4,6 @@
|
|||||||
.data-table {
|
.data-table {
|
||||||
|
|
||||||
/* styling */
|
/* styling */
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
@ -77,20 +76,28 @@
|
|||||||
transform: translateY(-50%);
|
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 {
|
.data-table .hide {
|
||||||
display: none;
|
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 {
|
.body-scrollable {
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
@ -272,4 +279,4 @@
|
|||||||
|
|
||||||
body.data-table-resize {
|
body.data-table-resize {
|
||||||
cursor: col-resize;
|
cursor: col-resize;
|
||||||
}
|
}
|
||||||
@ -2416,8 +2416,13 @@ class CellManager {
|
|||||||
const {
|
const {
|
||||||
colIndex
|
colIndex
|
||||||
} = $.data($cell);
|
} = $.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);
|
return $(`[data-col-index="${colIndex}"]`, $aboveRow);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2425,8 +2430,13 @@ class CellManager {
|
|||||||
const {
|
const {
|
||||||
colIndex
|
colIndex
|
||||||
} = $.data($cell);
|
} = $.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);
|
return $(`[data-col-index="${colIndex}"]`, $belowRow);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2568,7 +2578,8 @@ class RowManager {
|
|||||||
linkProperties(this, this.instance, [
|
linkProperties(this, this.instance, [
|
||||||
'options',
|
'options',
|
||||||
'wrapper',
|
'wrapper',
|
||||||
'bodyScrollable'
|
'bodyScrollable',
|
||||||
|
'bodyRenderer'
|
||||||
]);
|
]);
|
||||||
|
|
||||||
this.bindEvents();
|
this.bindEvents();
|
||||||
@ -2627,16 +2638,15 @@ class RowManager {
|
|||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
return this.checkMap
|
let out = [];
|
||||||
.map((c, rowIndex) => {
|
for (let rowIndex in this.checkMap) {
|
||||||
if (c) {
|
const checked = this.checkMap[rowIndex];
|
||||||
return rowIndex;
|
if (checked === 1) {
|
||||||
}
|
out.push(rowIndex);
|
||||||
return null;
|
}
|
||||||
})
|
}
|
||||||
.filter(c => {
|
|
||||||
return c !== null || c !== undefined;
|
return out;
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
highlightCheckedRows() {
|
highlightCheckedRows() {
|
||||||
@ -2657,6 +2667,7 @@ class RowManager {
|
|||||||
});
|
});
|
||||||
// highlight row
|
// highlight row
|
||||||
this.highlightRow(rowIndex, toggle);
|
this.highlightRow(rowIndex, toggle);
|
||||||
|
this.showCheckStatus();
|
||||||
}
|
}
|
||||||
|
|
||||||
checkAll(toggle) {
|
checkAll(toggle) {
|
||||||
@ -2675,6 +2686,16 @@ class RowManager {
|
|||||||
});
|
});
|
||||||
// highlight all
|
// highlight all
|
||||||
this.highlightAll(toggle);
|
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) {
|
highlightRow(rowIndex, toggle = true) {
|
||||||
@ -2908,6 +2929,14 @@ class BodyRenderer {
|
|||||||
this.clusterize.append(data);
|
this.clusterize.append(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
showToastMessage(message) {
|
||||||
|
this.instance.toastMessage.innerHTML = `<span>${message}</span>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
clearToastMessage() {
|
||||||
|
this.instance.toastMessage.innerHTML = '';
|
||||||
|
}
|
||||||
|
|
||||||
getDataForClusterize(rows) {
|
getDataForClusterize(rows) {
|
||||||
return rows.map((row) => this.rowmanager.getRowHTML(row, row.meta));
|
return rows.map((row) => this.rowmanager.getRowHTML(row, row.meta));
|
||||||
}
|
}
|
||||||
@ -3314,23 +3343,25 @@ class DataTable {
|
|||||||
|
|
||||||
prepareDom() {
|
prepareDom() {
|
||||||
this.wrapper.innerHTML = `
|
this.wrapper.innerHTML = `
|
||||||
<div class="data-table">
|
<div class="data-table">
|
||||||
<table class="data-table-header">
|
<table class="data-table-header">
|
||||||
</table>
|
</table>
|
||||||
<div class="body-scrollable">
|
<div class="body-scrollable">
|
||||||
</div>
|
</div>
|
||||||
<div class="freeze-container">
|
<div class="freeze-container">
|
||||||
<span>${this.options.freezeMessage}</span>
|
<span>${this.options.freezeMessage}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-table-footer">
|
<div class="data-table-footer">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="toast-message"></div>
|
||||||
`;
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
this.datatableWrapper = $('.data-table', this.wrapper);
|
this.datatableWrapper = $('.data-table', this.wrapper);
|
||||||
this.header = $('.data-table-header', this.wrapper);
|
this.header = $('.data-table-header', this.wrapper);
|
||||||
this.bodyScrollable = $('.body-scrollable', this.wrapper);
|
this.bodyScrollable = $('.body-scrollable', this.wrapper);
|
||||||
this.freezeContainer = $('.freeze-container', this.wrapper);
|
this.freezeContainer = $('.freeze-container', this.wrapper);
|
||||||
|
this.toastMessage = $('.toast-message', this.wrapper);
|
||||||
}
|
}
|
||||||
|
|
||||||
refresh(data) {
|
refresh(data) {
|
||||||
@ -3370,6 +3401,14 @@ class DataTable {
|
|||||||
this.style.setDimensions();
|
this.style.setDimensions();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
showToastMessage(message) {
|
||||||
|
this.bodyRenderer.showToastMessage(message);
|
||||||
|
}
|
||||||
|
|
||||||
|
clearToastMessage() {
|
||||||
|
this.bodyRenderer.clearToastMessage();
|
||||||
|
}
|
||||||
|
|
||||||
getColumn(colIndex) {
|
getColumn(colIndex) {
|
||||||
return this.datamanager.getColumn(colIndex);
|
return this.datamanager.getColumn(colIndex);
|
||||||
}
|
}
|
||||||
2
docs/assets/highlight.pack.js
Normal file
2
docs/assets/highlight.pack.js
Normal file
File diff suppressed because one or more lines are too long
99
docs/assets/hljs-default.css
Normal file
99
docs/assets/hljs-default.css
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
/*
|
||||||
|
|
||||||
|
Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
65
docs/assets/index.css
Normal file
65
docs/assets/index.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
@ -6,76 +6,98 @@ const {
|
|||||||
data
|
data
|
||||||
} = getSampleData();
|
} = getSampleData();
|
||||||
|
|
||||||
let datatable1 = new DataTable('.datatable-1', {
|
// Hero
|
||||||
|
let datatable1 = new DataTable('.example-1 .target', {
|
||||||
columns,
|
columns,
|
||||||
data
|
data
|
||||||
});
|
});
|
||||||
|
|
||||||
let datatable2 = new DataTable('.datatable-2', Object.assign(getTreeData(), {
|
// Formatted Cells
|
||||||
enableInlineFilters: true,
|
let datatable2 = new DataTable('.example-2', {
|
||||||
addCheckboxColumn: true
|
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) {
|
function getSampleData(multiplier) {
|
||||||
let columns = ['Name', 'Position', 'Office', 'Extn.', 'Start Date', 'Salary'];
|
let columns = ['Name', 'Position', 'Office', 'Extn.', 'Start Date', 'Salary'];
|
||||||
let data = [
|
let data = [
|
||||||
['Tiger Nixon', 'System Architect', 'Edinburgh', '5421', '2011/04/25', '$320,800'],
|
['Tiger Nixon', 'System Architect', 'Edinburgh', '5421', '2011/04/25', '320,800'],
|
||||||
['Garrett Winters', 'Accountant', 'Tokyo', '8422', '2011/07/25', '$170,750'],
|
['Garrett Winters', 'Accountant', 'Tokyo', '8422', '2011/07/25', '170,750'],
|
||||||
['Ashton Cox', 'Junior Technical Author', 'San Francisco', '1562', '2009/01/12', '$86,000'],
|
['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'],
|
['Cedric Kelly', 'Senior Javascript Developer', 'Edinburgh', '6224', '2012/03/29', '433,060'],
|
||||||
['Airi Satou', 'Accountant', 'Tokyo', '5407', '2008/11/28', '$162,700'],
|
['Airi Satou', 'Accountant', 'Tokyo', '5407', '2008/11/28', '162,700'],
|
||||||
['Brielle Williamson', 'Integration Specialist', 'New York', '4804', '2012/12/02', '$372,000'],
|
['Brielle Williamson', 'Integration Specialist', 'New York', '4804', '2012/12/02', '372,000'],
|
||||||
['Herrod Chandler', 'Sales Assistant', 'San Francisco', '9608', '2012/08/06', '$137,500'],
|
['Herrod Chandler', 'Sales Assistant', 'San Francisco', '9608', '2012/08/06', '137,500'],
|
||||||
['Rhona Davidson', 'Integration Specialist', 'Tokyo', '6200', '2010/10/14', '$327,900'],
|
['Rhona Davidson', 'Integration Specialist', 'Tokyo', '6200', '2010/10/14', '327,900'],
|
||||||
['Colleen Hurst', 'Javascript Developer', 'San Francisco', '2360', '2009/09/15', '$205,500'],
|
['Colleen Hurst', 'Javascript Developer', 'San Francisco', '2360', '2009/09/15', '205,500'],
|
||||||
['Sonya Frost', 'Software Engineer', 'Edinburgh', '1667', '2008/12/13', '$103,600'],
|
['Sonya Frost', 'Software Engineer', 'Edinburgh', '1667', '2008/12/13', '103,600'],
|
||||||
['Jena Gaines', 'Office Manager', 'London', '3814', '2008/12/19', '$90,560'],
|
['Jena Gaines', 'Office Manager', 'London', '3814', '2008/12/19', '90,560'],
|
||||||
['Quinn Flynn', 'Support Lead', 'Edinburgh', '9497', '2013/03/03', '$342,000'],
|
['Quinn Flynn', 'Support Lead', 'Edinburgh', '9497', '2013/03/03', '342,000'],
|
||||||
['Charde Marshall', 'Regional Director', 'San Francisco', '6741', '2008/10/16', '$470,600'],
|
['Charde Marshall', 'Regional Director', 'San Francisco', '6741', '2008/10/16', '470,600'],
|
||||||
['Haley Kennedy', 'Senior Marketing Designer', 'London', '3597', '2012/12/18', '$313,500'],
|
['Haley Kennedy', 'Senior Marketing Designer', 'London', '3597', '2012/12/18', '313,500'],
|
||||||
['Tatyana Fitzpatrick', 'Regional Director', 'London', '1965', '2010/03/17', '$385,750'],
|
['Tatyana Fitzpatrick', 'Regional Director', 'London', '1965', '2010/03/17', '385,750'],
|
||||||
['Michael Silva', 'Marketing Designer', 'London', '1581', '2012/11/27', '$198,500'],
|
['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'],
|
['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'],
|
['Gloria Little', 'Systems Administrator', 'New York', '1721', '2009/04/10', '237,500'],
|
||||||
['Bradley Greer', 'Software Engineer', 'London', '2558', '2012/10/13', '$132,000'],
|
['Bradley Greer', 'Software Engineer', 'London', '2558', '2012/10/13', '132,000'],
|
||||||
['Dai Rios', 'Personnel Lead', 'Edinburgh', '2290', '2012/09/26', '$217,500'],
|
['Dai Rios', 'Personnel Lead', 'Edinburgh', '2290', '2012/09/26', '217,500'],
|
||||||
['Jenette Caldwell', 'Development Lead', 'New York', '1937', '2011/09/03', '$345,000'],
|
['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'],
|
['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'],
|
['Caesar Vance', 'Pre-Sales Support', 'New York', '8330', '2011/12/12', '106,450'],
|
||||||
['Doris Wilder', 'Sales Assistant', 'Sidney', '3023', '2010/09/20', '$85,600'],
|
['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'],
|
['Angelica Ramos', 'Chief Executive Officer (CEO)', 'London', '5797', '2009/10/09', '1,200,000'],
|
||||||
['Gavin Joyce', 'Developer', 'Edinburgh', '8822', '2010/12/22', '$92,575'],
|
['Gavin Joyce', 'Developer', 'Edinburgh', '8822', '2010/12/22', '92,575'],
|
||||||
['Jennifer Chang', 'Regional Director', 'Singapore', '9239', '2010/11/14', '$357,650'],
|
['Jennifer Chang', 'Regional Director', 'Singapore', '9239', '2010/11/14', '357,650'],
|
||||||
['Brenden Wagner', 'Software Engineer', 'San Francisco', '1314', '2011/06/07', '$206,850'],
|
['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'],
|
['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'],
|
['Shou Itou', 'Regional Marketing', 'Tokyo', '8899', '2011/08/14', '163,000'],
|
||||||
['Michelle House', 'Integration Specialist', 'Sidney', '2769', '2011/06/02', '$95,400'],
|
['Michelle House', 'Integration Specialist', 'Sidney', '2769', '2011/06/02', '95,400'],
|
||||||
['Suki Burks', 'Developer', 'London', '6832', '2009/10/22', '$114,500'],
|
['Suki Burks', 'Developer', 'London', '6832', '2009/10/22', '114,500'],
|
||||||
['Prescott Bartlett', 'Technical Author', 'London', '3606', '2011/05/07', '$145,000'],
|
['Prescott Bartlett', 'Technical Author', 'London', '3606', '2011/05/07', '145,000'],
|
||||||
['Gavin Cortez', 'Team Leader', 'San Francisco', '2860', '2008/10/26', '$235,500'],
|
['Gavin Cortez', 'Team Leader', 'San Francisco', '2860', '2008/10/26', '235,500'],
|
||||||
['Martena Mccray', 'Post-Sales support', 'Edinburgh', '8240', '2011/03/09', '$324,050'],
|
['Martena Mccray', 'Post-Sales support', 'Edinburgh', '8240', '2011/03/09', '324,050'],
|
||||||
['Unity Butler', 'Marketing Designer', 'San Francisco', '5384', '2009/12/09', '$85,675'],
|
['Unity Butler', 'Marketing Designer', 'San Francisco', '5384', '2009/12/09', '85,675'],
|
||||||
['Howard Hatfield', 'Office Manager', 'San Francisco', '7031', '2008/12/16', '$164,500'],
|
['Howard Hatfield', 'Office Manager', 'San Francisco', '7031', '2008/12/16', '164,500'],
|
||||||
['Hope Fuentes', 'Secretary', 'San Francisco', '6318', '2010/02/12', '$109,850'],
|
['Hope Fuentes', 'Secretary', 'San Francisco', '6318', '2010/02/12', '109,850'],
|
||||||
['Vivian Harrell', 'Financial Controller', 'San Francisco', '9422', '2009/02/14', '$452,500'],
|
['Vivian Harrell', 'Financial Controller', 'San Francisco', '9422', '2009/02/14', '452,500'],
|
||||||
['Timothy Mooney', 'Office Manager', 'London', '7580', '2008/12/11', '$136,200'],
|
['Timothy Mooney', 'Office Manager', 'London', '7580', '2008/12/11', '136,200'],
|
||||||
['Jackson Bradshaw', 'Director', 'New York', '1042', '2008/09/26', '$645,750'],
|
['Jackson Bradshaw', 'Director', 'New York', '1042', '2008/09/26', '645,750'],
|
||||||
['Olivia Liang', 'Support Engineer', 'Singapore', '2120', '2011/02/03', '$234,500'],
|
['Olivia Liang', 'Support Engineer', 'Singapore', '2120', '2011/02/03', '234,500'],
|
||||||
['Bruno Nash', 'Software Engineer', 'London', '6222', '2011/05/03', '$163,500'],
|
['Bruno Nash', 'Software Engineer', 'London', '6222', '2011/05/03', '163,500'],
|
||||||
['Sakura Yamamoto', 'Support Engineer', 'Tokyo', '9383', '2009/08/19', '$139,575'],
|
['Sakura Yamamoto', 'Support Engineer', 'Tokyo', '9383', '2009/08/19', '139,575'],
|
||||||
['Thor Walton', 'Developer', 'New York', '8327', '2013/08/11', '$98,540'],
|
['Thor Walton', 'Developer', 'New York', '8327', '2013/08/11', '98,540'],
|
||||||
['Finn Camacho', 'Support Engineer', 'San Francisco', '2927', '2009/07/07', '$87,500'],
|
['Finn Camacho', 'Support Engineer', 'San Francisco', '2927', '2009/07/07', '87,500'],
|
||||||
['Serge Baldwin', 'Data Coordinator', 'Singapore', '8352', '2012/04/09', '$138,575'],
|
['Serge Baldwin', 'Data Coordinator', 'Singapore', '8352', '2012/04/09', '138,575'],
|
||||||
['Zenaida Frank', 'Software Engineer', 'New York', '7439', '2010/01/04', '$125,250'],
|
['Zenaida Frank', 'Software Engineer', 'New York', '7439', '2010/01/04', '125,250'],
|
||||||
['Zorita Serrano', 'Software Engineer', 'San Francisco', '4389', '2012/06/01', '$115,000'],
|
['Zorita Serrano', 'Software Engineer', 'San Francisco', '4389', '2012/06/01', '115,000'],
|
||||||
['Jennifer Acosta', 'Junior Javascript Developer', 'Edinburgh', '3431', '2013/02/01', '$75,650'],
|
['Jennifer Acosta', 'Junior Javascript Developer', 'Edinburgh', '3431', '2013/02/01', '75,650'],
|
||||||
['Cara Stevens', 'Sales Assistant', 'New York', '3990', '2011/12/06', '$145,600'],
|
['Cara Stevens', 'Sales Assistant', 'New York', '3990', '2011/12/06', '145,600'],
|
||||||
['Hermione Butler', 'Regional Director', 'London', '1016', '2011/03/21', '$356,250'],
|
['Hermione Butler', 'Regional Director', 'London', '1016', '2011/03/21', '356,250'],
|
||||||
['Lael Greer', 'Systems Administrator', 'London', '6733', '2009/02/27', '$103,500'],
|
['Lael Greer', 'Systems Administrator', 'London', '6733', '2009/02/27', '103,500'],
|
||||||
['Jonas Alexander', 'Developer', 'San Francisco', '8196', '2010/07/14', '$86,500'],
|
['Jonas Alexander', 'Developer', 'San Francisco', '8196', '2010/07/14', '86,500'],
|
||||||
['Shad Decker', 'Regional Director', 'Edinburgh', '6373', '2008/11/13', '$183,000'],
|
['Shad Decker', 'Regional Director', 'Edinburgh', '6373', '2008/11/13', '183,000'],
|
||||||
['Michael Bruce', 'Javascript Developer', 'Singapore', '5384', '2011/06/27', '$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']
|
['Donna Snider', 'Customer Support', 'New York', '4226', '2011/01/25', '112,000']
|
||||||
];
|
];
|
||||||
|
|
||||||
if (multiplier) {
|
if (multiplier) {
|
||||||
@ -101,13 +123,16 @@ function getTreeData() {
|
|||||||
}, {
|
}, {
|
||||||
'id': 'opening_credit',
|
'id': 'opening_credit',
|
||||||
'content': 'Opening (Cr)'
|
'content': 'Opening (Cr)'
|
||||||
}, {
|
},
|
||||||
'id': 'debit',
|
// {
|
||||||
'content': 'Debit'
|
// 'id': 'debit',
|
||||||
}, {
|
// 'content': 'Debit'
|
||||||
'id': 'credit',
|
// },
|
||||||
'content': 'Credit'
|
// {
|
||||||
}, {
|
// 'id': 'credit',
|
||||||
|
// 'content': 'Credit'
|
||||||
|
// },
|
||||||
|
{
|
||||||
'id': 'closing_debit',
|
'id': 'closing_debit',
|
||||||
'content': 'Closing (Dr)'
|
'content': 'Closing (Dr)'
|
||||||
}, {
|
}, {
|
||||||
@ -120,7 +145,7 @@ function getTreeData() {
|
|||||||
}],
|
}],
|
||||||
data: [{
|
data: [{
|
||||||
'account_name': 'Application of Funds (Assets)',
|
'account_name': 'Application of Funds (Assets)',
|
||||||
'account': 'Application of Funds (Assets) - GTPL',
|
'account': 'Application of Funds (Assets)',
|
||||||
'parent_account': null,
|
'parent_account': null,
|
||||||
'indent': 0,
|
'indent': 0,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
@ -135,8 +160,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Current Assets',
|
'account_name': 'Current Assets',
|
||||||
'account': 'Current Assets - GTPL',
|
'account': 'Current Assets',
|
||||||
'parent_account': 'Application of Funds (Assets) - GTPL',
|
'parent_account': 'Application of Funds (Assets)',
|
||||||
'indent': 1,
|
'indent': 1,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -150,8 +175,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Accounts Receivable',
|
'account_name': 'Accounts Receivable',
|
||||||
'account': 'Accounts Receivable - GTPL',
|
'account': 'Accounts Receivable',
|
||||||
'parent_account': 'Current Assets - GTPL',
|
'parent_account': 'Current Assets',
|
||||||
'indent': 2,
|
'indent': 2,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -165,8 +190,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Debtors',
|
'account_name': 'Debtors',
|
||||||
'account': 'Debtors - GTPL',
|
'account': 'Debtors',
|
||||||
'parent_account': 'Accounts Receivable - GTPL',
|
'parent_account': 'Accounts Receivable',
|
||||||
'indent': 3,
|
'indent': 3,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -180,8 +205,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Bank Accounts',
|
'account_name': 'Bank Accounts',
|
||||||
'account': 'Bank Accounts - GTPL',
|
'account': 'Bank Accounts',
|
||||||
'parent_account': 'Current Assets - GTPL',
|
'parent_account': 'Current Assets',
|
||||||
'indent': 2,
|
'indent': 2,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -195,8 +220,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Corporation Bank',
|
'account_name': 'Corporation Bank',
|
||||||
'account': 'Corporation Bank - GTPL',
|
'account': 'Corporation Bank',
|
||||||
'parent_account': 'Bank Accounts - GTPL',
|
'parent_account': 'Bank Accounts',
|
||||||
'indent': 3,
|
'indent': 3,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -210,8 +235,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'HDFC Bank',
|
'account_name': 'HDFC Bank',
|
||||||
'account': 'HDFC Bank - GTPL',
|
'account': 'HDFC Bank',
|
||||||
'parent_account': 'Bank Accounts - GTPL',
|
'parent_account': 'Bank Accounts',
|
||||||
'indent': 3,
|
'indent': 3,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -225,8 +250,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Cash In Hand',
|
'account_name': 'Cash In Hand',
|
||||||
'account': 'Cash In Hand - GTPL',
|
'account': 'Cash In Hand',
|
||||||
'parent_account': 'Current Assets - GTPL',
|
'parent_account': 'Current Assets',
|
||||||
'indent': 2,
|
'indent': 2,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -240,8 +265,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Cash',
|
'account_name': 'Cash',
|
||||||
'account': 'Cash - GTPL',
|
'account': 'Cash',
|
||||||
'parent_account': 'Cash In Hand - GTPL',
|
'parent_account': 'Cash In Hand',
|
||||||
'indent': 3,
|
'indent': 3,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -255,8 +280,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Stock Assets',
|
'account_name': 'Stock Assets',
|
||||||
'account': 'Stock Assets - GTPL',
|
'account': 'Stock Assets',
|
||||||
'parent_account': 'Current Assets - GTPL',
|
'parent_account': 'Current Assets',
|
||||||
'indent': 2,
|
'indent': 2,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -270,8 +295,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'All Warehouses',
|
'account_name': 'All Warehouses',
|
||||||
'account': 'All Warehouses - GTPL',
|
'account': 'All Warehouses',
|
||||||
'parent_account': 'Stock Assets - GTPL',
|
'parent_account': 'Stock Assets',
|
||||||
'indent': 3,
|
'indent': 3,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -285,8 +310,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Finished Goods',
|
'account_name': 'Finished Goods',
|
||||||
'account': 'Finished Goods - GTPL',
|
'account': 'Finished Goods',
|
||||||
'parent_account': 'All Warehouses - GTPL',
|
'parent_account': 'All Warehouses',
|
||||||
'indent': 4,
|
'indent': 4,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -300,8 +325,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Retail Stores',
|
'account_name': 'Retail Stores',
|
||||||
'account': 'Retail Stores - GTPL',
|
'account': 'Retail Stores',
|
||||||
'parent_account': 'All Warehouses - GTPL',
|
'parent_account': 'All Warehouses',
|
||||||
'indent': 4,
|
'indent': 4,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -315,8 +340,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Bandra Store',
|
'account_name': 'Bandra Store',
|
||||||
'account': 'Bandra Store - GTPL',
|
'account': 'Bandra Store',
|
||||||
'parent_account': 'Retail Stores - GTPL',
|
'parent_account': 'Retail Stores',
|
||||||
'indent': 5,
|
'indent': 5,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -330,8 +355,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Central Warehouse',
|
'account_name': 'Central Warehouse',
|
||||||
'account': 'Central Warehouse - GTPL',
|
'account': 'Central Warehouse',
|
||||||
'parent_account': 'Retail Stores - GTPL',
|
'parent_account': 'Retail Stores',
|
||||||
'indent': 5,
|
'indent': 5,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -345,8 +370,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Lower Parel Store',
|
'account_name': 'Lower Parel Store',
|
||||||
'account': 'Lower Parel Store - GTPL',
|
'account': 'Lower Parel Store',
|
||||||
'parent_account': 'Retail Stores - GTPL',
|
'parent_account': 'Retail Stores',
|
||||||
'indent': 5,
|
'indent': 5,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -360,8 +385,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Stores',
|
'account_name': 'Stores',
|
||||||
'account': 'Stores - GTPL',
|
'account': 'Stores',
|
||||||
'parent_account': 'All Warehouses - GTPL',
|
'parent_account': 'All Warehouses',
|
||||||
'indent': 4,
|
'indent': 4,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -375,8 +400,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Work In Progress',
|
'account_name': 'Work In Progress',
|
||||||
'account': 'Work In Progress - GTPL',
|
'account': 'Work In Progress',
|
||||||
'parent_account': 'All Warehouses - GTPL',
|
'parent_account': 'All Warehouses',
|
||||||
'indent': 4,
|
'indent': 4,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -390,8 +415,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Fixed Assets',
|
'account_name': 'Fixed Assets',
|
||||||
'account': 'Fixed Assets - GTPL',
|
'account': 'Fixed Assets',
|
||||||
'parent_account': 'Application of Funds (Assets) - GTPL',
|
'parent_account': 'Application of Funds (Assets)',
|
||||||
'indent': 1,
|
'indent': 1,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -405,8 +430,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Electronic Equipments',
|
'account_name': 'Electronic Equipments',
|
||||||
'account': 'Electronic Equipments - GTPL',
|
'account': 'Electronic Equipments',
|
||||||
'parent_account': 'Fixed Assets - GTPL',
|
'parent_account': 'Fixed Assets',
|
||||||
'indent': 2,
|
'indent': 2,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -420,8 +445,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Furnitures and Fixtures',
|
'account_name': 'Furnitures and Fixtures',
|
||||||
'account': 'Furnitures and Fixtures - GTPL',
|
'account': 'Furnitures and Fixtures',
|
||||||
'parent_account': 'Fixed Assets - GTPL',
|
'parent_account': 'Fixed Assets',
|
||||||
'indent': 2,
|
'indent': 2,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -435,8 +460,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Temporary Accounts',
|
'account_name': 'Temporary Accounts',
|
||||||
'account': 'Temporary Accounts - GTPL',
|
'account': 'Temporary Accounts',
|
||||||
'parent_account': 'Application of Funds (Assets) - GTPL',
|
'parent_account': 'Application of Funds (Assets)',
|
||||||
'indent': 1,
|
'indent': 1,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -450,8 +475,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Temporary Opening',
|
'account_name': 'Temporary Opening',
|
||||||
'account': 'Temporary Opening - GTPL',
|
'account': 'Temporary Opening',
|
||||||
'parent_account': 'Temporary Accounts - GTPL',
|
'parent_account': 'Temporary Accounts',
|
||||||
'indent': 2,
|
'indent': 2,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -465,7 +490,7 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Source of Funds (Liabilities)',
|
'account_name': 'Source of Funds (Liabilities)',
|
||||||
'account': 'Source of Funds (Liabilities) - GTPL',
|
'account': 'Source of Funds (Liabilities)',
|
||||||
'parent_account': null,
|
'parent_account': null,
|
||||||
'indent': 0,
|
'indent': 0,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
@ -480,8 +505,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Current Liabilities',
|
'account_name': 'Current Liabilities',
|
||||||
'account': 'Current Liabilities - GTPL',
|
'account': 'Current Liabilities',
|
||||||
'parent_account': 'Source of Funds (Liabilities) - GTPL',
|
'parent_account': 'Source of Funds (Liabilities)',
|
||||||
'indent': 1,
|
'indent': 1,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -495,8 +520,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Accounts Payable',
|
'account_name': 'Accounts Payable',
|
||||||
'account': 'Accounts Payable - GTPL',
|
'account': 'Accounts Payable',
|
||||||
'parent_account': 'Current Liabilities - GTPL',
|
'parent_account': 'Current Liabilities',
|
||||||
'indent': 2,
|
'indent': 2,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -510,8 +535,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Creditors',
|
'account_name': 'Creditors',
|
||||||
'account': 'Creditors - GTPL',
|
'account': 'Creditors',
|
||||||
'parent_account': 'Accounts Payable - GTPL',
|
'parent_account': 'Accounts Payable',
|
||||||
'indent': 3,
|
'indent': 3,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -525,8 +550,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Salary Payable',
|
'account_name': 'Salary Payable',
|
||||||
'account': 'Salary Payable - GTPL',
|
'account': 'Salary Payable',
|
||||||
'parent_account': 'Accounts Payable - GTPL',
|
'parent_account': 'Accounts Payable',
|
||||||
'indent': 3,
|
'indent': 3,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -540,8 +565,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Duties and Taxes',
|
'account_name': 'Duties and Taxes',
|
||||||
'account': 'Duties and Taxes - GTPL',
|
'account': 'Duties and Taxes',
|
||||||
'parent_account': 'Current Liabilities - GTPL',
|
'parent_account': 'Current Liabilities',
|
||||||
'indent': 2,
|
'indent': 2,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -555,8 +580,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'CGST',
|
'account_name': 'CGST',
|
||||||
'account': 'CGST - GTPL',
|
'account': 'CGST',
|
||||||
'parent_account': 'Duties and Taxes - GTPL',
|
'parent_account': 'Duties and Taxes',
|
||||||
'indent': 3,
|
'indent': 3,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -570,8 +595,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'IGST',
|
'account_name': 'IGST',
|
||||||
'account': 'IGST - GTPL',
|
'account': 'IGST',
|
||||||
'parent_account': 'Duties and Taxes - GTPL',
|
'parent_account': 'Duties and Taxes',
|
||||||
'indent': 3,
|
'indent': 3,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -585,8 +610,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'SGST',
|
'account_name': 'SGST',
|
||||||
'account': 'SGST - GTPL',
|
'account': 'SGST',
|
||||||
'parent_account': 'Duties and Taxes - GTPL',
|
'parent_account': 'Duties and Taxes',
|
||||||
'indent': 3,
|
'indent': 3,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -600,8 +625,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'UGST',
|
'account_name': 'UGST',
|
||||||
'account': 'UGST - GTPL',
|
'account': 'UGST',
|
||||||
'parent_account': 'Duties and Taxes - GTPL',
|
'parent_account': 'Duties and Taxes',
|
||||||
'indent': 3,
|
'indent': 3,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -615,8 +640,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Stock Liabilities',
|
'account_name': 'Stock Liabilities',
|
||||||
'account': 'Stock Liabilities - GTPL',
|
'account': 'Stock Liabilities',
|
||||||
'parent_account': 'Current Liabilities - GTPL',
|
'parent_account': 'Current Liabilities',
|
||||||
'indent': 2,
|
'indent': 2,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -630,8 +655,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Stock Received But Not Billed',
|
'account_name': 'Stock Received But Not Billed',
|
||||||
'account': 'Stock Received But Not Billed - GTPL',
|
'account': 'Stock Received But Not Billed',
|
||||||
'parent_account': 'Stock Liabilities - GTPL',
|
'parent_account': 'Stock Liabilities',
|
||||||
'indent': 3,
|
'indent': 3,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -645,7 +670,7 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Equity',
|
'account_name': 'Equity',
|
||||||
'account': 'Equity - GTPL',
|
'account': 'Equity',
|
||||||
'parent_account': null,
|
'parent_account': null,
|
||||||
'indent': 0,
|
'indent': 0,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
@ -660,8 +685,8 @@ function getTreeData() {
|
|||||||
'has_value': true
|
'has_value': true
|
||||||
}, {
|
}, {
|
||||||
'account_name': 'Capital Stock',
|
'account_name': 'Capital Stock',
|
||||||
'account': 'Capital Stock - GTPL',
|
'account': 'Capital Stock',
|
||||||
'parent_account': 'Equity - GTPL',
|
'parent_account': 'Equity',
|
||||||
'indent': 1,
|
'indent': 1,
|
||||||
'from_date': '2018-04-01',
|
'from_date': '2018-04-01',
|
||||||
'to_date': '2019-03-31',
|
'to_date': '2019-03-31',
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
117
docs/index.html
117
docs/index.html
@ -5,23 +5,122 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
<title>Frappe DataTable - A simple, modern datatable library for the web</title>
|
<title>Frappe DataTable - A simple, modern datatable library for the web</title>
|
||||||
<link href="frappe-datatable.css" rel="stylesheet">
|
<link href="assets/frappe-datatable.css" rel="stylesheet">
|
||||||
<link href="index.css" rel="stylesheet">
|
<link href="assets/hljs-default.css" rel="stylesheet">
|
||||||
|
<link href="assets/index.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<section class="hero showcase">
|
<section class="hero showcase">
|
||||||
<h1>Frappe DataTable</h1>
|
<h1>Frappe DataTable</h1>
|
||||||
<p>A simple, modern and interactive datatable for the web</p>
|
<p>A simple, modern and interactive datatable for the web</p>
|
||||||
<div class="datatable-1"></div>
|
<div class="example-1">
|
||||||
|
<div class="target"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="showcase">
|
||||||
|
<h2>Format Cells</h2>
|
||||||
|
<p>Show custom formatted cells based on context</p>
|
||||||
|
<div class="example-2"></div>
|
||||||
|
</section>
|
||||||
|
<section class="showcase">
|
||||||
|
<h2>Inline Filters</h2>
|
||||||
|
<p>Filter rows based on search text per column</p>
|
||||||
|
<div class="example-3"></div>
|
||||||
|
</section>
|
||||||
|
<section class="showcase">
|
||||||
|
<h2>Keyboard Navigation</h2>
|
||||||
|
<p>Full Keyboard Navigation support</p>
|
||||||
|
<div class="example-4"></div>
|
||||||
</section>
|
</section>
|
||||||
<section class="showcase">
|
<section class="showcase">
|
||||||
<h2>Tree Structure</h2>
|
<h2>Tree Structure</h2>
|
||||||
<p>Show tree structured rows in your table</p>
|
<p>Show tree structured rows in your table</p>
|
||||||
<div class="datatable-2"></div>
|
<div class="example-5"></div>
|
||||||
</section>
|
</section>
|
||||||
<script src="../node_modules/clusterize.js/clusterize.js"></script>
|
<section class="showcase installation">
|
||||||
<script src="../node_modules/sortablejs/Sortable.js"></script>
|
<h2>Installation</h2>
|
||||||
<script src="frappe-datatable.js"></script>
|
<div class="code">
|
||||||
<script src="index.js"></script>
|
<pre><code>// Install using yarn
|
||||||
|
yarn add frappe-datatable
|
||||||
|
|
||||||
|
// or npm
|
||||||
|
npm install frappe-datatable</code></pre>
|
||||||
|
</section>
|
||||||
|
<section class="showcase installation">
|
||||||
|
<h2>Usage</h2>
|
||||||
|
<div class="code">
|
||||||
|
<pre><code> let datatable = new DataTable({
|
||||||
|
columns: ['Name', 'Position', ...],
|
||||||
|
data: [
|
||||||
|
['Tiger Nixon', 'System Architect', ...],
|
||||||
|
['Garrett Winters', 'Accountant', ...],
|
||||||
|
...
|
||||||
|
]
|
||||||
|
})
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="showcase installation">
|
||||||
|
<h2>List of configurable options</h2>
|
||||||
|
<div class="code">
|
||||||
|
<pre><code>{
|
||||||
|
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
|
||||||
|
};</code></pre>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="showcase">
|
||||||
|
<div class="padding-1">
|
||||||
|
<a href="https://github.com/frappe/datatable">View on GitHub</a>
|
||||||
|
</div>
|
||||||
|
<div class="padding-1">
|
||||||
|
<span>MIT License</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer class="showcase">
|
||||||
|
<section>Made with ❤️ by Frappe</section>
|
||||||
|
</footer>
|
||||||
|
<script src="assets/clusterize.min.js"></script>
|
||||||
|
<script src="assets/Sortable.min.js"></script>
|
||||||
|
<script src="assets/highlight.pack.js"></script>
|
||||||
|
<script>hljs.initHighlightingOnLoad();</script>
|
||||||
|
<script src="assets/frappe-datatable.js"></script>
|
||||||
|
<script src="assets/index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -18,7 +18,7 @@ const dev = {
|
|||||||
'clusterize.js': 'Clusterize'
|
'clusterize.js': 'Clusterize'
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
file: 'docs/frappe-datatable.js',
|
file: 'docs/assets/frappe-datatable.js',
|
||||||
format: 'iife',
|
format: 'iife',
|
||||||
name: 'DataTable',
|
name: 'DataTable',
|
||||||
globals: {
|
globals: {
|
||||||
@ -31,7 +31,7 @@ const dev = {
|
|||||||
nodeResolve(),
|
nodeResolve(),
|
||||||
commonjs(),
|
commonjs(),
|
||||||
postcss({
|
postcss({
|
||||||
extract: ['dist/frappe-datatable.css', 'docs/frappe-datatable.css'],
|
extract: 'dist/frappe-datatable.css',
|
||||||
plugins: [
|
plugins: [
|
||||||
nested(),
|
nested(),
|
||||||
cssnext()
|
cssnext()
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user