Migrate to the newest tabulator version

examples/tabulator.html

@@ -7,9 +7,8 @@
 
   <link rel="stylesheet" type="text/css" href="../node_modules/tabulator-tables/dist/css/tabulator.css" />
   <link rel="stylesheet" type="text/css" href="../packages/survey.analytics.tabulator.css" />
-  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
-  <script type="text/javascript"
-    src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.0.10/jspdf.plugin.autotable.min.js"></script>
+  <script src="https://unpkg.com/[email protected]/dist/jspdf.umd.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.20/jspdf.plugin.autotable.min.js"></script>
   <script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
   <script src="../node_modules/tabulator-tables/dist/js/tabulator.js"></script>
   <script src="../node_modules/survey-core/survey.core.js"></script>

package.json

@@ -59,7 +59,7 @@
     "muuri": "^0.8.0",
     "plotly.js-dist-min": "^2.28.0",
     "survey-core": "latest",
-    "tabulator-tables": "4.8.4",
+    "tabulator-tables": "6.2.5",
     "wordcloud": "^1.2.2"
   },
   "devDependencies": {
@@ -111,4 +111,4 @@
       "pre-push": "npm run pre-push-check"
     }
   }
-}
+}

src/tables/table.ts

@@ -200,8 +200,18 @@ export abstract class Table {
     this.refresh(true);
     this.onStateChanged.fire(this, this.state);
   }
-  public get isInitTableDataProcessing(): boolean { return this.isInitTableDataProcessingValue; }
+
   private isInitTableDataProcessingValue: boolean;
+  public get isInitTableDataProcessing(): boolean { return this.isInitTableDataProcessingValue; }
+  protected initTableData(data: Object[] | GetDataFn): void {
+    if(!Array.isArray(data)) {
+      this.tableData = undefined;
+      return;
+    }
+    this.isInitTableDataProcessingValue = true;
+    this.tableData = (data || []).map((item) => this.processLoadedDataItem(item));
+    this.isInitTableDataProcessingValue = false;
+  }
   protected processLoadedDataItem(item: any): any {
     var dataItem: any = {};
     this._survey.data = item;
@@ -212,18 +222,8 @@ export abstract class Table {
       }
       dataItem[column.name] = opt.displayValue;
     });
-
     return dataItem;
   }
