Add docs folder

dist/frappe-datatable.cjs.css

@@ -1,3 +1,4 @@
+/* This file is processed by postcss */
 /* variables */
 
 .data-table {

dist/frappe-datatable.cjs.js

@@ -165,8 +165,18 @@ $.closest = (selector, element) => {
 };
 
 $.inViewport = (el, parentEl) => {
-  const { top, left, bottom, right } = el.getBoundingClientRect();
+    const {
-  const { top: pTop, left: pLeft, bottom: pBottom, right: pRight } = parentEl.getBoundingClientRect();
+        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 newCell1 = Object.assign({}, row[index1], {
-      const newCell2 = Object.assign({}, row[index2], { colIndex: 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 {
-      const { colIndex } = $.data($col);
+                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 {
-    const { top, bottom } = this.bodyScrollable.getBoundingClientRect();
+            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,17 +2755,17 @@ 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 {
     constructor(instance) {
@@ -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(
+        this.events = Object.assign({}, DEFAULT_OPTIONS.events, options.events || {});
-      {}, DEFAULT_OPTIONS.events, options.events || {}
-    );
         this.fireEvent = this.fireEvent.bind(this);
 
         this.prepare();

dist/frappe-datatable.css

@@ -1,3 +1,4 @@
+/* This file is processed by postcss */
 /* variables */
 
 .data-table {

dist/frappe-datatable.js

@@ -164,8 +164,18 @@ $.closest = (selector, element) => {
 };
 
 $.inViewport = (el, parentEl) => {
-  const { top, left, bottom, right } = el.getBoundingClientRect();
+    const {
-  const { top: pTop, left: pLeft, bottom: pBottom, right: pRight } = parentEl.getBoundingClientRect();
+        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 newCell1 = Object.assign({}, row[index1], {
-      const newCell2 = Object.assign({}, row[index2], { colIndex: 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 {
-      const { colIndex } = $.data($col);
+                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 {
-    const { top, bottom } = this.bodyScrollable.getBoundingClientRect();
+            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,17 +2754,17 @@ 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 {
     constructor(instance) {
@@ -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(
+        this.events = Object.assign({}, DEFAULT_OPTIONS.events, options.events || {});
-      {}, DEFAULT_OPTIONS.events, options.events || {}
-    );
         this.fireEvent = this.fireEvent.bind(this);
 
         this.prepare();

docs/frappe-datatable.css

@@ -1,3 +1,4 @@
+/* This file is processed by postcss */
 /* variables */
 
 .data-table {

docs/frappe-datatable.js

@@ -164,8 +164,18 @@ $.closest = (selector, element) => {
 };
 
 $.inViewport = (el, parentEl) => {
-  const { top, left, bottom, right } = el.getBoundingClientRect();
+    const {
-  const { top: pTop, left: pLeft, bottom: pBottom, right: pRight } = parentEl.getBoundingClientRect();
+        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 newCell1 = Object.assign({}, row[index1], {
-      const newCell2 = Object.assign({}, row[index2], { colIndex: 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 {
-      const { colIndex } = $.data($col);
+                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 {
-    const { top, bottom } = this.bodyScrollable.getBoundingClientRect();
+            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,17 +2754,17 @@ 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 {
     constructor(instance) {
@@ -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(
+        this.events = Object.assign({}, DEFAULT_OPTIONS.events, options.events || {});
-      {}, DEFAULT_OPTIONS.events, options.events || {}
-    );
         this.fireEvent = this.fireEvent.bind(this);
 
         this.prepare();

docs/index.css

@@ -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;
+}

docs/index.html

@@ -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>

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'
+        }]
+    };
 }