From 4add293186e4abc34d79020568ee75f7dd560110 Mon Sep 17 00:00:00 2001
From: Sven Heidemann <sven.heidemann@sh-edraft.de>
Date: Mon, 14 Aug 2023 23:33:02 +0200
Subject: [PATCH 1/3] Added base logic to hide columns & added hide columns to
 levels #79

---
 kdb-web/package.json                          |  2 +-
 .../src/app/base/component-with-table.spec.ts |  7 ++
 kdb-web/src/app/base/component-with-table.ts  | 39 ++++++++++
 .../src/app/modules/shared/shared.module.ts   | 74 ++++++++++---------
 .../components/config/config.component.ts     |  2 +-
 .../components/levels/levels.component.html   | 44 ++++++-----
 .../components/levels/levels.component.ts     | 12 +--
 kdb-web/src/assets/i18n/de.json               |  1 +
 kdb-web/src/assets/i18n/en.json               |  1 +
 kdb-web/src/assets/version.json               |  2 +-
 kdb-web/src/styles.scss                       | 17 ++++-
 .../src/styles/themes/default-dark-theme.scss | 53 ++++++++++++-
 .../styles/themes/default-light-theme.scss    | 53 ++++++++++++-
 .../styles/themes/sh-edraft-dark-theme.scss   | 53 ++++++++++++-
 .../styles/themes/sh-edraft-light-theme.scss  | 53 ++++++++++++-
 15 files changed, 347 insertions(+), 66 deletions(-)
 create mode 100644 kdb-web/src/app/base/component-with-table.spec.ts
 create mode 100644 kdb-web/src/app/base/component-with-table.ts

diff --git a/kdb-web/package.json b/kdb-web/package.json
index fc35367e..bfe9eed3 100644
--- a/kdb-web/package.json
+++ b/kdb-web/package.json
@@ -1,6 +1,6 @@
 {
     "name": "kdb-web",
-    "version": "1.1.0",
+    "version": "1.1.dev79_hide_table_attributes",
     "scripts": {
         "ng": "ng",
         "update-version": "ts-node-esm update-version.ts",
diff --git a/kdb-web/src/app/base/component-with-table.spec.ts b/kdb-web/src/app/base/component-with-table.spec.ts
new file mode 100644
index 00000000..5b08b905
--- /dev/null
+++ b/kdb-web/src/app/base/component-with-table.spec.ts
@@ -0,0 +1,7 @@
+import { ComponentWithTable } from './component-with-table';
+
+describe('ComponentWithTable', () => {
+  it('should create an instance', () => {
+    expect(new ComponentWithTable()).toBeTruthy();
+  });
+});
diff --git a/kdb-web/src/app/base/component-with-table.ts b/kdb-web/src/app/base/component-with-table.ts
new file mode 100644
index 00000000..97828341
--- /dev/null
+++ b/kdb-web/src/app/base/component-with-table.ts
@@ -0,0 +1,39 @@
+interface Column {
+  key: string;
+  name: string;
+}
+
+export class ComponentWithTable {
+
+  private _hiddenColumns: Column[] = [];
+  set hiddenColumns(value: Column[]) {
+    this._hiddenColumns = value;
+    localStorage.setItem("hiddenColumns", JSON.stringify(value));
+  }
+
+  get hiddenColumns(): Column[] {
+    return this._hiddenColumns;
+  }
+
+  private name: string = "";
+  public columns: Column[] = [];
+
+  constructor(
+    name: string,
+    columns: string[]
+  ) {
+    this.name = name;
+    this.columns = columns.map(column => {
+      return { key: this.getKey(column), name: column };
+    });
+    this._hiddenColumns = JSON.parse(localStorage.getItem("hiddenColumns") ?? "");
+  }
+
+  private getKey(column: string): string {
+    return `${this.name}_${column}`;
+  }
+
+  public isColumnVisible(column: string): boolean {
+    return !this._hiddenColumns.map(column => column.key).includes(this.getKey(column));
+  }
+}
diff --git a/kdb-web/src/app/modules/shared/shared.module.ts b/kdb-web/src/app/modules/shared/shared.module.ts
index b92aa75b..68eb5b71 100644
--- a/kdb-web/src/app/modules/shared/shared.module.ts
+++ b/kdb-web/src/app/modules/shared/shared.module.ts
@@ -23,9 +23,10 @@ import { PanelModule } from "primeng/panel";
 import { InputNumberModule } from "primeng/inputnumber";
 import { ImageModule } from "primeng/image";
 import { SidebarModule } from "primeng/sidebar";
-import { HistoryBtnComponent } from './components/history-btn/history-btn.component';
-import { DataViewModule, DataViewLayoutOptions } from 'primeng/dataview';
-import { ConfigListComponent } from './components/config-list/config-list.component';
+import { HistoryBtnComponent } from "./components/history-btn/history-btn.component";
+import { DataViewModule, DataViewLayoutOptions } from "primeng/dataview";
+import { ConfigListComponent } from "./components/config-list/config-list.component";
+import { MultiSelectModule } from "primeng/multiselect";
 
 
 @NgModule({
@@ -34,7 +35,7 @@ import { ConfigListComponent } from './components/config-list/config-list.compon
     IpAddressPipe,
     BoolPipe,
     HistoryBtnComponent,
-    ConfigListComponent,
+    ConfigListComponent
   ],
   imports: [
     CommonModule,
@@ -60,36 +61,39 @@ import { ConfigListComponent } from './components/config-list/config-list.compon
     ImageModule,
     SidebarModule,
     DataViewModule,
+    MultiSelectModule
   ],
-    exports: [
-        ButtonModule,
-        PasswordModule,
-        MenuModule,
-        DialogModule,
-        ProgressSpinnerModule,
-        HttpClientModule,
-        FormsModule,
-        ReactiveFormsModule,
-        ToastModule,
-        ConfirmDialogModule,
-        TableModule,
-        InputTextModule,
-        CheckboxModule,
-        DropdownModule,
-        TranslateModule,
-        DynamicDialogModule,
-        PanelMenuModule,
-        PanelModule,
-        AuthRolePipe,
-        IpAddressPipe,
-        BoolPipe,
-        InputNumberModule,
-        ImageModule,
-        SidebarModule,
-        HistoryBtnComponent,
-        DataViewModule,
-        DataViewLayoutOptions,
-        ConfigListComponent
-    ]
+  exports: [
+    ButtonModule,
+    PasswordModule,
+    MenuModule,
+    DialogModule,
+    ProgressSpinnerModule,
+    HttpClientModule,
+    FormsModule,
+    ReactiveFormsModule,
+    ToastModule,
+    ConfirmDialogModule,
+    TableModule,
+    InputTextModule,
+    CheckboxModule,
+    DropdownModule,
+    TranslateModule,
+    DynamicDialogModule,
+    PanelMenuModule,
+    PanelModule,
+    AuthRolePipe,
+    IpAddressPipe,
+    BoolPipe,
+    InputNumberModule,
+    ImageModule,
+    SidebarModule,
+    HistoryBtnComponent,
+    DataViewModule,
+    DataViewLayoutOptions,
+    ConfigListComponent,
+    MultiSelectModule
+  ]
 })
-export class SharedModule { }
+export class SharedModule {
+}
diff --git a/kdb-web/src/app/modules/view/server/config/components/config/config.component.ts b/kdb-web/src/app/modules/view/server/config/components/config/config.component.ts
index 0769ea57..7e2a0f1d 100644
--- a/kdb-web/src/app/modules/view/server/config/components/config/config.component.ts
+++ b/kdb-web/src/app/modules/view/server/config/components/config/config.component.ts
@@ -110,7 +110,7 @@ export class ConfigComponent implements OnInit {
       return throwError(err);
     })).subscribe(result => {
       this.spinner.hideSpinner();
-      this.toastService.success(this.translate.instant("view.server.config.message.server_config_create"), this.translate.instant("view.server.config.message.server_config_create_d"));
+      this.toastService.success(this.translate.instant("view.server.config.message.server#_config_create"), this.translate.instant("view.server.config.message.server_config_create_d"));
     });
   }
 }
diff --git a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html
index 0c8b1945..114143e0 100644
--- a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html
+++ b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html
@@ -9,11 +9,21 @@
 
       <ng-template pTemplate="caption">
         <div class="table-caption">
-          <div class="table-caption-text">
-            <ng-container *ngIf="!loading">{{levels.length}} {{'common.of' | translate}}
-              {{dt.totalRecords}}
-            </ng-container>
-            {{'view.server.levels.levels' | translate}}
+          <div class="table-caption-table-info">
+            <div class="table-caption-text">
+              <ng-container *ngIf="!loading">{{levels.length}} {{'common.of' | translate}}
+                {{dt.totalRecords}}
+              </ng-container>
+              {{'view.server.levels.levels' | translate}}
+            </div>
+
+            <div class="table-caption-column-select">
+              <p-multiSelect [options]="columns" [(ngModel)]="hiddenColumns" optionLabel="name" placeholder="{{'common.hidden_columns' | translate}}" [filter]=false>
+                <ng-template let-item pTemplate="item">
+                  <div>{{'view.server.levels.headers.' + item.name | translate}}</div>
+                </ng-template>
+              </p-multiSelect>
+            </div>
           </div>
 
           <div class="table-caption-btn-wrapper btn-wrapper">
@@ -36,28 +46,28 @@
             </div>
           </th>
 
-          <th pSortableColumn="name">
+          <th *ngIf="isColumnVisible('name')" pSortableColumn="name">
             <div class="table-header-label">
               <div class="table-header-text">{{'view.server.levels.headers.name' | translate}}</div>
               <p-sortIcon field="name" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="color">
+          <th *ngIf="isColumnVisible('color')" pSortableColumn="color">
             <div class="table-header-label">
               <div class="table-header-text">{{'view.server.levels.headers.color' | translate}}</div>
               <p-sortIcon field="color" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="minXp">
+          <th *ngIf="isColumnVisible('min_xp')" pSortableColumn="minXp">
             <div class="table-header-label">
               <div class="table-header-text">{{'view.server.levels.headers.min_xp' | translate}}</div>
               <p-sortIcon field="minXp" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="permissions">
+          <th *ngIf="isColumnVisible('permissions')" pSortableColumn="permissions">
             <div class="table-header-label">
               <div class="table-header-text">{{'view.server.levels.headers.permissions' | translate}}</div>
               <p-sortIcon field="permissions" class="table-header-icon"></p-sortIcon>
@@ -90,15 +100,15 @@
                      placeholder="{{'common.id' | translate}}">
             </form>
           </th>
-          <th>
+          <th *ngIf="isColumnVisible('name')">
             <form [formGroup]="filterForm">
               <input type="text" pInputText formControlName="name"
                      placeholder="{{'view.server.levels.headers.name' | translate}}">
             </form>
           </th>
-          <th></th>
-          <th></th>
-          <th></th>
+          <th *ngIf="isColumnVisible('color')"></th>
+          <th *ngIf="isColumnVisible('min_xp')"></th>
+          <th *ngIf="isColumnVisible('permissions')"></th>
           <th class="table-header-small-dropdown"></th>
           <th class="table-header-small-dropdown"></th>
           <th class="table-header-actions"></th>
@@ -118,7 +128,7 @@
             </p-cellEditor>
           </td>
 
-          <td>
+          <td *ngIf="isColumnVisible('name')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <input class="table-edit-input" pInputText type="text" [(ngModel)]="level.name">
@@ -129,7 +139,7 @@
             </p-cellEditor>
           </td>
 
-          <td>
+          <td *ngIf="isColumnVisible('color')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <input class="table-edit-input" pInputText type="text" [(ngModel)]="level.color">
@@ -140,7 +150,7 @@
             </p-cellEditor>
           </td>
 
-          <td>
+          <td *ngIf="isColumnVisible('min_xp')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <input class="table-edit-input" pInputText min="0" type="number" [(ngModel)]="level.minXp">
@@ -151,7 +161,7 @@
             </p-cellEditor>
           </td>
 
-          <td>
+          <td *ngIf="isColumnVisible('permissions')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <input class="table-edit-input" pInputText min="0" type="text" [(ngModel)]="level.permissions">
diff --git a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.ts b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.ts
index 63e1e446..1a5461a6 100644
--- a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.ts
+++ b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.ts
@@ -22,14 +22,14 @@ import { Mutations } from "../../../../../../models/graphql/mutations.model";
 import { Subject, throwError } from "rxjs";
 import { Server } from "../../../../../../models/data/server.model";
 import { UserDTO } from "../../../../../../models/auth/auth-user.dto";
+import { ComponentWithTable } from "../../../../../../base/component-with-table";
 
 @Component({
   selector: "app-levels",
   templateUrl: "./levels.component.html",
   styleUrls: ["./levels.component.scss"]
 })
