feat(admin-ui): Improve layout of list tables

admin-ui/src/app/catalog/components/facet-list/facet-list.component.html

@@ -17,7 +17,7 @@
 >
     <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
-    <vdr-dt-column>{{ 'catalog.values' | translate }}</vdr-dt-column>
+    <vdr-dt-column [expand]="true">{{ 'catalog.values' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-facet="item">

admin-ui/src/app/catalog/components/product-list/product-list.component.html

@@ -37,7 +37,7 @@
     (itemsPerPageChange)="setItemsPerPage($event)"
 >
     <vdr-dt-column></vdr-dt-column>
-    <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
+    <vdr-dt-column [expand]="true">{{ 'common.name' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-result="item">

admin-ui/src/app/customer/components/customer-list/customer-list.component.html

@@ -16,8 +16,8 @@
     (itemsPerPageChange)="setItemsPerPage($event)"
 >
     <vdr-dt-column>{{ 'common.ID' | translate }}</vdr-dt-column>
-    <vdr-dt-column>{{ 'customer.name' | translate }}</vdr-dt-column>
-    <vdr-dt-column>{{ 'customer.email-address' | translate }}</vdr-dt-column>
+    <vdr-dt-column [expand]="true">{{ 'customer.name' | translate }}</vdr-dt-column>
+    <vdr-dt-column [expand]="true">{{ 'customer.email-address' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'customer.customer-type' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-customer="item">

admin-ui/src/app/settings/components/country-list/country-list.component.html

@@ -26,7 +26,7 @@
     (allSelectChange)="toggleSelectAll()"
 >
     <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
-    <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
+    <vdr-dt-column [expand]="true">{{ 'common.name' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'settings.zone' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.enabled' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>

admin-ui/src/app/shared/components/data-table/data-table-column.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
 
 @Component({
     selector: 'vdr-dt-column',
@@ -7,5 +7,9 @@ import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
     `,
 })
 export class DataTableColumnComponent {
+    /**
+     * When set to true, this column will expand to use avaiable width
+     */
+    @Input() expand = false;
     @ViewChild(TemplateRef) template: TemplateRef<any>;
 }

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

@@ -9,7 +9,7 @@
                         (selectedChange)="allSelectChange.emit()"
                     ></vdr-select-toggle>
                 </th>
-                <th *ngFor="let header of columns?.toArray()" class="left">
+                <th *ngFor="let header of columns?.toArray()" class="left" [class.expand]="header.expand">
                     <ng-container *ngTemplateOutlet="header.template"></ng-container>
                 </th>
             </tr>

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

@@ -4,6 +4,10 @@ thead th {
     position: sticky;
     top: 24px;
     z-index: 1;
+
+    &.expand {
+        width: 100%;
+    }
 }
 
 .table-footer {