fix(class selector): Replace all selectors with class based selectors

Class based selectors are faster than attribute based ones.

src/cellmanager.js

@@ -615,7 +615,7 @@ export default class CellManager {
 
         if (!this.columnmanager.isFilterShown) {
             // put focus back on cell
-            this.$focusedCell.focus();
+            this.$focusedCell && this.$focusedCell.focus();
         }
     }
 

src/columnmanager.js

@@ -34,7 +34,7 @@ export default class ColumnManager {
         // refresh html
         $('thead', this.header).innerHTML = this.getHeaderHTML(columns);
 
-        this.$filterRow = $('.dt-row[data-is-filter]', this.header);
+        this.$filterRow = $('.dt-row-filter', this.header);
         if (this.$filterRow) {
             $.style(this.$filterRow, { display: 'none' });
         }
@@ -263,7 +263,7 @@ export default class ColumnManager {
     focusFilter(colIndex) {
         if (!this.isFilterShown) return;
 
-        const $filterInput = $(`[data-col-index="${colIndex}"] .dt-filter`, this.$filterRow);
+        const $filterInput = $(`.dt-cell--col-${colIndex} .dt-filter`, this.$filterRow);
         $filterInput.focus();
     }
 

src/datamanager.js

@@ -11,6 +11,7 @@ export default class DataManager {
         this.sortRows = nextTick(this.sortRows, this);
         this.switchColumn = nextTick(this.switchColumn, this);
         this.removeColumn = nextTick(this.removeColumn, this);
+        this.options.filterRows = nextTick(this.options.filterRows, this);
     }
 
     init(data, columns) {
@@ -423,27 +424,29 @@ export default class DataManager {
 
     filterRows(keyword, colIndex) {
         const cells = this.rows.map(row => row[colIndex]);
-        let result = this.options.filterRows(keyword, cells, colIndex);
 
-        if (!result) {
+        return this.options.filterRows(keyword, cells, colIndex)
-            result = this.getAllRowIndices();
+            .then(result => {
-        }
+                if (!result) {
+                    result = this.getAllRowIndices();
+                }
 
-        if (!result.then) {
+                if (!result.then) {
-            result = Promise.resolve(result);
+                    result = Promise.resolve(result);
-        }
+                }
 
-        return result.then(rowsToShow => {
+                return result.then(rowsToShow => {
-            this._filteredRows = rowsToShow;
+                    this._filteredRows = rowsToShow;
 
-            const rowsToHide = this.getAllRowIndices()
+                    const rowsToHide = this.getAllRowIndices()
-                .filter(index => !rowsToShow.includes(index));
+                        .filter(index => !rowsToShow.includes(index));
 
-            return {
+                    return {
-                rowsToHide,
+                        rowsToHide,
-                rowsToShow
+                        rowsToShow
-            };
+                    };
-        });
+                });
+            });
     }
 
     getFilteredRowIndices() {

src/rowmanager.js

@@ -40,7 +40,7 @@ export default class RowManager {
         // map of checked rows
         this.checkMap = [];
 
-        $.on(this.wrapper, 'click', '.dt-cell[data-col-index="0"] [type="checkbox"]', (e, $checkbox) => {
+        $.on(this.wrapper, 'click', '.dt-cell--col-0 [type="checkbox"]', (e, $checkbox) => {
             const $cell = $checkbox.closest('.dt-cell');
             const {
                 rowIndex,
@@ -92,8 +92,7 @@ export default class RowManager {
 
     checkRow(rowIndex, toggle) {
         const value = toggle ? 1 : 0;
-        const selector = rowIndex =>
+        const selector = rowIndex => `.dt-cell--0-${rowIndex} [type="checkbox"]`;
-            `.dt-cell[data-row-index="${rowIndex}"][data-col-index="0"] [type="checkbox"]`;
         // update internal map
         this.checkMap[rowIndex] = value;
         // set checkbox value explicitly
@@ -117,7 +116,7 @@ export default class RowManager {
             this.checkMap = [];
         }
         // set checkbox value
-        $.each('.dt-cell[data-col-index="0"] [type="checkbox"]', this.bodyScrollable)
+        $.each('.dt-cell--col-0 [type="checkbox"]', this.bodyScrollable)
             .map(input => {
                 input.checked = toggle;
             });
@@ -255,6 +254,7 @@ export default class RowManager {
 
     getRowHTML(row, props) {
         const dataAttr = makeDataAttributeString(props);
+        let rowIdentifier = props.rowIndex;
 
         if (props.isFilter) {
             row = row.map(cell => (Object.assign({}, cell, {
@@ -265,10 +265,16 @@ export default class RowManager {
                 isHeader: undefined,
                 editable: false
             })));
+
+            rowIdentifier = 'filter';
+        }
+
+        if (props.isHeader) {
+            rowIdentifier = 'header';
         }
 
         return `
-            <tr class="dt-row" ${dataAttr}>
+            <tr class="dt-row dt-row-${rowIdentifier}" ${dataAttr}>
                 ${row.map(cell => this.cellmanager.getCellHTML(cell)).join('')}
             </tr>
         `;
@@ -280,6 +286,6 @@ export default class RowManager {
     }
 
     selector(rowIndex) {
-        return `.dt-row[data-row-index="${rowIndex}"]`;
+        return `.dt-row-${rowIndex}`;
     }
 }

src/style.js

@@ -147,7 +147,7 @@ export default class Style {
     }
 
     setupMinWidth() {
-        $.each('.dt-cell[data-is-header]', this.header).map(col => {
+        $.each('.dt-cell--header', this.header).map(col => {
             const { colIndex } = $.data(col);
             const column = this.getColumn(colIndex);
 
@@ -163,7 +163,7 @@ export default class Style {
         if (!$('.dt-row')) return;
 
         // set initial width as naturally calculated by table's first row
-        $.each('.dt-row[data-row-index="0"] .dt-cell', this.bodyScrollable).map($cell => {
+        $.each('.dt-row-0 .dt-cell', this.bodyScrollable).map($cell => {
             const {
                 colIndex
             } = $.data($cell);
@@ -259,7 +259,7 @@ export default class Style {
     setDefaultCellHeight() {
         if (this.options.dynamicRowHeight) return;
         if (this.__cellHeightSet) return;
-        const $firstCell = $('.dt-cell[data-is-header]', this.instance.header);
+        const $firstCell = $('.dt-cell--header', this.instance.header);
         if (!$firstCell) return;
 
         const height = this.options.cellHeight || $.style($firstCell, 'height');
@@ -339,7 +339,7 @@ export default class Style {
     getColumnHeaderElement(colIndex) {
         colIndex = +colIndex;
         if (colIndex < 0) return null;
-        return $(`.dt-cell[data-col-index="${colIndex}"]`, this.header);
+        return $(`.dt-cell--col-${colIndex}`, this.header);
     }
 
     getRowIndexColumnWidth(baseWidth) {