-export class LevelsComponent implements OnInit, OnDestroy {
-
+export class LevelsComponent extends ComponentWithTable implements OnInit, OnDestroy {
   public levels: Level[] = [];
   public loading = true;
 
@@ -72,7 +72,9 @@ export class LevelsComponent implements OnInit, OnDestroy {
     private translate: TranslateService,
     private data: DataService,
     private sidebar: SidebarService,
-    private route: ActivatedRoute) {
+    private route: ActivatedRoute
+  ) {
+    super("level", ["name", "color", "min_xp", "permissions"]);
   }
 
   public ngOnInit(): void {
@@ -96,8 +98,8 @@ export class LevelsComponent implements OnInit, OnDestroy {
         serverId: this.server.id, filter: this.filter, page: this.page, sort: this.sort
       },
       (data: Query) => {
-          return data.servers[0];
-        }
+        return data.servers[0];
+      }
     ).subscribe(data => {
       this.totalRecords = data.levelCount;
       this.levels = data.levels;
diff --git a/kdb-web/src/assets/i18n/de.json b/kdb-web/src/assets/i18n/de.json
index b67922a8..ec3aa22a 100644
--- a/kdb-web/src/assets/i18n/de.json
+++ b/kdb-web/src/assets/i18n/de.json
@@ -142,6 +142,7 @@
     "discord_id": "Discord Id",
     "email": "E-Mail",
     "error": "Fehler",
+    "hidden_columns": "Ausgeblendete Spalten",
     "history": {
       "attribute": "Attribut",
       "autoRole": "Auto Rolle",
diff --git a/kdb-web/src/assets/i18n/en.json b/kdb-web/src/assets/i18n/en.json
index 821996db..cfc8e077 100644
--- a/kdb-web/src/assets/i18n/en.json
+++ b/kdb-web/src/assets/i18n/en.json
@@ -142,6 +142,7 @@
     "discord_id": "Discord Id",
     "email": "E-Mail",
     "error": "Error",
+    "hidden_columns": "Hidden columns",
     "history": {
       "attribute": "Attribute",
       "autoRole": "Auto role",
diff --git a/kdb-web/src/assets/version.json b/kdb-web/src/assets/version.json
index 71ae202d..4a930e41 100644
--- a/kdb-web/src/assets/version.json
+++ b/kdb-web/src/assets/version.json
@@ -2,6 +2,6 @@
     "WebVersion": {
         "Major": "1",
         "Minor": "1",
-        "Micro": "0"
+        "Micro": "dev79_hide_table_attributes"
     }
 }
\ No newline at end of file
diff --git a/kdb-web/src/styles.scss b/kdb-web/src/styles.scss
index 71be66ee..af15846a 100644
--- a/kdb-web/src/styles.scss
+++ b/kdb-web/src/styles.scss
@@ -241,9 +241,22 @@ header {
           .table-caption {
             display: flex;
 
-            .table-caption-text {
+            .table-caption-table-info {
+              display: flex;
               flex: 1;
-              font-weight: 400;
+              flex-direction: row;
+              gap: 25px;
+
+              .table-caption-text {
+                display: flex;
+                align-items: center;
+
+                font-weight: 400;
+              }
+
+              .table-caption-column-select {
+                flex: 1;
+              }
             }
 
             .table-caption-search {
diff --git a/kdb-web/src/styles/themes/default-dark-theme.scss b/kdb-web/src/styles/themes/default-dark-theme.scss
index 5222645f..45fa4f2f 100644
--- a/kdb-web/src/styles/themes/default-dark-theme.scss
+++ b/kdb-web/src/styles/themes/default-dark-theme.scss
@@ -386,7 +386,12 @@
     color: $primaryTextColor !important;
 
     .table-caption {
-      .table-caption-text {
+      .table-caption-table-info {
+        .table-caption-text {
+        }
+
+        .table-caption-column-select {
+        }
       }
 
       .table-caption-search-wrapper {
@@ -611,4 +616,50 @@
       }
     }
   }
+
+  .p-multiselect {
+    background-color: $primaryBackgroundColor !important;
+    color: $primaryTextColor !important;
+
+    &:focus,
+    &.p-focus,
+    &:not(.p-disabled):hover {
+      border-color: $primaryHeaderColor !important;
+      box-shadow: none !important;
+    }
+
+    .p-multiselect-panel {
+      .p-multiselect-header {
+        background-color: $primaryBackgroundColor !important;
+      }
+
+      .p-multiselect-items,
+      .p-multiselect-item {
+        background-color: $secondaryBackgroundColor !important;
+      }
+
+      .p-multiselect-item {
+        color: $primaryTextColor !important;
+        border: 1px solid transparent !important;
+
+        &:hover {
+          border: 1px solid $primaryHeaderColor !important;
+          color: $primaryHeaderColor !important;
+        }
+
+        &:focus {
+          box-shadow: none !important;
+        }
+      }
+
+      .p-checkbox .p-checkbox-box.p-highlight {
+        border-color: $primaryHeaderColor !important;
+        background: $primaryHeaderColor !important;
+      }
+
+      .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+        border-color: $primaryHeaderColor !important;
+      }
+    }
+  }
 }
diff --git a/kdb-web/src/styles/themes/default-light-theme.scss b/kdb-web/src/styles/themes/default-light-theme.scss
index 1e7078e2..82341a81 100644
--- a/kdb-web/src/styles/themes/default-light-theme.scss
+++ b/kdb-web/src/styles/themes/default-light-theme.scss
@@ -386,7 +386,12 @@
     color: $primaryTextColor !important;
 
     .table-caption {
-      .table-caption-text {
+      .table-caption-table-info {
+        .table-caption-text {
+        }
+
+        .table-caption-column-select {
+        }
       }
 
       .table-caption-search-wrapper {
@@ -611,4 +616,50 @@
       }
     }
   }
+
+  .p-multiselect {
+    background-color: $primaryBackgroundColor !important;
+    color: $primaryTextColor !important;
+
+    &:focus,
+    &.p-focus,
+    &:not(.p-disabled):hover {
+      border-color: $primaryHeaderColor !important;
+      box-shadow: none !important;
+    }
+
+    .p-multiselect-panel {
+      .p-multiselect-header {
+        background-color: $secondaryBackgroundColor !important;
+      }
+
+      .p-multiselect-items,
+      .p-multiselect-item {
+        background-color: $primaryBackgroundColor !important;
+      }
+
+      .p-multiselect-item {
+        color: $primaryTextColor !important;
+        border: 1px solid transparent !important;
+
+        &:hover {
+          border: 1px solid $primaryHeaderColor !important;
+          color: $primaryHeaderColor !important;
+        }
+
+        &:focus {
+          box-shadow: none !important;
+        }
+      }
+
+      .p-checkbox .p-checkbox-box.p-highlight {
+        border-color: $primaryHeaderColor !important;
+        background: $primaryHeaderColor !important;
+      }
+
+      .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+        border-color: $primaryHeaderColor !important;
+      }
+    }
+  }
 }
diff --git a/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss b/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss
index 42e926ff..60974511 100644
--- a/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss
+++ b/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss
@@ -390,7 +390,12 @@
     color: $primaryTextColor !important;
 
     .table-caption {
-      .table-caption-text {
+      .table-caption-table-info {
+        .table-caption-text {
+        }
+
+        .table-caption-column-select {
+        }
       }
 
       .table-caption-search-wrapper {
@@ -619,4 +624,50 @@
       }
     }
   }
+
+  .p-multiselect {
+    background-color: $primaryBackgroundColor !important;
+    color: $primaryTextColor !important;
+
+    &:focus,
+    &.p-focus,
+    &:not(.p-disabled):hover {
+      border-color: $primaryHeaderColor !important;
+      box-shadow: none !important;
+    }
+
+    .p-multiselect-panel {
+      .p-multiselect-header {
+        background-color: $primaryBackgroundColor !important;
+      }
+
+      .p-multiselect-items,
+      .p-multiselect-item {
+        background-color: $secondaryBackgroundColor !important;
+      }
+
+      .p-multiselect-item {
+        color: $primaryTextColor !important;
+        border: 1px solid transparent !important;
+
+        &:hover {
+          border: 1px solid $primaryHeaderColor !important;
+          color: $primaryHeaderColor !important;
+        }
+
+        &:focus {
+          box-shadow: none !important;
+        }
+      }
+
+      .p-checkbox .p-checkbox-box.p-highlight {
+        border-color: $primaryHeaderColor !important;
+        background: $primaryHeaderColor !important;
+      }
+
+      .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+        border-color: $primaryHeaderColor !important;
+      }
+    }
+  }
 }
diff --git a/kdb-web/src/styles/themes/sh-edraft-light-theme.scss b/kdb-web/src/styles/themes/sh-edraft-light-theme.scss
index 8fa8f2fb..ebf9360d 100644
--- a/kdb-web/src/styles/themes/sh-edraft-light-theme.scss
+++ b/kdb-web/src/styles/themes/sh-edraft-light-theme.scss
@@ -386,7 +386,12 @@
     color: $primaryTextColor !important;
 
     .table-caption {
-      .table-caption-text {
+      .table-caption-table-info {
+        .table-caption-text {
+        }
+
+        .table-caption-column-select {
+        }
       }
 
       .table-caption-search-wrapper {
@@ -611,4 +616,50 @@
       }
     }
   }
+
+  .p-multiselect {
+    background-color: $primaryBackgroundColor !important;
+    color: $primaryTextColor !important;
+
+    &:focus,
+    &.p-focus,
+    &:not(.p-disabled):hover {
+      border-color: $primaryHeaderColor !important;
+      box-shadow: none !important;
+    }
+
+    .p-multiselect-panel {
+      .p-multiselect-header {
+        background-color: $secondaryBackgroundColor !important;
+      }
+
+      .p-multiselect-items,
+      .p-multiselect-item {
+        background-color: $primaryBackgroundColor !important;
+      }
+
+      .p-multiselect-item {
+        color: $primaryTextColor !important;
+        border: 1px solid transparent !important;
+
+        &:hover {
+          border: 1px solid $primaryHeaderColor !important;
+          color: $primaryHeaderColor !important;
+        }
+
+        &:focus {
+          box-shadow: none !important;
+        }
+      }
+
+      .p-checkbox .p-checkbox-box.p-highlight {
+        border-color: $primaryHeaderColor !important;
+        background: $primaryHeaderColor !important;
+      }
+
+      .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+        border-color: $primaryHeaderColor !important;
+      }
+    }
+  }
 }
-- 
2.45.2


From 8d76f797320677cb4b1ea0881c391348b172207b Mon Sep 17 00:00:00 2001
From: Sven Heidemann <sven.heidemann@sh-edraft.de>
Date: Tue, 15 Aug 2023 08:14:45 +0200
Subject: [PATCH 2/3] Hide members columns #79

---
 kdb-web/package.json                          |  2 +-
 .../components/levels/levels.component.html   | 18 ++---
 .../components/levels/levels.component.ts     |  2 +-
 .../server/members/members.component.html     | 80 +++++++++++--------
 .../view/server/members/members.component.ts  | 14 ++--
 kdb-web/src/assets/i18n/de.json               | 36 ++++-----
 kdb-web/src/assets/version.json               |  2 +-
 7 files changed, 80 insertions(+), 74 deletions(-)

