feat(table): allow disabling column sorting through header interactions

Author: Kiarokh

etc/lime-elements.api.md

@@ -788,6 +788,7 @@ export namespace Components {
         "pageSize": number;
         "selectable": boolean;
         "selection": object[];
+        "sortableColumns": boolean;
         "sorting": ColumnSorter[];
         "totalRows": number;
     }
@@ -2011,6 +2012,7 @@ export namespace JSX {
         "pageSize"?: number;
         "selectable"?: boolean;
         "selection"?: object[];
+        "sortableColumns"?: boolean;
         "sorting"?: ColumnSorter[];
         "totalRows"?: number;
     }

src/components/table/examples/table-sorting-disabled.tsx

@@ -1,4 +1,4 @@
-import { Component, h, State } from '@stencil/core';
+import { Component, h, Host, State } from '@stencil/core';
 import { Column } from '@limetech/lime-elements';
 import { invoices, Invoice } from './invoices';
 
@@ -9,8 +9,13 @@ import { invoices, Invoice } from './invoices';
  * a column header. An arrow icon on the header visualizes the
  * direction of sorting, when a column is sorted.
  *
- * However, you can disable the sorting possibility in individual columns,
- * by setting the `headerSort` to `false`.
+ * To prevent sorting altogether, set the `sortableColumns` property on
+ * `limel-table` to `false`. If you only want to disable sorting for a
+ * specific column, set the column's `headerSort` property to `false`.
+ *
+ * The "Reference Person" column below has sorting disabled on the
+ * column definition, while the control lets you disable sorting for
+ * the whole table.
  *
  * @sourceFile invoices.ts
  */
@@ -24,18 +29,43 @@ export class TableExampleSortingDisabled {
     private tableData: Invoice[] = invoices;
 
     @State()
-    public columns: Column[] = [
+    private disableAllSorting: boolean = false;
+
+    @State()
+    private columns: Column[] = [
         { title: 'Invoice no.', field: 'invoiceNumber' },
         { title: 'Invoice Date', field: 'invoiceDate' },
         {
-            title: 'Reference Person',
+            title: 'Reference Person (no sorting)',
             field: 'referencePerson',
             headerSort: false,
         },
         { title: 'Amount', field: 'amount', horizontalAlign: 'right' },
     ];
 
     render() {
-        return <limel-table data={this.tableData} columns={this.columns} />;
+        return (
+            <Host>
+                <limel-table
+                    data={this.tableData}
+                    columns={this.columns}
+                    sortableColumns={!this.disableAllSorting}
+                />
+                <limel-example-controls
+                    style={{ '--example-controls-column-layout': 'auto-fit' }}
+                >
+                    <limel-checkbox
+                        checked={this.disableAllSorting}
+                        label="Disable sorting on all columns"
+                        onChange={this.setDisableAllSorting}
+                    />
+                </limel-example-controls>
+            </Host>
+        );
     }
+
+    private setDisableAllSorting = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.disableAllSorting = event.detail;
+    };
 }

src/components/table/table.tsx

@@ -112,6 +112,13 @@ export class Table {
     @Prop()
     public movableColumns: boolean;
 
+    /**
+     * Set to `false` to disable column sorting through header interactions.
+     * Programmatic sorting through the `sorting` prop and `sort` event remains available.
+     */
+    @Prop()
+    public sortableColumns: boolean = true;
+
     /**
      * Set to `true` to trigger loading animation
      */
@@ -362,6 +369,16 @@ export class Table {
         this.init();
     }
 
+    @Watch('sortableColumns')
+    protected updateSortableColumns() {
+        if (!this.tabulator) {
+            return;
+        }
+
+        this.tabulator.setColumns(this.getColumnDefinitions());
+        this.shouldSort = true;
+    }
+
     @Watch('sorting')
     protected updateSorting(
         newValue: ColumnSorter[],
@@ -538,7 +555,13 @@ export class Table {
     private getColumnDefinitions(): Tabulator.ColumnDefinition[] {
         const columnDefinitions = this.columns
             .map(this.addColumnAggregator)
-            .map(this.columnFactory.create);
+            .map((column) => {
+                const definition = this.columnFactory.create(column);
+                const columnSortable = column.headerSort ?? true;
+                definition.headerSort = this.sortableColumns && columnSortable;
+
+                return definition;
+            });
 
         if (this.tableSelection) {
             return this.tableSelection.getColumnDefinitions(columnDefinitions);