public render()

in src/UXClient/Components/EventsTable/EventsTable.ts [39:97]


    public render(events: any, chartOptions: any, fromTsx: boolean = false) {
        this.chartOptions.setOptions(chartOptions);
        this.maxVisibleIndex = 100;
        this.eventsTableData.setEvents(events, fromTsx, this.chartOptions.timeSeriesIdProperties, chartOptions.offset);

        var componentContainer = d3.select(this.renderTarget)
            .classed("tsi-tableComponent", true);
        super.themify(componentContainer, this.chartOptions.theme);
        var tableLeftPanel;
        if (this.eventsTable == null) {
            tableLeftPanel = componentContainer.append("div")
                .classed("tsi-tableLeftPanel", true);
            this.eventsLegend = tableLeftPanel.append("div")            
                .classed("tsi-tableLegend", true);
            this.eventsLegend.append("ul");
            this.eventsTable = componentContainer.append("div")
                .classed("tsi-eventsTable", true);
            this.eventsTable.append("div").classed("tsi-columnHeaders", true);
            var table = this.eventsTable.append("div").classed("tsi-eventRowsContainer", true)
                .append("table").classed("tsi-eventRows", true);         
            table.append("tr"); 
        } else {
            tableLeftPanel = componentContainer.select("tsi-tableLeftPanel");
        }
        this.renderLegend();
        this.buildTable();

        tableLeftPanel.selectAll(".tsi-eventsDownload").remove();
        var downloadButton = tableLeftPanel.append("button")
            .attr("class", "tsi-eventsDownload tsi-primaryButton")
            .attr("aria-label", this.getString("Download as CSV"))
            .on("click", function() {
                this.classList.add('tsi-downloading');
                setTimeout(() => {
                    Utils.downloadCSV(self.eventsTableData.generateCSVString(true, 0), "Events")
                    this.classList.remove('tsi-downloading');
                }, 100);
            });
        downloadButton.append("div").attr("class", "tsi-downloadEventsIcon");
        downloadButton.append("div").attr("class", "tsi-downloadEventsText").text(this.getString("Download as CSV"));


         //listen for table scroll and adjust the headers accordingly
        var self = this;

        this.eventsTable.select('.tsi-eventRowsContainer').node().scrollLeft = 0;
        this.eventsTable.select('.tsi-eventRowsContainer').node().scrollTop = 0;

        this.eventsTable.select('.tsi-eventRowsContainer').node().addEventListener('scroll', function(evt) {
            self.eventsTable.select('.tsi-columnHeaders').node().scrollLeft = this.scrollLeft;
            //check to see if need to infiniteScroll
            if ((this.scrollTop + this.clientHeight) > (this.scrollHeight - 100)) {
                let oldVisibleIndex = self.maxVisibleIndex
                self.maxVisibleIndex += (Math.min(100, self.eventsTableData.events.length - self.maxVisibleIndex));
                if (self.maxVisibleIndex != oldVisibleIndex)
                    self.buildTable();
            }
        }, false);
    }