survey-analytics 2.5.16 → 3.0.0-beta.1

package/fesm/survey.analytics.tabulator.mjs

@@ -1,11 +1,11 @@
 /*!
- * surveyjs - SurveyJS Dashboard library v2.5.16
+ * surveyjs - SurveyJS Dashboard library v3.0.0-beta.1
  * Copyright (c) 2015-2026 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
 
-import { D as DocumentHelper, l as localization, c as createImagesContainer, d as createLinksContainer, e as createCommercialLicenseLink, f as svgTemplate } from './shared.mjs';
-export { s as setupLocale, a as surveyStrings } from './shared.mjs';
+import { a as DocumentHelper, l as localization, c as createActionDropdown, e as createImagesContainer, f as createLinksContainer, g as createCommercialLicenseLink, h as svgTemplate, D as DashboardTheme } from './shared3.mjs';
+export { s as setupLocale, b as surveyStrings } from './shared3.mjs';
 import { ItemValue, settings, Serializer, surveyLocalization, hasLicense, EventBase, Event } from 'survey-core';
 import { TabulatorFull } from 'tabulator-tables';
 
@@ -19,16 +19,19 @@ class TableExtensions {
         if (!!extensions) {
             extensions = this.sortExtensions(extensions);
             extensions.forEach((extension) => {
-                if (!!extension.render && this.table.allowExtension(extension)) {
-                    var action = extension.render(this.table, options);
-                    if (!!action) {
-                        targetNode.appendChild(action);
-                        this.renderedExtensions.push(extension);
-                    }
-                }
+                this.renderExtension(extension, targetNode, options);
             });
         }
     }
+    renderExtension(extension, targetNode, options) {
+        if (!!extension.render && this.table.allowExtension(extension)) {
+            var action = extension.render(this.table, options);
+            if (!!action) {
+                targetNode.appendChild(action);
+                this.renderedExtensions.push(extension);
+            }
+        }
+    }
     destroy() {
         this.renderedExtensions.forEach((extension) => {
             if (!!extension.destroy)
@@ -93,8 +96,7 @@ TableExtensions.registerExtension({
     name: "details",
     visibleIndex: 0,
     render: (_table, options) => {
-        const btn = DocumentHelper.createSvgButton("detail");
-        btn.title = localization.getString("showMinorColumns");
+        const btn = DocumentHelper.createSvgButton("more-24x24", localization.getString("showMinorColumns"));
         btn.className += " sa-table__row-extension";
         btn.onclick = () => {
             options.row.toggleDetails();
@@ -107,121 +109,95 @@ TableExtensions.registerExtension({
     name: "select",
     visibleIndex: -1,
     render: function (_table, opt) {
-        var row = opt.row;
-        var checkbox = DocumentHelper.createElement("input", "sa-table__row-extension", {
-            type: "checkbox",
-        });
-        checkbox.checked = row.getIsSelected();
-        checkbox.onchange = function () {
+        const itemClassSelected = "sa-checkbox--checked";
+        const row = opt.row;
+        const iconContainer = DocumentHelper.createSvgButton("check-24x24");
+        iconContainer.onclick = () => {
             row.toggleSelect();
+            if (row.getIsSelected()) {
+                iconContainer.classList.add(itemClassSelected);
+            }
+            else {
+                iconContainer.classList.remove(itemClassSelected);
+            }
         };
-        return checkbox;
+        iconContainer.className = "sa-checkbox sa-table__row-extension";
+        if (row.getIsSelected()) {
+            iconContainer.classList.add(itemClassSelected);
+        }
+        // var checkbox = <HTMLInputElement>DocumentHelper.createElement(
+        //   "input",
+        //   "sa-table__row-extension",
+        //   {
+        //     type: "checkbox",
+        //   }
+        // );
+        // checkbox.checked = row.getIsSelected();
+        // checkbox.onchange = function () {
+        //   row.toggleSelect();
+        // };
+        return iconContainer;
     },
 });
 
 TableExtensions.registerExtension({
     location: "header",
     name: "filter",
-    visibleIndex: 0,
+    visibleIndex: 1,
     render: function (table) {
-        const input = DocumentHelper.createInput("sa-table__global-filter sa-table__header-extension", localization.getString("filterPlaceholder"));
-        input.onchange = (event) => {
-            table.applyFilter(event.target.value);
-        };
-        return input;
+        // const input = DocumentHelper.createInput(
+        //   "sa-table__global-filter sa-table__header-extension",
+        //   localization.getString("filterPlaceholder")
+        // );
+        // input.onchange = (event: any) => {
+        //   table.applyFilter(event.target.value);
+        // };
+        const el = DocumentHelper.createTextEditor({
+            onchange: (val) => { table.applyFilter(val); }
+        });
+        return el;
     },
 });
 TableExtensions.registerExtension({
     location: "header",
     name: "showcolumn",
-    visibleIndex: 2,
-    destroy: function () {
-        this.onDestroy();
-    },
+    visibleIndex: 20,
     render: function (table) {
-        const dropdown = DocumentHelper.createElement("select", "sa-table__show-column sa-table__header-extension");
-        function update() {
-            var hiddenColumns = table.columns.filter((column) => !column.isVisible);
-            if (hiddenColumns.length == 0) {
-                dropdown.style.display = "none";
-                return;
+        // const dropdown = DocumentHelper.createElement(
+        //   "select",
+        //   "sa-table__show-column sa-table__header-extension"
+        // );
+        const allColumns = table.columns.map((column) => {
+            var text = column.displayName || column.name;
+            if (!!text && text.length > 20) {
+                text = text.substring(0, 20) + "...";
             }
-            dropdown.style.display = "inline-block";
-            dropdown.innerHTML = "";
-            var option = DocumentHelper.createElement("option", "", {
-                text: localization.getString("showColumn"),
-                disabled: true,
-                selected: true,
-            });
-            dropdown.appendChild(option);
-            hiddenColumns.forEach((column) => {
-                var text = column.displayName || column.name;
-                if (!!text && text.length > 20) {
-                    text = text.substring(0, 20) + "...";
-                }
-                var option = DocumentHelper.createElement("option", "", {
-                    text: text,
-                    title: column.displayName,
-                    value: column.name,
-                });
-                dropdown.appendChild(option);
-            });
-        }
-        dropdown.onchange = (e) => {
-            const val = e.target.value;
-            e.stopPropagation();
-            if (!val)
-                return;
-            table.setColumnVisibility(val, true);
-        };
-        update();
-        var onVisibilityChangedCallback = () => {
-            update();
-        };
-        table.onColumnsVisibilityChanged.add(onVisibilityChangedCallback);
-        this.onDestroy = () => {
-            table.onColumnsVisibilityChanged.remove(onVisibilityChangedCallback);
-        };
-        return dropdown;
-    },
-});
-TableExtensions.registerExtension({
-    location: "header",
-    name: "showentries",
-    visibleIndex: 3,
-    render: function (table) {
-        if (table.options.paginationEnabled === false) {
-            return DocumentHelper.createElement("div");
-        }
-        function getEntriesDropdown(table) {
-            const el = DocumentHelper.createElement("select");
-            var optionsValues = table.paginationSizeSelector || ["1", "5", "10", "25", "50", "75", "100"];
-            optionsValues.forEach(function (val) {
-                var option = DocumentHelper.createElement("option", "", {
-                    value: val,
-                    text: val,
-                });
-                el.appendChild(option);
-            });
-            el.value = String(table.getPageSize());
-            el.onchange = () => {
-                table.setPageSize(Number(el.value));
+            return {
+                value: column.name,
+                text: text,
+                title: column.displayName || column.name,
+                icon: "check-24x24"
             };
-            return el;
-        }
-        const selectorContainer = DocumentHelper.createElement("div", "sa-table__entries");
-        const spaceSpan = DocumentHelper.createElement("span", "sa-table__header-space");
-        const showSpan = DocumentHelper.createElement("span", "sa-table__entries-label sa-table__entries-label--right", {
-            innerText: localization.getString("showLabel"),
         });
-        const entriesSpan = DocumentHelper.createElement("span", "sa-table__entries-label sa-table__entries-label--left", {
-            innerText: localization.getString("entriesLabel"),
+        const dropdown = createActionDropdown({
+            options: allColumns,
+            isSelected: (option) => {
+                const hiddenColumns = table.columns.filter((column) => !column.isVisible);
+                return hiddenColumns.length === 0 || hiddenColumns.filter(el => el.name === option.value).length === 0;
+            },
+            handler: (e) => {
+                if (!!e) {
+                    if (!e)
+                        return;
+                    const column = table.columns.filter((column) => column.name === e)[0];
+                    table.setColumnVisibility(e, !column.isVisible);
+                    return false;
+                }
+            },
+            title: localization.getString("columns")
         });
-        selectorContainer.appendChild(spaceSpan);
-        selectorContainer.appendChild(showSpan);
-        selectorContainer.appendChild(getEntriesDropdown(table));
-        selectorContainer.appendChild(entriesSpan);
-        return selectorContainer;
+        dropdown.className += " sa-table__show-column sa-table__header-extension";
+        return dropdown;
     },
 });
 TableExtensions.registerExtension({
@@ -229,41 +205,126 @@ TableExtensions.registerExtension({
     name: "removerows",
     visibleIndex: -1,
     render: function (table) {
-        var btn = DocumentHelper.createElement("button", "sa-table__btn sa-table__btn--green sa-table__header-extension ", { innerText: localization.getString("removeRows") });
-        btn.onclick = function () {
+        const btn = DocumentHelper.createButton((e) => {
             table.getCreatedRows().forEach(function (row) {
                 if (row.getIsSelected()) {
                     row.remove();
                 }
             });
-        };
+        }, localization.getString("removeRows"), "sa-button");
+        btn.className += " sa-table__header-extension sa-button-brand-tertiary";
         return btn;
+        // var btn = DocumentHelper.createElement(
+        //   "button",
+        //   "sa-table__btn sa-table__header-extension ",
+        //   { innerText: localization.getString("removeRows") }
+        // );
+        // btn.onclick = function () {
+        //   table.getCreatedRows().forEach(function (row) {
+        //     if (row.getIsSelected()) {
+        //       row.remove();
+        //     }
+        //   });
+        // };
+        // return btn;
     },
 });
 TableExtensions.registerExtension({
     location: "header",
     name: "changelocale",
-    visibleIndex: 1,
+    visibleIndex: 40,
     render: function (table) {
         var locales = table.getLocales();
         if (table.options.disableLocaleSwitch || locales.length < 2)
             return null;
-        const el = (DocumentHelper.createElement("select", "sa-table__header-extension", {}));
+        /*
+        const el = <HTMLSelectElement>(
+          DocumentHelper.createElement("select", "sa-table__header-extension", {})
+        );
         var optionsValues = [localization.getString("changeLocale")].concat(locales);
         optionsValues.forEach(function (val) {
-            var option = DocumentHelper.createElement("option", "", {
-                value: val,
-                text: localization.localeNames[val] || localization.getString(val) || val,
-            });
-            el.appendChild(option);
+          var option = DocumentHelper.createElement("option", "", {
+            value: val,
+            text: localization.localeNames[val] || localization.getString(val) || val,
+          });
+          el.appendChild(option);
         });
         el.onchange = () => {
-            table.locale = el.value;
+          table.locale = el.value;
         };
+        */
+        const optionsValues = locales.map(val => { return { value: val, text: localization.localeNames[val] || localization.getString(val) || val }; });
+        const el = createActionDropdown({
+            options: optionsValues,
+            isSelected: (option) => false,
+            handler: (e) => {
+                if (!!e) {
+                    table.locale = e;
+                }
+                return true;
+            },
+            title: () => localization.getString("changeLocale"),
+        });
+        el.className += " sa-table__header-extension";
         return el;
     },
 });
 
