Indent using 4 spaces

src/body-renderer.js

@@ -1,6 +1,8 @@
 import $ from './dom';
 import Clusterize from 'clusterize.js';
-import { promisify } from './utils';
+import {
+    promisify
+} from './utils';
 
 export default class BodyRenderer {
     constructor(instance) {
@@ -27,7 +29,7 @@ export default class BodyRenderer {
 
         this.bodyScrollable.innerHTML = `
             <table class="data-table-body">
-        ${getBodyHTML(rows)}
+                ${this.getBodyHTML(rows)}
             </table>
         `;
         this.instance.setDimensions();
@@ -43,7 +45,7 @@ export default class BodyRenderer {
             // empty body
             this.bodyScrollable.innerHTML = `
                 <table class="data-table-body">
-          ${getBodyHTML([])}
+                    ${this.getBodyHTML([])}
                 </table>
             `;
 
@@ -86,14 +88,14 @@ export default 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));
     }
-};
 
-export 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>
         `;
     }
+};

src/cellmanager.js

@@ -4,7 +4,9 @@ import {
     throttle
 } from './utils';
 import $ from './dom';
-import { getDropdownHTML } from './columnmanager';
+import {
+    getDropdownHTML
+} from './columnmanager';
 
 export default class CellManager {
     constructor(instance) {
@@ -80,7 +82,10 @@ export default class CellManager {
             }
 
             let $cell = this.$focusedCell;
-      const { rowIndex, colIndex } = $.data($cell);
+            const {
+                rowIndex,
+                colIndex
+            } = $.data($cell);
 
             if (direction === 'left') {
                 $cell = this.getLeftMostCell$(rowIndex);
@@ -111,7 +116,9 @@ export default 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;
@@ -168,13 +175,18 @@ export default class CellManager {
         $.on(this.bodyScrollable, 'mousemove', '.data-table-col', throttle(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;
         }
@@ -205,7 +217,10 @@ export default 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}"]`;
@@ -226,7 +241,10 @@ export default 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;
@@ -241,14 +259,19 @@ export default 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) {
@@ -338,7 +361,10 @@ export default 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)) {
@@ -351,7 +377,10 @@ export default 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
@@ -412,7 +441,10 @@ export default 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) {
@@ -443,7 +475,10 @@ export default 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;
@@ -504,14 +539,18 @@ export default 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);
@@ -556,7 +595,9 @@ export default 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;
     }
@@ -566,7 +607,12 @@ export default class CellManager {
     }
 
     getCellHTML(cell) {
-    const { rowIndex, colIndex, isHeader, isFilter } = cell;
+        const {
+            rowIndex,
+            colIndex,
+            isHeader,
+            isFilter
+        } = cell;
         const dataAttr = makeDataAttributeString({
             rowIndex,
             colIndex,
@@ -582,7 +628,9 @@ export default class CellManager {
     }
 
     getCellContent(cell) {
-    const { isHeader } = cell;
+        const {
+            isHeader
+        } = cell;
 
         const editable = !isHeader && cell.editable !== false;
         const editCellHTML = editable ? this.getEditCellHTML() : '';

src/columnmanager.js

@@ -1,6 +1,10 @@
 import $ from './dom';
 import Sortable from 'sortablejs';
-import { getDefault, linkProperties, debounce } from './utils';
+import {
+    getDefault,
+    linkProperties,
+    debounce
+} from './utils';
 
 export default class ColumnManager {
     constructor(instance) {
@@ -32,9 +36,13 @@ export default 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;
@@ -52,7 +60,9 @@ export default 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;
             }
 
@@ -105,8 +115,12 @@ export default 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));
@@ -126,7 +140,9 @@ export default 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) {
@@ -143,7 +159,9 @@ export default class ColumnManager {
             if (!$resizingCell) return;
             isDragging = false;
 
-      const { colIndex } = $.data($resizingCell);
+            const {
+                colIndex
+            } = $.data($resizingCell);
             this.setColumnWidth(colIndex);
             this.style.setBodyStyle();
             $resizingCell = null;
@@ -152,13 +170,17 @@ export default 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);
         });
     }
@@ -178,9 +200,14 @@ export default 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);
@@ -198,7 +225,10 @@ export default 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);
 
@@ -309,11 +339,16 @@ export default 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');
@@ -343,7 +378,9 @@ export default 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`;
@@ -359,7 +396,9 @@ export default 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) {

src/datamanager.js

@@ -1,4 +1,7 @@
-import { isNumeric, promisify } from './utils';
+import {
+    isNumeric,
+    promisify
+} from './utils';
 
 export default class DataManager {
     constructor(options) {
@@ -72,16 +75,6 @@ export default 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 = {
@@ -165,7 +158,7 @@ export default 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());
@@ -177,8 +170,24 @@ export default 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() {
@@ -296,8 +305,12 @@ export default 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
@@ -314,7 +327,9 @@ export default 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)
@@ -403,7 +418,10 @@ export default class DataManager {
             }
         });
 
-    return {rowsToHide, rowsToShow};
+        return {
+            rowsToHide,
+            rowsToShow
+        };
     }
 
     getRowCount() {

src/datatable.js

@@ -27,9 +27,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();

src/dom.js

@@ -1,4 +1,3 @@
-
 export default function $(expr, con) {
     return typeof expr === 'string' ?
         (con || document).querySelector(expr) :
@@ -159,8 +158,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;
 };

src/performance.js

@@ -1,14 +0,0 @@
-class Performance {
-  start() {
-    this._start = window.performance.now();
-  }
-
-  end() {
-    this._end = window.performance.now();
-    console.log(this._end - this._start);
-  }
-}
-
-let perf = new Performance();
-
-export default perf;

src/rowmanager.js

@@ -1,5 +1,8 @@
 import $ from './dom';
-import { makeDataAttributeString, promisify } from './utils';
+import {
+    makeDataAttributeString,
+    promisify
+} from './utils';
 
 export default class RowManager {
     constructor(instance) {
@@ -32,7 +35,10 @@ export default 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) {
@@ -80,11 +86,12 @@ export default 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;
             });
@@ -169,8 +176,13 @@ export default 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;
@@ -189,7 +201,9 @@ export default 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

src/style.css

@@ -1,3 +1,4 @@
+/* This file is processed by postcss */
 /* variables */
 
 :root {

src/style.js

@@ -39,7 +39,7 @@ export default 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('-')) {
@@ -48,7 +48,12 @@ export default 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) {