Allow to disable sort and filter feature for each column of a table

src/app/access/views/access/access.view.ts

@@ -51,10 +51,38 @@ export class AccessView extends BaseDirective implements OnInit {
 
     // TODO Use typeof to get interface propertie name
     this.columns = [
-      {field: "organizationalUnit", header: TRANSLATE("access.table.header.organizationalUnit"), type: FieldTypeEnum.string, order: 0},
-      {field: "title", header: TRANSLATE("access.table.header.title"), type: FieldTypeEnum.string, order: 0},
-      {field: "yearPublicationDate", header: TRANSLATE("access.table.header.yearPublicationDate"), type: FieldTypeEnum.number, order: 0},
-      {field: "accessLevel", header: TRANSLATE("access.table.header.accessLevel"), type: FieldTypeEnum.string, order: 0},
+      {
+        field: "organizationalUnit",
+        header: TRANSLATE("access.table.header.organizationalUnit"),
+        type: FieldTypeEnum.string,
+        order: 0,
+        isSortable: false,
+        isFilterable: false,
+      },
+      {
+        field: "title",
+        header: TRANSLATE("access.table.header.title"),
+        type: FieldTypeEnum.string,
+        order: 0,
+        isSortable: false,
+        isFilterable: false,
+      },
+      {
+        field: "yearPublicationDate",
+        header: TRANSLATE("access.table.header.yearPublicationDate"),
+        type: FieldTypeEnum.number,
+        order: 0,
+        isSortable: false,
+        isFilterable: false,
+      },
+      {
+        field: "accessLevel",
+        header: TRANSLATE("access.table.header.accessLevel"),
+        type: FieldTypeEnum.string,
+        order: 0,
+        isSortable: false,
+        isFilterable: false,
+      },
     ];
 
     this.addToSubscription(

src/app/deposit/views/list/list.view.ts

@@ -25,11 +25,46 @@ export class ListView extends AbstractListView<DepositsModel, DepositStateModel>
   defineColumns() {
     // TODO Use typeof to get interface propertie name
     this.columns = [
-      {field: "title", header: TRANSLATE("deposit.table.header.title"), type: FieldTypeEnum.string, order: 0},
-      {field: "publicationDate", header: TRANSLATE("deposit.table.header.publicationDate"), type: FieldTypeEnum.date, order: 0},
-      {field: "creation.when", header: TRANSLATE("deposit.table.header.creation.when"), type: FieldTypeEnum.datetime, order: 0},
-      {field: "lastUpdate.when", header: TRANSLATE("deposit.table.header.lastUpdate.when"), type: FieldTypeEnum.datetime, order: 0},
-      {field: "status", header: TRANSLATE("deposit.table.header.status"), type: FieldTypeEnum.string, order: 0},
+      {
+        field: "title",
+        header: TRANSLATE("deposit.table.header.title"),
+        type: FieldTypeEnum.string,
+        order: 0,
+        isFilterable: true,
+        isSortable: true,
+      },
+      {
+        field: "publicationDate",
+        header: TRANSLATE("deposit.table.header.publicationDate"),
+        type: FieldTypeEnum.date,
+        order: 0,
+        isFilterable: true,
+        isSortable: true,
+      },
+      {
+        field: "creation.when",
+        header: TRANSLATE("deposit.table.header.creation.when"),
+        type: FieldTypeEnum.datetime,
+        order: 0,
+        isFilterable: true,
+        isSortable: true,
+      },
+      {
+        field: "lastUpdate.when",
+        header: TRANSLATE("deposit.table.header.lastUpdate.when"),
+        type: FieldTypeEnum.datetime,
+        order: 0,
+        isFilterable: true,
+        isSortable: true,
+      },
+      {
+        field: "status",
+        header: TRANSLATE("deposit.table.header.status"),
+        type: FieldTypeEnum.string,
+        order: 0,
+        isFilterable: true,
+        isSortable: true,
+      },
     ];
   }
 }

src/app/organizational-unit/views/list/list.view.ts

 import {ChangeDetectionStrategy, Component} from "@angular/core";
 import {OrganizationalUnitsModel} from "@app/generated-api";
-import {OrganizationalUnitStateModel} from "@app/shared/organizational-unit.state";
 import {FieldTypeEnum} from "@app/shared/enums/field-type.enum";
 import {StateEnum} from "@app/shared/enums/state.enum";
+import {OrganizationalUnitStateModel} from "@app/shared/organizational-unit.state";
 import {TRANSLATE} from "@app/shared/utils/translate.util";
 import {AbstractListView} from "@app/shared/views/abstract-list/abstract-list.view";
 import {TranslateService} from "@ngx-translate/core";
@@ -27,17 +27,27 @@ export class ListView extends AbstractListView<OrganizationalUnitsModel, Organiz
     this.columns = [
       {
         field: "name",
-        header: TRANSLATE("organizationalUnit.table.header.name"), type: FieldTypeEnum.string, order: -1,
+        header: TRANSLATE("organizationalUnit.table.header.name"),
+        type: FieldTypeEnum.string,
+        order: -1,
+        isFilterable: true,
+        isSortable: true,
       },
       {
         field: "description",
-        header: TRANSLATE("organizationalUnit.table.header.description"), type: FieldTypeEnum.string, order: 0,
+        header: TRANSLATE("organizationalUnit.table.header.description"),
+        type: FieldTypeEnum.string,
+        order: 0,
+        isFilterable: true,
+        isSortable: true,
       },
       {
         field: "creation.when",
         header: TRANSLATE("organizationalUnit.table.header.creation.when"),
         type: FieldTypeEnum.datetime,
         order: 0,
+        isFilterable: true,
+        isSortable: true,
       },
     ];
   }

