feat(admin-ui): Implement column config in data table

packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-column.component.ts

@@ -5,13 +5,19 @@ import { Component, ContentChild, Input, OnInit, TemplateRef, ViewChild } from '
     template: ``,
     exportAs: 'row',
 })
-export class DataTable2ColumnComponent<T> {
+export class DataTable2ColumnComponent<T> implements OnInit {
     /**
      * When set to true, this column will expand to use available width
      */
     @Input() expand = false;
     @Input() heading: string;
     @Input() align: 'left' | 'right' | 'center' = 'left';
+    @Input() optional = false;
+    visible = true;
     @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>;
     item: T;
+
+    ngOnInit() {
+        this.visible = this.optional ? false : true;
+    }
 }

packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table2.component.html

@@ -12,14 +12,17 @@
                     (change)="onToggleAllClick()"
                 />
             </th>
-            <th *ngFor="let column of columns?.toArray()" class="align-middle" [class.expand]="column.expand">
+            <th *ngFor="let column of visibleColumns; last as isLast" class="align-middle" [class.expand]="column.expand">
                 <div class="cell-content" [ngClass]="column.align">
                     {{ column.heading }}
                 </div>
+                <div *ngIf="isLast" class="column-picker">
+                    <vdr-data-table-colum-picker [columns]="columns?.toArray()"></vdr-data-table-colum-picker>
+                </div>
             </th>
         </tr>
         <tr *ngIf="searchTermControl || filters?.length">
-            <th [attr.colspan]="columns.length + (selectionManager ? 1 : 0)" class="filter-row">
+            <th [attr.colspan]="visibleColumns.length + (selectionManager ? 1 : 0)" class="filter-row">
                 <input [formControl]="searchTermControl" [placeholder]="searchTermPlaceholder" />
                 <div class="filters">
                     <vdr-data-table-filters
@@ -59,7 +62,7 @@
                     (click)="onRowClick(item, $event)"
                 />
             </td>
-            <td *ngFor="let column of columns?.toArray()">
+            <td *ngFor="let column of visibleColumns">
                 <div class="cell-content" [ngClass]="column.align">
                     <ng-container
                         *ngTemplateOutlet="column.template; context: { item: item, index: i }"
@@ -69,12 +72,12 @@
         </tr>
         <ng-container>
             <tr *ngIf="!items?.length">
-                <td [attr.colspan]="columns.length + (selectionManager ? 1 : 0)">
+                <td [attr.colspan]="visibleColumns.length + (selectionManager ? 1 : 0)">
                     <vdr-empty-placeholder [emptyStateLabel]="emptyStateLabel"></vdr-empty-placeholder>
                 </td>
             </tr>
             <tr>
-                <td *ngFor="let column of columns?.toArray()" class="left align-middle"></td>
+                <td *ngFor="let column of visibleColumns" class="left align-middle"></td>
             </tr>
         </ng-container>
     </tbody>

packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table2.component.scss

@@ -36,6 +36,13 @@ th {
     font-size: var(--font-size-xs);
     font-weight: 600;
     text-transform: uppercase;
+    position: relative;
+}
+
+.column-picker {
+    position: absolute;
+    right: 2px;
+    top: 7px;
 }
 
 .filter-row {

packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table2.component.ts

@@ -115,6 +115,10 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnIn
 
     constructor(private changeDetectorRef: ChangeDetectorRef) {}
 
+    get visibleColumns() {
+        return this.columns?.filter(c => c.visible) ?? [];
+    }
+
     private shiftDownHandler = (event: KeyboardEvent) => {
         if (event.shiftKey && !this.disableSelect) {
             this.disableSelect = true;

packages/admin-ui/src/lib/core/src/shared/components/data-table-column-picker/data-table-column-picker.component.html

@@ -0,0 +1,18 @@
+<vdr-dropdown [manualToggle]="true">
+    <button class="button-small" vdrDropdownTrigger [title]="'common.select-table-columns' | translate">
+        <clr-icon shape="view-columns"></clr-icon>
+    </button>
+    <vdr-dropdown-menu vdrPosition="bottom-left">
+        <div *ngFor="let column of columns; index as i" class="mx-2">
+            <label>
+                <input
+                    type="checkbox"
+                    [checked]="column.visible"
+                    (change)="toggleColumn(column)"
+                    class="mr-1"
+                />
+                <span>{{ column.heading | translate }}</span>
+            </label>
+        </div>
+    </vdr-dropdown-menu>
+</vdr-dropdown>

packages/admin-ui/src/lib/core/src/shared/components/data-table-column-picker/data-table-column-picker.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { DataTable2ColumnComponent } from '../data-table-2/data-table-column.component';
+
+@Component({
+    selector: 'vdr-data-table-colum-picker',
+    templateUrl: './data-table-column-picker.component.html',
+    styleUrls: ['./data-table-column-picker.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DataTableColumnPickerComponent {
+    @Input() columns: Array<DataTable2ColumnComponent<any>>;
+
+    toggleColumn(column: DataTable2ColumnComponent<any>) {
+        column.visible = !column.visible;
+    }
+}

packages/admin-ui/src/lib/core/src/shared/shared.module.ts

@@ -149,6 +149,7 @@ import { PageHeaderTabsComponent } from './components/page-header-tabs/page-head
 import { PageBodyComponent } from './components/page-body/page-body.component';
 import { DataTableFiltersComponent } from './components/data-table-filters/data-table-filters.component';
 import { DataTableFilterLabelComponent } from './components/data-table-filter-label/data-table-filter-label.component';
+import { DataTableColumnPickerComponent } from './components/data-table-column-picker/data-table-column-picker.component';
 
 const IMPORTS = [
     ClarityModule,
@@ -266,6 +267,7 @@ const DECLARATIONS = [
     DataTable2ColumnComponent,
     DataTableFiltersComponent,
     DataTableFilterLabelComponent,
+    DataTableColumnPickerComponent,
 ];
 
 const DYNAMIC_FORM_INPUTS = [

packages/admin-ui/src/lib/order/src/components/order-list/order-list.component.html

@@ -136,7 +136,7 @@
                 {{ order.updatedAt | timeAgo }}
             </ng-template>
         </vdr-dt2-column>
-        <vdr-dt2-column [heading]="'order.placed-at' | translate">
+        <vdr-dt2-column [heading]="'order.placed-at' | translate" [optional]="true">
             <ng-template let-order="item">
                 {{ order.orderPlacedAt | localeDate : 'short' }}
             </ng-template>