-  protected initTableData(data: Array<any> | GetDataFn): void {
-    if(!Array.isArray(data)) {
-      this.tableData = undefined;
-      return;
-    }
-    this.isInitTableDataProcessingValue = true;
-    this.tableData = (data || []).map((item) => this.processLoadedDataItem(item));
-    this.isInitTableDataProcessingValue = false;
-  }
 
   public moveColumn(from: number, to: number) {
     var deletedColumns = this._columns.splice(from, 1);
@@ -483,6 +483,7 @@ export abstract class TableRow {
 
   public remove(): void {
     this.table.removeRow(this);
+    this.destroy();
   }
 
   private onColumnLocationChangedCallback = () => {

src/tables/tabulator.scss

@@ -195,13 +195,13 @@ $root-font-size: var(--root-font-size, 14px);
       padding-right: 0;
     }
 
-    .tabulator-tableHolder::-webkit-scrollbar {
+    .tabulator-tableholder::-webkit-scrollbar {
       height: 10px;
       width: 10px;
       background-color: $scroll-color;
     }
 
-    .tabulator-tableHolder::-webkit-scrollbar-thumb {
+    .tabulator-tableholder::-webkit-scrollbar-thumb {
       background: $main-color;
     }
   }

src/tables/tabulator.ts

@@ -15,11 +15,11 @@ if (!!document) {
   templateHolder.innerHTML = svgTemplate.default;
   document.head.appendChild(templateHolder);
 }
-
 interface ITabulatorOptions extends ITableOptions {
   tabulatorOptions?: any;
   downloadHiddenColumns?: boolean;
   actionsColumnWidth?: number;
+  columnMinWidth: number;
   downloadButtons?: Array<string>;
   downloadOptions?: { [type: string]: any };
   /*
@@ -41,7 +41,7 @@ export const defaultDownloadOptions = {
         styles: {
           font: "custom_helvetica",
           fontStyle: "normal",
-          cellWidth: 1,
+          minCellWidth: 100,
         },
         margin: { top: 10, right: 10, bottom: 10, left: 10 },
       };
@@ -56,6 +56,7 @@ export const defaultOptions: ITabulatorOptions = {
   actionsColumnWidth: 60,
   downloadHiddenColumns: false,
   downloadButtons: ["csv"],
+  columnMinWidth: 248,
   downloadOptions: defaultDownloadOptions,
   onDownloadCallbacks: {
     pdf: (tabulator: Tabulator, options) => {
@@ -96,7 +97,7 @@ export class Tabulator extends Table {
     if(!!window && window["XLSX"] !== undefined && defaultOptions.downloadButtons.indexOf("xlsx") === -1) {
       defaultOptions.downloadButtons.unshift("xlsx");
     }
-    if(!!window && window["jsPDF"] !== undefined && defaultOptions.downloadButtons.indexOf("pdf") === -1) {
+    if(!!window && window["jspdf"] !== undefined && defaultOptions.downloadButtons.indexOf("pdf") === -1) {
       defaultOptions.downloadButtons.unshift("pdf");
     }
     this._options = Object.assign({}, defaultOptions, options);
@@ -140,14 +141,17 @@ export class Tabulator extends Table {
         columns,
         rowFormatter: this.rowFormatter,
         paginationElement: paginationElement,
-        columnMoved: this.columnMovedCallback,
-        columnResized: this.columnResizedCallback,
         tooltipsHeader: true,
-        tooltips: (cell: any) => cell.getValue(),
         downloadRowRange: "all",
-        columnMinWidth: 248,
         paginationButtonCount: 3,
         nestedFieldSeparator: false,
+        columnDefaults: {
+          tooltip: (_: MouseEvent, cell: any) => {
+            const span = document.createElement("span");
+            span.innerText = cell.getValue();
+            return span.innerHTML;
+          }
+        }
       },
       this._options.tabulatorOptions
     );
@@ -183,6 +187,8 @@ export class Tabulator extends Table {
     }
 
     this.tabulatorTables = new TabulatorTables(this.tableContainer, config);
+    this.tabulatorTables.on("columnResized", this.columnResizedCallback);
+    this.tabulatorTables.on("columnMoved", this.columnMovedCallback);
 
     const extensionsContainer = DocumentHelper.createElement(
       "div",
@@ -244,18 +250,20 @@ export class Tabulator extends Table {
   };
 
   private rowFormatter = (row: any): void => {
-    var tableRow = new TabulatorRow(
+    const originalData = this.data[this.tableData.indexOf(row.getData())];
+
+    const tableRow = new TabulatorRow(
       this,
       row.getCells()[0].getElement(),
       row.getElement(),
-      row
+      row,
+      originalData
     );
     tableRow.onToggleDetails.add(() => {
       row.normalizeHeight();
       this.layout();
     });
     tableRow.render();
-
     this._rows.push(tableRow);
   };
   private accessorDownload = (cellData: any, rowData: any, reason: string, _: any, columnComponent: any, rowComponent: any) => {
@@ -264,7 +272,7 @@ export class Tabulator extends Table {
       const questionName = columnDefinition.field;
       const column = this.columns.filter(col => col.name === questionName)[0];
       if (!!column && rowComponent) {
-        const dataRow = this.data[rowComponent.getPosition()];
+        const dataRow = rowComponent.getData().surveyOriginalData;
         const dataCell = dataRow[questionName];
         if (column.dataType === ColumnDataType.Image) {
           return questionName;
@@ -332,8 +340,10 @@ export class Tabulator extends Table {
         widthShrink: !column.width ? 1 : 0,
         visible: this.isColumnVisible(column),
         headerSort: false,
+        minWidth: this._options.columnMinWidth,
         download: this.options.downloadHiddenColumns ? true : undefined,
         formatter,
+        headerTooltip:true,
         accessorDownload: this.accessorDownload,
         titleFormatter: (cell: any, formatterParams: any, onRendered: any) => {
           return this.getTitleFormatter(
@@ -459,14 +469,20 @@ export class Tabulator extends Table {
   public layout(hard: boolean = false): void {
     this.tabulatorTables.redraw(hard);
   }
+  protected processLoadedDataItem(item: any) {
+    const dataItem = super.processLoadedDataItem(item);
+    dataItem["surveyOriginalData"] = item;
+    return dataItem;
+  }
 }
 
 export class TabulatorRow extends TableRow {
   constructor(
     protected table: Table,
     protected extensionsContainer: HTMLElement,
     protected detailsContainer: HTMLElement,
-    protected innerRow: any
+    protected innerRow: any,
+    protected originalData: any
   ) {
     super(table, extensionsContainer, detailsContainer);
   }
@@ -480,7 +496,11 @@ export class TabulatorRow extends TableRow {
   }
 
   public getDataPosition(): number {
-    return this.innerRow.getPosition();
+    const data = this.table.getData();
+    if(Array.isArray(data)) {
+      return data.indexOf(this.innerRow.getData().surveyOriginalData);
+    }
+    return null;
   }
 
   public remove(): void {

testCafe/tabulator/basetests.js

@@ -21,13 +21,14 @@ fixture`basetests`.page`${url}`.beforeEach(async (t) => {
 test("check xss in header and cell", async (t) => {
   const xssText = `Which of the following best describes you or your organization?<button id='xyz' onclick='alert();'>hello</button><img src='dymmy' onerror='alert("xss");'>`;
   const headerSelector = Selector(
-    ".tabulator-headers div:nth-child(6) span"
+    ".tabulator-headers div:nth-of-type(6) span"
   );
   const cellSelector = Selector(
-    ".tabulator-row div:nth-child(6)"
+    ".tabulator-row div:nth-of-type(6)"
   );
 
   await t
+    .debug()
     .expect(headerSelector.innerText)
     .eql(xssText)
     .expect(cellSelector.innerText)

testCafe/tabulator/columnactions.js

@@ -70,7 +70,7 @@ test('Check show/hide actions', async t => {
   await t
     .expect(Selector('#tabulatorContainer div').withText('Question 1').visible).eql(true)
     .expect(getColumnsVisibilityArray()).eql([true, true, true])
-    .click('#tabulatorContainer .tabulator-col[title="Question 1"] button[title="Hide column"]')
+    .click('#tabulatorContainer .tabulator-col[tabulator-field="bool"] button[title="Hide column"]')
     .expect(Selector('#tabulatorContainer div').withText('Question 1').nth(3).visible).eql(false)
     .expect(getColumnsVisibilityArray()).eql([false, true, true])
     .click('#tabulatorContainer .sa-table__show-column.sa-table__header-extension')
@@ -85,18 +85,18 @@ test('Check move to details', async t => {
   });
 
   await t
-    .expect(Selector('#tabulatorContainer .tabulator-col[title="Question 1"] ').visible).eql(true)
+    .expect(Selector('#tabulatorContainer .tabulator-col[tabulator-field="bool"] ').visible).eql(true)
     .expect(getColumnsLocationsArray()).eql([0, 0, 0])
     .click('#tabulatorContainer .tabulator-row:nth-child(1) button[title="Show minor columns"]')
     .expect(Selector('#tabulatorContainer td').withText('Question 1').exists).eql(false)
-    .click('#tabulatorContainer .tabulator-col[title="Question 1"] button[title="Move to Detail"]')
-    .expect(Selector('#tabulatorContainer .tabulator-col[title="Question 1"] ').visible).eql(false)
+    .click('#tabulatorContainer .tabulator-col[tabulator-field="bool"] button[title="Move to Detail"]')
+    .expect(Selector('#tabulatorContainer .tabulator-col[tabulator-field="bool"] ').visible).eql(false)
     .click('#tabulatorContainer .tabulator-row:nth-child(1) button[title="Show minor columns"]')
     .expect(Selector('#tabulatorContainer td').withText('Question 1').visible).eql(true)
     .expect(Selector('#tabulatorContainer td').withText('Yes').visible).eql(true)
     .expect(getColumnsLocationsArray()).eql([1, 0, 0])
     .click(Selector('#tabulatorContainer button').withText('Show as Column'))
-    .expect(Selector('#tabulatorContainer .tabulator-col[title="Question 1"] ').visible).eql(true)
+    .expect(Selector('#tabulatorContainer .tabulator-col[tabulator-field="bool"] ').visible).eql(true)
     .expect(getColumnsLocationsArray()).eql([0, 0, 0])
     .click('#tabulatorContainer .tabulator-row:nth-child(1) button[title="Show minor columns"]')
     .expect(Selector('#tabulatorContainer td').withText('Question 1').exists).eql(false);
@@ -117,7 +117,7 @@ test('Check columns drag and drop', async t => {
   });
 
   await t
-    .drag('#tabulatorContainer div.tabulator-col[title="Question 1"] button.sa-table__drag-button', 1200, 120, {
+    .drag('#tabulatorContainer div.tabulator-col[tabulator-field="bool"] button.sa-table__drag-button', 1200, 120, {
       offsetX: 5,
       offsetY: 10,
       speed: 0.01
@@ -132,9 +132,9 @@ test('Check public/private actions', async t => {
   });
 
   await t
-    .click('#tabulatorContainer .tabulator-col[title="Question 2"] button.sa-table__svg-button[title="Make column private"]')
+    .click('#tabulatorContainer .tabulator-col[tabulator-field="bool2"] button.sa-table__svg-button[title="Make column private"]')
     .expect(getPublicitArrayInState()).eql([true, false, true])
-    .click('#tabulatorContainer .tabulator-col[title="Question 2"] button.sa-table__svg-button[title="Make column public"]')
+    .click('#tabulatorContainer .tabulator-col[tabulator-field="bool2"] button.sa-table__svg-button[title="Make column public"]')
     .expect(getPublicitArrayInState()).eql([true, true, true]);
 });