in src/UXClient/Components/EventsTable/EventsTable.ts [317:365]
private buildTable (currentSortedCol = null) {
var filteredColumnKeys = this.getFilteredColumnKeys();
var widthDictionary = this.buildHeaders(filteredColumnKeys, currentSortedCol);
this.eventsTable.select("table").html("");
var self = this;
var rowsData = this.eventsTableData.events.slice(0, this.maxVisibleIndex);
var firstRow = this.eventsTable.select("table").append("tr")
.classed("tsi-eventRow", true);
var firstRowCells = firstRow.selectAll("td").data(filteredColumnKeys);
firstRowCells.enter()
.append("td")
.classed("tsi-eventCell", true)
.text(d => this.eventsTableData.columns[d].name);
var rows = this.eventsTable.select("table").selectAll("tsi-eventRow").data(rowsData);
var rowsEntered = rows.enter()
.append("tr")
.classed("tsi-eventRow", true)
.merge(rows)
.each(function (event: TimeSeriesEvent) {
var visibleCells = filteredColumnKeys.map((columnKey: string) => {
if (event.cells[columnKey])
return event.cells[columnKey]
return { key: columnKey, value: null };
});
var valueCells = d3.select(this).selectAll("td").data(visibleCells);
var valueCellsEntered = valueCells.enter()
.append("td")
.classed("tsi-eventCell", true)
.style("min-width", (d: TimeSeriesEventCell) => {
if (widthDictionary[d.key] != null)
return Math.ceil(widthDictionary[d.key]) + "px";
else
return "none";
})
.text((d: TimeSeriesEventCell) => {
return self.formatValue(d.value, d.type);
});
valueCells.exit().remove();
});
if (rowsEntered.size() > 0) {
var firstRow = rowsEntered.filter(function (d, i) { return i === 0;})
firstRow.selectAll("td").each(function(d) {
var cellWidth = d3.select(this).node().getBoundingClientRect().width;
widthDictionary[d.key] = (cellWidth > widthDictionary[d.key]) ? cellWidth : widthDictionary[d.key];
});
}
rows.exit().remove();
this.adjustHeaderWidth(widthDictionary);
}