How to use the reactstrap.Table function in reactstrap

CacheMetrics.prototype.render = function () {
        var _this = this;
        var _a = this.props, cacheMetrics = _a.cacheMetrics, twoDigitAfterPointFormat = _a.twoDigitAfterPointFormat;
        return (React.createElement("div", null,
            React.createElement("h3", null, "Ehcache statistics"),
            React.createElement(reactstrap_1.Table, null,
                React.createElement("thead", null,
                    React.createElement("tr", null,
                        React.createElement("th", null, "Cache Name"),
                        React.createElement("th", null, "Cache Hits"),
                        React.createElement("th", null, "Cache Misses"),
                        React.createElement("th", null, "Cache Gets"),
                        React.createElement("th", null, "Cache Hit %"),
                        React.createElement("th", null, "Cache Miss %"))),
                React.createElement("tbody", null, Object.keys(cacheMetrics).map(function (key) { return (React.createElement("tr", { key: key },
                    React.createElement("td", null, key),
                    React.createElement("td", null, cacheMetrics[key]['cache.gets.hit']),
                    React.createElement("td", null, cacheMetrics[key]['cache.gets.miss']),
                    React.createElement("td", null, cacheMetrics[key]['cache.gets.miss'] + cacheMetrics[key]['cache.gets.hit']),
                    React.createElement("td", null,
                        React.createElement(formatter_1.TextFormat, { value: _this.filterNaN(100 *
                                cacheMetrics[key]['cache.gets.hit'] /

? filteredList.map(function (threadDumpInfo, i) { return (React.createElement("div", { key: "dump-" + i },
                        React.createElement("h6", null,
                            ' ',
                            React.createElement("span", { className: 'badge ' + _this.getBadgeClass(threadDumpInfo.threadState) }, threadDumpInfo.threadState),
                            "\u00A0",
                            threadDumpInfo.threadName,
                            " (ID ",
                            threadDumpInfo.threadId,
                            ")\u00A0"),
                        React.createElement(thread_item_1.default, { threadDumpInfo: threadDumpInfo }),
                        React.createElement(reactstrap_1.Row, null,
                            React.createElement(reactstrap_1.Table, { responsive: true },
                                React.createElement("thead", null,
                                    React.createElement("tr", null,
                                        React.createElement("th", null, "Blocked Time"),
                                        React.createElement("th", null, "Blocked Count"),
                                        React.createElement("th", null, "Waited Time"),
                                        React.createElement("th", null, "Waited Count"),
                                        React.createElement("th", null, "Lock Name"))),
                                React.createElement("tbody", null,
                                    React.createElement("tr", { key: threadDumpInfo.lockName },
                                        React.createElement("td", null, threadDumpInfo.blockedTime),
                                        React.createElement("td", null, threadDumpInfo.blockedCount),
                                        React.createElement("td", null, threadDumpInfo.waitedTime),
                                        React.createElement("td", null, threadDumpInfo.waitedCount),
                                        React.createElement("td", { className: "thread-dump-modal-lock", title: threadDumpInfo.lockName },
                                            React.createElement("code", null, threadDumpInfo.lockName)))))))); })
                    : null)),

React.createElement(formatter_1.TextFormat, { value: garbageCollectorMetrics['jvm.gc.memory.promoted'] / 1048576, type: 'number', format: wholeNumberFormat }),
                        "M /",
                        ' ',
                        React.createElement(formatter_1.TextFormat, { value: garbageCollectorMetrics['jvm.gc.memory.allocated'] / 1048576, type: 'number', format: wholeNumberFormat }),
                        "M)"),
                    React.createElement(reactstrap_1.Progress, { animated: true, color: "success", value: 100 * garbageCollectorMetrics['jvm.gc.memory.promoted'] / garbageCollectorMetrics['jvm.gc.memory.allocated'] },
                        React.createElement(formatter_1.TextFormat, { value: 100 * garbageCollectorMetrics['jvm.gc.memory.promoted'] / garbageCollectorMetrics['jvm.gc.memory.allocated'], type: 'number', format: wholeNumberFormat }),
                        "%")),
                React.createElement(reactstrap_1.Col, { md: "4" },
                    React.createElement(reactstrap_1.Row, null,
                        React.createElement(reactstrap_1.Col, { md: "9" }, "Classes loaded"),
                        React.createElement(reactstrap_1.Col, { md: "3" }, garbageCollectorMetrics.classesLoaded)),
                    React.createElement(reactstrap_1.Row, null,
                        React.createElement(reactstrap_1.Col, { md: "9" }, "Classes unloaded"),
                        React.createElement(reactstrap_1.Col, { md: "3" }, garbageCollectorMetrics.classesUnloaded)))),
            React.createElement(reactstrap_1.Table, null,
                React.createElement("thead", null,
                    React.createElement("tr", null,
                        React.createElement("th", null),
                        React.createElement("th", { className: "text-right" }, "Count"),
                        React.createElement("th", { className: "text-right" }, "Mean"),
                        React.createElement("th", { className: "text-right" }, "Min"),
                        React.createElement("th", { className: "text-right" }, "p50"),
                        React.createElement("th", { className: "text-right" }, "p75"),
                        React.createElement("th", { className: "text-right" }, "p95"),
                        React.createElement("th", { className: "text-right" }, "p99"),
                        React.createElement("th", { className: "text-right" }, "Max"))),
                React.createElement("tbody", null,
                    React.createElement("tr", null,
                        React.createElement("td", null, "jvm.gc.pause"),
                        React.createElement("td", { className: "text-right" },
                            React.createElement(formatter_1.TextFormat, { value: garbageCollectorMetrics.count, type: 'number', format: '0,0.[000]' })),

DatasourceMetrics.prototype.render = function () {
        var _a = this.props, datasourceMetrics = _a.datasourceMetrics, twoDigitAfterPointFormat = _a.twoDigitAfterPointFormat;
        return (React.createElement("div", null,
            React.createElement("h3", null, "DataSource statistics (time in millisecond)"),
            React.createElement(reactstrap_1.Table, null,
                React.createElement("thead", null,
                    React.createElement("tr", null,
                        React.createElement("th", null,
                            React.createElement("span", null, "Connection Pool Usage "),
                            "(active: ",
                            datasourceMetrics.active.value,
                            ", min: ",
                            datasourceMetrics.min.value,
                            ", max: ",
                            datasourceMetrics.max.value,
                            ", idle:",
                            ' ',
                            datasourceMetrics.idle.value,
                            ")"),
                        React.createElement("th", { className: "text-right" }, "Count"),
                        React.createElement("th", { className: "text-right" }, "Mean"),

get: function () {
    return reactstrap.Table;
  }
});

HttpRequestMetrics.prototype.render = function () {
        var _this = this;
        var _a = this.props, requestMetrics = _a.requestMetrics, wholeNumberFormat = _a.wholeNumberFormat, twoDigitAfterPointFormat = _a.twoDigitAfterPointFormat;
        return (React.createElement("div", null,
            React.createElement("h3", null, "HTTP requests (time in milliseconds)"),
            React.createElement("p", null,
                React.createElement("span", null, "Total requests:"),
                ' ',
                React.createElement("b", null,
                    React.createElement(formatter_1.TextFormat, { value: requestMetrics.all.count, type: "number", format: wholeNumberFormat }))),
            React.createElement(reactstrap_1.Table, null,
                React.createElement("thead", null,
                    React.createElement("tr", null,
                        React.createElement("th", null, "Code"),
                        React.createElement("th", null, "Count"),
                        React.createElement("th", { className: "text-right" }, "Mean"),
                        React.createElement("th", { className: "text-right" }, "Max"))),
                React.createElement("tbody", null, Object.keys(requestMetrics.percode).map(function (key, index) { return (React.createElement("tr", { key: index },
                    React.createElement("td", null, key),
                    React.createElement("td", null,
                        React.createElement(reactstrap_1.Progress, { min: "0", max: requestMetrics.all.count, value: requestMetrics.percode[key].count, color: "success", animated: true },
                            React.createElement("span", null,
                                React.createElement(formatter_1.TextFormat, { value: requestMetrics.percode[key].count, type: "number", format: wholeNumberFormat })))),
                    React.createElement("td", { className: "text-right" },
                        React.createElement(formatter_1.TextFormat, { value: _this.filterNaN(requestMetrics.percode[key].mean), type: "number", format: twoDigitAfterPointFormat })),
                    React.createElement("td", { className: "text-right" },
                        React.createElement(formatter_1.TextFormat, { value: _this.filterNaN(requestMetrics.percode[key].max), type: "number", format: twoDigitAfterPointFormat })))); })))));

EndpointsRequestsMetrics.prototype.render = function () {
        var _a = this.props, endpointsRequestsMetrics = _a.endpointsRequestsMetrics, wholeNumberFormat = _a.wholeNumberFormat;
        return (React.createElement("div", null,
            React.createElement("h3", null, "Endpoints requests (time in millisecond)"),
            React.createElement(reactstrap_1.Table, null,
                React.createElement("thead", null,
                    React.createElement("tr", null,
                        React.createElement("th", null, "Method"),
                        React.createElement("th", null, "Endpoint url"),
                        React.createElement("th", null, "Count"),
                        React.createElement("th", null, "Mean"))),
                React.createElement("tbody", null, Object.entries(endpointsRequestsMetrics).map(function (_a) {
                    var key = _a[0], entry = _a[1];
                    return Object.entries(entry).map(function (_a) {
                        var method = _a[0], methodValue = _a[1];
                        return (React.createElement("tr", { key: key + '-' + method },
                            React.createElement("td", null, method),
                            React.createElement("td", null, key),
                            React.createElement("td", null, methodValue.count),
                            React.createElement("td", null,
                                React.createElement(formatter_1.TextFormat, { value: methodValue.mean, type: "number", format: wholeNumberFormat }))));