Fixed #442 - Tabulator - Disable a column header sorting option

src/tables/extensions/tableextensions.ts

@@ -1,6 +1,6 @@
 import { Table } from "../table";
 
-interface ITableExtension {
+export interface ITableExtension {
   location: string;
   name: string;
   visibleIndex: number;
@@ -18,7 +18,7 @@ export class TableExtensions {
     if (!!extensions) {
       extensions = this.sortExtensions(extensions);
       extensions.forEach((extension) => {
-        if (!!extension.render) {
+        if (!!extension.render && this.table.allowExtension(extension)) {
           var action = extension.render(this.table, options);
           if (!!action) {
             targetNode.appendChild(action);

src/tables/table.ts

@@ -9,7 +9,7 @@ import {
 } from "./config";
 import { Details } from "./extensions/detailsextensions";
 import { localization } from "../localizationManager";
-import { TableExtensions } from "./extensions/tableextensions";
+import { ITableExtension, TableExtensions } from "./extensions/tableextensions";
 import { createCommercialLicenseLink, createImagesContainer, createLinksContainer, DocumentHelper } from "../utils";
 import { ColumnsBuilderFactory } from "./columnbuilder";
 import { DefaultColumn } from "./columns";
@@ -391,6 +391,17 @@ export abstract class Table {
    * Fires when permissions changed
    */
   public onPermissionsChangedCallback: any;
+
+  protected get allowSorting(): boolean {
+    return this.options.allowSorting === undefined || this.options.allowSorting === true;
+  }
+
+  public allowExtension(extension: ITableExtension): boolean {
+    if(extension.location === "column" && extension.name === "sort") {
+      return this.allowSorting;
+    }
+    return true;
+  }
 }
 
 export abstract class TableRow {

src/tables/tabulator.ts

@@ -329,8 +329,8 @@ export class Tabulator extends Table {
         width: column.width,
         widthShrink: !column.width ? 1 : 0,
         visible: this.isColumnVisible(column),
-        headerSort: false,
-        download: this._options.downloadHiddenColumns ? true : undefined,
+        headerSort: this.allowSorting,
+        download: this.options.downloadHiddenColumns ? true : undefined,
         formatter,
         accessorDownload: this.accessorDownload,
         titleFormatter: (cell: any, formatterParams: any, onRendered: any) => {

tests/tables/tabulator.test.ts

@@ -1,5 +1,7 @@
 import { SurveyModel } from "survey-core";
 import { Tabulator } from "../../src/tables/tabulator";
+import { TableExtensions } from "../../src/tables/extensions/tableextensions";
+import { Table } from "../../src/tables/table";
 
 jest.mock("tabulator-tables", () => {
   return { default: jest.requireActual("tabulator-tables") };
@@ -39,7 +41,7 @@ test("getColumns method", () => {
   const columns = <any>tabulator["getColumns"]();
 
   expect(JSON.stringify(columns)).toBe(
-    '[{"field":"","title":"","download":false,"resizable":false,"minWidth":60,"width":60},{"field":"car","title":"What car are you driving?","widthShrink":1,"visible":true,"headerSort":false,"formatter":"plaintext"},{"field":"photo","title":"photo","widthShrink":1,"visible":true,"headerSort":false,"formatter":"html"}]'
+    '[{"field":"","title":"","download":false,"resizable":false,"minWidth":60,"width":60},{"field":"car","title":"What car are you driving?","widthShrink":1,"visible":true,"headerSort":true,"formatter":"plaintext"},{"field":"photo","title":"photo","widthShrink":1,"visible":true,"headerSort":true,"formatter":"html"}]'
   );
 });
 
@@ -93,7 +95,7 @@ test("check that tabulator takes into account column's width", () => {
       isPublic: true,
       location: 0,
     },
-  ];
+  ] as any;
   var tabulatorColumns = tabulator.getColumns();
   expect(tabulatorColumns[1].width).toBe(50);
   expect(tabulatorColumns[1].widthShrink).toBe(0);
@@ -112,7 +114,7 @@ test("check that tabulator take into account column's width after layout (check
       isPublic: true,
       location: 0,
     },
-  ];
+  ] as any;
   tabulator.render(document.createElement("table"));
   var columnDefinitions = tabulator.tabulatorTables.getColumnDefinitions();
   expect(columnDefinitions[1].width).toBe(undefined);
@@ -142,7 +144,7 @@ test("check that tabulator take into account downloadHiddenColumns option", () =
       isPublic: true,
       location: 0,
     },
-  ];
+  ] as any;
 
   tabulator.render(document.createElement("table"));
   expect(tabulator.tabulatorTables.getColumnDefinitions()[1].download).toBe(
@@ -184,13 +186,13 @@ test("useNamesAsTitles option", () => {
   let tabulator = new Tabulator(survey, [], null);
   let columns = <any>tabulator.getColumns();
   expect(JSON.stringify(columns)).toBe(
-    "[{\"field\":\"\",\"title\":\"\",\"download\":false,\"resizable\":false,\"minWidth\":60,\"width\":60},{\"field\":\"str\",\"title\":\"String\",\"widthShrink\":1,\"visible\":true,\"headerSort\":false,\"formatter\":\"plaintext\"}]"
+    "[{\"field\":\"\",\"title\":\"\",\"download\":false,\"resizable\":false,\"minWidth\":60,\"width\":60},{\"field\":\"str\",\"title\":\"String\",\"widthShrink\":1,\"visible\":true,\"headerSort\":true,\"formatter\":\"plaintext\"}]"
   );
 
   tabulator = new Tabulator(survey, [], <any>{ useNamesAsTitles: true });
   columns = <any>tabulator.getColumns();
   expect(JSON.stringify(columns)).toBe(
-    "[{\"field\":\"\",\"title\":\"\",\"download\":false,\"resizable\":false,\"minWidth\":60,\"width\":60},{\"field\":\"str\",\"title\":\"str\",\"widthShrink\":1,\"visible\":true,\"headerSort\":false,\"formatter\":\"plaintext\"}]"
+    "[{\"field\":\"\",\"title\":\"\",\"download\":false,\"resizable\":false,\"minWidth\":60,\"width\":60},{\"field\":\"str\",\"title\":\"str\",\"widthShrink\":1,\"visible\":true,\"headerSort\":true,\"formatter\":\"plaintext\"}]"
   );
 });
 
@@ -273,4 +275,34 @@ test("image and file export formatter", () => {
 
   const imageCell = accessorDownload(undefined, undefined, undefined, undefined, { getDefinition: () => ({ field: "signature" }) }, { getPosition: () => 0 });
   expect(imageCell).toBe("signature");
+});
+
+test("Tabulator allowSorting option", () => {
+  TableExtensions.registerExtension({
+    location: "column",
+    name: "sort",
+    visibleIndex: 1,
+    render: function (table: Table, options: any) {
+      const ext = document.createElement("div");
+      ext.className = "sorting";
+      return ext;
+    },
+  } as any);
+  let tabulator = new Tabulator(new SurveyModel({ questions: [{ type: "text", name: "q1" }] }), [], undefined as any);
+  let tableExtensions = new TableExtensions(tabulator);
+
+  let tableNode = document.createElement("div");
+  tableExtensions.render(tableNode, "column");
+
+  expect(tableNode.innerHTML).toContain("sorting");
+
+  tabulator = new Tabulator(new SurveyModel({ questions: [{ type: "text", name: "q1" }] }), [], { allowSorting: false } as any);
+  tableExtensions = new TableExtensions(tabulator);
+
+  tableNode = document.createElement("div");
+  tableExtensions.render(tableNode, "column");
+
+  expect(tableNode.innerHTML.indexOf("sorting")).toBe(-1);
+
+  TableExtensions.unregisterExtension("column", "sort");
 });