jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

Render rows based on rowViewOrder

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/body-renderer.js
View File

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

67
src/datamanager.js
View File

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