diff --git a/kdb-web/package.json b/kdb-web/package.json
index bfe9eed3..998a4411 100644
--- a/kdb-web/package.json
+++ b/kdb-web/package.json
@@ -1,6 +1,6 @@
 {
     "name": "kdb-web",
-    "version": "1.1.dev79_hide_table_attributes",
+    "version": "1.1.dev79_hide_table_columns",
     "scripts": {
         "ng": "ng",
         "update-version": "ts-node-esm update-version.ts",
diff --git a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html
index 114143e0..9e059391 100644
--- a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html
+++ b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html
@@ -20,7 +20,7 @@
             <div class="table-caption-column-select">
               <p-multiSelect [options]="columns" [(ngModel)]="hiddenColumns" optionLabel="name" placeholder="{{'common.hidden_columns' | translate}}" [filter]=false>
                 <ng-template let-item pTemplate="item">
-                  <div>{{'view.server.levels.headers.' + item.name | translate}}</div>
+                  <div>{{'common.' + item.name | translate}}</div>
                 </ng-template>
               </p-multiSelect>
             </div>
@@ -39,7 +39,7 @@
 
       <ng-template pTemplate="header">
         <tr>
-          <th pSortableColumn="id">
+          <th *ngIf="isColumnVisible('id')" pSortableColumn="id">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.id' | translate}}</div>
               <p-sortIcon field="id" class="table-header-icon"></p-sortIcon>
@@ -48,28 +48,28 @@
 
           <th *ngIf="isColumnVisible('name')" pSortableColumn="name">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.levels.headers.name' | translate}}</div>
+              <div class="table-header-text">{{'common.name' | translate}}</div>
               <p-sortIcon field="name" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
           <th *ngIf="isColumnVisible('color')" pSortableColumn="color">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.levels.headers.color' | translate}}</div>
+              <div class="table-header-text">{{'common.color' | translate}}</div>
               <p-sortIcon field="color" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
           <th *ngIf="isColumnVisible('min_xp')" pSortableColumn="minXp">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.levels.headers.min_xp' | translate}}</div>
+              <div class="table-header-text">{{'common.min_xp' | translate}}</div>
               <p-sortIcon field="minXp" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
           <th *ngIf="isColumnVisible('permissions')" pSortableColumn="permissions">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.levels.headers.permissions' | translate}}</div>
+              <div class="table-header-text">{{'common.permissions' | translate}}</div>
               <p-sortIcon field="permissions" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
@@ -94,7 +94,7 @@
         </tr>
 
         <tr>
-          <th class="table-header-small">
+          <th *ngIf="isColumnVisible('id')" class="table-header-small">
             <form [formGroup]="filterForm">
               <input type="text" pInputText formControlName="id"
                      placeholder="{{'common.id' | translate}}">
@@ -103,7 +103,7 @@
           <th *ngIf="isColumnVisible('name')">
             <form [formGroup]="filterForm">
               <input type="text" pInputText formControlName="name"
-                     placeholder="{{'view.server.levels.headers.name' | translate}}">
+                     placeholder="{{'common.name' | translate}}">
             </form>
           </th>
           <th *ngIf="isColumnVisible('color')"></th>
@@ -117,7 +117,7 @@
 
       <ng-template pTemplate="body" let-level let-editing="editing" let-ri="rowIndex">
         <tr [pEditableRow]="level">
-          <td>
+          <td *ngIf="isColumnVisible('id')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{level.id}}
diff --git a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.ts b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.ts
index 1a5461a6..4ae5bb94 100644
--- a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.ts
+++ b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.ts
@@ -74,7 +74,7 @@ export class LevelsComponent extends ComponentWithTable implements OnInit, OnDes
     private sidebar: SidebarService,
     private route: ActivatedRoute
   ) {
-    super("level", ["name", "color", "min_xp", "permissions"]);
+    super("level", ["id", "name", "color", "min_xp", "permissions"]);
   }
 
   public ngOnInit(): void {
diff --git a/kdb-web/src/app/modules/view/server/members/members.component.html b/kdb-web/src/app/modules/view/server/members/members.component.html
index cc51f4a2..ea3d2e52 100644
--- a/kdb-web/src/app/modules/view/server/members/members.component.html
+++ b/kdb-web/src/app/modules/view/server/members/members.component.html
@@ -9,11 +9,21 @@
 
       <ng-template pTemplate="caption">
         <div class="table-caption">
-          <div class="table-caption-text">
-            <ng-container *ngIf="!loading">{{members.length}} {{'common.of' | translate}}
-              {{dt.totalRecords}}
-            </ng-container>
-            {{'view.server.members.members' | translate}}
+          <div class="table-caption-table-info">
+            <div class="table-caption-text">
+              <ng-container *ngIf="!loading">{{members.length}} {{'common.of' | translate}}
+                {{dt.totalRecords}}
+              </ng-container>
+              {{'view.server.members.members' | translate}}
+            </div>
+
+            <div class="table-caption-column-select">
+              <p-multiSelect [options]="columns" [(ngModel)]="hiddenColumns" optionLabel="name" placeholder="{{'common.hidden_columns' | translate}}" [filter]=false>
+                <ng-template let-item pTemplate="item">
+                  <div>{{'common.' + item.name | translate}}</div>
+                </ng-template>
+              </p-multiSelect>
+            </div>
           </div>
 
           <div class="table-caption-btn-wrapper btn-wrapper">
@@ -26,51 +36,51 @@
 
       <ng-template pTemplate="header">
         <tr>
-          <th pSortableColumn="id">
+          <th *ngIf="isColumnVisible('id')" pSortableColumn="id">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.id' | translate}}</div>
               <p-sortIcon field="id" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="discordId">
+          <th *ngIf="isColumnVisible('discord_id')" pSortableColumn="discordId">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.discord_id' | translate}}</div>
               <p-sortIcon field="discordId" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="name">
+          <th *ngIf="isColumnVisible('name')" pSortableColumn="name">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.members.headers.name' | translate}}</div>
+              <div class="table-header-text">{{'common.name' | translate}}</div>
               <p-sortIcon field="name" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="xp">
+          <th *ngIf="isColumnVisible('xp')" pSortableColumn="xp">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.members.headers.xp' | translate}}</div>
+              <div class="table-header-text">{{'common.xp' | translate}}</div>
               <p-sortIcon field="xp" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="ontime">
+          <th *ngIf="isColumnVisible('ontime')" pSortableColumn="ontime">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.members.headers.ontime' | translate}}</div>
+              <div class="table-header-text">{{'common.ontime' | translate}}</div>
               <p-sortIcon field="ontime" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="leftServer">
+          <th *ngIf="isColumnVisible('left_server')" pSortableColumn="leftServer">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.members.headers.left_server' | translate}}</div>
+              <div class="table-header-text">{{'common.left_server' | translate}}</div>
               <p-sortIcon field="leftServer" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="level.name">
+          <th *ngIf="isColumnVisible('level')" pSortableColumn="level.name">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.members.headers.level' | translate}}</div>
+              <div class="table-header-text">{{'common.level' | translate}}</div>
               <p-sortIcon field="level.name" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
@@ -95,31 +105,31 @@
         </tr>
 
         <tr>
-          <th class="table-header-small">
+          <th *ngIf="isColumnVisible('id')" class="table-header-small">
             <form [formGroup]="filterForm">
               <input type="text" pInputText formControlName="id" placeholder="{{'common.id' | translate}}">
             </form>
           </th>
-          <th class="table-header-medium">
+          <th *ngIf="isColumnVisible('discord_id')" class="table-header-medium">
             <form [formGroup]="filterForm">
               <input type="text" pInputText formControlName="discordId" placeholder="{{'common.discord_id' | translate}}">
             </form>
           </th>
-          <th>
+          <th *ngIf="isColumnVisible('name')" >
             <form [formGroup]="filterForm">
-              <input type="text" pInputText formControlName="name" placeholder="{{'view.server.members.headers.name' | translate}}">
+              <input type="text" pInputText formControlName="name" placeholder="{{'common.name' | translate}}">
             </form>
           </th>
-          <th></th>
-          <th></th>
-          <th class="table-header-small-dropdown">
+          <th *ngIf="isColumnVisible('xp')" ></th>
+          <th *ngIf="isColumnVisible('ontime')" ></th>
+          <th *ngIf="isColumnVisible('left_server')" class="table-header-small-dropdown">
             <form [formGroup]="filterForm">
-              <p-dropdown formControlName="leftServer" [options]="leftServerOptions" placeholder="{{'view.server.members.headers.left_server' | translate}}"></p-dropdown>
+              <p-dropdown formControlName="leftServer" [options]="leftServerOptions" placeholder="{{'common.left_server' | translate}}"></p-dropdown>
             </form>
           </th>
-          <th class="table-header-small-dropdown">
+          <th *ngIf="isColumnVisible('level')" class="table-header-small-dropdown">
             <form [formGroup]="filterForm">
-              <p-dropdown formControlName="level" [options]="levels" placeholder="{{'view.server.members.headers.level' | translate}}"></p-dropdown>
+              <p-dropdown formControlName="level" [options]="levels" placeholder="{{'common.level' | translate}}"></p-dropdown>
             </form>
           </th>
           <th></th>
@@ -130,7 +140,7 @@
 
       <ng-template pTemplate="body" let-member let-editing="editing" let-ri="rowIndex">
         <tr [pEditableRow]="member">
-          <td>
+          <td *ngIf="isColumnVisible('id')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{member.id}}
@@ -140,7 +150,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td>
+          <td *ngIf="isColumnVisible('discord_id')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{member.discordId}}
@@ -150,7 +160,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td>
+          <td *ngIf="isColumnVisible('name')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{member.name}}
@@ -160,7 +170,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td>
+          <td *ngIf="isColumnVisible('xp')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <p-inputNumber class="table-edit-input" styleClass="input-number" [(ngModel)]="member.xp" mode="decimal" [min]="0" [useGrouping]="false" [showButtons]="true"
@@ -172,7 +182,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td>
+          <td *ngIf="isColumnVisible('ontime')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{member.ontime}}
@@ -182,7 +192,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td>
+          <td *ngIf="isColumnVisible('left_server')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{!member.leftServer | bool}}
@@ -192,10 +202,10 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td>
+          <td *ngIf="isColumnVisible('level')">
             <p-cellEditor>
               <ng-template pTemplate="input">
-                <p-dropdown [options]="levels" [(ngModel)]="member.level" placeholder="{{'view.server.members.headers.level' | translate}}"></p-dropdown>
+                <p-dropdown [options]="levels" [(ngModel)]="member.level" placeholder="{{'common.level' | translate}}"></p-dropdown>
               </ng-template>
               <ng-template pTemplate="output">
                 {{member.level.name}}
diff --git a/kdb-web/src/app/modules/view/server/members/members.component.ts b/kdb-web/src/app/modules/view/server/members/members.component.ts
index e46afb61..6786adad 100644
--- a/kdb-web/src/app/modules/view/server/members/members.component.ts
+++ b/kdb-web/src/app/modules/view/server/members/members.component.ts
@@ -20,19 +20,17 @@ import { UpdateUserMutationResult } from "../../../../models/graphql/result.mode
 import { ActivatedRoute } from "@angular/router";
 import { Level } from "../../../../models/data/level.model";
 import { Server } from "../../../../models/data/server.model";
+import { ComponentWithTable } from "../../../../base/component-with-table";
 
 @Component({
   selector: "app-members",
   templateUrl: "./members.component.html",
   styleUrls: ["./members.component.scss"]
 })
-export class MembersComponent implements OnInit, OnDestroy {
+export class MembersComponent extends ComponentWithTable implements OnInit, OnDestroy {
   members!: User[];
   levels!: MenuItem[];
-  leftServerOptions = [
-    { label: this.translate.instant("common.bool_as_string.true"), value: false },
-    { label: this.translate.instant("common.bool_as_string.false"), value: true }
-  ];
+  leftServerOptions: { label: string; value: boolean; }[] = [];
   loading = true;
 
   clonedUsers: { [s: string]: User; } = {};
@@ -93,6 +91,7 @@ export class MembersComponent implements OnInit, OnDestroy {
     private data: DataService,
     private route: ActivatedRoute
   ) {
+    super("member", ["id", "discord_id", "name", "xp", "ontime", "left_server", "level"]);
   }
 
   ngOnInit(): void {
@@ -112,9 +111,14 @@ export class MembersComponent implements OnInit, OnDestroy {
           return { label: level.name, value: level };
         });
       });
+      this.leftServerOptions = [
+        { label: this.translate.instant("common.bool_as_string.true"), value: false },
+        { label: this.translate.instant("common.bool_as_string.false"), value: true }
+      ];
       this.loadNextPage();
     });
   }
