73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright Google Inc. All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.io/license
|
|
*/
|
|
|
|
import {TableCell} from '../util';
|
|
|
|
export class TableComponent {
|
|
private _renderCells: any[][];
|
|
constructor(private _rootEl: any) {}
|
|
|
|
set data(data: TableCell[][]) {
|
|
if (data.length === 0) {
|
|
this._destroy();
|
|
} else if (this._renderCells) {
|
|
this._update(data);
|
|
} else {
|
|
this._create(data);
|
|
}
|
|
}
|
|
|
|
private _destroy() {
|
|
while (this._rootEl.lastChild) {
|
|
this._rootEl.lastChild.remove();
|
|
}
|
|
this._renderCells = null;
|
|
}
|
|
|
|
private _update(data: TableCell[][]) {
|
|
for (let r = 0; r < data.length; r++) {
|
|
const dataRow = data[r];
|
|
const renderRow = this._renderCells[r];
|
|
for (let c = 0; c < dataRow.length; c++) {
|
|
const dataCell = dataRow[c];
|
|
const renderCell = renderRow[c];
|
|
this._updateCell(renderCell, dataCell);
|
|
}
|
|
}
|
|
}
|
|
|
|
private _updateCell(renderCell: any, dataCell: TableCell) {
|
|
renderCell.textContent = dataCell.value;
|
|
}
|
|
|
|
private _create(data: TableCell[][]) {
|
|
const table = document.createElement('table');
|
|
this._rootEl.appendChild(table);
|
|
const tbody = document.createElement('tbody');
|
|
table.appendChild(tbody);
|
|
this._renderCells = new Array(data.length);
|
|
for (let r = 0; r < data.length; r++) {
|
|
const dataRow = data[r];
|
|
const tr = document.createElement('tr');
|
|
tbody.appendChild(tr);
|
|
const renderRow = new Array(dataRow.length);
|
|
this._renderCells[r] = renderRow;
|
|
for (let c = 0; c < dataRow.length; c++) {
|
|
const dataCell = dataRow[c];
|
|
const renderCell = document.createElement('td');
|
|
if (r % 2 === 0) {
|
|
renderCell.style.backgroundColor = 'grey';
|
|
}
|
|
tr.appendChild(renderCell);
|
|
renderRow[c] = renderCell;
|
|
this._updateCell(renderCell, dataCell);
|
|
}
|
|
}
|
|
}
|
|
}
|