Render rows based on rowViewOrder

This commit is contained in:
Faris Ansari 2018-03-01 22:23:08 +05:30
parent 48f98be8d2
commit 1e71ab9f16
2 changed files with 44 additions and 29 deletions

View File

@ -25,7 +25,7 @@ export default class BodyRenderer {
}
renderBodyHTML() {
const rows = this.datamanager.getRows();
const rows = this.datamanager.getRowsForView();
this.bodyScrollable.innerHTML = `
<table class="data-table-body">
@ -38,7 +38,7 @@ export default class BodyRenderer {
renderBodyWithClusterize() {
// first page
const rows = this.datamanager.getRows(0, 20);
const rows = this.datamanager.getRowsForView(0, 20);
const initialData = this.getDataForClusterize(rows);
if (!this.clusterize) {
@ -82,7 +82,7 @@ export default class BodyRenderer {
}
appendRemainingData() {
const rows = this.datamanager.getRows(20);
const rows = this.datamanager.getRowsForView(20);
const data = this.getDataForClusterize(rows);
this.clusterize.append(data);
}

View File

@ -25,6 +25,7 @@ export default class DataManager {
this.prepareColumns();
this.prepareRows();
this.prepareRowView();
this.prepareNumericColumns();
}
@ -142,6 +143,9 @@ export default class DataManager {
const index = this._getNextRowCount();
let row = [];
let meta = {
rowIndex: index
};
if (Array.isArray(d)) {
// row is an array
@ -168,17 +172,25 @@ export default class DataManager {
row.push(d[col.id]);
}
}
meta.indent = d.indent;
}
return this.prepareRow(row, {
rowIndex: index
});
return this.prepareRow(row, meta);
});
}
prepareRow(row, props) {
prepareRowView() {
// This is order in which rows will be rendered in the table.
// When sorting happens, only this.rowViewOrder will change
// and not the original this.rows
this.rowViewOrder = this.rows.map(row => row.meta.rowIndex);
}
prepareRow(row, meta) {
const baseRowCell = {
rowIndex: props.rowIndex
rowIndex: meta.rowIndex,
indent: meta.indent
};
row = row
@ -186,7 +198,7 @@ export default class DataManager {
.map(cell => Object.assign({}, baseRowCell, cell));
// monkey patched in array object
row.meta = props;
row.meta = meta;
return row;
}
@ -241,28 +253,28 @@ export default class DataManager {
(this.currentSort.sortOrder === 'asc' && sortOrder === 'desc') ||
(this.currentSort.sortOrder === 'desc' && sortOrder === 'asc')
) {
this.reverseArray(this.rows);
this.reverseArray(this.rowViewOrder);
this.currentSort.sortOrder = sortOrder;
return;
}
}
this.rows.sort((a, b) => {
const _aIndex = a[0].rowIndex;
const _bIndex = b[0].rowIndex;
const _a = a[colIndex].content;
const _b = b[colIndex].content;
this.rowViewOrder.sort((a, b) => {
const aIndex = a;
const bIndex = b;
const aContent = this.getCell(colIndex, a).content;
const bContent = this.getCell(colIndex, b).content;
if (sortOrder === 'none') {
return _aIndex - _bIndex;
return aIndex - bIndex;
} else if (sortOrder === 'asc') {
if (_a < _b) return -1;
if (_a > _b) return 1;
if (_a === _b) return 0;
if (aContent < bContent) return -1;
if (aContent > bContent) return 1;
if (aContent === bContent) return 0;
} else if (sortOrder === 'desc') {
if (_a < _b) return 1;
if (_a > _b) return -1;
if (_a === _b) return 0;
if (aContent < bContent) return 1;
if (aContent > bContent) return -1;
if (aContent === bContent) return 0;
}
return 0;
});
@ -271,11 +283,9 @@ export default class DataManager {
// update row index
const srNoColIndex = this.getColumnIndexById('_rowIndex');
this.rows.forEach((row, index) => {
row.forEach(cell => {
if (cell.colIndex === srNoColIndex) {
cell.content = (index + 1) + '';
}
});
const viewIndex = this.rowViewOrder.indexOf(index);
const cell = row[srNoColIndex];
cell.content = (viewIndex + 1) + '';
});
}
}
@ -438,6 +448,11 @@ export default class DataManager {
return this.rows.slice(start, end);
}
getRowsForView(start, end) {
const rows = this.rowViewOrder.map(i => this.rows[i]);
return rows.slice(start, end);
}
getColumns(skipStandardColumns) {
let columns = this.columns;
@ -477,13 +492,13 @@ export default class DataManager {
getRow(rowIndex) {
rowIndex = +rowIndex;
return this.rows.find(row => row[0].rowIndex === rowIndex);
return this.rows[rowIndex];
}
getCell(colIndex, rowIndex) {
rowIndex = +rowIndex;
colIndex = +colIndex;
return this.rows.find(row => row[0].rowIndex === rowIndex)[colIndex];
return this.getRow(rowIndex)[colIndex];
}
get() {