+
   public ngOnDestroy(): void {
     this.unsubscriber.next();
     this.unsubscriber.complete();
diff --git a/kdb-web/src/assets/i18n/de.json b/kdb-web/src/assets/i18n/de.json
index ec3aa22a..9659ea62 100644
--- a/kdb-web/src/assets/i18n/de.json
+++ b/kdb-web/src/assets/i18n/de.json
@@ -2,15 +2,6 @@
   "admin": {
     "auth_users": {
       "header": "Benutzer",
-      "headers": {
-        "active": "Aktiv",
-        "auth_role": "Rolle",
-        "first_name": "Vorname",
-        "last_name": "Nachname",
-        "password": "Passwort",
-        "role": "Rolle",
-        "users": "Benutzer"
-      },
       "message": {
         "cannot_delete_user": "Benutzer kann nicht gelöscht werden",
         "invalid_email": "Ungültige E-Mail",
@@ -131,6 +122,20 @@
     }
   },
   "common": {
+    "active": "Aktiv",
+    "auth_role": "Rolle",
+    "first_name": "Vorname",
+    "last_name": "Nachname",
+    "password": "Passwort",
+    "role": "Rolle",
+    "users": "Benutzer",
+    "color": "Farbe",
+    "min_xp": "Min. XP",
+    "permissions": "Rechte",
+    "left_server": "Aktiv",
+    "level": "Level",
+    "ontime": "Ontime",
+    "xp": "XP",
     "404": "404 - Der Eintrag konnte nicht gefunden werden",
     "actions": "Aktionen",
     "add": "Hinzufügen",
@@ -447,12 +452,6 @@
       "header": "Server",
       "levels": {
         "header": "Level",
-        "headers": {
-          "color": "Farbe",
-          "min_xp": "Min. XP",
-          "name": "Name",
-          "permissions": "Rechte"
-        },
         "levels": "Level",
         "message": {
           "level_create": "Level erstellt",
@@ -473,13 +472,6 @@
       },
       "members": {
         "header": "Mitglieder",
-        "headers": {
-          "left_server": "Aktiv",
-          "level": "Level",
-          "name": "Name",
-          "ontime": "Ontime",
-          "xp": "XP"
-        },
         "members": "Mitgliedern",
         "message": {
           "user_change_failed": "Benutzeränderung fehlgeschlagen",
diff --git a/kdb-web/src/assets/version.json b/kdb-web/src/assets/version.json
index 4a930e41..d2369dd9 100644
--- a/kdb-web/src/assets/version.json
+++ b/kdb-web/src/assets/version.json
@@ -2,6 +2,6 @@
     "WebVersion": {
         "Major": "1",
         "Minor": "1",
-        "Micro": "dev79_hide_table_attributes"
+        "Micro": "dev79_hide_table_columns"
     }
 }
\ No newline at end of file
-- 
2.45.2


From bfc9979961dad34fc6c6e06fdc665ed9ef84c94b Mon Sep 17 00:00:00 2001
From: Sven Heidemann <sven.heidemann@sh-edraft.de>
Date: Tue, 15 Aug 2023 12:16:24 +0200
Subject: [PATCH 3/3] Added option to hide columns to all tables #79

---
 .../service/auth_user_repository_service.py   | 13 +++-
 kdb-web/src/app/base/component-with-table.ts  |  2 +-
 .../auth-user/auth-user.component.html        | 65 +++++++++--------
 .../auth-user/auth-user.component.ts          |  4 +-
 .../shared/base/hideable-component.spec.ts    |  7 ++
 .../modules/shared/base/hideable-component.ts | 13 ++++
 .../multi-select-columns.component.html       | 16 +++++
 .../multi-select-columns.component.scss       |  0
 .../multi-select-columns.component.spec.ts    | 23 ++++++
 .../multi-select-columns.component.ts         | 24 +++++++
 .../hideable-column.component.html            |  1 +
 .../hideable-column.component.scss            |  1 +
 .../hideable-column.component.spec.ts         | 23 ++++++
 .../hideable-column.component.ts              | 16 +++++
 .../hideable-header.component.html            | 11 +++
 .../hideable-header.component.scss            |  0
 .../hideable-header.component.spec.ts         | 23 ++++++
 .../hideable-header.component.ts              | 16 +++++
 .../src/app/modules/shared/shared.module.ts   | 17 +++--
 .../achievement/achievement.component.html    | 70 ++++++++++---------
 .../achievement/achievement.component.ts      |  6 +-
 .../auto-roles-rules.component.html           | 43 ++++++------
 .../auto-roles-rules.component.ts             |  4 +-
 .../auto-roles/auto-roles.component.html      | 66 +++++++++--------
 .../auto-roles/auto-roles.component.ts        |  4 +-
 .../components/levels/levels.component.html   | 38 +++++-----
 .../server/members/members.component.html     | 50 ++++++-------
 kdb-web/src/assets/i18n/de.json               | 56 +++++++--------
 kdb-web/src/assets/i18n/en.json               | 64 +++++++----------
 kdb-web/src/styles.scss                       |  4 ++
 .../styles/themes/sh-edraft-dark-theme.scss   |  4 +-
 31 files changed, 435 insertions(+), 249 deletions(-)
 create mode 100644 kdb-web/src/app/modules/shared/base/hideable-component.spec.ts
 create mode 100644 kdb-web/src/app/modules/shared/base/hideable-component.ts
 create mode 100644 kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component.html
 create mode 100644 kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component.scss
 create mode 100644 kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component.spec.ts
 create mode 100644 kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component.ts
 create mode 100644 kdb-web/src/app/modules/shared/components/hideable-column/hideable-column.component.html
 create mode 100644 kdb-web/src/app/modules/shared/components/hideable-column/hideable-column.component.scss
 create mode 100644 kdb-web/src/app/modules/shared/components/hideable-column/hideable-column.component.spec.ts
 create mode 100644 kdb-web/src/app/modules/shared/components/hideable-column/hideable-column.component.ts
 create mode 100644 kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.html
 create mode 100644 kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.scss
 create mode 100644 kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.spec.ts
 create mode 100644 kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.ts

diff --git a/kdb-bot/src/bot_data/service/auth_user_repository_service.py b/kdb-bot/src/bot_data/service/auth_user_repository_service.py
index 295e3c2f..87b39169 100644
--- a/kdb-bot/src/bot_data/service/auth_user_repository_service.py
+++ b/kdb-bot/src/bot_data/service/auth_user_repository_service.py
@@ -1,3 +1,4 @@
+from enum import Enum
 from typing import Optional
 
 from cpl_core.database.context import DatabaseContextABC
@@ -100,9 +101,17 @@ class AuthUserRepositoryService(AuthUserRepositoryABC):
         ):
             crit_sort_direction = criteria.sort_direction.lower()
             if crit_sort_direction == "desc" or crit_sort_direction == "descending":
-                query = query.order_by_descending(lambda x: getattr(x, criteria.sort_column))
+                query = query.order_by_descending(
+                    lambda x: getattr(x, criteria.sort_column)
+                    if not isinstance(getattr(x, criteria.sort_column), Enum)
+                    else getattr(x, criteria.sort_column).value
+                )
             else:
-                query = query.order_by(lambda x: getattr(x, criteria.sort_column))
+                query = query.order_by(
+                    lambda x: getattr(x, criteria.sort_column)
+                    if not isinstance(getattr(x, criteria.sort_column), Enum)
+                    else getattr(x, criteria.sort_column).value
+                )
 
         result = FilteredResult()
         result.total_count = query.count()
diff --git a/kdb-web/src/app/base/component-with-table.ts b/kdb-web/src/app/base/component-with-table.ts
index 97828341..ae39c2b3 100644
--- a/kdb-web/src/app/base/component-with-table.ts
+++ b/kdb-web/src/app/base/component-with-table.ts
@@ -1,4 +1,4 @@
-interface Column {
+export interface Column {
   key: string;
   name: string;
 }
diff --git a/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html b/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html
index 58f5eb9d..6699495b 100644
--- a/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html
+++ b/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html
@@ -9,11 +9,14 @@
 
       <ng-template pTemplate="caption">
         <div class="table-caption">
-          <div class="table-caption-text">
-            <ng-container *ngIf="!loading">{{users.length}} {{'common.of' | translate}}
-              {{dt.totalRecords}}
-            </ng-container>
-            {{'admin.auth_users.users' | translate}}
+          <div class="table-caption-table-info">
+            <div class="table-caption-text">
+              <ng-container *ngIf="!loading">{{users.length}} {{'common.of' | translate}}
+                {{dt.totalRecords}}
+              </ng-container>
+              {{'admin.auth_users.users' | translate}}
+            </div>
+            <app-multi-select-columns [columns]="columns" [(hiddenColumns)]="hiddenColumns"></app-multi-select-columns>
           </div>
 
           <div class="table-caption-btn-wrapper btn-wrapper">
@@ -29,44 +32,44 @@
 
       <ng-template pTemplate="header">
         <tr>
-          <th pSortableColumn="firstName">
+          <th hideable-th="first_name" [parent]="this" [sortable]="true">
             <div class="table-header-label">
-              <div class="table-header-text">{{'admin.auth_users.headers.first_name' | translate}}</div>
+              <div class="table-header-text">{{'common.first_name' | translate}}</div>
               <p-sortIcon field="firstName" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="lastName">
+          <th hideable-th="last_name" [parent]="this" [sortable]="true">
             <div class="table-header-label">
-              <div class="table-header-text">{{'admin.auth_users.headers.last_name' | translate}}</div>
+              <div class="table-header-text">{{'common.last_name' | translate}}</div>
               <p-sortIcon field="lastName" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="email">
+          <th hideable-th="email" [parent]="this" [sortable]="true">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.email' | translate}}</div>
               <p-sortIcon field="email" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th class="table-header-actions" pSortableColumn="confirmationId">
+          <th class="table-header-actions" hideable-th="active" [parent]="this" [sortable]="true">
             <div class="table-header-label">
-              <div class="table-header-text">{{'admin.auth_users.headers.active' | translate}}</div>
+              <div class="table-header-text">{{'common.active' | translate}}</div>
               <p-sortIcon field="confirmationId" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th class="table-header-small-dropdown" pSortableColumn="authRole">
+          <th class="table-header-small-dropdown" hideable-th="auth_role" [parent]="this" [sortable]="true">
             <div class="table-header-label">
-              <div class="table-header-text">{{'admin.auth_users.headers.role' | translate}}</div>
+              <div class="table-header-text">{{'common.role' | translate}}</div>
               <p-sortIcon field="authRole" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th>
+          <th hideable-th="password" [parent]="this">
             <div class="table-header-label">
-              <div class="table-header-text">{{'admin.auth_users.headers.password' | translate}}</div>
+              <div class="table-header-text">{{'common.password' | translate}}</div>
             </div>
           </th>
 
@@ -89,28 +92,28 @@
           </th>
         </tr>
         <tr>
-          <th>
+          <th hideable-th="first_name" [parent]="this">
             <form [formGroup]="filterForm">
-              <input type="text" pInputText formControlName="firstName" placeholder="{{'admin.auth_users.headers.first_name' | translate}}">
+              <input type="text" pInputText formControlName="firstName" placeholder="{{'common.first_name' | translate}}">
             </form>
           </th>
-          <th>
+          <th hideable-th="last_name" [parent]="this">
             <form [formGroup]="filterForm">
-              <input type="text" pInputText formControlName="lastName" placeholder="{{'admin.auth_users.headers.last_name' | translate}}">
+              <input type="text" pInputText formControlName="lastName" placeholder="{{'common.last_name' | translate}}">
             </form>
           </th>
-          <th>
+          <th hideable-th="email" [parent]="this">
             <form [formGroup]="filterForm">
               <input type="email" pInputText formControlName="email" placeholder="{{'common.email' | translate}}">
             </form>
           </th>
-          <th></th>
-          <th>
+          <th hideable-th="active" [parent]="this"></th>
+          <th hideable-th="auth_role" [parent]="this">
             <form [formGroup]="filterForm">
-              <p-dropdown formControlName="authRole" [options]="authRoles" placeholder="{{'admin.auth_users.headers.auth_role' | translate}}"></p-dropdown>
+              <p-dropdown formControlName="authRole" [options]="authRoles" placeholder="{{'common.auth_role' | translate}}"></p-dropdown>
             </form>
           </th>
-          <th></th>
+          <th hideable-th="password" [parent]="this"></th>
           <th></th>
           <th></th>
           <th></th>
@@ -119,7 +122,7 @@
 
       <ng-template pTemplate="body" let-user let-editing="editing" let-ri="rowIndex">
         <tr [pEditableRow]="user">
-          <td>
+          <td hideable-td="first_name" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <input class="table-edit-input" pInputText type="text" [(ngModel)]="user.firstName"
@@ -130,7 +133,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td>
+          <td hideable-td="last_name" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <input class="table-edit-input" pInputText type="text" [(ngModel)]="user.lastName"
@@ -141,7 +144,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td>
+          <td hideable-td="email" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <input class="table-edit-input" pInputText type="email" [(ngModel)]="user.email"
@@ -152,7 +155,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td>
+          <td hideable-td="active" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <p-checkbox [binary]="true" [(ngModel)]="user.isConfirmed"
@@ -165,7 +168,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td>
+          <td hideable-td="auth_role" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <p-dropdown [options]="authRoles" [(ngModel)]="user.authRole"
@@ -176,7 +179,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td>
+          <td hideable-td="password" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <input class="table-edit-input" pInputText type="password" [(ngModel)]="user.password"
diff --git a/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.ts b/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.ts
index e4a53ca7..a0ed5469 100644
--- a/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.ts
+++ b/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.ts
@@ -15,6 +15,7 @@ import { AuthUserSelectCriterion } from "src/app/models/selection/auth-user/auth
 import { LazyLoadEvent } from "primeng/api";
 import { Subject, throwError } from "rxjs";
 import { TranslateService } from "@ngx-translate/core";
+import { ComponentWithTable } from "../../../../../base/component-with-table";
 
 
 @Component({
@@ -22,7 +23,7 @@ import { TranslateService } from "@ngx-translate/core";
   templateUrl: "./auth-user.component.html",
   styleUrls: ["./auth-user.component.scss"]
 })
-export class AuthUserComponent implements OnInit, OnDestroy {
+export class AuthUserComponent extends ComponentWithTable implements OnInit, OnDestroy {
 
   users!: AuthUserDTO[];
   statuses!: any[];
@@ -72,6 +73,7 @@ export class AuthUserComponent implements OnInit, OnDestroy {
     private fb: FormBuilder,
     private translate: TranslateService
   ) {
+    super("auth-users", ["first_name", "last_name", "email", "active", 'auth_role', 'password']);
   }
 
   ngOnInit(): void {
diff --git a/kdb-web/src/app/modules/shared/base/hideable-component.spec.ts b/kdb-web/src/app/modules/shared/base/hideable-component.spec.ts
new file mode 100644
index 00000000..51af6d5c
--- /dev/null
+++ b/kdb-web/src/app/modules/shared/base/hideable-component.spec.ts
@@ -0,0 +1,7 @@
+import { HideableComponent } from './hideable-component';
+
+describe('HideableComponent', () => {
+  it('should create an instance', () => {
+    expect(new HideableComponent()).toBeTruthy();
+  });
+});
diff --git a/kdb-web/src/app/modules/shared/base/hideable-component.ts b/kdb-web/src/app/modules/shared/base/hideable-component.ts
new file mode 100644
index 00000000..4421ff91
--- /dev/null
+++ b/kdb-web/src/app/modules/shared/base/hideable-component.ts
@@ -0,0 +1,13 @@
+import { Directive, HostBinding, Input } from "@angular/core";
+import { ComponentWithTable } from "../../../base/component-with-table";
+
+@Directive()
+export class HideableComponent {
+  @HostBinding("class.hidden-column")
+  get hidden() {
+    return !(this.parent?.isColumnVisible(this.column) ?? true);
+  };
+
+  @Input() column!: string;
+  @Input() parent!: ComponentWithTable;
+}
diff --git a/kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component.html b/kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component.html
new file mode 100644
index 00000000..d26b948b
--- /dev/null
+++ b/kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component.html
@@ -0,0 +1,16 @@
+<div class="table-caption-column-select">
+  <p-multiSelect display="chip" [options]="columns" [(ngModel)]="hiddenColumns" optionLabel="name" placeholder="{{'common.hidden_columns' | translate}}" [filter]=false>
+    <ng-template let-value pTemplate="selectedItems">
+      <div *ngFor="let item of hiddenColumns; let i = index;">
+        <div>
+          {{'common.' + item.name | translate}}<span *ngIf="i < columns.length-1">,</span>
+        </div>
+      </div>
+      <div *ngIf="!hiddenColumns || hiddenColumns.length === 0">{{'common.hidden_columns' | translate}}</div>
+    </ng-template>
+
+    <ng-template let-item pTemplate="item">
+      <div>{{'common.' + item.name | translate}}</div>
+    </ng-template>
+  </p-multiSelect>
+</div>
diff --git a/kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component.scss b/kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component.spec.ts b/kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component.spec.ts
new file mode 100644
index 00000000..fd671a32
--- /dev/null
+++ b/kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MultiSelectColumnsComponent } from './multi-select-columns.component';
+
+describe('MultiSelectColumnsComponent', () => {
+  let component: MultiSelectColumnsComponent;
+  let fixture: ComponentFixture<MultiSelectColumnsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MultiSelectColumnsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MultiSelectColumnsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component.ts b/kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component.ts
new file mode 100644
index 00000000..db458e39
--- /dev/null
+++ b/kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component.ts
@@ -0,0 +1,24 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Column } from "../../../../base/component-with-table";
+
+@Component({
+  selector: "app-multi-select-columns",
+  templateUrl: "./multi-select-columns.component.html",
+  styleUrls: ["./multi-select-columns.component.scss"]
+})
+export class MultiSelectColumnsComponent {
+  @Input() columns: Column[] = [];
+
+  private _hiddenColumns: Column[] = [];
+  @Input()
+  set hiddenColumns(columns: Column[]) {
+    this._hiddenColumns = columns;
+    this.hiddenColumnsChange.emit(columns);
+  }
+
+  get hiddenColumns(): Column[] {
+    return this._hiddenColumns;
+  }
+
+  @Output() hiddenColumnsChange: EventEmitter<Column[]> = new EventEmitter<Column[]>();
+}
diff --git a/kdb-web/src/app/modules/shared/components/hideable-column/hideable-column.component.html b/kdb-web/src/app/modules/shared/components/hideable-column/hideable-column.component.html
new file mode 100644
index 00000000..6dbc7430
--- /dev/null
+++ b/kdb-web/src/app/modules/shared/components/hideable-column/hideable-column.component.html
@@ -0,0 +1 @@
+<ng-content></ng-content>
diff --git a/kdb-web/src/app/modules/shared/components/hideable-column/hideable-column.component.scss b/kdb-web/src/app/modules/shared/components/hideable-column/hideable-column.component.scss
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/kdb-web/src/app/modules/shared/components/hideable-column/hideable-column.component.scss
@@ -0,0 +1 @@
+
diff --git a/kdb-web/src/app/modules/shared/components/hideable-column/hideable-column.component.spec.ts b/kdb-web/src/app/modules/shared/components/hideable-column/hideable-column.component.spec.ts
new file mode 100644
index 00000000..dfa08452
--- /dev/null
+++ b/kdb-web/src/app/modules/shared/components/hideable-column/hideable-column.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HideableColumnComponent } from './hideable-column.component';
+
+describe('HideableColumnComponent', () => {
+  let component: HideableColumnComponent;
+  let fixture: ComponentFixture<HideableColumnComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HideableColumnComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HideableColumnComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kdb-web/src/app/modules/shared/components/hideable-column/hideable-column.component.ts b/kdb-web/src/app/modules/shared/components/hideable-column/hideable-column.component.ts
new file mode 100644
index 00000000..4cba495c
--- /dev/null
+++ b/kdb-web/src/app/modules/shared/components/hideable-column/hideable-column.component.ts
@@ -0,0 +1,16 @@
+import { Component, Input } from "@angular/core";
+import { HideableComponent } from "../../base/hideable-component";
+
+@Component({
+  selector: "[hideable-td]",
+  templateUrl: "./hideable-column.component.html",
+  styleUrls: ["./hideable-column.component.scss"]
+})
+export class HideableColumnComponent extends HideableComponent {
+  @Input("hideable-td") override column!: string;
+
+  constructor() {
+    super();
+  }
+
+}
diff --git a/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.html b/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.html
new file mode 100644
index 00000000..f35a2a42
--- /dev/null
+++ b/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.html
@@ -0,0 +1,11 @@
+<ng-template #content>
+  <ng-content></ng-content>
+</ng-template>
+
+<div *ngIf="sortable; else without" [pSortableColumn]="column">
+  <ng-container *ngTemplateOutlet="content"></ng-container>
+</div>
+
+<ng-template #without>
+  <ng-container *ngTemplateOutlet="content"></ng-container>
+</ng-template>
diff --git a/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.scss b/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.spec.ts b/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.spec.ts
new file mode 100644
index 00000000..27570e8b
--- /dev/null
+++ b/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HideableHeaderComponent } from './hideable-header.component';
+
+describe('HideableHeaderComponent', () => {
+  let component: HideableHeaderComponent;
+  let fixture: ComponentFixture<HideableHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HideableHeaderComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HideableHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.ts b/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.ts
new file mode 100644
index 00000000..bd7f5597
--- /dev/null
+++ b/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.ts
@@ -0,0 +1,16 @@
+import { Component, Input } from "@angular/core";
+import { HideableComponent } from "../../base/hideable-component";
+
+@Component({
+  selector: "[hideable-th]",
+  templateUrl: "./hideable-header.component.html",
+  styleUrls: ["./hideable-header.component.scss"]
+})
+export class HideableHeaderComponent extends HideableComponent {
+  @Input("hideable-th") override column!: string;
+  @Input() sortable: boolean = false;
+  constructor() {
+    super();
+  }
+
+}
diff --git a/kdb-web/src/app/modules/shared/shared.module.ts b/kdb-web/src/app/modules/shared/shared.module.ts
index 68eb5b71..ae7d2ebd 100644
--- a/kdb-web/src/app/modules/shared/shared.module.ts
+++ b/kdb-web/src/app/modules/shared/shared.module.ts
@@ -13,7 +13,7 @@ import { InputTextModule } from "primeng/inputtext";
 import { MenuModule } from "primeng/menu";
 import { PasswordModule } from "primeng/password";
 import { ProgressSpinnerModule } from "primeng/progressspinner";
-import { TableModule } from "primeng/table";
+import { SortableColumn, TableModule } from "primeng/table";
 import { ToastModule } from "primeng/toast";
 import { AuthRolePipe } from "./pipes/auth-role.pipe";
 import { IpAddressPipe } from "./pipes/ip-address.pipe";
@@ -27,6 +27,9 @@ import { HistoryBtnComponent } from "./components/history-btn/history-btn.compon
 import { DataViewModule, DataViewLayoutOptions } from "primeng/dataview";
 import { ConfigListComponent } from "./components/config-list/config-list.component";
 import { MultiSelectModule } from "primeng/multiselect";
+import { HideableColumnComponent } from './components/hideable-column/hideable-column.component';
+import { HideableHeaderComponent } from './components/hideable-header/hideable-header.component';
+import { MultiSelectColumnsComponent } from './base/multi-select-columns/multi-select-columns.component';
 
 
 @NgModule({
@@ -35,7 +38,10 @@ import { MultiSelectModule } from "primeng/multiselect";
     IpAddressPipe,
     BoolPipe,
     HistoryBtnComponent,
-    ConfigListComponent
+    ConfigListComponent,
+    HideableColumnComponent,
+    HideableHeaderComponent,
+    MultiSelectColumnsComponent,
   ],
   imports: [
     CommonModule,
@@ -61,7 +67,7 @@ import { MultiSelectModule } from "primeng/multiselect";
     ImageModule,
     SidebarModule,
     DataViewModule,
-    MultiSelectModule
+    MultiSelectModule,
   ],
   exports: [
     ButtonModule,
@@ -92,7 +98,10 @@ import { MultiSelectModule } from "primeng/multiselect";
     DataViewModule,
     DataViewLayoutOptions,
     ConfigListComponent,
-    MultiSelectModule
+    MultiSelectModule,
+    HideableColumnComponent,
+    HideableHeaderComponent,
+    MultiSelectColumnsComponent,
   ]
 })
 export class SharedModule {
diff --git a/kdb-web/src/app/modules/view/server/achievements/components/achievement/achievement.component.html b/kdb-web/src/app/modules/view/server/achievements/components/achievement/achievement.component.html
index 44f88ad5..23ea6dd2 100644
--- a/kdb-web/src/app/modules/view/server/achievements/components/achievement/achievement.component.html
+++ b/kdb-web/src/app/modules/view/server/achievements/components/achievement/achievement.component.html
@@ -9,11 +9,15 @@
 
       <ng-template pTemplate="caption">
         <div class="table-caption">
-          <div class="table-caption-text">
-            <ng-container *ngIf="!loading">{{achievements.length}} {{'common.of' | translate}}
-              {{dt.totalRecords}}
-            </ng-container>
-            {{'view.server.achievements.achievements' | translate}}
+          <div class="table-caption-table-info">
+            <div class="table-caption-text">
+              <ng-container *ngIf="!loading">{{achievements.length}} {{'common.of' | translate}}
+                {{dt.totalRecords}}
+              </ng-container>
+              {{'view.server.achievements.achievements' | translate}}
+            </div>
+
+            <app-multi-select-columns [columns]="columns" [(hiddenColumns)]="hiddenColumns"></app-multi-select-columns>
           </div>
 
           <div class="table-caption-btn-wrapper btn-wrapper">
@@ -29,44 +33,44 @@
 
       <ng-template pTemplate="header">
         <tr>
-          <th pSortableColumn="id">
+          <th hideable-th="id" [parent]="this" [sortable]="true">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.id' | translate}}</div>
               <p-sortIcon field="id" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="name">
+          <th hideable-th="name" [parent]="this" [sortable]="true">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.achievements.headers.name' | translate}}</div>
+              <div class="table-header-text">{{'common.name' | translate}}</div>
               <p-sortIcon field="name" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="description">
+          <th hideable-th="description" [parent]="this" [sortable]="true">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.achievements.headers.description' | translate}}</div>
+              <div class="table-header-text">{{'common.description' | translate}}</div>
               <p-sortIcon field="name" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="attribute">
+          <th hideable-th="attribute" [parent]="this" [sortable]="true">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.achievements.headers.attribute' | translate}}</div>
+              <div class="table-header-text">{{'common.attribute' | translate}}</div>
               <p-sortIcon field="attribute" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="operator">
+          <th hideable-th="operator" [parent]="this" [sortable]="true">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.achievements.headers.operator' | translate}}</div>
+              <div class="table-header-text">{{'common.operator' | translate}}</div>
               <p-sortIcon field="operator" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="value">
+          <th hideable-th="value" [parent]="this" [sortable]="true">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.achievements.headers.value' | translate}}</div>
+              <div class="table-header-text">{{'common.value' | translate}}</div>
               <p-sortIcon field="value" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
@@ -91,27 +95,27 @@
         </tr>
 
         <tr>
-          <th class="table-header-small">
+          <th hideable-th="id" [parent]="this" class="table-header-small">
             <form [formGroup]="filterForm">
               <input type="text" pInputText formControlName="id"
                      placeholder="{{'common.id' | translate}}">
             </form>
           </th>
-          <th>
+          <th hideable-th="name" [parent]="this">
             <form [formGroup]="filterForm">
               <input type="text" pInputText formControlName="name"
-                     placeholder="{{'view.server.achievements.headers.name' | translate}}">
+                     placeholder="{{'common.name' | translate}}">
             </form>
           </th>
-          <th>
+          <th hideable-th="description" [parent]="this">
             <form [formGroup]="filterForm">
-              <input type="text" pInputText formControlName="name"
-                     placeholder="{{'view.server.achievements.headers.description' | translate}}">
+              <input type="text" pInputText formControlName="description"
+                     placeholder="{{'common.description' | translate}}">
             </form>
           </th>
-          <th></th>
-          <th></th>
-          <th></th>
+          <th hideable-th="attribute" [parent]="this"></th>
+          <th hideable-th="operator" [parent]="this"></th>
+          <th hideable-th="value" [parent]="this"></th>
           <th class="table-header-small-dropdown"></th>
           <th class="table-header-small-dropdown"></th>
           <th class="table-header-actions"></th>
@@ -120,7 +124,7 @@
 
       <ng-template pTemplate="body" let-achievement let-editing="editing" let-ri="rowIndex">
         <tr [pEditableRow]="achievement">
-          <td>
+          <td hideable-td="id" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{achievement.id}}
@@ -131,7 +135,7 @@
             </p-cellEditor>
           </td>
 
-          <td>
+          <td hideable-td="name" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <input class="table-edit-input" pInputText type="text" [(ngModel)]="achievement.name">
@@ -142,7 +146,7 @@
             </p-cellEditor>
           </td>
 
-          <td>
+          <td hideable-td="description" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <input class="table-edit-input" pInputText type="text" [(ngModel)]="achievement.description">
@@ -153,11 +157,11 @@
             </p-cellEditor>
           </td>
 
-          <td>
+          <td hideable-td="attribute" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <p-dropdown [options]="attributes" [(ngModel)]="achievement.attribute"
-                            placeholder="{{'view.server.achievements.headers.attribute' | translate}}"></p-dropdown>
+                            placeholder="{{'common.attribute' | translate}}"></p-dropdown>
               </ng-template>
               <ng-template pTemplate="output">
                 {{achievement.attribute}}
@@ -165,10 +169,10 @@
             </p-cellEditor>
           </td>
 
-          <td>
+          <td hideable-td="description" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
-                <p-dropdown [options]="operators" [(ngModel)]="achievement.operator" placeholder="{{'view.server.achievements.headers.operator' | translate}}"></p-dropdown>
+                <p-dropdown [options]="operators" [(ngModel)]="achievement.operator" placeholder="{{'common.operator' | translate}}"></p-dropdown>
               </ng-template>
               <ng-template pTemplate="output">
                 {{achievement.operator}}
@@ -176,7 +180,7 @@
             </p-cellEditor>
           </td>
 
-          <td>
+          <td hideable-td="value" [parent]="this">
             <p-cellEditor *ngIf="getAchievementAttributeByName(achievement.attribute)?.type === 'number'">
               <ng-template pTemplate="input">
                 <input class="table-edit-input" pInputText min="0" type="number" [(ngModel)]="achievement.value">
diff --git a/kdb-web/src/app/modules/view/server/achievements/components/achievement/achievement.component.ts b/kdb-web/src/app/modules/view/server/achievements/components/achievement/achievement.component.ts
index 6a65d21c..a96d24ac 100644
--- a/kdb-web/src/app/modules/view/server/achievements/components/achievement/achievement.component.ts
+++ b/kdb-web/src/app/modules/view/server/achievements/components/achievement/achievement.component.ts
@@ -22,13 +22,14 @@ import { Table } from "primeng/table";
 import { User } from "../../../../../../models/data/user.model";
 import { AchievementMutationResult } from "../../../../../../models/graphql/result.model";
 import { Mutations } from "../../../../../../models/graphql/mutations.model";
+import { ComponentWithTable } from "../../../../../../base/component-with-table";
 
 @Component({
   selector: "app-achievement",
   templateUrl: "./achievement.component.html",
   styleUrls: ["./achievement.component.scss"]
 })
-export class AchievementComponent implements OnInit, OnDestroy {
+export class AchievementComponent extends ComponentWithTable implements OnInit, OnDestroy {
   public achievements: Achievement[] = [];
   public loading = true;
 
@@ -37,6 +38,7 @@ export class AchievementComponent implements OnInit, OnDestroy {
   public filterForm!: FormGroup<{
     id: FormControl<number | null>,
     name: FormControl<string | null>,
+    description: FormControl<string | null>,
     color: FormControl<string | null>,
     min_xp: FormControl<number | null>,
     permissions: FormControl<string | null>,
@@ -79,6 +81,7 @@ export class AchievementComponent implements OnInit, OnDestroy {
     private data: DataService,
     private sidebar: SidebarService,
     private route: ActivatedRoute) {
+    super("achievement", ["id", "name", "description", "attribute", "operator", "value"]);
   }
 
   public ngOnInit(): void {
@@ -157,6 +160,7 @@ export class AchievementComponent implements OnInit, OnDestroy {
     this.filterForm = this.fb.group({
       id: new FormControl<number | null>(null),
       name: new FormControl<string | null>(null),
+      description: new FormControl<string | null>(null),
       color: new FormControl<string | null>(null),
       min_xp: new FormControl<number | null>(null),
       permissions: new FormControl<string | null>(null)
diff --git a/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.html b/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.html
index c44d7208..3b2c6864 100644
--- a/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.html
+++ b/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.html
@@ -9,11 +9,14 @@
 
       <ng-template pTemplate="caption">
         <div class="table-caption">
-          <div class="table-caption-text">
-            <ng-container *ngIf="!loading">{{rules.length}} {{'common.of' | translate}}
-              {{dt.totalRecords}}
-            </ng-container>
-            {{'view.server.auto_roles.rules.auto_roles' | translate}}
+          <div class="table-caption-table-info">
+            <div class="table-caption-text">
+              <ng-container *ngIf="!loading">{{rules.length}} {{'common.of' | translate}}
+                {{dt.totalRecords}}
+              </ng-container>
+              {{'view.server.auto_roles.rules.auto_roles' | translate}}
+            </div>
+            <app-multi-select-columns [columns]="columns" [(hiddenColumns)]="hiddenColumns"></app-multi-select-columns>
           </div>
 
           <div class="table-caption-btn-wrapper btn-wrapper">
@@ -29,23 +32,23 @@
 
       <ng-template pTemplate="header">
         <tr>
-          <th pSortableColumn="id">
+          <th hideable-th="id" [parent]="this" [sortable]="true">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.id' | translate}}</div>
               <p-sortIcon field="id" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="roleName">
+          <th hideable-th="role" [parent]="this" [sortable]="true">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.auto_roles.rules.headers.role' | translate}}</div>
+              <div class="table-header-text">{{'common.role' | translate}}</div>
               <p-sortIcon field="roleName" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th>
+          <th hideable-th="emoji" [parent]="this">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.auto_roles.rules.headers.emoji' | translate}}</div>
+              <div class="table-header-text">{{'common.emoji' | translate}}</div>
             </div>
           </th>
 
@@ -69,17 +72,17 @@
         </tr>
 
         <tr>
-          <th class="table-header-small">
+          <th hideable-th="id" [parent]="this" class="table-header-small">
             <form [formGroup]="filterForm">
               <input type="text" pInputText formControlName="id" placeholder="{{'common.id' | translate}}">
             </form>
           </th>
-          <th>
+          <th hideable-th="role" [parent]="this">
             <form [formGroup]="filterForm">
-              <input type="text" pInputText formControlName="roleId" placeholder="{{'view.server.auto_roles.rules.headers.role' | translate}}">
+              <input type="text" pInputText formControlName="roleId" placeholder="{{'common.role' | translate}}">
             </form>
           </th>
-          <th></th>
+          <th hideable-th="emoji" [parent]="this"></th>
           <th class="table-header-small-dropdown"></th>
           <th class="table-header-small-dropdown"></th>
           <th class="table-header-actions"></th>
@@ -88,7 +91,7 @@
 
       <ng-template pTemplate="body" let-autoRoleRule let-editing="editing" let-ri="rowIndex">
         <tr [pEditableRow]="autoRoleRule">
-          <td>
+          <td hideable-td="id" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{autoRoleRule.id}}
@@ -99,11 +102,11 @@
             </p-cellEditor>
           </td>
 
-          <td>
+          <td hideable-td="role" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <p-dropdown [options]="roles" optionValue="value.id" [(ngModel)]="autoRoleRule.roleId"
-                            placeholder="{{'view.server.auto_roles.rules.headers.role' | translate}}"></p-dropdown>
+                            placeholder="{{'common.role' | translate}}"></p-dropdown>
               </ng-template>
               <ng-template pTemplate="output">
                 {{autoRoleRule.roleName}}
@@ -111,11 +114,11 @@
             </p-cellEditor>
           </td>
 
-          <td>
+          <td hideable-td="emoji" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <p-dropdown [options]="emojis" optionValue="value.name" [(ngModel)]="autoRoleRule.emojiName"
-                            placeholder="{{'view.server.auto_roles.rules.headers.emoji' | translate}}">
+                            placeholder="{{'common.emoji' | translate}}">
                   <ng-template pTemplate="selectedItem">
                     <div class="dropdown-icon-label-wrapper" *ngIf="autoRoleRule.emojiName">
                       <p-image [src]="getEmojiUrl(autoRoleRule.emojiName)" [alt]="autoRoleRule.emojiName" width="25"></p-image>
@@ -160,7 +163,7 @@
 
           <td>
             <div class="btn-wrapper">
-              <app-history-btn *ngIf="!isEditingNew" [id] ="autoRoleRule.id" [query]="query" translationKey="view.server.auto_roles.rules.header"></app-history-btn>
+              <app-history-btn *ngIf="!isEditingNew" [id]="autoRoleRule.id" [query]="query" translationKey="view.server.auto_roles.rules.header"></app-history-btn>
               <button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-pencil" (click)="onRowEditInit(dt, autoRoleRule, ri)"></button>
               <button *ngIf="!editing" pButton class="btn icon-btn danger-icon-btn" icon="pi pi-trash"
                       (click)="deleteAutoRoleRule(autoRoleRule)"></button>
diff --git a/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.ts b/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.ts
index 25257687..67025784 100644
--- a/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.ts
+++ b/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.ts
@@ -22,13 +22,14 @@ import { Table } from "primeng/table";
 import { AutoRoleMutationResult, AutoRoleRuleMutationResult } from "../../../../../../models/graphql/result.model";
 import { Mutations } from "../../../../../../models/graphql/mutations.model";
 import { Subject, throwError } from "rxjs";
+import { ComponentWithTable } from "../../../../../../base/component-with-table";
 
 @Component({
   selector: "app-auto-roles-rules",
   templateUrl: "./auto-roles-rules.component.html",
   styleUrls: ["./auto-roles-rules.component.scss"]
 })
-export class AutoRolesRulesComponent implements OnInit, OnDestroy {
+export class AutoRolesRulesComponent extends ComponentWithTable implements OnInit, OnDestroy {
 
   rules: AutoRoleRule[] = [];
   guild: Guild = { channels: [], emojis: [], roles: [] };
@@ -80,6 +81,7 @@ export class AutoRolesRulesComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private router: Router
   ) {
+    super('auto-role-rules', ['id', 'role', 'emoji']);
   }
 
   public getEmojiUrl(name: string): string {
diff --git a/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.html b/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.html
index b30ff372..a2d6dfb1 100644
--- a/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.html
+++ b/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.html
@@ -9,11 +9,15 @@
 
       <ng-template pTemplate="caption">
         <div class="table-caption">
-          <div class="table-caption-text">
-            <ng-container *ngIf="!loading">{{auto_roles.length}} {{'common.of' | translate}}
-              {{dt.totalRecords}}
-            </ng-container>
-            {{'view.server.auto_roles.auto_roles' | translate}}
+          <div class="table-caption-table-info">
+            <div class="table-caption-text">
+              <ng-container *ngIf="!loading">{{auto_roles.length}} {{'common.of' | translate}}
+                {{dt.totalRecords}}
+              </ng-container>
+              {{'view.server.auto_roles.auto_roles' | translate}}
+            </div>
+
+            <app-multi-select-columns [columns]="columns" [(hiddenColumns)]="hiddenColumns"></app-multi-select-columns>
           </div>
 
           <div class="table-caption-btn-wrapper btn-wrapper">
@@ -29,37 +33,37 @@
 
       <ng-template pTemplate="header">
         <tr>
-          <th pSortableColumn="id">
+          <th hideable-th="id" [parent]="this" [sortable]="true">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.id' | translate}}</div>
               <p-sortIcon field="id" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="discordChannelId">
+          <th hideable-th="channel_id" [parent]="this" [sortable]="true">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.auto_roles.headers.channel_id' | translate}}</div>
-              <p-sortIcon field="discordChannelId" class="table-header-icon"></p-sortIcon>
+              <div class="table-header-text">{{'common.channel_id' | translate}}</div>
+              <p-sortIcon field="channel_id" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="discordChannelName">
+          <th hideable-th="channel_name" [parent]="this" [sortable]="true">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.auto_roles.headers.channel_name' | translate}}</div>
-              <p-sortIcon field="discordChannelName" class="table-header-icon"></p-sortIcon>
+              <div class="table-header-text">{{'common.channel_name' | translate}}</div>
+              <p-sortIcon field="channel_name" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="discordMessageId">
+          <th hideable-th="message_id" [parent]="this" [sortable]="true">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.auto_roles.headers.message_id' | translate}}</div>
-              <p-sortIcon field="discordMessageId" class="table-header-icon"></p-sortIcon>
+              <div class="table-header-text">{{'common.message_id' | translate}}</div>
+              <p-sortIcon field="message_id" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th>
+          <th hideable-th="rule_count" [parent]="this" [sortable]="true">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.auto_roles.headers.role_count' | translate}}</div>
+              <div class="table-header-text">{{'common.rule_count' | translate}}</div>
             </div>
           </th>
 
@@ -83,27 +87,27 @@
         </tr>
 
         <tr>
-          <th class="table-header-small">
+          <th hideable-th="id" [parent]="this" class="table-header-small">
             <form [formGroup]="filterForm">
               <input type="text" pInputText formControlName="id" placeholder="{{'common.id' | translate}}">
             </form>
           </th>
-          <th>
+          <th hideable-th="channel_id" [parent]="this">
             <form [formGroup]="filterForm">
-              <input type="text" pInputText formControlName="channelId" placeholder="{{'view.server.auto_roles.headers.channel_id' | translate}}">
+              <input type="text" pInputText formControlName="channelId" placeholder="{{'common.channel_id' | translate}}">
             </form>
           </th>
-          <th>
+          <th hideable-th="channel_name" [parent]="this">
             <form [formGroup]="filterForm">
-              <input type="text" pInputText formControlName="channelName" placeholder="{{'view.server.auto_roles.headers.channel_name' | translate}}">
+              <input type="text" pInputText formControlName="channelName" placeholder="{{'common.channel_name' | translate}}">
             </form>
           </th>
-          <th>
+          <th hideable-th="message_id" [parent]="this">
             <form [formGroup]="filterForm">
-              <input type="text" pInputText formControlName="messageId" placeholder="{{'view.server.auto_roles.headers.message_id' | translate}}">
+              <input type="text" pInputText formControlName="messageId" placeholder="{{'common.message_id' | translate}}">
             </form>
           </th>
-          <th></th>
+          <th hideable-th="rule_count" [parent]="this"></th>
           <th class="table-header-small-dropdown"></th>
           <th class="table-header-small-dropdown"></th>
           <th class="table-header-actions"></th>
@@ -112,7 +116,7 @@
 
       <ng-template pTemplate="body" let-autoRole let-editing="editing" let-ri="rowIndex">
         <tr [pEditableRow]="autoRole">
-          <td>
+          <td hideable-td="id" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{autoRole.id}}
@@ -123,11 +127,11 @@
             </p-cellEditor>
           </td>
 
-          <td>
+          <td hideable-td="channel_id" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <p-dropdown [options]="channels" optionValue="value.id" [(ngModel)]="autoRole.channelId"
-                            placeholder="{{'view.server.auto_roles.headers.channel_id' | translate}}"></p-dropdown>
+                            placeholder="{{'common.channel_id' | translate}}"></p-dropdown>
               </ng-template>
               <ng-template pTemplate="output">
                 {{autoRole.channelId}}
@@ -135,7 +139,7 @@
             </p-cellEditor>
           </td>
 
-          <td>
+          <td hideable-td="channel_name" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{autoRole.channelName}}
@@ -146,7 +150,7 @@
             </p-cellEditor>
           </td>
 
-          <td>
+          <td hideable-td="message_id" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <input pInputText class="table-edit-input" [(ngModel)]="autoRole.messageId">
@@ -157,7 +161,7 @@
             </p-cellEditor>
           </td>
 
-          <td>
+          <td hideable-td="rule_count" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{autoRole.autoRoleRuleCount}}
diff --git a/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.ts b/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.ts
index 876f3b4a..34151775 100644
--- a/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.ts
+++ b/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.ts
@@ -22,13 +22,14 @@ import { Subject, throwError } from "rxjs";
 import { AutoRole, AutoRoleFilter } from "../../../../../../models/data/auto_role.model";
 import { ChannelType, Guild } from "../../../../../../models/data/discord.model";
 import { Server } from "../../../../../../models/data/server.model";
+import { ComponentWithTable } from "../../../../../../base/component-with-table";
 
 @Component({
   selector: "app-auto-roles",
   templateUrl: "./auto-roles.component.html",
   styleUrls: ["./auto-roles.component.scss"]
 })
-export class AutoRolesComponent implements OnInit, OnDestroy {
+export class AutoRolesComponent extends ComponentWithTable implements OnInit, OnDestroy {
   auto_roles: AutoRole[] = [];
   guild: Guild = { channels: [], emojis: [], roles: [] };
   channels: MenuItem[] = [];
@@ -76,6 +77,7 @@ export class AutoRolesComponent implements OnInit, OnDestroy {
     private sidebar: SidebarService,
     private route: ActivatedRoute
   ) {
+    super('auto-role', ['id', 'channel_id', 'channel_name', 'message_id', 'rule_count'])
   }
 
   public ngOnInit(): void {
diff --git a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html
index 9e059391..d7351d70 100644
--- a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html
+++ b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html
@@ -17,13 +17,7 @@
               {{'view.server.levels.levels' | translate}}
             </div>
 
-            <div class="table-caption-column-select">
-              <p-multiSelect [options]="columns" [(ngModel)]="hiddenColumns" optionLabel="name" placeholder="{{'common.hidden_columns' | translate}}" [filter]=false>
-                <ng-template let-item pTemplate="item">
-                  <div>{{'common.' + item.name | translate}}</div>
-                </ng-template>
-              </p-multiSelect>
-            </div>
+            <app-multi-select-columns [columns]="columns" [(hiddenColumns)]="hiddenColumns"></app-multi-select-columns>
           </div>
 
           <div class="table-caption-btn-wrapper btn-wrapper">
@@ -39,35 +33,35 @@
 
       <ng-template pTemplate="header">
         <tr>
-          <th *ngIf="isColumnVisible('id')" pSortableColumn="id">
+          <th hideable-th="id" [parent]="this" [sortable]="true">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.id' | translate}}</div>
               <p-sortIcon field="id" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th *ngIf="isColumnVisible('name')" pSortableColumn="name">
+          <th hideable-th="name" [parent]="this" [sortable]="true">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.name' | translate}}</div>
               <p-sortIcon field="name" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th *ngIf="isColumnVisible('color')" pSortableColumn="color">
+          <th hideable-th="color" [parent]="this" [sortable]="true">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.color' | translate}}</div>
               <p-sortIcon field="color" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th *ngIf="isColumnVisible('min_xp')" pSortableColumn="minXp">
+          <th hideable-th="min_xp" [parent]="this" [sortable]="true">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.min_xp' | translate}}</div>
               <p-sortIcon field="minXp" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th *ngIf="isColumnVisible('permissions')" pSortableColumn="permissions">
+          <th hideable-th="permissions" [parent]="this" [sortable]="true">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.permissions' | translate}}</div>
               <p-sortIcon field="permissions" class="table-header-icon"></p-sortIcon>
@@ -94,21 +88,21 @@
         </tr>
 
         <tr>
-          <th *ngIf="isColumnVisible('id')" class="table-header-small">
+          <th hideable-th="id" [parent]="this" class="table-header-small">
             <form [formGroup]="filterForm">
               <input type="text" pInputText formControlName="id"
                      placeholder="{{'common.id' | translate}}">
             </form>
           </th>
-          <th *ngIf="isColumnVisible('name')">
+          <th hideable-th="name" [parent]="this">
             <form [formGroup]="filterForm">
               <input type="text" pInputText formControlName="name"
                      placeholder="{{'common.name' | translate}}">
             </form>
           </th>
-          <th *ngIf="isColumnVisible('color')"></th>
-          <th *ngIf="isColumnVisible('min_xp')"></th>
-          <th *ngIf="isColumnVisible('permissions')"></th>
+          <th hideable-th="color" [parent]="this"></th>
+          <th hideable-th="min_xp" [parent]="this"></th>
+          <th hideable-th="permissions" [parent]="this"></th>
           <th class="table-header-small-dropdown"></th>
           <th class="table-header-small-dropdown"></th>
           <th class="table-header-actions"></th>
@@ -117,7 +111,7 @@
 
       <ng-template pTemplate="body" let-level let-editing="editing" let-ri="rowIndex">
         <tr [pEditableRow]="level">
-          <td *ngIf="isColumnVisible('id')">
+          <td hideable-th="id" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{level.id}}
@@ -128,7 +122,7 @@
             </p-cellEditor>
           </td>
 
-          <td *ngIf="isColumnVisible('name')">
+          <td hideable-th="name" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <input class="table-edit-input" pInputText type="text" [(ngModel)]="level.name">
@@ -139,7 +133,7 @@
             </p-cellEditor>
           </td>
 
-          <td *ngIf="isColumnVisible('color')">
+          <td hideable-th="color" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <input class="table-edit-input" pInputText type="text" [(ngModel)]="level.color">
@@ -150,7 +144,7 @@
             </p-cellEditor>
           </td>
 
-          <td *ngIf="isColumnVisible('min_xp')">
+          <td hideable-th="min_xp" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <input class="table-edit-input" pInputText min="0" type="number" [(ngModel)]="level.minXp">
@@ -161,7 +155,7 @@
             </p-cellEditor>
           </td>
 
-          <td *ngIf="isColumnVisible('permissions')">
+          <td hideable-th="permissions" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <input class="table-edit-input" pInputText min="0" type="text" [(ngModel)]="level.permissions">
diff --git a/kdb-web/src/app/modules/view/server/members/members.component.html b/kdb-web/src/app/modules/view/server/members/members.component.html
index ea3d2e52..e2a31ec0 100644
--- a/kdb-web/src/app/modules/view/server/members/members.component.html
+++ b/kdb-web/src/app/modules/view/server/members/members.component.html
@@ -17,13 +17,7 @@
               {{'view.server.members.members' | translate}}
             </div>
 
-            <div class="table-caption-column-select">
-              <p-multiSelect [options]="columns" [(ngModel)]="hiddenColumns" optionLabel="name" placeholder="{{'common.hidden_columns' | translate}}" [filter]=false>
-                <ng-template let-item pTemplate="item">
-                  <div>{{'common.' + item.name | translate}}</div>
-                </ng-template>
-              </p-multiSelect>
-            </div>
+            <app-multi-select-columns [columns]="columns" [(hiddenColumns)]="hiddenColumns"></app-multi-select-columns>
           </div>
 
           <div class="table-caption-btn-wrapper btn-wrapper">
@@ -36,49 +30,49 @@
 
       <ng-template pTemplate="header">
         <tr>
-          <th *ngIf="isColumnVisible('id')" pSortableColumn="id">
+          <th hideable-th="id" [parent]="this" [sortable]="true">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.id' | translate}}</div>
               <p-sortIcon field="id" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th *ngIf="isColumnVisible('discord_id')" pSortableColumn="discordId">
+          <th hideable-th="discord_id" [parent]="this" [sortable]="true">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.discord_id' | translate}}</div>
               <p-sortIcon field="discordId" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th *ngIf="isColumnVisible('name')" pSortableColumn="name">
+          <th hideable-th="name" [parent]="this" [sortable]="true">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.name' | translate}}</div>
               <p-sortIcon field="name" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th *ngIf="isColumnVisible('xp')" pSortableColumn="xp">
+          <th hideable-th="xp" [parent]="this" [sortable]="true">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.xp' | translate}}</div>
               <p-sortIcon field="xp" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th *ngIf="isColumnVisible('ontime')" pSortableColumn="ontime">
+          <th hideable-th="ontime" [parent]="this" [sortable]="true">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.ontime' | translate}}</div>
               <p-sortIcon field="ontime" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th *ngIf="isColumnVisible('left_server')" pSortableColumn="leftServer">
+          <th hideable-th="left_server" [parent]="this" [sortable]="true">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.left_server' | translate}}</div>
               <p-sortIcon field="leftServer" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th *ngIf="isColumnVisible('level')" pSortableColumn="level.name">
+          <th hideable-th="level" [parent]="this" [sortable]="true">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.level' | translate}}</div>
               <p-sortIcon field="level.name" class="table-header-icon"></p-sortIcon>
@@ -105,29 +99,29 @@
         </tr>
 
         <tr>
-          <th *ngIf="isColumnVisible('id')" class="table-header-small">
+          <th hideable-th="id" [parent]="this" class="table-header-small">
             <form [formGroup]="filterForm">
               <input type="text" pInputText formControlName="id" placeholder="{{'common.id' | translate}}">
             </form>
           </th>
-          <th *ngIf="isColumnVisible('discord_id')" class="table-header-medium">
+          <th hideable-th="discord_id" [parent]="this" class="table-header-medium">
             <form [formGroup]="filterForm">
               <input type="text" pInputText formControlName="discordId" placeholder="{{'common.discord_id' | translate}}">
             </form>
           </th>
-          <th *ngIf="isColumnVisible('name')" >
+          <th hideable-th="name" [parent]="this">
             <form [formGroup]="filterForm">
               <input type="text" pInputText formControlName="name" placeholder="{{'common.name' | translate}}">
             </form>
           </th>
-          <th *ngIf="isColumnVisible('xp')" ></th>
-          <th *ngIf="isColumnVisible('ontime')" ></th>
-          <th *ngIf="isColumnVisible('left_server')" class="table-header-small-dropdown">
+          <th hideable-th="xp" [parent]="this"></th>
+          <th hideable-th="ontime" [parent]="this"></th>
+          <th hideable-th="left_server" [parent]="this" class="table-header-small-dropdown">
             <form [formGroup]="filterForm">
               <p-dropdown formControlName="leftServer" [options]="leftServerOptions" placeholder="{{'common.left_server' | translate}}"></p-dropdown>
             </form>
           </th>
-          <th *ngIf="isColumnVisible('level')" class="table-header-small-dropdown">
+          <th hideable-th="level" [parent]="this" class="table-header-small-dropdown">
             <form [formGroup]="filterForm">
               <p-dropdown formControlName="level" [options]="levels" placeholder="{{'common.level' | translate}}"></p-dropdown>
             </form>
@@ -140,7 +134,7 @@
 
       <ng-template pTemplate="body" let-member let-editing="editing" let-ri="rowIndex">
         <tr [pEditableRow]="member">
-          <td *ngIf="isColumnVisible('id')">
+          <td hideable-th="id" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{member.id}}
@@ -150,7 +144,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td *ngIf="isColumnVisible('discord_id')">
+          <td hideable-th="discord_id" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{member.discordId}}
@@ -160,7 +154,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td *ngIf="isColumnVisible('name')">
+          <td hideable-th="name" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{member.name}}
@@ -170,7 +164,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td *ngIf="isColumnVisible('xp')">
+          <td hideable-th="xp" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <p-inputNumber class="table-edit-input" styleClass="input-number" [(ngModel)]="member.xp" mode="decimal" [min]="0" [useGrouping]="false" [showButtons]="true"
@@ -182,7 +176,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td *ngIf="isColumnVisible('ontime')">
+          <td hideable-th="ontime" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{member.ontime}}
@@ -192,7 +186,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td *ngIf="isColumnVisible('left_server')">
+          <td hideable-th="left_server" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{!member.leftServer | bool}}
@@ -202,7 +196,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td *ngIf="isColumnVisible('level')">
+          <td hideable-th="level" [parent]="this">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <p-dropdown [options]="levels" [(ngModel)]="member.level" placeholder="{{'common.level' | translate}}"></p-dropdown>
diff --git a/kdb-web/src/assets/i18n/de.json b/kdb-web/src/assets/i18n/de.json
index 9659ea62..e624840c 100644
--- a/kdb-web/src/assets/i18n/de.json
+++ b/kdb-web/src/assets/i18n/de.json
@@ -122,31 +122,26 @@
     }
   },
   "common": {
-    "active": "Aktiv",
-    "auth_role": "Rolle",
-    "first_name": "Vorname",
-    "last_name": "Nachname",
-    "password": "Passwort",
-    "role": "Rolle",
-    "users": "Benutzer",
-    "color": "Farbe",
-    "min_xp": "Min. XP",
-    "permissions": "Rechte",
-    "left_server": "Aktiv",
-    "level": "Level",
-    "ontime": "Ontime",
-    "xp": "XP",
     "404": "404 - Der Eintrag konnte nicht gefunden werden",
     "actions": "Aktionen",
+    "active": "Aktiv",
     "add": "Hinzufügen",
+    "attribute": "Attribut",
+    "auth_role": "Rolle",
     "bool_as_string": {
       "false": "Nein",
       "true": "Ja"
     },
+    "channel_id": "Kanal Id",
+    "channel_name": "Kanal",
+    "color": "Farbe",
     "created_at": "Erstellt am",
+    "description": "Beschreibung",
     "discord_id": "Discord Id",
     "email": "E-Mail",
+    "emoji": "Emoji",
     "error": "Fehler",
+    "first_name": "Vorname",
     "hidden_columns": "Ausgeblendete Spalten",
     "history": {
       "attribute": "Attribut",
@@ -173,13 +168,27 @@
     },
     "id": "Id",
     "joined_at": "Beigetreten am",
+    "last_name": "Nachname",
     "leaved_at": "Verlassen am",
+    "left_server": "Aktiv",
+    "level": "Level",
+    "message_id": "Nachricht Id",
+    "min_xp": "Min. XP",
     "modified_at": "Bearbeitet am",
     "name": "Name",
     "no_entries_found": "Keine Einträge gefunden",
     "of": "von",
+    "ontime": "Ontime",
+    "operator": "Operator",
+    "password": "Passwort",
+    "permissions": "Rechte",
     "reset_filters": "Filter zurücksetzen",
-    "save": "Speichern"
+    "role": "Rolle",
+    "rule_count": "Regeln",
+    "save": "Speichern",
+    "users": "Benutzer",
+    "value": "Wert",
+    "xp": "XP"
   },
   "dialog": {
     "abort": "Abbrechen",
@@ -344,13 +353,6 @@
       "achievements": {
         "achievements": "Errungenschaften",
         "header": "Errungenschaften",
-        "headers": {
-          "attribute": "Attribut",
-          "description": "Beschreibung",
-          "name": "Name",
-          "operator": "Operator",
-          "value": "Wert"
-        },
         "message": {
           "achievement_create": "Errungenschaft erstellt",
           "achievement_create_d": "Errungenschaft {{name}} erfolgreich erstellt",
@@ -371,12 +373,6 @@
       "auto_roles": {
         "auto_roles": "Auto Rollen",
         "header": "Auto Rollen",
-        "headers": {
-          "channel_id": "Kanal Id",
-          "channel_name": "Kanal",
-          "message_id": "Nachricht Id",
-          "role_count": "Regeln"
-        },
         "message": {
           "auto_role_create": "Auto Rolle erstellt",
           "auto_role_create_d": "Auto Rolle {{id}} erfolgreich erstellt",
@@ -392,10 +388,6 @@
         "rules": {
           "auto_roles": "Auto Rollen Regeln",
           "header": "Auto Rollen Regeln",
-          "headers": {
-            "emoji": "Emoji",
-            "role": "Rolle"
-          },
           "message": {
             "auto_role_rule_create": "Auto Rollen Regel erstellt",
             "auto_role_rule_create_d": "Auto Rollen Regel {{id}} erfolgreich erstellt",
diff --git a/kdb-web/src/assets/i18n/en.json b/kdb-web/src/assets/i18n/en.json
index cfc8e077..6ca78d9a 100644
--- a/kdb-web/src/assets/i18n/en.json
+++ b/kdb-web/src/assets/i18n/en.json
@@ -2,15 +2,6 @@
   "admin": {
     "auth_users": {
       "header": "User",
-      "headers": {
-        "active": "Active",
-        "auth_role": "Role",
-        "first_name": "First name",
-        "last_name": "Last name",
-        "password": "Password",
-        "role": "Role",
-        "users": "User"
-      },
       "message": {
         "cannot_delete_user": "User cannot be deleted",
         "invalid_email": "Invalid E-Mail",
@@ -133,15 +124,24 @@
   "common": {
     "404": "404 - Entry not found!",
     "actions": "Actions",
+    "active": "Active",
     "add": "Add",
+    "attribute": "Attribute",
+    "auth_role": "Role",
     "bool_as_string": {
       "false": "No",
       "true": "Yes"
     },
+    "channel_id": "Channel Id",
+    "channel_name": "Channel",
+    "color": "Color",
     "created_at": "Created at",
+    "description": "Description",
     "discord_id": "Discord Id",
     "email": "E-Mail",
+    "emoji": "Emoji",
     "error": "Error",
+    "first_name": "First name",
     "hidden_columns": "Hidden columns",
     "history": {
       "attribute": "Attribute",
@@ -168,13 +168,27 @@
     },
     "id": "Id",
     "joined_at": "Joined at",
+    "last_name": "Last name",
     "leaved_at": "Leaved at",
+    "left_server": "Active",
+    "level": "Level",
+    "message_id": "Message Id",
+    "min_xp": "Min. XP",
     "modified_at": "Modified at",
     "name": "Name",
     "no_entries_found": "No entries found",
     "of": "of",
+    "ontime": "Ontime",
+    "operator": "Operator",
+    "password": "Password",
+    "permissions": "Permissions",
     "reset_filters": "Reset filters",
-    "save": "Save"
+    "role": "Role",
+    "rule_count": "Rules",
+    "save": "Save",
+    "users": "User",
+    "value": "Value",
+    "xp": "XP"
   },
   "dialog": {
     "abort": "Abort",
@@ -339,13 +353,6 @@
       "achievements": {
         "achievements": "Achievements",
         "header": "Achievements",
-        "headers": {
-          "attribute": "Attribute",
-          "description": "Description",
-          "name": "Namer",
-          "operator": "Operator",
-          "value": "Value"
-        },
         "message": {
           "achievement_create": "Achievement created",
           "achievement_create_d": "Achievement {{name}} successfully created",
@@ -366,12 +373,6 @@
       "auto_roles": {
         "auto_roles": "Auto roles",
         "header": "Auto roles",
-        "headers": {
-          "channel_id": "Channel Id",
-          "channel_name": "Channel",
-          "message_id": "Message Id",
-          "role_count": "Rules"
-        },
         "message": {
           "auto_role_create": "Auto role created",
           "auto_role_create_d": "Auto role {{id}} created successfully",
@@ -387,10 +388,6 @@
         "rules": {
           "auto_roles": "Auto role rules",
           "header": "Auto role rules",
-          "headers": {
-            "emoji": "Emoji",
-            "role": "Role"
-          },
           "message": {
             "auto_role_rule_create": "Auto role rules created",
             "auto_role_rule_create_d": "Auto role rule {{id}} successfully created",
@@ -447,12 +444,6 @@
       "header": "Server",
       "levels": {
         "header": "Level",
-        "headers": {
-          "color": "Color",
-          "min_xp": "Min. XP",
-          "name": "Name",
-          "permissions": "Permissions"
-        },
         "levels": "Level",
         "message": {
           "level_create": "Level created",
@@ -473,13 +464,6 @@
       },
       "members": {
         "header": "Members",
-        "headers": {
-          "left_server": "Active",
-          "level": "Level",
-          "name": "Name",
-          "ontime": "Ontime",
-          "xp": "XP"
-        },
         "members": "Members",
         "message": {
           "user_change_failed": "User change failed",
diff --git a/kdb-web/src/styles.scss b/kdb-web/src/styles.scss
index af15846a..3f86883e 100644
--- a/kdb-web/src/styles.scss
+++ b/kdb-web/src/styles.scss
@@ -616,3 +616,7 @@ footer {
     align-items: center;
   }
 }
+
+.hidden-column {
+  display: none;
+}
diff --git a/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss b/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss
index 60974511..a14d03eb 100644
--- a/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss
+++ b/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss
@@ -586,8 +586,10 @@
   }
 
   .p-datatable .p-sortable-column.p-highlight,
-  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon,
+  .p-datatable .p-sortable-column:not(.p-highlight):hover{
     color: $primaryHeaderColor !important;
+    background-color: transparent !important;
   }
 
   .p-dropdown:not(.p-disabled):hover,
-- 
2.45.2