private buildTable()

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);
    }