+TableExtensions.registerExtension({
+    location: "footer",
+    name: "showentries",
+    visibleIndex: 30,
+    render: function (table) {
+        if (table.options.paginationEnabled === false) {
+            return DocumentHelper.createElement("div");
+        }
+        function getEntriesDropdown(table) {
+            /*
+            const el = <HTMLSelectElement>DocumentHelper.createElement("select");
+            var optionsValues = table.paginationSizeSelector || ["1", "5", "10", "25", "50", "75", "100"];
+            optionsValues.forEach(function (val) {
+              var option = DocumentHelper.createElement("option", "", {
+                value: val,
+                text: val,
+              });
+              el.appendChild(option);
+            });
+            el.value = String(table.getPageSize());
+      
+            el.onchange = () => {
+              table.setPageSize(Number(el.value));
+            };
+      
+            return el;
+            */
+            const optionsValues = table.paginationSizeSelector || ["1", "5", "10", "25", "50", "75", "100"];
+            const el = createActionDropdown({
+                options: optionsValues.map(val => { return { value: val, text: val }; }),
+                isSelected: (option) => {
+                    return option.value === table.getPageSize();
+                },
+                handler: (e) => {
+                    if (e !== undefined && e !== null) {
+                        table.setPageSize(Number(e));
+                    }
+                    return true;
+                },
+                title: () => { return String(table.getPageSize()); },
+                direction: "up"
+            });
+            el.className += " sa-table__entries-value";
+            return el;
+        }
+        const selectorContainer = DocumentHelper.createElement("div", "sa-table__entries");
+        const showSpan = DocumentHelper.createElement("span", "sa-table__entries-label sa-table__entries-label--right", {
+            innerText: localization.getString("entriesOnPageLabel"),
+        });
+        selectorContainer.appendChild(showSpan);
+        selectorContainer.appendChild(getEntriesDropdown(table));
+        return selectorContainer;
+    },
+});
+
 var QuestionLocation;
 (function (QuestionLocation) {
     QuestionLocation[QuestionLocation["Column"] = 0] = "Column";
@@ -279,10 +340,16 @@ var ColumnDataType;
 TableExtensions.registerExtension({
     location: "column",
     name: "drag",
-    visibleIndex: 0,
+    visibleIndex: 10,
     render: function (table, options) {
-        const btn = DocumentHelper.createElement("button", "sa-table__svg-button sa-table__drag-button");
-        btn.appendChild(DocumentHelper.createSvgElement("drag"));
+        const btn = DocumentHelper.createSvgButton("drag-24x24");
+        btn.className = "sa-table__svg-button sa-table__drag-button";
+        btn.title = localization.getString("columnReorder");
+        // const btn = DocumentHelper.createElement(
+        //   "button",
+        //   "sa-table__svg-button sa-table__drag-button"
+        // );
+        // btn.appendChild(DocumentHelper.createSvgElement("drag-24x24"));
         btn.addEventListener("mousedown", () => {
             table.enableColumnReorder();
             document.body.addEventListener("mouseup", () => {
@@ -295,12 +362,12 @@ TableExtensions.registerExtension({
 TableExtensions.registerExtension({
     location: "column",
     name: "sort",
-    visibleIndex: 1,
+    visibleIndex: 20,
     render: function (table, options) {
         const descTitle = localization.getString("descOrder");
         const ascTitle = localization.getString("ascOrder");
-        var btn = DocumentHelper.createSvgButton("sorting");
-        btn.title = "";
+        var btn = DocumentHelper.createSvgButton("reorder-24x24");
+        btn.title = localization.getString("defaultOrder");
         var direction = "asc";
         btn.onclick = () => {
             if (direction == "asc") {
@@ -322,10 +389,9 @@ TableExtensions.registerExtension({
 TableExtensions.registerExtension({
     location: "column",
     name: "hide",
-    visibleIndex: 2,
+    visibleIndex: 30,
     render: function (table, options) {
-        var btn = DocumentHelper.createSvgButton("hide");
-        btn.title = localization.getString("hideColumn");
+        var btn = DocumentHelper.createSvgButton("invisible-24x24", localization.getString("hideColumn"));
         btn.onclick = () => {
             table.setColumnVisibility(options.columnName, false);
         };
@@ -335,10 +401,9 @@ TableExtensions.registerExtension({
 TableExtensions.registerExtension({
     location: "column",
     name: "movetodetails",
-    visibleIndex: 3,
+    visibleIndex: 10,
     render: function (table, options) {
-        const button = DocumentHelper.createSvgButton("movetodetails");
-        button.title = localization.getString("moveToDetail");
+        const button = DocumentHelper.createSvgButton("movetohorizontal-24x24", localization.getString("moveToDetail"));
         button.onclick = (e) => {
             e.stopPropagation();
             table.setColumnLocation(options.columnName, QuestionLocation.Row);
@@ -347,15 +412,23 @@ TableExtensions.registerExtension({
     },
 });
 TableExtensions.registerExtension({
-    location: "column",
+    location: "columnfilter",
     name: "filter",
-    visibleIndex: 4,
+    visibleIndex: 10,
     render: function (table, options) {
-        var el = DocumentHelper.createInput("sa-table__filter", localization.getString("filterPlaceholder"));
-        el.onclick = (e) => e.stopPropagation();
-        el.onchange = (e) => {
-            table.applyColumnFilter(options.columnName, el.value);
-        };
+        const el = DocumentHelper.createTextEditor({
+            showIcon: false,
+            onchange: (val) => {
+                table.applyColumnFilter(options.columnName, val);
+            }
+        }
+        // "sa-table__filter",
+        // localization.getString("filterPlaceholder")
+        );
+        // el.onclick = (e) => e.stopPropagation();
+        // el.onchange = (e) => {
+        //   table.applyColumnFilter(options.columnName, el.value);
+        // };
         return el;
     },
 });
@@ -403,8 +476,9 @@ class Details {
         this.targetNode = targetNode;
         this.location = "details";
         this.createShowAsColumnButton = (columnName) => {
-            const button = DocumentHelper.createElement("button", "sa-table__btn sa-table__btn--gray");
-            button.appendChild(document.createTextNode(localization.getString("showAsColumn")));
+            const button = DocumentHelper.createSvgButton("movetovertical-24x24", localization.getString("showAsColumn"));
+            // "button",
+            // "sa-table__btn sa-table__btn--gray"
             button.onclick = (e) => {
                 e.stopPropagation();
                 this.table.setColumnLocation(columnName, QuestionLocation.Column);
@@ -428,16 +502,20 @@ class Details {
             var td2 = DocumentHelper.createElement("td");
             td2.textContent = this.row.getRowData()[column.name];
             if (column.dataType === ColumnDataType.Image) {
-                td2.innerHTML = "<image src='" + td2.textContent + "'/>";
+                const imageElement = DocumentHelper.createElement("img", "", {
+                    src: td2.textContent
+                });
+                td2.innerHTML = "";
+                td2.appendChild(imageElement);
             }
             var td3 = DocumentHelper.createElement("td");
             td3.appendChild(this.createShowAsColumnButton(column.name));
+            row.appendChild(td3);
             row.appendChild(td1);
             row.appendChild(td2);
-            row.appendChild(td3);
             rows.push(row);
         });
-        var row = DocumentHelper.createElement("tr", "sa-table__detail");
+        var row = DocumentHelper.createElement("tr", "sa-table__detail sa-table-detail__actions");
         var td = DocumentHelper.createElement("td", "", { colSpan: 3 });
         var extensions = new TableExtensions(this.table);
         extensions.render(td, "details", { row: this.row });
@@ -468,11 +546,9 @@ class BaseColumn {
         this.updateWhenQuestionIsReady(question, table);
     }
     updateWhenQuestionIsReady(question, table) {
-        if (!question || question.isReady)
+        if (!question)
             return;
         question.waitForQuestionIsReady().then(() => {
-            if (!table.isInitialized)
-                return;
             try {
                 table.lockStateChanged();
                 table.refresh(!table.isInitTableDataProcessing);
@@ -668,7 +744,7 @@ class FileColumn extends BaseColumn {
     getDisplayValue(data, table, options) {
         let displayValue = this.getDisplayValueCore(data);
         if (Array.isArray(displayValue)) {
-            displayValue = Table.showFilesAsImages ? createImagesContainer(displayValue).outerHTML : createLinksContainer(displayValue).outerHTML;
+            displayValue = table.getShowFilesAsImages() ? createImagesContainer(displayValue).outerHTML : createLinksContainer(displayValue).outerHTML;
         }
         return displayValue;
     }
@@ -803,15 +879,10 @@ ColumnsBuilderFactory.Instance.registerBuilderColumn("file", new FileColumnsBuil
 class MatrixDropdownColumnBuilder extends DefaultColumnsBuilder {
     buildColumns(questionBase, table) {
         const question = questionBase;
-        const isDetailRowLocation = question.rows.length > 5;
         const columns = [];
         question.rows.forEach(row => {
             question.columns.forEach(col => {
-                const column = new MatrixDropdownColumn(question, row, col, table);
-                if (isDetailRowLocation) {
-                    column.location = QuestionLocation.Row;
-                }
-                columns.push(column);
+                columns.push(new MatrixDropdownColumn(question, row, col, table));
             });
         });
         return columns;
@@ -860,6 +931,9 @@ ColumnsBuilderFactory.Instance.registerBuilderColumn("composite", new CompositeC
 class TableEvent extends EventBase {
 }
 class Table {
+    getShowFilesAsImages() {
+        return Table.showFilesAsImages;
+    }
     constructor(_survey, data, _options = {}, _columnsData = []) {
         this._survey = _survey;
         this.data = data;
@@ -868,7 +942,6 @@ class Table {
         this.haveCommercialLicense = false;
         this.currentPageSize = 5;
         this._rows = [];
-        this.isInitialized = false;
         /**
          * Sets pagination selector content.
          */
@@ -905,7 +978,6 @@ class Table {
                     : false));
     }
     initialize() {
-        this.isInitialized = false;
         this.currentPageSize = this.options.pageSize || 5;
         this.currentPageNumber = 1;
         this._columns = this.buildColumns(this._survey);
@@ -914,7 +986,6 @@ class Table {
         if (this._columnsData.length !== 0) {
             this.updateColumnsFromData(this._columnsData);
         }
-        this.isInitialized = true;
     }
     getTableData() {
         return [].concat(this.tableData || []);
@@ -1294,8 +1365,8 @@ const defaultDownloadOptions = {
 };
 const defaultOptions = {
     tabulatorOptions: {},
-    actionsColumnWidth: 60,
-    columnMinWidth: 248,
+    actionsColumnWidth: 56,
+    columnMinWidth: 384,
     downloadHiddenColumns: false,
     downloadButtons: ["csv"],
     downloadOptions: defaultDownloadOptions,
@@ -1333,6 +1404,7 @@ class Tabulator extends Table {
     }
     constructor(survey, data, options, _columnsData = []) {
         super(survey, data, options, _columnsData);
+        this._theme = new DashboardTheme();
         this.onAfterRender = new Event();
         this.COLUMN_MIN_WIDTH = 155;
         this.tabulatorTables = null;
@@ -1344,7 +1416,8 @@ class Tabulator extends Table {
         };
         this.columnMovedCallback = (column, columns) => {
             var from = this._columns.indexOf(this.getColumnByName(column.getField()));
-            var to = columns.indexOf(column) - 1;
+            const rowExtensions = TableExtensions.getExtensions("row").filter(e => e.visibleIndex >= 0);
+            var to = columns.indexOf(column) - rowExtensions.length;
             this.moveColumn(from, to);
             this.disableColumnReorder();
         };
@@ -1404,13 +1477,25 @@ class Tabulator extends Table {
             targetNode = document.getElementById(targetNode);
         }
         targetNode.className += " sa-table sa-tabulator";
+        if (!this._appliedTheme) {
+            this._appliedTheme = this.theme;
+        }
+        if (this._appliedTheme) {
+            this._appliedTheme.applyThemeToElement(targetNode);
+        }
         const columns = this.getColumns();
         const data = this.tableData;
+        var wrapper = DocumentHelper.createElement("div", "sa-tabulator__wrapper");
+        var container = DocumentHelper.createElement("div", "sa-tabulator__container");
         var header = DocumentHelper.createElement("div", "sa-tabulator__header");
+        var footer = DocumentHelper.createElement("div", "sa-tabulator__footer");
         var paginationElement = DocumentHelper.createElement("div", "sa-tabulator__pagination-container");
-        this.tableContainer = DocumentHelper.createElement("div");
-        targetNode.appendChild(header);
-        targetNode.appendChild(this.tableContainer);
+        this.tableContainer = DocumentHelper.createElement("div", "sa-tabulator__table-container");
+        container.appendChild(header);
+        container.appendChild(this.tableContainer);
+        container.appendChild(footer);
+        wrapper.appendChild(container);
+        targetNode.appendChild(wrapper);
         var config = {};
         Object.assign(config, {
             data,
@@ -1419,7 +1504,7 @@ class Tabulator extends Table {
             paginationMode: "local",
             paginationSize: this.currentPageSize,
             movableColumns: true,
-            // maxHeight: "100%",
+            maxHeight: "50vw",
             columns,
             rowFormatter: this.rowFormatter,
             paginationElement: paginationElement,
@@ -1481,37 +1566,73 @@ class Tabulator extends Table {
             this.renderResult = targetNode;
             this.afterRender(targetNode);
         });
-        DocumentHelper.createElement("div", "sa-table__header-extensions");
+        const extensionsContainer = DocumentHelper.createElement("div", "sa-table__header-extensions");
+        this.extensions.render(extensionsContainer, "header");
+        header.appendChild(extensionsContainer);
         header.appendChild(this.createDownloadsBar());
-        this.extensions.render(header, "header");
-        // header.appendChild(extensionsContainer);
-        header.appendChild(paginationElement);
+        this.extensions.render(footer, "footer");
+        footer.appendChild(paginationElement);
+        this.renderResult = targetNode;
     }
     createDownloadsBar() {
-        var createDownloadButton = (type, caption) => {
-            const btn = DocumentHelper.createElement("button", "sa-table__btn sa-table__btn--small sa-table__btn--gray", {
-                innerText: caption,
-                onclick: () => {
-                    this.download(type);
-                },
-            });
-            return btn;
+        /*
+        var createDownloadButton = (type: DownloadType, caption: string): HTMLElement => {
+          const btn = DocumentHelper.createElement(
+            "button",
+            "sa-table__btn sa-table__btn--small sa-table__btn--gray",
+            {
+              innerText: caption,
+              onclick: () => {
+                this.download(type);
+              },
+            }
+          );
+          return btn;
         };
-        var container = DocumentHelper.createElement("div", "sa-tabulator__downloads-bar");
-        this._options.downloadButtons.forEach((type) => {
-            container.appendChild(createDownloadButton(type, localization.getString(`${type}DownloadCaption`)));
+    
+        var container = DocumentHelper.createElement(
+          "div",
+          "sa-tabulator__downloads-bar"
+        );
+    
+        this._options.downloadButtons.forEach((type: DownloadType) => {
+          container.appendChild(
+            createDownloadButton(
+              type,
+              localization.getString(`${type}DownloadCaption`)
+            )
+          );
         });
         return container;
+        */
+        const values = this._options.downloadButtons.map(val => { return { value: val, text: localization.getString(`${val}DownloadCaption`) }; });
+        const exportAsAction = createActionDropdown({
+            options: values,
+            isSelected: (option) => false,
+            handler: (e) => {
+                if (!!e) {
+                    this.download(e);
+                }
+                return true;
+            },
+            title: localization.getString("exportAs"),
+            showArrow: false
+        });
+        exportAsAction.className += " sa-tabulator__downloads-bar sa-button-brand-secondary";
+        return exportAsAction;
     }
     getTitleFormatter(cell, formatterParams, onRendered, columnName) {
-        var container = DocumentHelper.createElement("div");
-        var title = DocumentHelper.createElement("span", "", {
+        var container = DocumentHelper.createElement("div", "sa-tabulator-column-header");
+        var title = DocumentHelper.createElement("span", "sa-tabulator-column-title-text", {
             innerText: cell.getValue(),
         });
-        var actions = this.getHeaderActions(columnName);
-        container.appendChild(actions);
+        const actionContainer = this.getHeaderActions(columnName);
+        const containerFilter = DocumentHelper.createElement("div", "sa-table__filter-container");
+        this.extensions.render(containerFilter, "columnfilter", { columnName: columnName });
+        container.appendChild(actionContainer);
         container.appendChild(title);
-        ["mousemove", "mousedown"].forEach(eventName => actions.addEventListener(eventName, (event) => {
+        container.appendChild(containerFilter);
+        ["mousemove", "mousedown"].forEach(eventName => actionContainer.addEventListener(eventName, (event) => {
             if (!this.isColumnReorderEnabled) {
                 event.stopPropagation();
             }
@@ -1550,20 +1671,22 @@ class Tabulator extends Table {
                 },
             };
         });
-        // const rowExtensions = TableExtensions.getExtensions("row").filter(e => e.visibleIndex >= 0);
+        const rowExtensions = TableExtensions.getExtensions("row").filter(e => e.visibleIndex >= 0);
         // const detailsExtension = TableExtensions.getExtensions("details").filter(e => e.visibleIndex >= 0);
         // const hasRowColumns = this.columns.some(c => c.location === QuestionLocation.Row);
         // if(rowExtensions.length > 1 || detailsExtension.length > 0
         //       || rowExtensions.length == 1 && (rowExtensions[0].name == "details" && hasRowColumns || rowExtensions[0].name != "details")) {
-        columns.unshift({
-            download: false,
-            resizable: false,
-            headerSort: false,
-            minWidth: this._options.actionsColumnWidth,
-            width: this._options.actionsColumnWidth,
-            tooltip: (_, cell) => {
-                return localization.getString("actionsColumn");
-            }
+        rowExtensions.forEach(ext => {
+            columns.unshift({
+                download: false,
+                resizable: false,
+                headerSort: false,
+                minWidth: this._options.actionsColumnWidth,
+                width: this._options.actionsColumnWidth,
+                tooltip: (_, cell) => {
+                    return undefined;
+                }
+            });
         });
         // }
         return columns;
@@ -1661,6 +1784,20 @@ class Tabulator extends Table {
         dataItem["surveyOriginalData"] = item;
         return dataItem;
     }
+    get theme() {
+        return this._theme;
+    }
+    set theme(theme) {
+        this._theme = theme;
+        this._appliedTheme = undefined;
+    }
+    applyTheme(theme) {
+        this.theme.setTheme(theme);
+        this._appliedTheme = this.theme;
+        if (this.renderResult) {
+            this._appliedTheme.applyThemeToElement(this.renderResult);
+        }
+    }
 }
 class TabulatorRow extends TableRow {
     constructor(table, extensionsContainer, detailsContainer, innerRow) {
@@ -1683,6 +1820,17 @@ class TabulatorRow extends TableRow {
         }
         return null;
     }
+    render() {
+        let rowExtensions = TableExtensions.getExtensions("row").filter(e => e.visibleIndex >= 0);
+        rowExtensions = this.extensions.sortExtensions(rowExtensions);
+        rowExtensions.forEach((rowExt, index) => {
+            const cellAction = this.innerRow.getCells()[index].getElement();
+            cellAction.innerHTML = "";
+            this.extensions.renderExtension(rowExt, cellAction, { row: this });
+            cellAction.classList.add("sa-tabulator-cell__action");
+            cellAction.classList.add("sa-tabulator-cell__action-" + rowExt.name.toLowerCase());
+        });
+    }
     remove() {
         this.innerRow.delete();
         super.remove();