Add docs folder
This commit is contained in:
Faris Ansari
parent
5cde877a4a
commit
f125c0e652
1
dist/frappe-datatable.cjs.css
vendored
1
dist/frappe-datatable.cjs.css
vendored
@ -1,3 +1,4 @@
|
||||
/* This file is processed by postcss */
|
||||
/* variables */
|
||||
|
||||
.data-table {
|
||||
|
||||
256
dist/frappe-datatable.cjs.js
vendored
256
dist/frappe-datatable.cjs.js
vendored
@ -165,8 +165,18 @@ $.closest = (selector, element) => {
|
||||
};
|
||||
|
||||
$.inViewport = (el, parentEl) => {
|
||||
const { top, left, bottom, right } = el.getBoundingClientRect();
|
||||
const { top: pTop, left: pLeft, bottom: pBottom, right: pRight } = parentEl.getBoundingClientRect();
|
||||
const {
|
||||
top,
|
||||
left,
|
||||
bottom,
|
||||
right
|
||||
} = el.getBoundingClientRect();
|
||||
const {
|
||||
top: pTop,
|
||||
left: pLeft,
|
||||
bottom: pBottom,
|
||||
right: pRight
|
||||
} = parentEl.getBoundingClientRect();
|
||||
|
||||
return top >= pTop && left >= pLeft && bottom <= pBottom && right <= pRight;
|
||||
};
|
||||
@ -887,16 +897,6 @@ class DataManager {
|
||||
}
|
||||
}
|
||||
|
||||
prepareRow(row, i) {
|
||||
const baseRowCell = {
|
||||
rowIndex: i
|
||||
};
|
||||
|
||||
return row
|
||||
.map((cell, i) => this.prepareCell(cell, i))
|
||||
.map(cell => Object.assign({}, baseRowCell, cell));
|
||||
}
|
||||
|
||||
prepareHeader() {
|
||||
let columns = this.columns.concat(this.options.columns);
|
||||
const baseCell = {
|
||||
@ -980,7 +980,7 @@ class DataManager {
|
||||
}
|
||||
|
||||
} else {
|
||||
// row is a dict
|
||||
// row is an object
|
||||
for (let col of this.columns) {
|
||||
if (col.id === '_checkbox') {
|
||||
row.push(this.getCheckboxHTML());
|
||||
@ -992,8 +992,24 @@ class DataManager {
|
||||
}
|
||||
}
|
||||
|
||||
return this.prepareRow(row, index);
|
||||
return this.prepareRow(row, {
|
||||
rowIndex: index
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
prepareRow(row, props) {
|
||||
const baseRowCell = {
|
||||
rowIndex: props.rowIndex
|
||||
};
|
||||
|
||||
row = row
|
||||
.map((cell, i) => this.prepareCell(cell, i))
|
||||
.map(cell => Object.assign({}, baseRowCell, cell));
|
||||
|
||||
// monkey patched in array object
|
||||
row.meta = props;
|
||||
return row;
|
||||
}
|
||||
|
||||
validateColumns() {
|
||||
@ -1111,8 +1127,12 @@ class DataManager {
|
||||
|
||||
// update rows
|
||||
this.rows = this.rows.map(row => {
|
||||
const newCell1 = Object.assign({}, row[index1], { colIndex: index2 });
|
||||
const newCell2 = Object.assign({}, row[index2], { colIndex: index1 });
|
||||
const newCell1 = Object.assign({}, row[index1], {
|
||||
colIndex: index2
|
||||
});
|
||||
const newCell2 = Object.assign({}, row[index2], {
|
||||
colIndex: index1
|
||||
});
|
||||
|
||||
let newRow = row.map(cell => {
|
||||
// make object copy
|
||||
@ -1129,7 +1149,9 @@ class DataManager {
|
||||
removeColumn(index) {
|
||||
index = +index;
|
||||
const filter = cell => cell.colIndex !== index;
|
||||
const map = (cell, i) => Object.assign({}, cell, { colIndex: i });
|
||||
const map = (cell, i) => Object.assign({}, cell, {
|
||||
colIndex: i
|
||||
});
|
||||
// update columns
|
||||
this.columns = this.columns
|
||||
.filter(filter)
|
||||
@ -1218,7 +1240,10 @@ class DataManager {
|
||||
}
|
||||
});
|
||||
|
||||
return {rowsToHide, rowsToShow};
|
||||
return {
|
||||
rowsToHide,
|
||||
rowsToShow
|
||||
};
|
||||
}
|
||||
|
||||
getRowCount() {
|
||||
@ -1345,9 +1370,13 @@ class ColumnManager {
|
||||
if (!$('.data-table-col', this.header)) {
|
||||
// insert html
|
||||
|
||||
let html = this.rowmanager.getRowHTML(columns, { isHeader: 1 });
|
||||
let html = this.rowmanager.getRowHTML(columns, {
|
||||
isHeader: 1
|
||||
});
|
||||
if (this.options.enableInlineFilters) {
|
||||
html += this.rowmanager.getRowHTML(columns, { isFilter: 1 });
|
||||
html += this.rowmanager.getRowHTML(columns, {
|
||||
isFilter: 1
|
||||
});
|
||||
}
|
||||
|
||||
$('thead', this.header).innerHTML = html;
|
||||
@ -1365,7 +1394,9 @@ class ColumnManager {
|
||||
const $cols = $.each('.data-table-col', this.header);
|
||||
if (columns.length < $cols.length) {
|
||||
// deleted column
|
||||
$('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { isHeader: 1 });
|
||||
$('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, {
|
||||
isHeader: 1
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
@ -1418,8 +1449,12 @@ class ColumnManager {
|
||||
|
||||
$.on(this.header, 'click', '.data-table-dropdown-list > div', (e, $item) => {
|
||||
const $col = $.closest('.data-table-col', $item);
|
||||
const { index } = $.data($item);
|
||||
const { colIndex } = $.data($col);
|
||||
const {
|
||||
index
|
||||
} = $.data($item);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($col);
|
||||
let callback = dropdownItems[index].action;
|
||||
|
||||
callback && callback.call(this.instance, this.getColumn(colIndex));
|
||||
@ -1439,7 +1474,9 @@ class ColumnManager {
|
||||
document.body.classList.add('data-table-resize');
|
||||
const $cell = $handle.parentNode.parentNode;
|
||||
$resizingCell = $cell;
|
||||
const { colIndex } = $.data($resizingCell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($resizingCell);
|
||||
const col = this.getColumn(colIndex);
|
||||
|
||||
if (col && col.resizable === false) {
|
||||
@ -1456,7 +1493,9 @@ class ColumnManager {
|
||||
if (!$resizingCell) return;
|
||||
isDragging = false;
|
||||
|
||||
const { colIndex } = $.data($resizingCell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($resizingCell);
|
||||
this.setColumnWidth(colIndex);
|
||||
this.style.setBodyStyle();
|
||||
$resizingCell = null;
|
||||
@ -1465,13 +1504,17 @@ class ColumnManager {
|
||||
$.on(document.body, 'mousemove', (e) => {
|
||||
if (!isDragging) return;
|
||||
const finalWidth = startWidth + (e.pageX - startX);
|
||||
const { colIndex } = $.data($resizingCell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($resizingCell);
|
||||
|
||||
if (this.getColumnMinWidth(colIndex) > finalWidth) {
|
||||
// don't resize past minWidth
|
||||
return;
|
||||
}
|
||||
this.datamanager.updateColumn(colIndex, { width: finalWidth });
|
||||
this.datamanager.updateColumn(colIndex, {
|
||||
width: finalWidth
|
||||
});
|
||||
this.setColumnHeaderWidth(colIndex);
|
||||
});
|
||||
}
|
||||
@ -1491,9 +1534,14 @@ class ColumnManager {
|
||||
|
||||
this.sortable = Sortable.create($parent, {
|
||||
onEnd: (e) => {
|
||||
const { oldIndex, newIndex } = e;
|
||||
const {
|
||||
oldIndex,
|
||||
newIndex
|
||||
} = e;
|
||||
const $draggedCell = e.item;
|
||||
const { colIndex } = $.data($draggedCell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($draggedCell);
|
||||
if (+colIndex === newIndex) return;
|
||||
|
||||
this.switchColumn(oldIndex, newIndex);
|
||||
@ -1511,7 +1559,10 @@ class ColumnManager {
|
||||
|
||||
$.on(this.header, 'click', '.data-table-col .column-title', (e, span) => {
|
||||
const $cell = span.closest('.data-table-col');
|
||||
let { colIndex, sortOrder } = $.data($cell);
|
||||
let {
|
||||
colIndex,
|
||||
sortOrder
|
||||
} = $.data($cell);
|
||||
sortOrder = getDefault(sortOrder, 'none');
|
||||
const col = this.getColumn(colIndex);
|
||||
|
||||
@ -1622,11 +1673,16 @@ class ColumnManager {
|
||||
if (!this.options.enableInlineFilters) return;
|
||||
const handler = e => {
|
||||
const $filterCell = $.closest('.data-table-col', e.target);
|
||||
const { colIndex } = $.data($filterCell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($filterCell);
|
||||
const keyword = e.target.value;
|
||||
|
||||
this.datamanager.filterRows(keyword, colIndex)
|
||||
.then(({ rowsToHide, rowsToShow }) => {
|
||||
.then(({
|
||||
rowsToHide,
|
||||
rowsToShow
|
||||
}) => {
|
||||
rowsToHide.map(rowIndex => {
|
||||
const $tr = $(`.data-table-row[data-row-index="${rowIndex}"]`, this.bodyScrollable);
|
||||
$tr.classList.add('hide');
|
||||
@ -1656,7 +1712,9 @@ class ColumnManager {
|
||||
colIndex = +colIndex;
|
||||
this._columnWidthMap = this._columnWidthMap || [];
|
||||
|
||||
const { width } = this.getColumn(colIndex);
|
||||
const {
|
||||
width
|
||||
} = this.getColumn(colIndex);
|
||||
|
||||
let index = this._columnWidthMap[colIndex];
|
||||
const selector = `[data-col-index="${colIndex}"] .content, [data-col-index="${colIndex}"] .edit-cell`;
|
||||
@ -1672,7 +1730,9 @@ class ColumnManager {
|
||||
colIndex = +colIndex;
|
||||
this.$columnMap = this.$columnMap || [];
|
||||
const selector = `.data-table-header [data-col-index="${colIndex}"] .content`;
|
||||
const { width } = this.getColumn(colIndex);
|
||||
const {
|
||||
width
|
||||
} = this.getColumn(colIndex);
|
||||
|
||||
let $column = this.$columnMap[colIndex];
|
||||
if (!$column) {
|
||||
@ -1801,7 +1861,10 @@ class CellManager {
|
||||
}
|
||||
|
||||
let $cell = this.$focusedCell;
|
||||
const { rowIndex, colIndex } = $.data($cell);
|
||||
const {
|
||||
rowIndex,
|
||||
colIndex
|
||||
} = $.data($cell);
|
||||
|
||||
if (direction === 'left') {
|
||||
$cell = this.getLeftMostCell$(rowIndex);
|
||||
@ -1832,7 +1895,9 @@ class CellManager {
|
||||
if (this.options.enableInlineFilters) {
|
||||
this.keyboard.on('ctrl+f', (e) => {
|
||||
const $cell = $.closest('.data-table-col', e.target);
|
||||
let { colIndex } = $.data($cell);
|
||||
let {
|
||||
colIndex
|
||||
} = $.data($cell);
|
||||
|
||||
this.activateFilter(colIndex);
|
||||
return true;
|
||||
@ -1889,13 +1954,18 @@ class CellManager {
|
||||
$.on(this.bodyScrollable, 'mousemove', '.data-table-col', throttle$1(selectArea, 50));
|
||||
}
|
||||
|
||||
focusCell($cell, { skipClearSelection = 0 } = {}) {
|
||||
focusCell($cell, {
|
||||
skipClearSelection = 0
|
||||
} = {}) {
|
||||
if (!$cell) return;
|
||||
|
||||
// don't focus if already editing cell
|
||||
if ($cell === this.$editingCell) return;
|
||||
|
||||
const { colIndex, isHeader } = $.data($cell);
|
||||
const {
|
||||
colIndex,
|
||||
isHeader
|
||||
} = $.data($cell);
|
||||
if (isHeader) {
|
||||
return;
|
||||
}
|
||||
@ -1926,7 +1996,10 @@ class CellManager {
|
||||
}
|
||||
|
||||
highlightRowColumnHeader($cell) {
|
||||
const { colIndex, rowIndex } = $.data($cell);
|
||||
const {
|
||||
colIndex,
|
||||
rowIndex
|
||||
} = $.data($cell);
|
||||
const _colIndex = this.datamanager.getColumnIndexById('_rowIndex');
|
||||
const colHeaderSelector = `.data-table-header .data-table-col[data-col-index="${colIndex}"]`;
|
||||
const rowHeaderSelector = `.data-table-col[data-row-index="${rowIndex}"][data-col-index="${_colIndex}"]`;
|
||||
@ -1947,7 +2020,10 @@ class CellManager {
|
||||
|
||||
selectAreaOnClusterChanged() {
|
||||
if (!(this.$focusedCell && this.$selectionCursor)) return;
|
||||
const { colIndex, rowIndex } = $.data(this.$selectionCursor);
|
||||
const {
|
||||
colIndex,
|
||||
rowIndex
|
||||
} = $.data(this.$selectionCursor);
|
||||
const $cell = this.getCell$(colIndex, rowIndex);
|
||||
|
||||
if (!$cell || $cell === this.$selectionCursor) return;
|
||||
@ -1962,14 +2038,19 @@ class CellManager {
|
||||
focusCellOnClusterChanged() {
|
||||
if (!this.$focusedCell) return;
|
||||
|
||||
const { colIndex, rowIndex } = $.data(this.$focusedCell);
|
||||
const {
|
||||
colIndex,
|
||||
rowIndex
|
||||
} = $.data(this.$focusedCell);
|
||||
const $cell = this.getCell$(colIndex, rowIndex);
|
||||
|
||||
if (!$cell) return;
|
||||
// this function is called after selectAreaOnClusterChanged,
|
||||
// focusCell calls clearSelection which resets the area selection
|
||||
// so a flag to skip it
|
||||
this.focusCell($cell, { skipClearSelection: 1 });
|
||||
this.focusCell($cell, {
|
||||
skipClearSelection: 1
|
||||
});
|
||||
}
|
||||
|
||||
selectArea($selectionCursor) {
|
||||
@ -2059,7 +2140,10 @@ class CellManager {
|
||||
|
||||
activateEditing($cell) {
|
||||
this.focusCell($cell);
|
||||
const { rowIndex, colIndex } = $.data($cell);
|
||||
const {
|
||||
rowIndex,
|
||||
colIndex
|
||||
} = $.data($cell);
|
||||
|
||||
const col = this.columnmanager.getColumn(colIndex);
|
||||
if (col && (col.editable === false || col.focusable === false)) {
|
||||
@ -2072,7 +2156,10 @@ class CellManager {
|
||||
}
|
||||
|
||||
if (this.$editingCell) {
|
||||
const { _rowIndex, _colIndex } = $.data(this.$editingCell);
|
||||
const {
|
||||
_rowIndex,
|
||||
_colIndex
|
||||
} = $.data(this.$editingCell);
|
||||
|
||||
if (rowIndex === _rowIndex && colIndex === _colIndex) {
|
||||
// editing the same cell
|
||||
@ -2133,7 +2220,10 @@ class CellManager {
|
||||
submitEditing() {
|
||||
if (!this.$editingCell) return;
|
||||
const $cell = this.$editingCell;
|
||||
const { rowIndex, colIndex } = $.data($cell);
|
||||
const {
|
||||
rowIndex,
|
||||
colIndex
|
||||
} = $.data($cell);
|
||||
const col = this.datamanager.getColumn(colIndex);
|
||||
|
||||
if ($cell) {
|
||||
@ -2164,7 +2254,10 @@ class CellManager {
|
||||
copyCellContents($cell1, $cell2) {
|
||||
if (!$cell2 && $cell1) {
|
||||
// copy only focusedCell
|
||||
const { colIndex, rowIndex } = $.data($cell1);
|
||||
const {
|
||||
colIndex,
|
||||
rowIndex
|
||||
} = $.data($cell1);
|
||||
const cell = this.getCell(colIndex, rowIndex);
|
||||
copyTextToClipboard(cell.content);
|
||||
return;
|
||||
@ -2225,14 +2318,18 @@ class CellManager {
|
||||
}
|
||||
|
||||
getAboveCell$($cell) {
|
||||
const { colIndex } = $.data($cell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($cell);
|
||||
const $aboveRow = $cell.parentElement.previousElementSibling;
|
||||
|
||||
return $(`[data-col-index="${colIndex}"]`, $aboveRow);
|
||||
}
|
||||
|
||||
getBelowCell$($cell) {
|
||||
const { colIndex } = $.data($cell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($cell);
|
||||
const $belowRow = $cell.parentElement.nextElementSibling;
|
||||
|
||||
return $(`[data-col-index="${colIndex}"]`, $belowRow);
|
||||
@ -2277,7 +2374,9 @@ class CellManager {
|
||||
scrollToCell($cell) {
|
||||
if ($.inViewport($cell, this.bodyScrollable)) return false;
|
||||
|
||||
const { rowIndex } = $.data($cell);
|
||||
const {
|
||||
rowIndex
|
||||
} = $.data($cell);
|
||||
this.rowmanager.scrollToRow(rowIndex);
|
||||
return false;
|
||||
}
|
||||
@ -2287,7 +2386,12 @@ class CellManager {
|
||||
}
|
||||
|
||||
getCellHTML(cell) {
|
||||
const { rowIndex, colIndex, isHeader, isFilter } = cell;
|
||||
const {
|
||||
rowIndex,
|
||||
colIndex,
|
||||
isHeader,
|
||||
isFilter
|
||||
} = cell;
|
||||
const dataAttr = makeDataAttributeString({
|
||||
rowIndex,
|
||||
colIndex,
|
||||
@ -2303,7 +2407,9 @@ class CellManager {
|
||||
}
|
||||
|
||||
getCellContent(cell) {
|
||||
const { isHeader } = cell;
|
||||
const {
|
||||
isHeader
|
||||
} = cell;
|
||||
|
||||
const editable = !isHeader && cell.editable !== false;
|
||||
const editCellHTML = editable ? this.getEditCellHTML() : '';
|
||||
@ -2377,7 +2483,10 @@ class RowManager {
|
||||
|
||||
$.on(this.wrapper, 'click', '.data-table-col[data-col-index="0"] [type="checkbox"]', (e, $checkbox) => {
|
||||
const $cell = $checkbox.closest('.data-table-col');
|
||||
const { rowIndex, isHeader } = $.data($cell);
|
||||
const {
|
||||
rowIndex,
|
||||
isHeader
|
||||
} = $.data($cell);
|
||||
const checked = $checkbox.checked;
|
||||
|
||||
if (isHeader) {
|
||||
@ -2425,11 +2534,12 @@ class RowManager {
|
||||
|
||||
checkRow(rowIndex, toggle) {
|
||||
const value = toggle ? 1 : 0;
|
||||
|
||||
const selector = rowIndex =>
|
||||
`.data-table-col[data-row-index="${rowIndex}"][data-col-index="0"] [type="checkbox"]`;
|
||||
// update internal map
|
||||
this.checkMap[rowIndex] = value;
|
||||
// set checkbox value explicitly
|
||||
$.each(`.data-table-col[data-row-index="${rowIndex}"][data-col-index="0"] [type="checkbox"]`, this.bodyScrollable)
|
||||
$.each(selector(rowIndex), this.bodyScrollable)
|
||||
.map(input => {
|
||||
input.checked = toggle;
|
||||
});
|
||||
@ -2514,8 +2624,13 @@ class RowManager {
|
||||
const $row = this.getRow$(rowIndex);
|
||||
if ($.inViewport($row, this.bodyScrollable)) return;
|
||||
|
||||
const { height } = $row.getBoundingClientRect();
|
||||
const { top, bottom } = this.bodyScrollable.getBoundingClientRect();
|
||||
const {
|
||||
height
|
||||
} = $row.getBoundingClientRect();
|
||||
const {
|
||||
top,
|
||||
bottom
|
||||
} = this.bodyScrollable.getBoundingClientRect();
|
||||
const rowsInView = Math.floor((bottom - top) / height);
|
||||
|
||||
let offset = 0;
|
||||
@ -2534,7 +2649,9 @@ class RowManager {
|
||||
|
||||
if (props.isFilter) {
|
||||
row = row.map(cell => (Object.assign(cell, {
|
||||
content: this.getFilterInput({ colIndex: cell.colIndex }),
|
||||
content: this.getFilterInput({
|
||||
colIndex: cell.colIndex
|
||||
}),
|
||||
isFilter: 1,
|
||||
isHeader: undefined,
|
||||
editable: false
|
||||
@ -2579,7 +2696,7 @@ class BodyRenderer {
|
||||
|
||||
this.bodyScrollable.innerHTML = `
|
||||
<table class="data-table-body">
|
||||
${getBodyHTML(rows)}
|
||||
${this.getBodyHTML(rows)}
|
||||
</table>
|
||||
`;
|
||||
this.instance.setDimensions();
|
||||
@ -2595,7 +2712,7 @@ class BodyRenderer {
|
||||
// empty body
|
||||
this.bodyScrollable.innerHTML = `
|
||||
<table class="data-table-body">
|
||||
${getBodyHTML([])}
|
||||
${this.getBodyHTML([])}
|
||||
</table>
|
||||
`;
|
||||
|
||||
@ -2638,16 +2755,16 @@ class BodyRenderer {
|
||||
}
|
||||
|
||||
getDataForClusterize(rows) {
|
||||
return rows.map((row) => this.rowmanager.getRowHTML(row, { rowIndex: row[0].rowIndex }));
|
||||
return rows.map((row) => this.rowmanager.getRowHTML(row, row.meta));
|
||||
}
|
||||
}
|
||||
|
||||
function getBodyHTML(rows) {
|
||||
getBodyHTML(rows) {
|
||||
return `
|
||||
<tbody>
|
||||
${rows.map(row => this.rowmanager.getRowHTML(row, { rowIndex: row[0].rowIndex })).join('')}
|
||||
${rows.map(row => this.rowmanager.getRowHTML(row, row.meta)).join('')}
|
||||
</tbody>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class Style {
|
||||
@ -2684,7 +2801,7 @@ class Style {
|
||||
this.styleEl.remove();
|
||||
}
|
||||
|
||||
setStyle(rule, styleMap, index = -1) {
|
||||
setStyle(selector, styleMap, index = -1) {
|
||||
const styles = Object.keys(styleMap)
|
||||
.map(prop => {
|
||||
if (!prop.includes('-')) {
|
||||
@ -2693,7 +2810,12 @@ class Style {
|
||||
return `${prop}:${styleMap[prop]};`;
|
||||
})
|
||||
.join('');
|
||||
let ruleString = `.${this.scopeClass} ${rule} { ${styles} }`;
|
||||
let prefixedSelector = selector
|
||||
.split(',')
|
||||
.map(r => `.${this.scopeClass} ${r}`)
|
||||
.join(',');
|
||||
|
||||
let ruleString = `${prefixedSelector} { ${styles} }`;
|
||||
|
||||
let _index = this.styleSheet.cssRules.length;
|
||||
if (index !== -1) {
|
||||
@ -3005,9 +3127,7 @@ class DataTable {
|
||||
DEFAULT_OPTIONS.headerDropdown
|
||||
.concat(options.headerDropdown || []);
|
||||
// custom user events
|
||||
this.events = Object.assign(
|
||||
{}, DEFAULT_OPTIONS.events, options.events || {}
|
||||
);
|
||||
this.events = Object.assign({}, DEFAULT_OPTIONS.events, options.events || {});
|
||||
this.fireEvent = this.fireEvent.bind(this);
|
||||
|
||||
this.prepare();
|
||||
|
||||
1
dist/frappe-datatable.css
vendored
1
dist/frappe-datatable.css
vendored
@ -1,3 +1,4 @@
|
||||
/* This file is processed by postcss */
|
||||
/* variables */
|
||||
|
||||
.data-table {
|
||||
|
||||
256
dist/frappe-datatable.js
vendored
256
dist/frappe-datatable.js
vendored
@ -164,8 +164,18 @@ $.closest = (selector, element) => {
|
||||
};
|
||||
|
||||
$.inViewport = (el, parentEl) => {
|
||||
const { top, left, bottom, right } = el.getBoundingClientRect();
|
||||
const { top: pTop, left: pLeft, bottom: pBottom, right: pRight } = parentEl.getBoundingClientRect();
|
||||
const {
|
||||
top,
|
||||
left,
|
||||
bottom,
|
||||
right
|
||||
} = el.getBoundingClientRect();
|
||||
const {
|
||||
top: pTop,
|
||||
left: pLeft,
|
||||
bottom: pBottom,
|
||||
right: pRight
|
||||
} = parentEl.getBoundingClientRect();
|
||||
|
||||
return top >= pTop && left >= pLeft && bottom <= pBottom && right <= pRight;
|
||||
};
|
||||
@ -886,16 +896,6 @@ class DataManager {
|
||||
}
|
||||
}
|
||||
|
||||
prepareRow(row, i) {
|
||||
const baseRowCell = {
|
||||
rowIndex: i
|
||||
};
|
||||
|
||||
return row
|
||||
.map((cell, i) => this.prepareCell(cell, i))
|
||||
.map(cell => Object.assign({}, baseRowCell, cell));
|
||||
}
|
||||
|
||||
prepareHeader() {
|
||||
let columns = this.columns.concat(this.options.columns);
|
||||
const baseCell = {
|
||||
@ -979,7 +979,7 @@ class DataManager {
|
||||
}
|
||||
|
||||
} else {
|
||||
// row is a dict
|
||||
// row is an object
|
||||
for (let col of this.columns) {
|
||||
if (col.id === '_checkbox') {
|
||||
row.push(this.getCheckboxHTML());
|
||||
@ -991,8 +991,24 @@ class DataManager {
|
||||
}
|
||||
}
|
||||
|
||||
return this.prepareRow(row, index);
|
||||
return this.prepareRow(row, {
|
||||
rowIndex: index
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
prepareRow(row, props) {
|
||||
const baseRowCell = {
|
||||
rowIndex: props.rowIndex
|
||||
};
|
||||
|
||||
row = row
|
||||
.map((cell, i) => this.prepareCell(cell, i))
|
||||
.map(cell => Object.assign({}, baseRowCell, cell));
|
||||
|
||||
// monkey patched in array object
|
||||
row.meta = props;
|
||||
return row;
|
||||
}
|
||||
|
||||
validateColumns() {
|
||||
@ -1110,8 +1126,12 @@ class DataManager {
|
||||
|
||||
// update rows
|
||||
this.rows = this.rows.map(row => {
|
||||
const newCell1 = Object.assign({}, row[index1], { colIndex: index2 });
|
||||
const newCell2 = Object.assign({}, row[index2], { colIndex: index1 });
|
||||
const newCell1 = Object.assign({}, row[index1], {
|
||||
colIndex: index2
|
||||
});
|
||||
const newCell2 = Object.assign({}, row[index2], {
|
||||
colIndex: index1
|
||||
});
|
||||
|
||||
let newRow = row.map(cell => {
|
||||
// make object copy
|
||||
@ -1128,7 +1148,9 @@ class DataManager {
|
||||
removeColumn(index) {
|
||||
index = +index;
|
||||
const filter = cell => cell.colIndex !== index;
|
||||
const map = (cell, i) => Object.assign({}, cell, { colIndex: i });
|
||||
const map = (cell, i) => Object.assign({}, cell, {
|
||||
colIndex: i
|
||||
});
|
||||
// update columns
|
||||
this.columns = this.columns
|
||||
.filter(filter)
|
||||
@ -1217,7 +1239,10 @@ class DataManager {
|
||||
}
|
||||
});
|
||||
|
||||
return {rowsToHide, rowsToShow};
|
||||
return {
|
||||
rowsToHide,
|
||||
rowsToShow
|
||||
};
|
||||
}
|
||||
|
||||
getRowCount() {
|
||||
@ -1344,9 +1369,13 @@ class ColumnManager {
|
||||
if (!$('.data-table-col', this.header)) {
|
||||
// insert html
|
||||
|
||||
let html = this.rowmanager.getRowHTML(columns, { isHeader: 1 });
|
||||
let html = this.rowmanager.getRowHTML(columns, {
|
||||
isHeader: 1
|
||||
});
|
||||
if (this.options.enableInlineFilters) {
|
||||
html += this.rowmanager.getRowHTML(columns, { isFilter: 1 });
|
||||
html += this.rowmanager.getRowHTML(columns, {
|
||||
isFilter: 1
|
||||
});
|
||||
}
|
||||
|
||||
$('thead', this.header).innerHTML = html;
|
||||
@ -1364,7 +1393,9 @@ class ColumnManager {
|
||||
const $cols = $.each('.data-table-col', this.header);
|
||||
if (columns.length < $cols.length) {
|
||||
// deleted column
|
||||
$('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { isHeader: 1 });
|
||||
$('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, {
|
||||
isHeader: 1
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
@ -1417,8 +1448,12 @@ class ColumnManager {
|
||||
|
||||
$.on(this.header, 'click', '.data-table-dropdown-list > div', (e, $item) => {
|
||||
const $col = $.closest('.data-table-col', $item);
|
||||
const { index } = $.data($item);
|
||||
const { colIndex } = $.data($col);
|
||||
const {
|
||||
index
|
||||
} = $.data($item);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($col);
|
||||
let callback = dropdownItems[index].action;
|
||||
|
||||
callback && callback.call(this.instance, this.getColumn(colIndex));
|
||||
@ -1438,7 +1473,9 @@ class ColumnManager {
|
||||
document.body.classList.add('data-table-resize');
|
||||
const $cell = $handle.parentNode.parentNode;
|
||||
$resizingCell = $cell;
|
||||
const { colIndex } = $.data($resizingCell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($resizingCell);
|
||||
const col = this.getColumn(colIndex);
|
||||
|
||||
if (col && col.resizable === false) {
|
||||
@ -1455,7 +1492,9 @@ class ColumnManager {
|
||||
if (!$resizingCell) return;
|
||||
isDragging = false;
|
||||
|
||||
const { colIndex } = $.data($resizingCell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($resizingCell);
|
||||
this.setColumnWidth(colIndex);
|
||||
this.style.setBodyStyle();
|
||||
$resizingCell = null;
|
||||
@ -1464,13 +1503,17 @@ class ColumnManager {
|
||||
$.on(document.body, 'mousemove', (e) => {
|
||||
if (!isDragging) return;
|
||||
const finalWidth = startWidth + (e.pageX - startX);
|
||||
const { colIndex } = $.data($resizingCell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($resizingCell);
|
||||
|
||||
if (this.getColumnMinWidth(colIndex) > finalWidth) {
|
||||
// don't resize past minWidth
|
||||
return;
|
||||
}
|
||||
this.datamanager.updateColumn(colIndex, { width: finalWidth });
|
||||
this.datamanager.updateColumn(colIndex, {
|
||||
width: finalWidth
|
||||
});
|
||||
this.setColumnHeaderWidth(colIndex);
|
||||
});
|
||||
}
|
||||
@ -1490,9 +1533,14 @@ class ColumnManager {
|
||||
|
||||
this.sortable = Sortable.create($parent, {
|
||||
onEnd: (e) => {
|
||||
const { oldIndex, newIndex } = e;
|
||||
const {
|
||||
oldIndex,
|
||||
newIndex
|
||||
} = e;
|
||||
const $draggedCell = e.item;
|
||||
const { colIndex } = $.data($draggedCell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($draggedCell);
|
||||
if (+colIndex === newIndex) return;
|
||||
|
||||
this.switchColumn(oldIndex, newIndex);
|
||||
@ -1510,7 +1558,10 @@ class ColumnManager {
|
||||
|
||||
$.on(this.header, 'click', '.data-table-col .column-title', (e, span) => {
|
||||
const $cell = span.closest('.data-table-col');
|
||||
let { colIndex, sortOrder } = $.data($cell);
|
||||
let {
|
||||
colIndex,
|
||||
sortOrder
|
||||
} = $.data($cell);
|
||||
sortOrder = getDefault(sortOrder, 'none');
|
||||
const col = this.getColumn(colIndex);
|
||||
|
||||
@ -1621,11 +1672,16 @@ class ColumnManager {
|
||||
if (!this.options.enableInlineFilters) return;
|
||||
const handler = e => {
|
||||
const $filterCell = $.closest('.data-table-col', e.target);
|
||||
const { colIndex } = $.data($filterCell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($filterCell);
|
||||
const keyword = e.target.value;
|
||||
|
||||
this.datamanager.filterRows(keyword, colIndex)
|
||||
.then(({ rowsToHide, rowsToShow }) => {
|
||||
.then(({
|
||||
rowsToHide,
|
||||
rowsToShow
|
||||
}) => {
|
||||
rowsToHide.map(rowIndex => {
|
||||
const $tr = $(`.data-table-row[data-row-index="${rowIndex}"]`, this.bodyScrollable);
|
||||
$tr.classList.add('hide');
|
||||
@ -1655,7 +1711,9 @@ class ColumnManager {
|
||||
colIndex = +colIndex;
|
||||
this._columnWidthMap = this._columnWidthMap || [];
|
||||
|
||||
const { width } = this.getColumn(colIndex);
|
||||
const {
|
||||
width
|
||||
} = this.getColumn(colIndex);
|
||||
|
||||
let index = this._columnWidthMap[colIndex];
|
||||
const selector = `[data-col-index="${colIndex}"] .content, [data-col-index="${colIndex}"] .edit-cell`;
|
||||
@ -1671,7 +1729,9 @@ class ColumnManager {
|
||||
colIndex = +colIndex;
|
||||
this.$columnMap = this.$columnMap || [];
|
||||
const selector = `.data-table-header [data-col-index="${colIndex}"] .content`;
|
||||
const { width } = this.getColumn(colIndex);
|
||||
const {
|
||||
width
|
||||
} = this.getColumn(colIndex);
|
||||
|
||||
let $column = this.$columnMap[colIndex];
|
||||
if (!$column) {
|
||||
@ -1800,7 +1860,10 @@ class CellManager {
|
||||
}
|
||||
|
||||
let $cell = this.$focusedCell;
|
||||
const { rowIndex, colIndex } = $.data($cell);
|
||||
const {
|
||||
rowIndex,
|
||||
colIndex
|
||||
} = $.data($cell);
|
||||
|
||||
if (direction === 'left') {
|
||||
$cell = this.getLeftMostCell$(rowIndex);
|
||||
@ -1831,7 +1894,9 @@ class CellManager {
|
||||
if (this.options.enableInlineFilters) {
|
||||
this.keyboard.on('ctrl+f', (e) => {
|
||||
const $cell = $.closest('.data-table-col', e.target);
|
||||
let { colIndex } = $.data($cell);
|
||||
let {
|
||||
colIndex
|
||||
} = $.data($cell);
|
||||
|
||||
this.activateFilter(colIndex);
|
||||
return true;
|
||||
@ -1888,13 +1953,18 @@ class CellManager {
|
||||
$.on(this.bodyScrollable, 'mousemove', '.data-table-col', throttle$1(selectArea, 50));
|
||||
}
|
||||
|
||||
focusCell($cell, { skipClearSelection = 0 } = {}) {
|
||||
focusCell($cell, {
|
||||
skipClearSelection = 0
|
||||
} = {}) {
|
||||
if (!$cell) return;
|
||||
|
||||
// don't focus if already editing cell
|
||||
if ($cell === this.$editingCell) return;
|
||||
|
||||
const { colIndex, isHeader } = $.data($cell);
|
||||
const {
|
||||
colIndex,
|
||||
isHeader
|
||||
} = $.data($cell);
|
||||
if (isHeader) {
|
||||
return;
|
||||
}
|
||||
@ -1925,7 +1995,10 @@ class CellManager {
|
||||
}
|
||||
|
||||
highlightRowColumnHeader($cell) {
|
||||
const { colIndex, rowIndex } = $.data($cell);
|
||||
const {
|
||||
colIndex,
|
||||
rowIndex
|
||||
} = $.data($cell);
|
||||
const _colIndex = this.datamanager.getColumnIndexById('_rowIndex');
|
||||
const colHeaderSelector = `.data-table-header .data-table-col[data-col-index="${colIndex}"]`;
|
||||
const rowHeaderSelector = `.data-table-col[data-row-index="${rowIndex}"][data-col-index="${_colIndex}"]`;
|
||||
@ -1946,7 +2019,10 @@ class CellManager {
|
||||
|
||||
selectAreaOnClusterChanged() {
|
||||
if (!(this.$focusedCell && this.$selectionCursor)) return;
|
||||
const { colIndex, rowIndex } = $.data(this.$selectionCursor);
|
||||
const {
|
||||
colIndex,
|
||||
rowIndex
|
||||
} = $.data(this.$selectionCursor);
|
||||
const $cell = this.getCell$(colIndex, rowIndex);
|
||||
|
||||
if (!$cell || $cell === this.$selectionCursor) return;
|
||||
@ -1961,14 +2037,19 @@ class CellManager {
|
||||
focusCellOnClusterChanged() {
|
||||
if (!this.$focusedCell) return;
|
||||
|
||||
const { colIndex, rowIndex } = $.data(this.$focusedCell);
|
||||
const {
|
||||
colIndex,
|
||||
rowIndex
|
||||
} = $.data(this.$focusedCell);
|
||||
const $cell = this.getCell$(colIndex, rowIndex);
|
||||
|
||||
if (!$cell) return;
|
||||
// this function is called after selectAreaOnClusterChanged,
|
||||
// focusCell calls clearSelection which resets the area selection
|
||||
// so a flag to skip it
|
||||
this.focusCell($cell, { skipClearSelection: 1 });
|
||||
this.focusCell($cell, {
|
||||
skipClearSelection: 1
|
||||
});
|
||||
}
|
||||
|
||||
selectArea($selectionCursor) {
|
||||
@ -2058,7 +2139,10 @@ class CellManager {
|
||||
|
||||
activateEditing($cell) {
|
||||
this.focusCell($cell);
|
||||
const { rowIndex, colIndex } = $.data($cell);
|
||||
const {
|
||||
rowIndex,
|
||||
colIndex
|
||||
} = $.data($cell);
|
||||
|
||||
const col = this.columnmanager.getColumn(colIndex);
|
||||
if (col && (col.editable === false || col.focusable === false)) {
|
||||
@ -2071,7 +2155,10 @@ class CellManager {
|
||||
}
|
||||
|
||||
if (this.$editingCell) {
|
||||
const { _rowIndex, _colIndex } = $.data(this.$editingCell);
|
||||
const {
|
||||
_rowIndex,
|
||||
_colIndex
|
||||
} = $.data(this.$editingCell);
|
||||
|
||||
if (rowIndex === _rowIndex && colIndex === _colIndex) {
|
||||
// editing the same cell
|
||||
@ -2132,7 +2219,10 @@ class CellManager {
|
||||
submitEditing() {
|
||||
if (!this.$editingCell) return;
|
||||
const $cell = this.$editingCell;
|
||||
const { rowIndex, colIndex } = $.data($cell);
|
||||
const {
|
||||
rowIndex,
|
||||
colIndex
|
||||
} = $.data($cell);
|
||||
const col = this.datamanager.getColumn(colIndex);
|
||||
|
||||
if ($cell) {
|
||||
@ -2163,7 +2253,10 @@ class CellManager {
|
||||
copyCellContents($cell1, $cell2) {
|
||||
if (!$cell2 && $cell1) {
|
||||
// copy only focusedCell
|
||||
const { colIndex, rowIndex } = $.data($cell1);
|
||||
const {
|
||||
colIndex,
|
||||
rowIndex
|
||||
} = $.data($cell1);
|
||||
const cell = this.getCell(colIndex, rowIndex);
|
||||
copyTextToClipboard(cell.content);
|
||||
return;
|
||||
@ -2224,14 +2317,18 @@ class CellManager {
|
||||
}
|
||||
|
||||
getAboveCell$($cell) {
|
||||
const { colIndex } = $.data($cell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($cell);
|
||||
const $aboveRow = $cell.parentElement.previousElementSibling;
|
||||
|
||||
return $(`[data-col-index="${colIndex}"]`, $aboveRow);
|
||||
}
|
||||
|
||||
getBelowCell$($cell) {
|
||||
const { colIndex } = $.data($cell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($cell);
|
||||
const $belowRow = $cell.parentElement.nextElementSibling;
|
||||
|
||||
return $(`[data-col-index="${colIndex}"]`, $belowRow);
|
||||
@ -2276,7 +2373,9 @@ class CellManager {
|
||||
scrollToCell($cell) {
|
||||
if ($.inViewport($cell, this.bodyScrollable)) return false;
|
||||
|
||||
const { rowIndex } = $.data($cell);
|
||||
const {
|
||||
rowIndex
|
||||
} = $.data($cell);
|
||||
this.rowmanager.scrollToRow(rowIndex);
|
||||
return false;
|
||||
}
|
||||
@ -2286,7 +2385,12 @@ class CellManager {
|
||||
}
|
||||
|
||||
getCellHTML(cell) {
|
||||
const { rowIndex, colIndex, isHeader, isFilter } = cell;
|
||||
const {
|
||||
rowIndex,
|
||||
colIndex,
|
||||
isHeader,
|
||||
isFilter
|
||||
} = cell;
|
||||
const dataAttr = makeDataAttributeString({
|
||||
rowIndex,
|
||||
colIndex,
|
||||
@ -2302,7 +2406,9 @@ class CellManager {
|
||||
}
|
||||
|
||||
getCellContent(cell) {
|
||||
const { isHeader } = cell;
|
||||
const {
|
||||
isHeader
|
||||
} = cell;
|
||||
|
||||
const editable = !isHeader && cell.editable !== false;
|
||||
const editCellHTML = editable ? this.getEditCellHTML() : '';
|
||||
@ -2376,7 +2482,10 @@ class RowManager {
|
||||
|
||||
$.on(this.wrapper, 'click', '.data-table-col[data-col-index="0"] [type="checkbox"]', (e, $checkbox) => {
|
||||
const $cell = $checkbox.closest('.data-table-col');
|
||||
const { rowIndex, isHeader } = $.data($cell);
|
||||
const {
|
||||
rowIndex,
|
||||
isHeader
|
||||
} = $.data($cell);
|
||||
const checked = $checkbox.checked;
|
||||
|
||||
if (isHeader) {
|
||||
@ -2424,11 +2533,12 @@ class RowManager {
|
||||
|
||||
checkRow(rowIndex, toggle) {
|
||||
const value = toggle ? 1 : 0;
|
||||
|
||||
const selector = rowIndex =>
|
||||
`.data-table-col[data-row-index="${rowIndex}"][data-col-index="0"] [type="checkbox"]`;
|
||||
// update internal map
|
||||
this.checkMap[rowIndex] = value;
|
||||
// set checkbox value explicitly
|
||||
$.each(`.data-table-col[data-row-index="${rowIndex}"][data-col-index="0"] [type="checkbox"]`, this.bodyScrollable)
|
||||
$.each(selector(rowIndex), this.bodyScrollable)
|
||||
.map(input => {
|
||||
input.checked = toggle;
|
||||
});
|
||||
@ -2513,8 +2623,13 @@ class RowManager {
|
||||
const $row = this.getRow$(rowIndex);
|
||||
if ($.inViewport($row, this.bodyScrollable)) return;
|
||||
|
||||
const { height } = $row.getBoundingClientRect();
|
||||
const { top, bottom } = this.bodyScrollable.getBoundingClientRect();
|
||||
const {
|
||||
height
|
||||
} = $row.getBoundingClientRect();
|
||||
const {
|
||||
top,
|
||||
bottom
|
||||
} = this.bodyScrollable.getBoundingClientRect();
|
||||
const rowsInView = Math.floor((bottom - top) / height);
|
||||
|
||||
let offset = 0;
|
||||
@ -2533,7 +2648,9 @@ class RowManager {
|
||||
|
||||
if (props.isFilter) {
|
||||
row = row.map(cell => (Object.assign(cell, {
|
||||
content: this.getFilterInput({ colIndex: cell.colIndex }),
|
||||
content: this.getFilterInput({
|
||||
colIndex: cell.colIndex
|
||||
}),
|
||||
isFilter: 1,
|
||||
isHeader: undefined,
|
||||
editable: false
|
||||
@ -2578,7 +2695,7 @@ class BodyRenderer {
|
||||
|
||||
this.bodyScrollable.innerHTML = `
|
||||
<table class="data-table-body">
|
||||
${getBodyHTML(rows)}
|
||||
${this.getBodyHTML(rows)}
|
||||
</table>
|
||||
`;
|
||||
this.instance.setDimensions();
|
||||
@ -2594,7 +2711,7 @@ class BodyRenderer {
|
||||
// empty body
|
||||
this.bodyScrollable.innerHTML = `
|
||||
<table class="data-table-body">
|
||||
${getBodyHTML([])}
|
||||
${this.getBodyHTML([])}
|
||||
</table>
|
||||
`;
|
||||
|
||||
@ -2637,16 +2754,16 @@ class BodyRenderer {
|
||||
}
|
||||
|
||||
getDataForClusterize(rows) {
|
||||
return rows.map((row) => this.rowmanager.getRowHTML(row, { rowIndex: row[0].rowIndex }));
|
||||
return rows.map((row) => this.rowmanager.getRowHTML(row, row.meta));
|
||||
}
|
||||
}
|
||||
|
||||
function getBodyHTML(rows) {
|
||||
getBodyHTML(rows) {
|
||||
return `
|
||||
<tbody>
|
||||
${rows.map(row => this.rowmanager.getRowHTML(row, { rowIndex: row[0].rowIndex })).join('')}
|
||||
${rows.map(row => this.rowmanager.getRowHTML(row, row.meta)).join('')}
|
||||
</tbody>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class Style {
|
||||
@ -2683,7 +2800,7 @@ class Style {
|
||||
this.styleEl.remove();
|
||||
}
|
||||
|
||||
setStyle(rule, styleMap, index = -1) {
|
||||
setStyle(selector, styleMap, index = -1) {
|
||||
const styles = Object.keys(styleMap)
|
||||
.map(prop => {
|
||||
if (!prop.includes('-')) {
|
||||
@ -2692,7 +2809,12 @@ class Style {
|
||||
return `${prop}:${styleMap[prop]};`;
|
||||
})
|
||||
.join('');
|
||||
let ruleString = `.${this.scopeClass} ${rule} { ${styles} }`;
|
||||
let prefixedSelector = selector
|
||||
.split(',')
|
||||
.map(r => `.${this.scopeClass} ${r}`)
|
||||
.join(',');
|
||||
|
||||
let ruleString = `${prefixedSelector} { ${styles} }`;
|
||||
|
||||
let _index = this.styleSheet.cssRules.length;
|
||||
if (index !== -1) {
|
||||
@ -3004,9 +3126,7 @@ class DataTable {
|
||||
DEFAULT_OPTIONS.headerDropdown
|
||||
.concat(options.headerDropdown || []);
|
||||
// custom user events
|
||||
this.events = Object.assign(
|
||||
{}, DEFAULT_OPTIONS.events, options.events || {}
|
||||
);
|
||||
this.events = Object.assign({}, DEFAULT_OPTIONS.events, options.events || {});
|
||||
this.fireEvent = this.fireEvent.bind(this);
|
||||
|
||||
this.prepare();
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
/* This file is processed by postcss */
|
||||
/* variables */
|
||||
|
||||
.data-table {
|
||||
|
||||
@ -164,8 +164,18 @@ $.closest = (selector, element) => {
|
||||
};
|
||||
|
||||
$.inViewport = (el, parentEl) => {
|
||||
const { top, left, bottom, right } = el.getBoundingClientRect();
|
||||
const { top: pTop, left: pLeft, bottom: pBottom, right: pRight } = parentEl.getBoundingClientRect();
|
||||
const {
|
||||
top,
|
||||
left,
|
||||
bottom,
|
||||
right
|
||||
} = el.getBoundingClientRect();
|
||||
const {
|
||||
top: pTop,
|
||||
left: pLeft,
|
||||
bottom: pBottom,
|
||||
right: pRight
|
||||
} = parentEl.getBoundingClientRect();
|
||||
|
||||
return top >= pTop && left >= pLeft && bottom <= pBottom && right <= pRight;
|
||||
};
|
||||
@ -886,16 +896,6 @@ class DataManager {
|
||||
}
|
||||
}
|
||||
|
||||
prepareRow(row, i) {
|
||||
const baseRowCell = {
|
||||
rowIndex: i
|
||||
};
|
||||
|
||||
return row
|
||||
.map((cell, i) => this.prepareCell(cell, i))
|
||||
.map(cell => Object.assign({}, baseRowCell, cell));
|
||||
}
|
||||
|
||||
prepareHeader() {
|
||||
let columns = this.columns.concat(this.options.columns);
|
||||
const baseCell = {
|
||||
@ -979,7 +979,7 @@ class DataManager {
|
||||
}
|
||||
|
||||
} else {
|
||||
// row is a dict
|
||||
// row is an object
|
||||
for (let col of this.columns) {
|
||||
if (col.id === '_checkbox') {
|
||||
row.push(this.getCheckboxHTML());
|
||||
@ -991,8 +991,24 @@ class DataManager {
|
||||
}
|
||||
}
|
||||
|
||||
return this.prepareRow(row, index);
|
||||
return this.prepareRow(row, {
|
||||
rowIndex: index
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
prepareRow(row, props) {
|
||||
const baseRowCell = {
|
||||
rowIndex: props.rowIndex
|
||||
};
|
||||
|
||||
row = row
|
||||
.map((cell, i) => this.prepareCell(cell, i))
|
||||
.map(cell => Object.assign({}, baseRowCell, cell));
|
||||
|
||||
// monkey patched in array object
|
||||
row.meta = props;
|
||||
return row;
|
||||
}
|
||||
|
||||
validateColumns() {
|
||||
@ -1110,8 +1126,12 @@ class DataManager {
|
||||
|
||||
// update rows
|
||||
this.rows = this.rows.map(row => {
|
||||
const newCell1 = Object.assign({}, row[index1], { colIndex: index2 });
|
||||
const newCell2 = Object.assign({}, row[index2], { colIndex: index1 });
|
||||
const newCell1 = Object.assign({}, row[index1], {
|
||||
colIndex: index2
|
||||
});
|
||||
const newCell2 = Object.assign({}, row[index2], {
|
||||
colIndex: index1
|
||||
});
|
||||
|
||||
let newRow = row.map(cell => {
|
||||
// make object copy
|
||||
@ -1128,7 +1148,9 @@ class DataManager {
|
||||
removeColumn(index) {
|
||||
index = +index;
|
||||
const filter = cell => cell.colIndex !== index;
|
||||
const map = (cell, i) => Object.assign({}, cell, { colIndex: i });
|
||||
const map = (cell, i) => Object.assign({}, cell, {
|
||||
colIndex: i
|
||||
});
|
||||
// update columns
|
||||
this.columns = this.columns
|
||||
.filter(filter)
|
||||
@ -1217,7 +1239,10 @@ class DataManager {
|
||||
}
|
||||
});
|
||||
|
||||
return {rowsToHide, rowsToShow};
|
||||
return {
|
||||
rowsToHide,
|
||||
rowsToShow
|
||||
};
|
||||
}
|
||||
|
||||
getRowCount() {
|
||||
@ -1344,9 +1369,13 @@ class ColumnManager {
|
||||
if (!$('.data-table-col', this.header)) {
|
||||
// insert html
|
||||
|
||||
let html = this.rowmanager.getRowHTML(columns, { isHeader: 1 });
|
||||
let html = this.rowmanager.getRowHTML(columns, {
|
||||
isHeader: 1
|
||||
});
|
||||
if (this.options.enableInlineFilters) {
|
||||
html += this.rowmanager.getRowHTML(columns, { isFilter: 1 });
|
||||
html += this.rowmanager.getRowHTML(columns, {
|
||||
isFilter: 1
|
||||
});
|
||||
}
|
||||
|
||||
$('thead', this.header).innerHTML = html;
|
||||
@ -1364,7 +1393,9 @@ class ColumnManager {
|
||||
const $cols = $.each('.data-table-col', this.header);
|
||||
if (columns.length < $cols.length) {
|
||||
// deleted column
|
||||
$('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { isHeader: 1 });
|
||||
$('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, {
|
||||
isHeader: 1
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
@ -1417,8 +1448,12 @@ class ColumnManager {
|
||||
|
||||
$.on(this.header, 'click', '.data-table-dropdown-list > div', (e, $item) => {
|
||||
const $col = $.closest('.data-table-col', $item);
|
||||
const { index } = $.data($item);
|
||||
const { colIndex } = $.data($col);
|
||||
const {
|
||||
index
|
||||
} = $.data($item);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($col);
|
||||
let callback = dropdownItems[index].action;
|
||||
|
||||
callback && callback.call(this.instance, this.getColumn(colIndex));
|
||||
@ -1438,7 +1473,9 @@ class ColumnManager {
|
||||
document.body.classList.add('data-table-resize');
|
||||
const $cell = $handle.parentNode.parentNode;
|
||||
$resizingCell = $cell;
|
||||
const { colIndex } = $.data($resizingCell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($resizingCell);
|
||||
const col = this.getColumn(colIndex);
|
||||
|
||||
if (col && col.resizable === false) {
|
||||
@ -1455,7 +1492,9 @@ class ColumnManager {
|
||||
if (!$resizingCell) return;
|
||||
isDragging = false;
|
||||
|
||||
const { colIndex } = $.data($resizingCell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($resizingCell);
|
||||
this.setColumnWidth(colIndex);
|
||||
this.style.setBodyStyle();
|
||||
$resizingCell = null;
|
||||
@ -1464,13 +1503,17 @@ class ColumnManager {
|
||||
$.on(document.body, 'mousemove', (e) => {
|
||||
if (!isDragging) return;
|
||||
const finalWidth = startWidth + (e.pageX - startX);
|
||||
const { colIndex } = $.data($resizingCell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($resizingCell);
|
||||
|
||||
if (this.getColumnMinWidth(colIndex) > finalWidth) {
|
||||
// don't resize past minWidth
|
||||
return;
|
||||
}
|
||||
this.datamanager.updateColumn(colIndex, { width: finalWidth });
|
||||
this.datamanager.updateColumn(colIndex, {
|
||||
width: finalWidth
|
||||
});
|
||||
this.setColumnHeaderWidth(colIndex);
|
||||
});
|
||||
}
|
||||
@ -1490,9 +1533,14 @@ class ColumnManager {
|
||||
|
||||
this.sortable = Sortable.create($parent, {
|
||||
onEnd: (e) => {
|
||||
const { oldIndex, newIndex } = e;
|
||||
const {
|
||||
oldIndex,
|
||||
newIndex
|
||||
} = e;
|
||||
const $draggedCell = e.item;
|
||||
const { colIndex } = $.data($draggedCell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($draggedCell);
|
||||
if (+colIndex === newIndex) return;
|
||||
|
||||
this.switchColumn(oldIndex, newIndex);
|
||||
@ -1510,7 +1558,10 @@ class ColumnManager {
|
||||
|
||||
$.on(this.header, 'click', '.data-table-col .column-title', (e, span) => {
|
||||
const $cell = span.closest('.data-table-col');
|
||||
let { colIndex, sortOrder } = $.data($cell);
|
||||
let {
|
||||
colIndex,
|
||||
sortOrder
|
||||
} = $.data($cell);
|
||||
sortOrder = getDefault(sortOrder, 'none');
|
||||
const col = this.getColumn(colIndex);
|
||||
|
||||
@ -1621,11 +1672,16 @@ class ColumnManager {
|
||||
if (!this.options.enableInlineFilters) return;
|
||||
const handler = e => {
|
||||
const $filterCell = $.closest('.data-table-col', e.target);
|
||||
const { colIndex } = $.data($filterCell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($filterCell);
|
||||
const keyword = e.target.value;
|
||||
|
||||
this.datamanager.filterRows(keyword, colIndex)
|
||||
.then(({ rowsToHide, rowsToShow }) => {
|
||||
.then(({
|
||||
rowsToHide,
|
||||
rowsToShow
|
||||
}) => {
|
||||
rowsToHide.map(rowIndex => {
|
||||
const $tr = $(`.data-table-row[data-row-index="${rowIndex}"]`, this.bodyScrollable);
|
||||
$tr.classList.add('hide');
|
||||
@ -1655,7 +1711,9 @@ class ColumnManager {
|
||||
colIndex = +colIndex;
|
||||
this._columnWidthMap = this._columnWidthMap || [];
|
||||
|
||||
const { width } = this.getColumn(colIndex);
|
||||
const {
|
||||
width
|
||||
} = this.getColumn(colIndex);
|
||||
|
||||
let index = this._columnWidthMap[colIndex];
|
||||
const selector = `[data-col-index="${colIndex}"] .content, [data-col-index="${colIndex}"] .edit-cell`;
|
||||
@ -1671,7 +1729,9 @@ class ColumnManager {
|
||||
colIndex = +colIndex;
|
||||
this.$columnMap = this.$columnMap || [];
|
||||
const selector = `.data-table-header [data-col-index="${colIndex}"] .content`;
|
||||
const { width } = this.getColumn(colIndex);
|
||||
const {
|
||||
width
|
||||
} = this.getColumn(colIndex);
|
||||
|
||||
let $column = this.$columnMap[colIndex];
|
||||
if (!$column) {
|
||||
@ -1800,7 +1860,10 @@ class CellManager {
|
||||
}
|
||||
|
||||
let $cell = this.$focusedCell;
|
||||
const { rowIndex, colIndex } = $.data($cell);
|
||||
const {
|
||||
rowIndex,
|
||||
colIndex
|
||||
} = $.data($cell);
|
||||
|
||||
if (direction === 'left') {
|
||||
$cell = this.getLeftMostCell$(rowIndex);
|
||||
@ -1831,7 +1894,9 @@ class CellManager {
|
||||
if (this.options.enableInlineFilters) {
|
||||
this.keyboard.on('ctrl+f', (e) => {
|
||||
const $cell = $.closest('.data-table-col', e.target);
|
||||
let { colIndex } = $.data($cell);
|
||||
let {
|
||||
colIndex
|
||||
} = $.data($cell);
|
||||
|
||||
this.activateFilter(colIndex);
|
||||
return true;
|
||||
@ -1888,13 +1953,18 @@ class CellManager {
|
||||
$.on(this.bodyScrollable, 'mousemove', '.data-table-col', throttle$1(selectArea, 50));
|
||||
}
|
||||
|
||||
focusCell($cell, { skipClearSelection = 0 } = {}) {
|
||||
focusCell($cell, {
|
||||
skipClearSelection = 0
|
||||
} = {}) {
|
||||
if (!$cell) return;
|
||||
|
||||
// don't focus if already editing cell
|
||||
if ($cell === this.$editingCell) return;
|
||||
|
||||
const { colIndex, isHeader } = $.data($cell);
|
||||
const {
|
||||
colIndex,
|
||||
isHeader
|
||||
} = $.data($cell);
|
||||
if (isHeader) {
|
||||
return;
|
||||
}
|
||||
@ -1925,7 +1995,10 @@ class CellManager {
|
||||
}
|
||||
|
||||
highlightRowColumnHeader($cell) {
|
||||
const { colIndex, rowIndex } = $.data($cell);
|
||||
const {
|
||||
colIndex,
|
||||
rowIndex
|
||||
} = $.data($cell);
|
||||
const _colIndex = this.datamanager.getColumnIndexById('_rowIndex');
|
||||
const colHeaderSelector = `.data-table-header .data-table-col[data-col-index="${colIndex}"]`;
|
||||
const rowHeaderSelector = `.data-table-col[data-row-index="${rowIndex}"][data-col-index="${_colIndex}"]`;
|
||||
@ -1946,7 +2019,10 @@ class CellManager {
|
||||
|
||||
selectAreaOnClusterChanged() {
|
||||
if (!(this.$focusedCell && this.$selectionCursor)) return;
|
||||
const { colIndex, rowIndex } = $.data(this.$selectionCursor);
|
||||
const {
|
||||
colIndex,
|
||||
rowIndex
|
||||
} = $.data(this.$selectionCursor);
|
||||
const $cell = this.getCell$(colIndex, rowIndex);
|
||||
|
||||
if (!$cell || $cell === this.$selectionCursor) return;
|
||||
@ -1961,14 +2037,19 @@ class CellManager {
|
||||
focusCellOnClusterChanged() {
|
||||
if (!this.$focusedCell) return;
|
||||
|
||||
const { colIndex, rowIndex } = $.data(this.$focusedCell);
|
||||
const {
|
||||
colIndex,
|
||||
rowIndex
|
||||
} = $.data(this.$focusedCell);
|
||||
const $cell = this.getCell$(colIndex, rowIndex);
|
||||
|
||||
if (!$cell) return;
|
||||
// this function is called after selectAreaOnClusterChanged,
|
||||
// focusCell calls clearSelection which resets the area selection
|
||||
// so a flag to skip it
|
||||
this.focusCell($cell, { skipClearSelection: 1 });
|
||||
this.focusCell($cell, {
|
||||
skipClearSelection: 1
|
||||
});
|
||||
}
|
||||
|
||||
selectArea($selectionCursor) {
|
||||
@ -2058,7 +2139,10 @@ class CellManager {
|
||||
|
||||
activateEditing($cell) {
|
||||
this.focusCell($cell);
|
||||
const { rowIndex, colIndex } = $.data($cell);
|
||||
const {
|
||||
rowIndex,
|
||||
colIndex
|
||||
} = $.data($cell);
|
||||
|
||||
const col = this.columnmanager.getColumn(colIndex);
|
||||
if (col && (col.editable === false || col.focusable === false)) {
|
||||
@ -2071,7 +2155,10 @@ class CellManager {
|
||||
}
|
||||
|
||||
if (this.$editingCell) {
|
||||
const { _rowIndex, _colIndex } = $.data(this.$editingCell);
|
||||
const {
|
||||
_rowIndex,
|
||||
_colIndex
|
||||
} = $.data(this.$editingCell);
|
||||
|
||||
if (rowIndex === _rowIndex && colIndex === _colIndex) {
|
||||
// editing the same cell
|
||||
@ -2132,7 +2219,10 @@ class CellManager {
|
||||
submitEditing() {
|
||||
if (!this.$editingCell) return;
|
||||
const $cell = this.$editingCell;
|
||||
const { rowIndex, colIndex } = $.data($cell);
|
||||
const {
|
||||
rowIndex,
|
||||
colIndex
|
||||
} = $.data($cell);
|
||||
const col = this.datamanager.getColumn(colIndex);
|
||||
|
||||
if ($cell) {
|
||||
@ -2163,7 +2253,10 @@ class CellManager {
|
||||
copyCellContents($cell1, $cell2) {
|
||||
if (!$cell2 && $cell1) {
|
||||
// copy only focusedCell
|
||||
const { colIndex, rowIndex } = $.data($cell1);
|
||||
const {
|
||||
colIndex,
|
||||
rowIndex
|
||||
} = $.data($cell1);
|
||||
const cell = this.getCell(colIndex, rowIndex);
|
||||
copyTextToClipboard(cell.content);
|
||||
return;
|
||||
@ -2224,14 +2317,18 @@ class CellManager {
|
||||
}
|
||||
|
||||
getAboveCell$($cell) {
|
||||
const { colIndex } = $.data($cell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($cell);
|
||||
const $aboveRow = $cell.parentElement.previousElementSibling;
|
||||
|
||||
return $(`[data-col-index="${colIndex}"]`, $aboveRow);
|
||||
}
|
||||
|
||||
getBelowCell$($cell) {
|
||||
const { colIndex } = $.data($cell);
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($cell);
|
||||
const $belowRow = $cell.parentElement.nextElementSibling;
|
||||
|
||||
return $(`[data-col-index="${colIndex}"]`, $belowRow);
|
||||
@ -2276,7 +2373,9 @@ class CellManager {
|
||||
scrollToCell($cell) {
|
||||
if ($.inViewport($cell, this.bodyScrollable)) return false;
|
||||
|
||||
const { rowIndex } = $.data($cell);
|
||||
const {
|
||||
rowIndex
|
||||
} = $.data($cell);
|
||||
this.rowmanager.scrollToRow(rowIndex);
|
||||
return false;
|
||||
}
|
||||
@ -2286,7 +2385,12 @@ class CellManager {
|
||||
}
|
||||
|
||||
getCellHTML(cell) {
|
||||
const { rowIndex, colIndex, isHeader, isFilter } = cell;
|
||||
const {
|
||||
rowIndex,
|
||||
colIndex,
|
||||
isHeader,
|
||||
isFilter
|
||||
} = cell;
|
||||
const dataAttr = makeDataAttributeString({
|
||||
rowIndex,
|
||||
colIndex,
|
||||
@ -2302,7 +2406,9 @@ class CellManager {
|
||||
}
|
||||
|
||||
getCellContent(cell) {
|
||||
const { isHeader } = cell;
|
||||
const {
|
||||
isHeader
|
||||
} = cell;
|
||||
|
||||
const editable = !isHeader && cell.editable !== false;
|
||||
const editCellHTML = editable ? this.getEditCellHTML() : '';
|
||||
@ -2376,7 +2482,10 @@ class RowManager {
|
||||
|
||||
$.on(this.wrapper, 'click', '.data-table-col[data-col-index="0"] [type="checkbox"]', (e, $checkbox) => {
|
||||
const $cell = $checkbox.closest('.data-table-col');
|
||||
const { rowIndex, isHeader } = $.data($cell);
|
||||
const {
|
||||
rowIndex,
|
||||
isHeader
|
||||
} = $.data($cell);
|
||||
const checked = $checkbox.checked;
|
||||
|
||||
if (isHeader) {
|
||||
@ -2424,11 +2533,12 @@ class RowManager {
|
||||
|
||||
checkRow(rowIndex, toggle) {
|
||||
const value = toggle ? 1 : 0;
|
||||
|
||||
const selector = rowIndex =>
|
||||
`.data-table-col[data-row-index="${rowIndex}"][data-col-index="0"] [type="checkbox"]`;
|
||||
// update internal map
|
||||
this.checkMap[rowIndex] = value;
|
||||
// set checkbox value explicitly
|
||||
$.each(`.data-table-col[data-row-index="${rowIndex}"][data-col-index="0"] [type="checkbox"]`, this.bodyScrollable)
|
||||
$.each(selector(rowIndex), this.bodyScrollable)
|
||||
.map(input => {
|
||||
input.checked = toggle;
|
||||
});
|
||||
@ -2513,8 +2623,13 @@ class RowManager {
|
||||
const $row = this.getRow$(rowIndex);
|
||||
if ($.inViewport($row, this.bodyScrollable)) return;
|
||||
|
||||
const { height } = $row.getBoundingClientRect();
|
||||
const { top, bottom } = this.bodyScrollable.getBoundingClientRect();
|
||||
const {
|
||||
height
|
||||
} = $row.getBoundingClientRect();
|
||||
const {
|
||||
top,
|
||||
bottom
|
||||
} = this.bodyScrollable.getBoundingClientRect();
|
||||
const rowsInView = Math.floor((bottom - top) / height);
|
||||
|
||||
let offset = 0;
|
||||
@ -2533,7 +2648,9 @@ class RowManager {
|
||||
|
||||
if (props.isFilter) {
|
||||
row = row.map(cell => (Object.assign(cell, {
|
||||
content: this.getFilterInput({ colIndex: cell.colIndex }),
|
||||
content: this.getFilterInput({
|
||||
colIndex: cell.colIndex
|
||||
}),
|
||||
isFilter: 1,
|
||||
isHeader: undefined,
|
||||
editable: false
|
||||
@ -2578,7 +2695,7 @@ class BodyRenderer {
|
||||
|
||||
this.bodyScrollable.innerHTML = `
|
||||
<table class="data-table-body">
|
||||
${getBodyHTML(rows)}
|
||||
${this.getBodyHTML(rows)}
|
||||
</table>
|
||||
`;
|
||||
this.instance.setDimensions();
|
||||
@ -2594,7 +2711,7 @@ class BodyRenderer {
|
||||
// empty body
|
||||
this.bodyScrollable.innerHTML = `
|
||||
<table class="data-table-body">
|
||||
${getBodyHTML([])}
|
||||
${this.getBodyHTML([])}
|
||||
</table>
|
||||
`;
|
||||
|
||||
@ -2637,16 +2754,16 @@ class BodyRenderer {
|
||||
}
|
||||
|
||||
getDataForClusterize(rows) {
|
||||
return rows.map((row) => this.rowmanager.getRowHTML(row, { rowIndex: row[0].rowIndex }));
|
||||
return rows.map((row) => this.rowmanager.getRowHTML(row, row.meta));
|
||||
}
|
||||
}
|
||||
|
||||
function getBodyHTML(rows) {
|
||||
getBodyHTML(rows) {
|
||||
return `
|
||||
<tbody>
|
||||
${rows.map(row => this.rowmanager.getRowHTML(row, { rowIndex: row[0].rowIndex })).join('')}
|
||||
${rows.map(row => this.rowmanager.getRowHTML(row, row.meta)).join('')}
|
||||
</tbody>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class Style {
|
||||
@ -2683,7 +2800,7 @@ class Style {
|
||||
this.styleEl.remove();
|
||||
}
|
||||
|
||||
setStyle(rule, styleMap, index = -1) {
|
||||
setStyle(selector, styleMap, index = -1) {
|
||||
const styles = Object.keys(styleMap)
|
||||
.map(prop => {
|
||||
if (!prop.includes('-')) {
|
||||
@ -2692,7 +2809,12 @@ class Style {
|
||||
return `${prop}:${styleMap[prop]};`;
|
||||
})
|
||||
.join('');
|
||||
let ruleString = `.${this.scopeClass} ${rule} { ${styles} }`;
|
||||
let prefixedSelector = selector
|
||||
.split(',')
|
||||
.map(r => `.${this.scopeClass} ${r}`)
|
||||
.join(',');
|
||||
|
||||
let ruleString = `${prefixedSelector} { ${styles} }`;
|
||||
|
||||
let _index = this.styleSheet.cssRules.length;
|
||||
if (index !== -1) {
|
||||
@ -3004,9 +3126,7 @@ class DataTable {
|
||||
DEFAULT_OPTIONS.headerDropdown
|
||||
.concat(options.headerDropdown || []);
|
||||
// custom user events
|
||||
this.events = Object.assign(
|
||||
{}, DEFAULT_OPTIONS.events, options.events || {}
|
||||
);
|
||||
this.events = Object.assign({}, DEFAULT_OPTIONS.events, options.events || {});
|
||||
this.fireEvent = this.fireEvent.bind(this);
|
||||
|
||||
this.prepare();
|
||||
|
||||
@ -14,19 +14,27 @@ h1 {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.hero {
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.showcase {
|
||||
margin: 0 auto;
|
||||
padding: 4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
.showcase p {
|
||||
font-size: 2rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.datatable-1 {
|
||||
.datatable-1, .datatable-2 {
|
||||
width: 735px;
|
||||
margin: 0 auto;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.datatable-2 {
|
||||
width: 934px;
|
||||
}
|
||||
@ -9,11 +9,16 @@
|
||||
<link href="index.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<section class="hero">
|
||||
<section class="hero showcase">
|
||||
<h1>Frappe DataTable</h1>
|
||||
<p>A simple, modern and interactive datatable for the web</p>
|
||||
<div class="datatable-1"></div>
|
||||
</section>
|
||||
<section class="showcase">
|
||||
<h2>Tree Structure</h2>
|
||||
<p>Show tree structured rows in your table</p>
|
||||
<div class="datatable-2"></div>
|
||||
</section>
|
||||
<script src="../node_modules/clusterize.js/clusterize.js"></script>
|
||||
<script src="../node_modules/sortablejs/Sortable.js"></script>
|
||||
<script src="frappe-datatable.js"></script>
|
||||
|
||||
616
docs/index.js
616
docs/index.js
@ -1,13 +1,19 @@
|
||||
/* global DataTable */
|
||||
/* eslint-disable no-unused-vars */
|
||||
|
||||
const { columns, data } = getSampleData();
|
||||
const {
|
||||
columns,
|
||||
data
|
||||
} = getSampleData();
|
||||
|
||||
let datatable1 = new DataTable('.datatable-1', {
|
||||
columns,
|
||||
data
|
||||
});
|
||||
|
||||
console.log(datatable1);
|
||||
let datatable2 = new DataTable('.datatable-2', Object.assign(getTreeData(), {
|
||||
enableInlineFilters: true
|
||||
}));
|
||||
|
||||
function getSampleData(multiplier) {
|
||||
let columns = ['Name', 'Position', 'Office', 'Extn.', 'Start Date', 'Salary'];
|
||||
@ -77,5 +83,609 @@ function getSampleData(multiplier) {
|
||||
});
|
||||
}
|
||||
|
||||
return { columns, data };
|
||||
return {
|
||||
columns,
|
||||
data
|
||||
};
|
||||
}
|
||||
|
||||
function getTreeData() {
|
||||
return {
|
||||
columns: [{
|
||||
'id': 'account',
|
||||
'content': 'Account'
|
||||
}, {
|
||||
'id': 'opening_debit',
|
||||
'content': 'Opening (Dr)'
|
||||
}, {
|
||||
'id': 'opening_credit',
|
||||
'content': 'Opening (Cr)'
|
||||
}, {
|
||||
'id': 'debit',
|
||||
'content': 'Debit'
|
||||
}, {
|
||||
'id': 'credit',
|
||||
'content': 'Credit'
|
||||
}, {
|
||||
'id': 'closing_debit',
|
||||
'content': 'Closing (Dr)'
|
||||
}, {
|
||||
'id': 'closing_credit',
|
||||
'content': 'Closing (Cr)'
|
||||
}, {
|
||||
'id': 'currency',
|
||||
'content': 'Currency',
|
||||
'hidden': 1
|
||||
}],
|
||||
data: [{
|
||||
'account_name': 'Application of Funds (Assets)',
|
||||
'account': 'Application of Funds (Assets) - GTPL',
|
||||
'parent_account': null,
|
||||
'indent': 0,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 12023729.54,
|
||||
'opening_credit': 0.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 12023729.54,
|
||||
'closing_credit': 0.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Current Assets',
|
||||
'account': 'Current Assets - GTPL',
|
||||
'parent_account': 'Application of Funds (Assets) - GTPL',
|
||||
'indent': 1,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 13960649.54,
|
||||
'opening_credit': 0.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 13960649.54,
|
||||
'closing_credit': 0.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Accounts Receivable',
|
||||
'account': 'Accounts Receivable - GTPL',
|
||||
'parent_account': 'Current Assets - GTPL',
|
||||
'indent': 2,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 742790.474,
|
||||
'opening_credit': 0.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 742790.474,
|
||||
'closing_credit': 0.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Debtors',
|
||||
'account': 'Debtors - GTPL',
|
||||
'parent_account': 'Accounts Receivable - GTPL',
|
||||
'indent': 3,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 742790.474,
|
||||
'opening_credit': 0.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 742790.474,
|
||||
'closing_credit': 0.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Bank Accounts',
|
||||
'account': 'Bank Accounts - GTPL',
|
||||
'parent_account': 'Current Assets - GTPL',
|
||||
'indent': 2,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 280676.822,
|
||||
'opening_credit': 0.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 280676.822,
|
||||
'closing_credit': 0.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Corporation Bank',
|
||||
'account': 'Corporation Bank - GTPL',
|
||||
'parent_account': 'Bank Accounts - GTPL',
|
||||
'indent': 3,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 290676.822,
|
||||
'opening_credit': 0.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 290676.822,
|
||||
'closing_credit': 0.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'HDFC Bank',
|
||||
'account': 'HDFC Bank - GTPL',
|
||||
'parent_account': 'Bank Accounts - GTPL',
|
||||
'indent': 3,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 0.0,
|
||||
'opening_credit': 10000.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 0.0,
|
||||
'closing_credit': 10000.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Cash In Hand',
|
||||
'account': 'Cash In Hand - GTPL',
|
||||
'parent_account': 'Current Assets - GTPL',
|
||||
'indent': 2,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 229904.494,
|
||||
'opening_credit': 0.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 229904.494,
|
||||
'closing_credit': 0.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Cash',
|
||||
'account': 'Cash - GTPL',
|
||||
'parent_account': 'Cash In Hand - GTPL',
|
||||
'indent': 3,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 229904.494,
|
||||
'opening_credit': 0.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 229904.494,
|
||||
'closing_credit': 0.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Stock Assets',
|
||||
'account': 'Stock Assets - GTPL',
|
||||
'parent_account': 'Current Assets - GTPL',
|
||||
'indent': 2,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 12707277.75,
|
||||
'opening_credit': 0.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 12707277.75,
|
||||
'closing_credit': 0.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'All Warehouses',
|
||||
'account': 'All Warehouses - GTPL',
|
||||
'parent_account': 'Stock Assets - GTPL',
|
||||
'indent': 3,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 12707277.75,
|
||||
'opening_credit': 0.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 12707277.75,
|
||||
'closing_credit': 0.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Finished Goods',
|
||||
'account': 'Finished Goods - GTPL',
|
||||
'parent_account': 'All Warehouses - GTPL',
|
||||
'indent': 4,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 87320.3,
|
||||
'opening_credit': 0.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 87320.3,
|
||||
'closing_credit': 0.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Retail Stores',
|
||||
'account': 'Retail Stores - GTPL',
|
||||
'parent_account': 'All Warehouses - GTPL',
|
||||
'indent': 4,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 4540590.0,
|
||||
'opening_credit': 0.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 4540590.0,
|
||||
'closing_credit': 0.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Bandra Store',
|
||||
'account': 'Bandra Store - GTPL',
|
||||
'parent_account': 'Retail Stores - GTPL',
|
||||
'indent': 5,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 3246800.0,
|
||||
'opening_credit': 0.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 3246800.0,
|
||||
'closing_credit': 0.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Central Warehouse',
|
||||
'account': 'Central Warehouse - GTPL',
|
||||
'parent_account': 'Retail Stores - GTPL',
|
||||
'indent': 5,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 1236790.0,
|
||||
'opening_credit': 0.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 1236790.0,
|
||||
'closing_credit': 0.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Lower Parel Store',
|
||||
'account': 'Lower Parel Store - GTPL',
|
||||
'parent_account': 'Retail Stores - GTPL',
|
||||
'indent': 5,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 57000.0,
|
||||
'opening_credit': 0.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 57000.0,
|
||||
'closing_credit': 0.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Stores',
|
||||
'account': 'Stores - GTPL',
|
||||
'parent_account': 'All Warehouses - GTPL',
|
||||
'indent': 4,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 8016525.27,
|
||||
'opening_credit': 0.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 8016525.27,
|
||||
'closing_credit': 0.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Work In Progress',
|
||||
'account': 'Work In Progress - GTPL',
|
||||
'parent_account': 'All Warehouses - GTPL',
|
||||
'indent': 4,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 62842.18,
|
||||
'opening_credit': 0.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 62842.18,
|
||||
'closing_credit': 0.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Fixed Assets',
|
||||
'account': 'Fixed Assets - GTPL',
|
||||
'parent_account': 'Application of Funds (Assets) - GTPL',
|
||||
'indent': 1,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 0.0,
|
||||
'opening_credit': 19920.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 0.0,
|
||||
'closing_credit': 19920.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Electronic Equipments',
|
||||
'account': 'Electronic Equipments - GTPL',
|
||||
'parent_account': 'Fixed Assets - GTPL',
|
||||
'indent': 2,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 80.0,
|
||||
'opening_credit': 0.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 80.0,
|
||||
'closing_credit': 0.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Furnitures and Fixtures',
|
||||
'account': 'Furnitures and Fixtures - GTPL',
|
||||
'parent_account': 'Fixed Assets - GTPL',
|
||||
'indent': 2,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 0.0,
|
||||
'opening_credit': 20000.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 0.0,
|
||||
'closing_credit': 20000.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Temporary Accounts',
|
||||
'account': 'Temporary Accounts - GTPL',
|
||||
'parent_account': 'Application of Funds (Assets) - GTPL',
|
||||
'indent': 1,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 0.0,
|
||||
'opening_credit': 1917000.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 0.0,
|
||||
'closing_credit': 1917000.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Temporary Opening',
|
||||
'account': 'Temporary Opening - GTPL',
|
||||
'parent_account': 'Temporary Accounts - GTPL',
|
||||
'indent': 2,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 0.0,
|
||||
'opening_credit': 1917000.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 0.0,
|
||||
'closing_credit': 1917000.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Source of Funds (Liabilities)',
|
||||
'account': 'Source of Funds (Liabilities) - GTPL',
|
||||
'parent_account': null,
|
||||
'indent': 0,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 0.0,
|
||||
'opening_credit': 2371628.002,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 0.0,
|
||||
'closing_credit': 2371628.002,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Current Liabilities',
|
||||
'account': 'Current Liabilities - GTPL',
|
||||
'parent_account': 'Source of Funds (Liabilities) - GTPL',
|
||||
'indent': 1,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 0.0,
|
||||
'opening_credit': 2371628.002,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 0.0,
|
||||
'closing_credit': 2371628.002,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Accounts Payable',
|
||||
'account': 'Accounts Payable - GTPL',
|
||||
'parent_account': 'Current Liabilities - GTPL',
|
||||
'indent': 2,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 0.0,
|
||||
'opening_credit': 368311.85,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 0.0,
|
||||
'closing_credit': 368311.85,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Creditors',
|
||||
'account': 'Creditors - GTPL',
|
||||
'parent_account': 'Accounts Payable - GTPL',
|
||||
'indent': 3,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 0.0,
|
||||
'opening_credit': 194871.85,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 0.0,
|
||||
'closing_credit': 194871.85,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Salary Payable',
|
||||
'account': 'Salary Payable - GTPL',
|
||||
'parent_account': 'Accounts Payable - GTPL',
|
||||
'indent': 3,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 0.0,
|
||||
'opening_credit': 173440.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 0.0,
|
||||
'closing_credit': 173440.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Duties and Taxes',
|
||||
'account': 'Duties and Taxes - GTPL',
|
||||
'parent_account': 'Current Liabilities - GTPL',
|
||||
'indent': 2,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 0.0,
|
||||
'opening_credit': 150146.822,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 0.0,
|
||||
'closing_credit': 150146.822,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'CGST',
|
||||
'account': 'CGST - GTPL',
|
||||
'parent_account': 'Duties and Taxes - GTPL',
|
||||
'indent': 3,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 0.0,
|
||||
'opening_credit': 51479.591,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 0.0,
|
||||
'closing_credit': 51479.591,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'IGST',
|
||||
'account': 'IGST - GTPL',
|
||||
'parent_account': 'Duties and Taxes - GTPL',
|
||||
'indent': 3,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 1944.0,
|
||||
'opening_credit': 0.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 1944.0,
|
||||
'closing_credit': 0.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'SGST',
|
||||
'account': 'SGST - GTPL',
|
||||
'parent_account': 'Duties and Taxes - GTPL',
|
||||
'indent': 3,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 0.0,
|
||||
'opening_credit': 97711.231,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 0.0,
|
||||
'closing_credit': 97711.231,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'UGST',
|
||||
'account': 'UGST - GTPL',
|
||||
'parent_account': 'Duties and Taxes - GTPL',
|
||||
'indent': 3,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 0.0,
|
||||
'opening_credit': 2900.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 0.0,
|
||||
'closing_credit': 2900.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Stock Liabilities',
|
||||
'account': 'Stock Liabilities - GTPL',
|
||||
'parent_account': 'Current Liabilities - GTPL',
|
||||
'indent': 2,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 0.0,
|
||||
'opening_credit': 1853169.33,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 0.0,
|
||||
'closing_credit': 1853169.33,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Stock Received But Not Billed',
|
||||
'account': 'Stock Received But Not Billed - GTPL',
|
||||
'parent_account': 'Stock Liabilities - GTPL',
|
||||
'indent': 3,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 0.0,
|
||||
'opening_credit': 1853169.33,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 0.0,
|
||||
'closing_credit': 1853169.33,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Equity',
|
||||
'account': 'Equity - GTPL',
|
||||
'parent_account': null,
|
||||
'indent': 0,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 0.0,
|
||||
'opening_credit': 10000.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 0.0,
|
||||
'closing_credit': 10000.0,
|
||||
'has_value': true
|
||||
}, {
|
||||
'account_name': 'Capital Stock',
|
||||
'account': 'Capital Stock - GTPL',
|
||||
'parent_account': 'Equity - GTPL',
|
||||
'indent': 1,
|
||||
'from_date': '2018-04-01',
|
||||
'to_date': '2019-03-31',
|
||||
'currency': 'INR',
|
||||
'opening_debit': 0.0,
|
||||
'opening_credit': 10000.0,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 0.0,
|
||||
'closing_credit': 10000.0,
|
||||
'has_value': true
|
||||
}, {}, {
|
||||
'account': 'Total',
|
||||
'account_name': 'Total',
|
||||
'warn_if_negative': true,
|
||||
'opening_debit': 32260956.43,
|
||||
'opening_credit': 22618854.891999997,
|
||||
'debit': 0.0,
|
||||
'credit': 0.0,
|
||||
'closing_debit': 32260956.43,
|
||||
'closing_credit': 22618854.891999997,
|
||||
'parent_account': null,
|
||||
'indent': 0,
|
||||
'has_value': true,
|
||||
'currency': 'INR'
|
||||
}]
|
||||
};
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user