src/app/shared/components/data-table/data-table.component.html

@@ -11,26 +11,30 @@
     <ng-template pTemplate="header" let-columns>
       <tr>
         <th *ngFor="let col of columns"
-            [pSortableColumn]="col.field">
+            [pSortableColumn]="col.isSortable ? col.field : false"
+            [class.sortable-column]="col.isSortable"
+        >
           {{col.header | translate}}
-          <p-sortIcon [field]="col.field"></p-sortIcon>
+          <p-sortIcon *ngIf="col.isSortable" [field]="col.field"></p-sortIcon>
         </th>
       </tr>
       <tr>
         <th *ngFor="let col of columns" [ngSwitch]="col.type" class="data-table-filter">
-          <div *ngSwitchCase="fieldTypeString" class="filter-text">
-<!--            <mat-form-field style="width: 100%" [floatLabel]="'never'">-->
-<!--              <input #filter matInput (keyup)="onValueChange(col, $event.target.value)" [value]="getValue(col.field)">-->
-<!--              <button mat-button *ngIf="filter.value" matSuffix mat-icon-button aria-label="Clear" (click)="filter.value='';onValueChange(col, filter.value)">-->
-<!--                <fa-icon matSuffix icon="times"></fa-icon>-->
-<!--              </button>-->
-<!--            </mat-form-field>-->
+          <ng-container *ngIf="col.isFilterable">
+            <div *ngSwitchCase="fieldTypeString" class="filter-text">
+              <!--            <mat-form-field style="width: 100%" [floatLabel]="'never'">-->
+              <!--              <input #filter matInput (keyup)="onValueChange(col, $event.target.value)" [value]="getValue(col.field)">-->
+              <!--              <button mat-button *ngIf="filter.value" matSuffix mat-icon-button aria-label="Clear" (click)="filter.value='';onValueChange(col, filter.value)">-->
+              <!--                <fa-icon matSuffix icon="times"></fa-icon>-->
+              <!--              </button>-->
+              <!--            </mat-form-field>-->
 
-              <input type="text "#filter (keyup)="onValueChange(col, $event.target.value)" [value]="getValue(col.field)">
+              <input type="text " #filter (keyup)="onValueChange(col, $event.target.value)" [value]="getValue(col.field)">
               <button mat-button *ngIf="filter.value" matSuffix mat-icon-button aria-label="Clear" (click)="filter.value='';onValueChange(col, filter.value)">
                 <fa-icon matSuffix icon="times"></fa-icon>
               </button>
-          </div>
+            </div>
+          </ng-container>
         </th>
       </tr>
     </ng-template>

src/app/shared/components/data-table/data-table.component.scss

@@ -78,7 +78,15 @@ $inputGroupTextColor: #444444;
   .ui-table .ui-sortable-column:not(.ui-state-highlight):hover {
     background-color: $headerBgColor !important;
     color: $headerTextColor !important;
-    text-decoration: underline;
+    cursor: default;
+  }
+
+  .sortable-column {
+    cursor: pointer !important;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
   .ui-table .ui-sortable-column:not(.ui-state-highlight):hover .ui-sortable-column-icon {

src/app/shared/models/data-table-columns.model.ts

@@ -5,4 +5,6 @@ export interface DataTableColumnsModel {
   header: string;
   type?: FieldTypeEnum;
   order: number;
+  isSortable?: boolean;
+  isFilterable?: boolean;
 }