From 73a78dbbf54c324dcfe6af7b173aba3f08d94a04 Mon Sep 17 00:00:00 2001
From: Michael Bromley <michael@michaelbromley.co.uk>
Date: Wed, 6 Sep 2023 13:36:40 +0200
Subject: [PATCH] fix(admin-ui): Give all data table columns immutable ids

Previously the ID was based on the heading, which changed when updating the current
display language.
---
 .../collection-contents.component.html        | 10 +--
 .../collection-list.component.html            | 18 ++---
 .../facet-list/facet-list.component.html      | 14 ++--
 .../move-collections-dialog.component.html    |  8 +--
 .../product-list/product-list.component.html  | 69 +++----------------
 .../product-options-editor.component.html     | 12 ++--
 .../product-variant-list.component.html       | 20 +++---
 .../product-variants-editor.component.html    | 18 ++---
 .../stock-location-list.component.html        | 10 +--
 .../data-table-column.component.ts            |  5 +-
 ...ata-table-custom-field-column.component.ts |  5 +-
 .../customer-detail.component.html            | 16 ++---
 .../customer-group-list.component.html        | 10 +--
 .../customer-group-member-list.component.html | 12 ++--
 .../customer-list.component.html              | 12 ++--
 .../latest-orders-widget.component.html       | 10 +--
 .../promotion-list.component.html             | 20 +++---
 .../order-history-entry-host.component.ts     |  2 +-
 .../order-list/order-list.component.html      | 20 +++---
 .../order-table/order-table.component.html    | 12 ++--
 .../administrator-list.component.html         | 12 ++--
 .../channel-list/channel-list.component.html  | 10 +--
 .../country-list/country-list.component.html  | 12 ++--
 .../payment-method-list.component.html        | 12 ++--
 .../role-list/role-list.component.html        | 14 ++--
 .../seller-list/seller-list.component.html    |  8 +--
 .../shipping-method-list.component.html       | 14 ++--
 .../tax-category-list.component.html          | 10 +--
 .../tax-rate-list.component.html              | 18 ++---
 .../zone-list/zone-list.component.html        | 10 +--
 .../zone-member-list.component.html           | 12 ++--
 .../job-list/job-list.component.html          | 14 ++--
 32 files changed, 196 insertions(+), 253 deletions(-)

diff --git a/packages/admin-ui/src/lib/catalog/src/components/collection-contents/collection-contents.component.html b/packages/admin-ui/src/lib/catalog/src/components/collection-contents/collection-contents.component.html
index 70e152dd66..7b428d6eb8 100644
--- a/packages/admin-ui/src/lib/catalog/src/components/collection-contents/collection-contents.component.html
+++ b/packages/admin-ui/src/lib/catalog/src/components/collection-contents/collection-contents.component.html
@@ -19,22 +19,22 @@
             [searchTermControl]="filterTermControl"
             [searchTermPlaceholder]="'catalog.filter-by-name' | translate"
         />
-        <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+        <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
             <ng-template let-variant="item">
                 {{ variant.id }}
             </ng-template>
         </vdr-dt2-column>
-        <vdr-dt2-column [heading]="'common.created-at' | translate" [hiddenByDefault]="true">
+        <vdr-dt2-column [heading]="'common.created-at' | translate" id="created-at" [hiddenByDefault]="true">
             <ng-template let-variant="item">
                 {{ variant.createdAt | localeDate : 'short' }}
             </ng-template>
         </vdr-dt2-column>
-        <vdr-dt2-column [heading]="'common.updated-at' | translate" [hiddenByDefault]="true">
+        <vdr-dt2-column [heading]="'common.updated-at' | translate" id="updated-at" [hiddenByDefault]="true">
             <ng-template let-variant="item">
                 {{ variant.updatedAt | localeDate : 'short' }}
             </ng-template>
         </vdr-dt2-column>
-        <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false">
+        <vdr-dt2-column [heading]="'common.name' | translate" id="name" [optional]="false">
             <ng-template let-variant="item">
                 <a class="button-ghost" [routerLink]="['/catalog/inventory', variant.productId]"
                     ><span>{{ variant.name }}</span
@@ -42,7 +42,7 @@
                 /></a>
             </ng-template>
         </vdr-dt2-column>
-        <vdr-dt2-column [heading]="'catalog.sku' | translate" [optional]="false">
+        <vdr-dt2-column [heading]="'catalog.sku' | translate" id="sku" [optional]="false">
             <ng-template let-variant="item">
                 {{ variant.sku }}
             </ng-template>
diff --git a/packages/admin-ui/src/lib/catalog/src/components/collection-list/collection-list.component.html b/packages/admin-ui/src/lib/catalog/src/components/collection-list/collection-list.component.html
index ee5ad91b10..1900c0dec4 100644
--- a/packages/admin-ui/src/lib/catalog/src/components/collection-list/collection-list.component.html
+++ b/packages/admin-ui/src/lib/catalog/src/components/collection-list/collection-list.component.html
@@ -45,13 +45,13 @@
                 [searchTermControl]="searchTermControl"
                 [searchTermPlaceholder]="'common.search-by-name' | translate"
             ></vdr-dt2-search>
-            <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+            <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
                 <ng-template let-collection="item">
                     {{ collection.id }}
                 </ng-template>
             </vdr-dt2-column>
             <vdr-dt2-column
-                [heading]="'common.created-at' | translate"
+                [heading]="'common.created-at' | translate" id="created-at"
                 [hiddenByDefault]="true"
                 [sort]="sorts.get('createdAt')"
             >
@@ -60,7 +60,7 @@
                 </ng-template>
             </vdr-dt2-column>
             <vdr-dt2-column
-                [heading]="'common.updated-at' | translate"
+                [heading]="'common.updated-at' | translate" id="updated-at"
                 [hiddenByDefault]="true"
                 [sort]="sorts.get('updatedAt')"
             >
@@ -69,7 +69,7 @@
                 </ng-template>
             </vdr-dt2-column>
             <vdr-dt2-column
-                [heading]="'common.position' | translate"
+                [heading]="'common.position' | translate" id="position"
                 [hiddenByDefault]="true"
                 [sort]="sorts.get('position')"
             >
@@ -78,7 +78,7 @@
                 </ng-template>
             </vdr-dt2-column>
             <vdr-dt2-column
-                [heading]="'common.name' | translate"
+                [heading]="'common.name' | translate" id="name"
                 [optional]="false"
                 [sort]="sorts.get('name')"
             >
@@ -104,7 +104,7 @@
                     </a>
                 </ng-template>
             </vdr-dt2-column>
-            <vdr-dt2-column [heading]="'common.breadcrumb' | translate">
+            <vdr-dt2-column [heading]="'common.breadcrumb' | translate" id="breadcrumb">
                 <ng-template let-collection="item">
                     <div class="breadcrumb">
                         <ng-container *ngIf="collection | collectionBreadcrumb as breadcrumbs">
@@ -118,12 +118,12 @@
                     </div>
                 </ng-template>
             </vdr-dt2-column>
-            <vdr-dt2-column [heading]="'common.slug' | translate" [sort]="sorts.get('slug')">
+            <vdr-dt2-column [heading]="'common.slug' | translate" id="slug" [sort]="sorts.get('slug')">
                 <ng-template let-collection="item">
                     {{ collection.slug }}
                 </ng-template>
             </vdr-dt2-column>
-            <vdr-dt2-column [heading]="'common.visibility' | translate">
+            <vdr-dt2-column [heading]="'common.visibility' | translate" id="visibility">
                 <ng-template let-collection="item">
                     <vdr-chip *ngIf="collection.isPrivate" colorType="warning">{{
                         'common.private' | translate
@@ -133,7 +133,7 @@
                         }}</vdr-chip>
                 </ng-template>
             </vdr-dt2-column>
-            <vdr-dt2-column [heading]="'common.view-contents' | translate" [optional]="false">
+            <vdr-dt2-column [heading]="'common.view-contents' | translate" id="view-contents" [optional]="false">
                 <ng-template let-collection="item">
                     <a
                         class="button-small bg-weight-150"
diff --git a/packages/admin-ui/src/lib/catalog/src/components/facet-list/facet-list.component.html b/packages/admin-ui/src/lib/catalog/src/components/facet-list/facet-list.component.html
index 35f112361d..9c80fe1344 100644
--- a/packages/admin-ui/src/lib/catalog/src/components/facet-list/facet-list.component.html
+++ b/packages/admin-ui/src/lib/catalog/src/components/facet-list/facet-list.component.html
@@ -40,13 +40,13 @@
         [searchTermControl]="searchTermControl"
         [searchTermPlaceholder]="'catalog.filter-by-name' | translate"
     ></vdr-dt2-search>
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true" [sort]="sorts.get('id')">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true" [sort]="sorts.get('id')">
         <ng-template let-facet="item">
             {{ facet.id }}
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.created-at' | translate"
+        [heading]="'common.created-at' | translate" id="created-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('createdAt')"
     >
@@ -55,7 +55,7 @@
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.updated-at' | translate"
+        [heading]="'common.updated-at' | translate" id="updated-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('updatedAt')"
     >
@@ -63,7 +63,7 @@
             {{ facet.updatedAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false" [sort]="sorts.get('name')">
+    <vdr-dt2-column [heading]="'common.name' | translate" id="name" [optional]="false" [sort]="sorts.get('name')">
         <ng-template let-facet="item">
             <a class="button-ghost" [routerLink]="['./', facet.id]"
                 ><span>{{ facet.name }}</span>
@@ -71,12 +71,12 @@
             </a>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.code' | translate">
+    <vdr-dt2-column [heading]="'common.code' | translate" id="code">
         <ng-template let-facet="item">
             {{ facet.code }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.visibility' | translate">
+    <vdr-dt2-column [heading]="'common.visibility' | translate" id="visibility">
         <ng-template let-facet="item">
             <vdr-chip *ngIf="facet.isPrivate" colorType="warning">{{
                 'common.private' | translate
@@ -86,7 +86,7 @@
             }}</vdr-chip>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'catalog.values' | translate">
+    <vdr-dt2-column [heading]="'catalog.values' | translate" id="values">
         <ng-template let-facet="item">
             <div class="facet-values-list">
                 <vdr-facet-value-chip
diff --git a/packages/admin-ui/src/lib/catalog/src/components/move-collections-dialog/move-collections-dialog.component.html b/packages/admin-ui/src/lib/catalog/src/components/move-collections-dialog/move-collections-dialog.component.html
index 22d3782852..7968e2df07 100644
--- a/packages/admin-ui/src/lib/catalog/src/components/move-collections-dialog/move-collections-dialog.component.html
+++ b/packages/admin-ui/src/lib/catalog/src/components/move-collections-dialog/move-collections-dialog.component.html
@@ -16,12 +16,12 @@
         [searchTermControl]="searchTermControl"
         [searchTermPlaceholder]="'common.search-by-name' | translate"
     ></vdr-dt2-search>
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
         <ng-template let-collection="item">
             {{ collection.id }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false">
+    <vdr-dt2-column [heading]="'common.name' | translate" id="name" [optional]="false">
         <ng-template let-collection="item" let-depth="depth">
             <div [ngClass]="'indent-' + depth"></div>
             <clr-icon
@@ -46,7 +46,7 @@
             </button>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.breadcrumb' | translate">
+    <vdr-dt2-column [heading]="'common.breadcrumb' | translate" id="breadcrumb">
         <ng-template let-collection="item">
             <div class="breadcrumb">
                 <ng-container *ngIf="collection | collectionBreadcrumb as breadcrumbs">
@@ -60,7 +60,7 @@
             </div>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.slug' | translate">
+    <vdr-dt2-column [heading]="'common.slug' | translate" id="slug">
         <ng-template let-collection="item">
             {{ collection.slug }}
         </ng-template>
diff --git a/packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.html b/packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.html
index 423fe78041..7edd977fe8 100644
--- a/packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.html
+++ b/packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.html
@@ -47,70 +47,17 @@
         [hostComponent]="this"
         [selectionManager]="selectionManager"
     ></vdr-bulk-action-menu>
-    <!--<ng-template #vdrDt2CustomSearch>
-            <div class="search-form">
-                <vdr-product-search-input
-                    #productSearchInputComponent
-                    [facetValueResults]="facetValues$ | async"
-                    (searchTermChange)="setSearchTerm($event)"
-                    (facetValueChange)="setFacetValueIds($event)"
-                ></vdr-product-search-input>
-                <vdr-dropdown class="search-settings-menu mr3">
-                    <button
-                        type="button"
-                        class="icon-button search-index-button"
-                        [title]="
-                            (pendingSearchIndexUpdates
-                                ? 'catalog.pending-search-index-updates'
-                                : 'catalog.search-index-controls'
-                            ) | translate
-                        "
-                        vdrDropdownTrigger
-                    >
-                        <clr-icon shape="cog"></clr-icon>
-                        <vdr-status-badge *ngIf="pendingSearchIndexUpdates" type="warning"></vdr-status-badge>
-                    </button>
-                    <vdr-dropdown-menu vdrPosition="bottom-right">
-                        <h4 class="dropdown-header">{{ 'catalog.search-index-controls' | translate }}</h4>
-                        <ng-container *ngIf="pendingSearchIndexUpdates">
-                            <button
-                                type="button"
-                                class="run-updates-button"
-                                vdrDropdownItem
-                                (click)="runPendingSearchIndexUpdates()"
-                                [disabled]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
-                            >
-                                <vdr-status-badge type="warning"></vdr-status-badge>
-                                {{
-                                    'catalog.run-pending-search-index-updates'
-                                        | translate : { count: pendingSearchIndexUpdates }
-                                }}
-                            </button>
-                            <div class="dropdown-divider"></div>
-                        </ng-container>
-                        <button
-                            type="button"
-                            vdrDropdownItem
-                            (click)="rebuildSearchIndex()"
-                            [disabled]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
-                        >
-                            {{ 'catalog.rebuild-search-index' | translate }}
-                        </button>
-                    </vdr-dropdown-menu>
-                </vdr-dropdown>
-            </div>
-        </ng-template>-->
     <vdr-dt2-search
         [searchTermControl]="searchTermControl"
         [searchTermPlaceholder]="'catalog.filter-by-name' | translate"
     />
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true" [sort]="sorts.get('id')">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true" [sort]="sorts.get('id')">
         <ng-template let-product="item">
             {{ product.id }}
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.created-at' | translate"
+        [heading]="'common.created-at' | translate" id="created-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('createdAt')"
     >
@@ -119,7 +66,7 @@ <h4 class="dropdown-header">{{ 'catalog.search-index-controls' | translate }}</h
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.updated-at' | translate"
+        [heading]="'common.updated-at' | translate" id="updated-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('updatedAt')"
     >
@@ -127,7 +74,7 @@ <h4 class="dropdown-header">{{ 'catalog.search-index-controls' | translate }}</h
             {{ product.updatedAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.image' | translate">
+    <vdr-dt2-column [heading]="'common.image' | translate" id="image">
         <ng-template let-product="item">
             <div class="image-placeholder">
                 <img
@@ -142,7 +89,7 @@ <h4 class="dropdown-header">{{ 'catalog.search-index-controls' | translate }}</h
             </div>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'catalog.name' | translate" [optional]="false" [sort]="sorts.get('name')">
+    <vdr-dt2-column [heading]="'catalog.name' | translate" id="name" [optional]="false" [sort]="sorts.get('name')">
         <ng-template let-product="item">
             <a class="button-ghost" [routerLink]="['./', product.id]"
                 ><span>{{ product.name }}</span
@@ -150,12 +97,12 @@ <h4 class="dropdown-header">{{ 'catalog.search-index-controls' | translate }}</h
             /></a>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.slug' | translate" [sort]="sorts.get('slug')">
+    <vdr-dt2-column [heading]="'common.slug' | translate" id="slug" [sort]="sorts.get('slug')">
         <ng-template let-product="item">
             {{ product.slug }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.enabled' | translate">
+    <vdr-dt2-column [heading]="'common.enabled' | translate" id="enabled">
         <ng-template let-product="item">
             <vdr-chip *ngIf="product.enabled" colorType="success">{{
                 'common.enabled' | translate
@@ -165,7 +112,7 @@ <h4 class="dropdown-header">{{ 'catalog.search-index-controls' | translate }}</h
             }}</vdr-chip>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'catalog.number-of-variants' | translate">
+    <vdr-dt2-column [heading]="'catalog.number-of-variants' | translate" id="number-of-variants">
         <ng-template let-product="item">
             {{ 'catalog.variant-count' | translate : { count: product.variantList?.totalItems } }}
         </ng-template>
diff --git a/packages/admin-ui/src/lib/catalog/src/components/product-options-editor/product-options-editor.component.html b/packages/admin-ui/src/lib/catalog/src/components/product-options-editor/product-options-editor.component.html
index 4edd86fdb5..df891fd03a 100644
--- a/packages/admin-ui/src/lib/catalog/src/components/product-options-editor/product-options-editor.component.html
+++ b/packages/admin-ui/src/lib/catalog/src/components/product-options-editor/product-options-editor.component.html
@@ -83,22 +83,22 @@
                         (pageChange)="paginationSettings[optionGroup.value.id].currentPage = $event"
                         [totalItems]="options.length"
                     >
-                        <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+                        <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
                             <ng-template let-optionControl="item">
                                 {{ optionControl.value.id }}
                             </ng-template>
                         </vdr-dt2-column>
-                        <vdr-dt2-column [heading]="'common.created-at' | translate" [hiddenByDefault]="true">
+                        <vdr-dt2-column [heading]="'common.created-at' | translate" id="created-at" [hiddenByDefault]="true">
                             <ng-template let-optionControl="item">
                                 {{ optionControl.value.createdAt | localeDate : 'short' }}
                             </ng-template>
                         </vdr-dt2-column>
-                        <vdr-dt2-column [heading]="'common.updated-at' | translate" [hiddenByDefault]="true">
+                        <vdr-dt2-column [heading]="'common.updated-at' | translate" id="updated-at" [hiddenByDefault]="true">
                             <ng-template let-optionControl="item">
                                 {{ optionControl.value.updatedAt | localeDate : 'short' }}
                             </ng-template>
                         </vdr-dt2-column>
-                        <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false">
+                        <vdr-dt2-column [heading]="'common.name' | translate" id="name" [optional]="false">
                             <ng-template let-optionControl="item">
                                 <input
                                     type="text"
@@ -107,13 +107,13 @@
                                 />
                             </ng-template>
                         </vdr-dt2-column>
-                        <vdr-dt2-column [heading]="'common.code' | translate" [optional]="false">
+                        <vdr-dt2-column [heading]="'common.code' | translate" id="code" [optional]="false">
                             <ng-template let-optionControl="item">
                                 <input type="text" [formControl]="optionControl.get('code')" />
                             </ng-template>
                         </vdr-dt2-column>
                         <vdr-dt2-column
-                            [heading]="'common.custom-fields' | translate"
+                            [heading]="'common.custom-fields' | translate" id="custom-fields"
                             [hiddenByDefault]="optionCustomFields.length === 0"
                         >
                             <ng-template let-optionControl="item">
diff --git a/packages/admin-ui/src/lib/catalog/src/components/product-variant-list/product-variant-list.component.html b/packages/admin-ui/src/lib/catalog/src/components/product-variant-list/product-variant-list.component.html
index 22ac610275..2d97c1d677 100644
--- a/packages/admin-ui/src/lib/catalog/src/components/product-variant-list/product-variant-list.component.html
+++ b/packages/admin-ui/src/lib/catalog/src/components/product-variant-list/product-variant-list.component.html
@@ -25,13 +25,13 @@
         [searchTermControl]="searchTermControl"
         [searchTermPlaceholder]="'catalog.filter-by-sku' | translate"
     />
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true" [sort]="sorts.get('id')">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true" [sort]="sorts.get('id')">
         <ng-template let-variant="item">
             {{ variant.id }}
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.created-at' | translate"
+        [heading]="'common.created-at' | translate" id="created-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('createdAt')"
     >
@@ -40,7 +40,7 @@
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.updated-at' | translate"
+        [heading]="'common.updated-at' | translate" id="updated-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('updatedAt')"
     >
@@ -48,7 +48,7 @@
             {{ variant.updatedAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.image' | translate">
+    <vdr-dt2-column [heading]="'common.image' | translate" id="image">
         <ng-template let-variant="item">
             <div class="image-placeholder">
                 <img
@@ -63,7 +63,7 @@
             </div>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'catalog.name' | translate" [optional]="false" [sort]="sorts.get('name')">
+    <vdr-dt2-column [heading]="'catalog.name' | translate" id="name" [optional]="false" [sort]="sorts.get('name')">
         <ng-template let-variant="item">
             <a
                 class="button-ghost"
@@ -73,12 +73,12 @@
             /></a>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'catalog.sku' | translate" [sort]="sorts.get('sku')">
+    <vdr-dt2-column [heading]="'catalog.sku' | translate" id="sku" [sort]="sorts.get('sku')">
         <ng-template let-variant="item">
             {{ variant.sku }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.enabled' | translate">
+    <vdr-dt2-column [heading]="'common.enabled' | translate" id="enabled">
         <ng-template let-variant="item">
             <vdr-chip *ngIf="variant.enabled" colorType="success">{{
                 'common.enabled' | translate
@@ -89,7 +89,7 @@
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.price' | translate"
+        [heading]="'common.price' | translate" id="price"
         [hiddenByDefault]="true"
         [sort]="sorts.get('price')"
     >
@@ -97,13 +97,13 @@
             {{ variant.price | localeCurrency : variant.currencyCode }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.price-with-tax' | translate" [sort]="sorts.get('priceWithTax')">
+    <vdr-dt2-column [heading]="'common.price-with-tax' | translate" id="price-with-tax" [sort]="sorts.get('priceWithTax')">
         <ng-template let-variant="item">
             {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}
         </ng-template>
     </vdr-dt2-column>
 
-    <vdr-dt2-column [heading]="'catalog.stock-on-hand' | translate" [hiddenByDefault]="false">
+    <vdr-dt2-column [heading]="'catalog.stock-on-hand' | translate" id="stock-on-hand" [hiddenByDefault]="false">
         <ng-template let-variant="item">
             <vdr-chip *ngFor="let stockLevel of variant.stockLevels" [title]="stockLevel.stockLocation?.name">
                 <div class="flex center">
diff --git a/packages/admin-ui/src/lib/catalog/src/components/product-variants-editor/product-variants-editor.component.html b/packages/admin-ui/src/lib/catalog/src/components/product-variants-editor/product-variants-editor.component.html
index f274a3c41e..151651a255 100644
--- a/packages/admin-ui/src/lib/catalog/src/components/product-variants-editor/product-variants-editor.component.html
+++ b/packages/admin-ui/src/lib/catalog/src/components/product-variants-editor/product-variants-editor.component.html
@@ -45,32 +45,32 @@
                 [searchTermControl]="searchTermControl"
                 [searchTermPlaceholder]="'catalog.filter-by-name' | translate"
             />
-            <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+            <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
                 <ng-template let-variant="item">
                     {{ variant.id }}
                 </ng-template>
             </vdr-dt2-column>
-            <vdr-dt2-column [heading]="'common.created-at' | translate" [hiddenByDefault]="true">
+            <vdr-dt2-column [heading]="'common.created-at' | translate" id="created-at" [hiddenByDefault]="true">
                 <ng-template let-variant="item">
                     {{ variant.createdAt | localeDate : 'short' }}
                 </ng-template>
             </vdr-dt2-column>
-            <vdr-dt2-column [heading]="'common.updated-at' | translate" [hiddenByDefault]="true">
+            <vdr-dt2-column [heading]="'common.updated-at' | translate" id="updated-at" [hiddenByDefault]="true">
                 <ng-template let-variant="item">
                     {{ variant.updatedAt | localeDate : 'short' }}
                 </ng-template>
             </vdr-dt2-column>
-            <vdr-dt2-column [heading]="'catalog.name' | translate" [optional]="false">
+            <vdr-dt2-column [heading]="'catalog.name' | translate" id="name" [optional]="false">
                 <ng-template let-variant="item">
                     {{ variant.name }}
                 </ng-template>
             </vdr-dt2-column>
-            <vdr-dt2-column [heading]="'catalog.sku' | translate" [optional]="false">
+            <vdr-dt2-column [heading]="'catalog.sku' | translate" id="sku" [optional]="false">
                 <ng-template let-variant="item">
                     {{ variant.sku }}
                 </ng-template>
             </vdr-dt2-column>
-            <vdr-dt2-column *ngFor="let optionGroup of optionGroups$ | async" [heading]="optionGroup.name">
+            <vdr-dt2-column *ngFor="let optionGroup of optionGroups$ | async" [heading]="optionGroup.name" [id]="optionGroup.code">
                 <ng-template let-variant="item">
                     <vdr-chip
                         *ngIf="getOption(variant, optionGroup.id) as option; else selectOption"
@@ -98,17 +98,17 @@
                     </ng-template>
                 </ng-template>
             </vdr-dt2-column>
-            <vdr-dt2-column [heading]="'common.price' | translate" [hiddenByDefault]="true">
+            <vdr-dt2-column [heading]="'common.price' | translate" id="price" [hiddenByDefault]="true">
                 <ng-template let-variant="item">
                     {{ variant.price | localeCurrency : variant.currencyCode }}
                 </ng-template>
             </vdr-dt2-column>
-            <vdr-dt2-column [heading]="'common.price-with-tax' | translate" [hiddenByDefault]="true">
+            <vdr-dt2-column [heading]="'common.price-with-tax' | translate" id="price-with-tax" [hiddenByDefault]="true">
                 <ng-template let-variant="item">
                     {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}
                 </ng-template>
             </vdr-dt2-column>
-            <vdr-dt2-column [heading]="'common.delete' | translate" [optional]="false">
+            <vdr-dt2-column [heading]="'common.delete' | translate" id="delete" [optional]="false">
                 <ng-template let-variant="item">
                     <button class="button-small" (click)="deleteVariant(variant)">
                         <clr-icon shape="trash is-danger"></clr-icon>
diff --git a/packages/admin-ui/src/lib/catalog/src/components/stock-location-list/stock-location-list.component.html b/packages/admin-ui/src/lib/catalog/src/components/stock-location-list/stock-location-list.component.html
index abd50f7e5b..c752da64ba 100644
--- a/packages/admin-ui/src/lib/catalog/src/components/stock-location-list/stock-location-list.component.html
+++ b/packages/admin-ui/src/lib/catalog/src/components/stock-location-list/stock-location-list.component.html
@@ -34,13 +34,13 @@
         [searchTermControl]="searchTermControl"
         [searchTermPlaceholder]="'catalog.filter-by-name' | translate"
     />
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true" [sort]="sorts.get('id')">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true" [sort]="sorts.get('id')">
         <ng-template let-stockLocation="item">
             {{ stockLocation.id }}
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.created-at' | translate"
+        [heading]="'common.created-at' | translate" id="created-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('createdAt')"
     >
@@ -49,7 +49,7 @@
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.updated-at' | translate"
+        [heading]="'common.updated-at' | translate" id="updated-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('updatedAt')"
     >
@@ -57,7 +57,7 @@
             {{ stockLocation.updatedAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false" [sort]="sorts.get('name')">
+    <vdr-dt2-column [heading]="'common.name' | translate" id="name" [optional]="false" [sort]="sorts.get('name')">
         <ng-template let-stockLocation="item">
             <a class="button-ghost" [routerLink]="['./', stockLocation.id]"
                 ><span>{{ stockLocation.name }}</span
@@ -65,7 +65,7 @@
             /></a>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.description' | translate" [sort]="sorts.get('description')">
+    <vdr-dt2-column [heading]="'common.description' | translate" id="description" [sort]="sorts.get('description')">
         <ng-template let-stockLocation="item">
             <div class="description" [innerHTML]="stockLocation.description"></div>
         </ng-template>
diff --git a/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-column.component.ts b/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-column.component.ts
index 30295111f9..1db978176d 100644
--- a/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-column.component.ts
+++ b/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-column.component.ts
@@ -11,6 +11,7 @@ export class DataTable2ColumnComponent<T> implements OnInit {
     /**
      * When set to true, this column will expand to use available width
      */
+    @Input() id: string;
     @Input() expand = false;
     @Input() heading: string;
     @Input() align: 'left' | 'right' | 'center' = 'left';
@@ -20,9 +21,7 @@ export class DataTable2ColumnComponent<T> implements OnInit {
     @Input() orderable = true;
     #visible = true;
     #onColumnChangeFns: Array<() => void> = [];
-    get id(): string {
-        return this.heading.toLowerCase().replace(/ /g, '-');
-    }
+
     get visible() {
         return this.#visible;
     }
diff --git a/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-custom-field-column.component.ts b/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-custom-field-column.component.ts
index 6cbe499dc5..66af8e1510 100644
--- a/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-custom-field-column.component.ts
+++ b/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-custom-field-column.component.ts
@@ -24,10 +24,6 @@ export class DataTableCustomFieldColumnComponent<T> extends DataTable2ColumnComp
             .stream$.pipe(map(({ uiState }) => uiState.language));
     }
 
-    get id(): string {
-        return this.customField.name.toLowerCase().replace(/ /g, '-');
-    }
-
     ngOnInit() {
         this.uiLanguage$.subscribe(uiLanguage => {
             this.heading =
@@ -38,6 +34,7 @@ export class DataTableCustomFieldColumnComponent<T> extends DataTable2ColumnComp
         });
         this.hiddenByDefault = true;
         this.sort = this.sorts?.get(this.customField.name);
+        this.id = this.customField.name;
         super.ngOnInit();
     }
 }
diff --git a/packages/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.html b/packages/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.html
index 300d975743..b7a2760bd0 100644
--- a/packages/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.html
+++ b/packages/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.html
@@ -170,17 +170,17 @@
                     (itemsPerPageChange)="setOrderItemsPerPage($event)"
                     (pageChange)="setOrderCurrentPage($event)"
                 >
-                    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+                    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
                         <ng-template let-order="item">
                             {{ order.id }}
                         </ng-template>
                     </vdr-dt2-column>
-                    <vdr-dt2-column [heading]="'common.created-at' | translate" [hiddenByDefault]="true">
+                    <vdr-dt2-column [heading]="'common.created-at' | translate" id="created-at" [hiddenByDefault]="true">
                         <ng-template let-order="item">
                             {{ order.createdAt | localeDate : 'short' }}
                         </ng-template>
                     </vdr-dt2-column>
-                    <vdr-dt2-column [heading]="'common.code' | translate" [optional]="false">
+                    <vdr-dt2-column [heading]="'common.code' | translate" id="code" [optional]="false">
                         <ng-template let-order="item">
                             <a class="button-ghost" [routerLink]="['/orders', order.id]"
                                 ><span>{{ order.code }}</span>
@@ -188,27 +188,27 @@
                             </a>
                         </ng-template>
                     </vdr-dt2-column>
-                    <vdr-dt2-column [heading]="'order.order-type' | translate" [hiddenByDefault]="true">
+                    <vdr-dt2-column [heading]="'order.order-type' | translate" id="order-type" [hiddenByDefault]="true">
                         <ng-template let-order="item">
                             <vdr-chip>{{ order.type }}</vdr-chip>
                         </ng-template>
                     </vdr-dt2-column>
-                    <vdr-dt2-column [heading]="'order.state' | translate">
+                    <vdr-dt2-column [heading]="'order.state' | translate" id="state">
                         <ng-template let-order="item">
                             <vdr-order-state-label [state]="order.state"></vdr-order-state-label>
                         </ng-template>
                     </vdr-dt2-column>
-                    <vdr-dt2-column [heading]="'order.total' | translate">
+                    <vdr-dt2-column [heading]="'order.total' | translate" id="total">
                         <ng-template let-order="item">
                             {{ order.totalWithTax | localeCurrency : order.currencyCode }}
                         </ng-template>
                     </vdr-dt2-column>
-                    <vdr-dt2-column [heading]="'common.updated-at' | translate">
+                    <vdr-dt2-column [heading]="'common.updated-at' | translate" id="updated-at">
                         <ng-template let-order="item">
                             {{ order.updatedAt | timeAgo }}
                         </ng-template>
                     </vdr-dt2-column>
-                    <vdr-dt2-column [heading]="'order.placed-at' | translate">
+                    <vdr-dt2-column [heading]="'order.placed-at' | translate" id="placed-at">
                         <ng-template let-order="item">
                             {{ order.orderPlacedAt | localeDate : 'short' }}
                         </ng-template>
diff --git a/packages/admin-ui/src/lib/customer/src/components/customer-group-list/customer-group-list.component.html b/packages/admin-ui/src/lib/customer/src/components/customer-group-list/customer-group-list.component.html
index e667828195..32793cfe83 100644
--- a/packages/admin-ui/src/lib/customer/src/components/customer-group-list/customer-group-list.component.html
+++ b/packages/admin-ui/src/lib/customer/src/components/customer-group-list/customer-group-list.component.html
@@ -33,13 +33,13 @@
                 [searchTermControl]="searchTermControl"
                 [searchTermPlaceholder]="'common.search-by-name' | translate"
             ></vdr-dt2-search>
-            <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+            <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
                 <ng-template let-customerGroup="item">
                     {{ customerGroup.id }}
                 </ng-template>
             </vdr-dt2-column>
             <vdr-dt2-column
-                [heading]="'common.created-at' | translate"
+                [heading]="'common.created-at' | translate" id="created-at"
                 [hiddenByDefault]="true"
                 [sort]="sorts.get('createdAt')"
             >
@@ -48,7 +48,7 @@
                 </ng-template>
             </vdr-dt2-column>
             <vdr-dt2-column
-                [heading]="'common.updated-at' | translate"
+                [heading]="'common.updated-at' | translate" id="updated-at"
                 [hiddenByDefault]="true"
                 [sort]="sorts.get('updatedAt')"
             >
@@ -57,7 +57,7 @@
                 </ng-template>
             </vdr-dt2-column>
             <vdr-dt2-column
-                [heading]="'common.name' | translate"
+                [heading]="'common.name' | translate" id="name"
                 [optional]="false"
                 [sort]="sorts.get('name')"
             >
@@ -69,7 +69,7 @@
                 </ng-template>
             </vdr-dt2-column>
             <vdr-dt2-column
-                [heading]="'common.view-contents' | translate"
+                [heading]="'common.view-contents' | translate" id="view-contents"
                 [optional]="false"
             >
                 <ng-template let-customerGroup="item">
diff --git a/packages/admin-ui/src/lib/customer/src/components/customer-group-member-list/customer-group-member-list.component.html b/packages/admin-ui/src/lib/customer/src/components/customer-group-member-list/customer-group-member-list.component.html
index 0f60d41271..33db7c44d7 100644
--- a/packages/admin-ui/src/lib/customer/src/components/customer-group-member-list/customer-group-member-list.component.html
+++ b/packages/admin-ui/src/lib/customer/src/components/customer-group-member-list/customer-group-member-list.component.html
@@ -16,22 +16,22 @@
         [searchTermControl]="filterTermControl"
         [searchTermPlaceholder]="'customer.search-customers-by-email' | translate"
     ></vdr-dt2-search>
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
         <ng-template let-customerGroup="item">
             {{ customerGroup.id }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.created-at' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'common.created-at' | translate" id="created-at" [hiddenByDefault]="true">
         <ng-template let-customer="item">
             {{ customer.createdAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.updated-at' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'common.updated-at' | translate" id="updated-at" [hiddenByDefault]="true">
         <ng-template let-customer="item">
             {{ customer.createdAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'customer.name' | translate" [optional]="false">
+    <vdr-dt2-column [heading]="'customer.name' | translate" id="name" [optional]="false">
         <ng-template let-customer="item">
             <a class="button-ghost" [routerLink]="['/customer/customers', customer.id]"
                 ><span> {{ customer.title }} {{ customer.firstName }} {{ customer.lastName }} </span>
@@ -39,12 +39,12 @@
             </a>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.status' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'common.status' | translate" id="status" [hiddenByDefault]="true">
         <ng-template let-customer="item">
             <vdr-customer-status-label [customer]="customer" />
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'customer.email-address' | translate">
+    <vdr-dt2-column [heading]="'customer.email-address' | translate" id="email-address">
         <ng-template let-customer="item">
             {{ customer.emailAddress }}
         </ng-template>
diff --git a/packages/admin-ui/src/lib/customer/src/components/customer-list/customer-list.component.html b/packages/admin-ui/src/lib/customer/src/components/customer-list/customer-list.component.html
index b19d11899c..719f0fa16f 100644
--- a/packages/admin-ui/src/lib/customer/src/components/customer-list/customer-list.component.html
+++ b/packages/admin-ui/src/lib/customer/src/components/customer-list/customer-list.component.html
@@ -31,13 +31,13 @@
         [searchTermControl]="searchTermControl"
         [searchTermPlaceholder]="'customer.search-customers-by-email-last-name-postal-code' | translate"
     ></vdr-dt2-search>
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
         <ng-template let-customer="item">
             {{ customer.id }}
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.created-at' | translate"
+        [heading]="'common.created-at' | translate" id="created-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('createdAt')"
     >
@@ -46,7 +46,7 @@
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.updated-at' | translate"
+        [heading]="'common.updated-at' | translate" id="updated-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('updatedAt')"
     >
@@ -54,7 +54,7 @@
             {{ customer.updatedAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'customer.name' | translate" [optional]="false" [sort]="sorts.get('lastName')">
+    <vdr-dt2-column [heading]="'customer.name' | translate" id="name" [optional]="false" [sort]="sorts.get('lastName')">
         <ng-template let-customer="item">
             <a class="button-ghost" [routerLink]="['./', customer.id]"
                 ><span> {{ customer.title }} {{ customer.firstName }} {{ customer.lastName }} </span>
@@ -62,12 +62,12 @@
             </a>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.status' | translate">
+    <vdr-dt2-column [heading]="'common.status' | translate" id="status">
         <ng-template let-customer="item">
             <vdr-customer-status-label [customer]="customer" />
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'customer.email-address' | translate" [sort]="sorts.get('emailAddress')">
+    <vdr-dt2-column [heading]="'customer.email-address' | translate" id="email-address" [sort]="sorts.get('emailAddress')">
         <ng-template let-customer="item">
             {{ customer.emailAddress }}
         </ng-template>
diff --git a/packages/admin-ui/src/lib/dashboard/src/widgets/latest-orders-widget/latest-orders-widget.component.html b/packages/admin-ui/src/lib/dashboard/src/widgets/latest-orders-widget/latest-orders-widget.component.html
index fc7db4e373..878b79f5d6 100644
--- a/packages/admin-ui/src/lib/dashboard/src/widgets/latest-orders-widget/latest-orders-widget.component.html
+++ b/packages/admin-ui/src/lib/dashboard/src/widgets/latest-orders-widget/latest-orders-widget.component.html
@@ -1,5 +1,5 @@
 <vdr-data-table-2 [items]="latestOrders$ | async" id="latest-orders-widget-list">
-    <vdr-dt2-column [heading]="'common.code' | translate">
+    <vdr-dt2-column [heading]="'common.code' | translate" id="code">
         <ng-template let-order="item">
             <a class="button-ghost" [routerLink]="['/orders/', order.id]"
                 ><span>{{ order.code }}</span>
@@ -7,22 +7,22 @@
             </a>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'order.state' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'order.state' | translate" id="state" [hiddenByDefault]="true">
         <ng-template let-order="item">
             <vdr-order-state-label [state]="order.state"></vdr-order-state-label>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'customer.customer' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'customer.customer' | translate" id="customer" [hiddenByDefault]="true">
         <ng-template let-order="item">
             <vdr-customer-label [customer]="order.customer"></vdr-customer-label>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'order.total' | translate">
+    <vdr-dt2-column [heading]="'order.total' | translate" id="total">
         <ng-template let-order="item">
             {{ order.totalWithTax | localeCurrency : order.currencyCode }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'order.placed-at' | translate">
+    <vdr-dt2-column [heading]="'order.placed-at' | translate" id="placed-at">
         <ng-template let-order="item">
             {{ order.orderPlacedAt | timeAgo }}
         </ng-template>
diff --git a/packages/admin-ui/src/lib/marketing/src/components/promotion-list/promotion-list.component.html b/packages/admin-ui/src/lib/marketing/src/components/promotion-list/promotion-list.component.html
index 6c18514831..713674acc5 100644
--- a/packages/admin-ui/src/lib/marketing/src/components/promotion-list/promotion-list.component.html
+++ b/packages/admin-ui/src/lib/marketing/src/components/promotion-list/promotion-list.component.html
@@ -36,11 +36,11 @@
         [searchTermControl]="searchTermControl"
         [searchTermPlaceholder]="'marketing.search-by-name-or-coupon-code' | translate"
     />
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
         <ng-template let-promotion="item">{{ promotion.id }}</ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.created-at' | translate"
+        [heading]="'common.created-at' | translate" id="created-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('createdAt')"
     >
@@ -49,7 +49,7 @@
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.updated-at' | translate"
+        [heading]="'common.updated-at' | translate" id="updated-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('updatedAt')"
     >
@@ -57,7 +57,7 @@
             {{ promotion.updatedAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false" [sort]="sorts.get('name')">
+    <vdr-dt2-column [heading]="'common.name' | translate" id="name" [optional]="false" [sort]="sorts.get('name')">
         <ng-template let-promotion="item">
             <a class="button-ghost" [routerLink]="['./', promotion.id]"
                 ><span> {{ promotion.name }}</span>
@@ -65,7 +65,7 @@
             </a>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.enabled' | translate">
+    <vdr-dt2-column [heading]="'common.enabled' | translate" id="enabled">
         <ng-template let-promotion="item">
             <vdr-chip *ngIf="promotion.enabled" colorType="success">{{
                 'common.enabled' | translate
@@ -75,23 +75,23 @@
             }}</vdr-chip>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'marketing.coupon-code' | translate" [sort]="sorts.get('couponCode')">
+    <vdr-dt2-column [heading]="'marketing.coupon-code' | translate" id="coupon-code" [sort]="sorts.get('couponCode')">
         <ng-template let-promotion="item">
             {{ promotion.couponCode }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'marketing.starts-at' | translate" [sort]="sorts.get('startsAt')">
+    <vdr-dt2-column [heading]="'marketing.starts-at' | translate" id="starts-at" [sort]="sorts.get('startsAt')">
         <ng-template let-promotion="item">
             {{ promotion.startsAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'marketing.ends-at' | translate" [sort]="sorts.get('endsAt')">
+    <vdr-dt2-column [heading]="'marketing.ends-at' | translate" id="ends-at" [sort]="sorts.get('endsAt')">
         <ng-template let-promotion="item">
             {{ promotion.endsAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'marketing.per-customer-limit' | translate"
+        [heading]="'marketing.per-customer-limit' | translate" id="per-customer-limit"
         [sort]="sorts.get('perCustomerUsageLimit')"
         [hiddenByDefault]="true"
     >
@@ -100,7 +100,7 @@
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'marketing.per-customer-limit' | translate"
+        [heading]="'marketing.per-customer-limit' | translate" id="per-customer-limit"
         [sort]="sorts.get('usageLimit')"
         [hiddenByDefault]="true"
     >
diff --git a/packages/admin-ui/src/lib/order/src/components/order-history/order-history-entry-host.component.ts b/packages/admin-ui/src/lib/order/src/components/order-history/order-history-entry-host.component.ts
index 43e082db93..fd5cf8ac03 100644
--- a/packages/admin-ui/src/lib/order/src/components/order-history/order-history-entry-host.component.ts
+++ b/packages/admin-ui/src/lib/order/src/components/order-history/order-history-entry-host.component.ts
@@ -19,7 +19,7 @@ import {
 
 @Component({
     selector: 'vdr-order-history-entry-host',
-    template: ` <vdr-timeline-entry
+    template: `<vdr-timeline-entry
         [displayType]="instance.getDisplayType(entry)"
         [iconShape]="instance.getIconShape && instance.getIconShape(entry)"
         [createdAt]="entry.createdAt"
diff --git a/packages/admin-ui/src/lib/order/src/components/order-list/order-list.component.html b/packages/admin-ui/src/lib/order/src/components/order-list/order-list.component.html
index 70e318ddf0..cdf8edba13 100644
--- a/packages/admin-ui/src/lib/order/src/components/order-list/order-list.component.html
+++ b/packages/admin-ui/src/lib/order/src/components/order-list/order-list.component.html
@@ -31,17 +31,17 @@
         [searchTermControl]="searchTermControl"
         [searchTermPlaceholder]="'order.search-by-order-filters' | translate"
     />
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true" [sort]="sorts.get('id')">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true" [sort]="sorts.get('id')">
         <ng-template let-order="item">
             {{ order.id }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.created-at' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'common.created-at' | translate" id="created-at" [hiddenByDefault]="true">
         <ng-template let-order="item">
             {{ order.createdAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.code' | translate" [optional]="false">
+    <vdr-dt2-column [heading]="'common.code' | translate" id="code" [optional]="false">
         <ng-template let-order="item">
             <a class="button-ghost" [routerLink]="order.state === 'Draft' ? ['./draft', order.id] : ['./', order.id]"
                 ><span>{{ order.code }}</span>
@@ -49,7 +49,7 @@
             </a>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'order.customer' | translate" [sort]="sorts.get('customerLastName')">
+    <vdr-dt2-column [heading]="'order.customer' | translate" id="customer" [sort]="sorts.get('customerLastName')">
         <ng-template let-order="item">
             <vdr-customer-label
                 [customer]="order.customer"
@@ -57,34 +57,34 @@
             ></vdr-customer-label>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'order.order-type' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'order.order-type' | translate" id="order-type" [hiddenByDefault]="true">
         <ng-template let-order="item">
             <vdr-chip *ngIf="order.type === OrderType.Regular">{{ 'order.order-type-regular' | translate }}</vdr-chip>
             <vdr-chip *ngIf="order.type === OrderType.Aggregate">{{ 'order.order-type-aggregate' | translate }}</vdr-chip>
             <vdr-chip *ngIf="order.type === OrderType.Seller">{{ 'order.order-type-seller' | translate }}</vdr-chip>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'order.state' | translate" [sort]="sorts.get('state')">
+    <vdr-dt2-column [heading]="'order.state' | translate" id="state" [sort]="sorts.get('state')">
         <ng-template let-order="item">
             <vdr-order-state-label [state]="order.state"></vdr-order-state-label>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'order.total' | translate" [sort]="sorts.get('totalWithTax')">
+    <vdr-dt2-column [heading]="'order.total' | translate" id="total" [sort]="sorts.get('totalWithTax')">
         <ng-template let-order="item">
             {{ order.totalWithTax | localeCurrency : order.currencyCode }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.updated-at' | translate">
+    <vdr-dt2-column [heading]="'common.updated-at' | translate" id="updated-at">
         <ng-template let-order="item">
             {{ order.updatedAt | timeAgo }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'order.placed-at' | translate" [sort]="sorts.get('orderPlacedAt')">
+    <vdr-dt2-column [heading]="'order.placed-at' | translate" id="placed-at" [sort]="sorts.get('orderPlacedAt')">
         <ng-template let-order="item">
             {{ order.orderPlacedAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'order.shipping' | translate">
+    <vdr-dt2-column [heading]="'order.shipping' | translate" id="shipping">
         <ng-template let-order="item">
             {{ getShippingNames(order) }}
         </ng-template>
diff --git a/packages/admin-ui/src/lib/order/src/components/order-table/order-table.component.html b/packages/admin-ui/src/lib/order/src/components/order-table/order-table.component.html
index e837360f5f..83a60018be 100644
--- a/packages/admin-ui/src/lib/order/src/components/order-table/order-table.component.html
+++ b/packages/admin-ui/src/lib/order/src/components/order-table/order-table.component.html
@@ -1,5 +1,5 @@
 <vdr-order-data-table id="order-detail-" [items]="order.lines" [order]="order">
-    <vdr-dt2-column [heading]="'common.image' | translate">
+    <vdr-dt2-column [heading]="'common.image' | translate" id="image">
         <ng-template let-line="item">
             <div class="image-placeholder">
                 <img
@@ -14,17 +14,17 @@
             </div>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'order.product-name' | translate">
+    <vdr-dt2-column [heading]="'order.product-name' | translate" id="product-name">
         <ng-template let-line="item">
             {{ line.productVariant.name }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'order.product-sku' | translate" [optional]="false">
+    <vdr-dt2-column [heading]="'order.product-sku' | translate" id="product-sku" [optional]="false">
         <ng-template let-line="item">
             {{ line.productVariant.sku }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'order.unit-price' | translate">
+    <vdr-dt2-column [heading]="'order.unit-price' | translate" id="unit-price">
         <ng-template let-line="item">
             <div class="unit-price">
                 {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}
@@ -34,7 +34,7 @@
             </div>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'order.quantity' | translate" [optional]="false">
+    <vdr-dt2-column [heading]="'order.quantity' | translate" id="quantity" [optional]="false">
         <ng-template let-line="item">
             <ng-container *ngIf="!isDraft; else draft">
                 {{ line.quantity }}
@@ -63,7 +63,7 @@
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-custom-field-column *ngFor="let customField of orderLineCustomFields" [customField]="customField"/>
-    <vdr-order-total-column [heading]="'order.total' | translate" [optional]="false">
+    <vdr-order-total-column [heading]="'order.total' | translate" id="total" [optional]="false">
         <ng-template let-line="item">
             <div class="unit-price">
                 {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}
diff --git a/packages/admin-ui/src/lib/settings/src/components/administrator-list/administrator-list.component.html b/packages/admin-ui/src/lib/settings/src/components/administrator-list/administrator-list.component.html
index 2b6f92d9ef..055e56f9b6 100644
--- a/packages/admin-ui/src/lib/settings/src/components/administrator-list/administrator-list.component.html
+++ b/packages/admin-ui/src/lib/settings/src/components/administrator-list/administrator-list.component.html
@@ -34,13 +34,13 @@
         [searchTermControl]="searchTermControl"
         [searchTermPlaceholder]="'catalog.filter-by-name' | translate"
     />
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
         <ng-template let-administrator="item">
             {{ administrator.id }}
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.created-at' | translate"
+        [heading]="'common.created-at' | translate" id="created-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('createdAt')"
     >
@@ -49,7 +49,7 @@
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.updated-at' | translate"
+        [heading]="'common.updated-at' | translate" id="updated-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('updatedAt')"
     >
@@ -57,7 +57,7 @@
             {{ administrator.updatedAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false" [sort]="sorts.get('lastName')">
+    <vdr-dt2-column [heading]="'common.name' | translate" id="name" [optional]="false" [sort]="sorts.get('lastName')">
         <ng-template let-administrator="item">
             <a class="button-ghost" [routerLink]="['./', administrator.id]"
                 ><span>{{ administrator.firstName }} {{ administrator.lastName }}</span>
@@ -65,12 +65,12 @@
             </a>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'settings.email-address' | translate" [sort]="sorts.get('emailAddress')">
+    <vdr-dt2-column [heading]="'settings.email-address' | translate" id="email-address" [sort]="sorts.get('emailAddress')">
         <ng-template let-administrator="item">
             {{ administrator.emailAddress }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'settings.roles' | translate">
+    <vdr-dt2-column [heading]="'settings.roles' | translate" id="roles">
         <ng-template let-administrator="item">
             <vdr-chip *ngFor="let role of administrator.user.roles">{{ role.description }}</vdr-chip>
         </ng-template>
diff --git a/packages/admin-ui/src/lib/settings/src/components/channel-list/channel-list.component.html b/packages/admin-ui/src/lib/settings/src/components/channel-list/channel-list.component.html
index e12906e863..666c22c004 100644
--- a/packages/admin-ui/src/lib/settings/src/components/channel-list/channel-list.component.html
+++ b/packages/admin-ui/src/lib/settings/src/components/channel-list/channel-list.component.html
@@ -30,13 +30,13 @@
         [searchTermControl]="searchTermControl"
         [searchTermPlaceholder]="'catalog.filter-by-name' | translate"
     />
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
         <ng-template let-channel="item">
             {{ channel.id }}
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.created-at' | translate"
+        [heading]="'common.created-at' | translate" id="created-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('createdAt')"
     >
@@ -45,7 +45,7 @@
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.updated-at' | translate"
+        [heading]="'common.updated-at' | translate" id="updated-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('updatedAt')"
     >
@@ -53,7 +53,7 @@
             {{ channel.updatedAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.code' | translate" [optional]="false" [sort]="sorts.get('code')">
+    <vdr-dt2-column [heading]="'common.code' | translate" id="code" [optional]="false" [sort]="sorts.get('code')">
         <ng-template let-channel="item">
             <a class="button-ghost" [routerLink]="['./', channel.id]"
                 ><span>{{ channel.code | channelCodeToLabel | translate }}</span>
@@ -61,7 +61,7 @@
             </a>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'settings.channel-token' | translate" [sort]="sorts.get('token')">
+    <vdr-dt2-column [heading]="'settings.channel-token' | translate" id="channel-token" [sort]="sorts.get('token')">
         <ng-template let-channel="item">
             {{ channel.token }}
         </ng-template>
diff --git a/packages/admin-ui/src/lib/settings/src/components/country-list/country-list.component.html b/packages/admin-ui/src/lib/settings/src/components/country-list/country-list.component.html
index 8b0e43bb01..e8b8f9b68d 100644
--- a/packages/admin-ui/src/lib/settings/src/components/country-list/country-list.component.html
+++ b/packages/admin-ui/src/lib/settings/src/components/country-list/country-list.component.html
@@ -39,13 +39,13 @@
         [searchTermControl]="searchTermControl"
         [searchTermPlaceholder]="'catalog.filter-by-name' | translate"
     />
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
         <ng-template let-country="item">
             {{ country.id }}
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.created-at' | translate"
+        [heading]="'common.created-at' | translate" id="created-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('createdAt')"
     >
@@ -54,7 +54,7 @@
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.updated-at' | translate"
+        [heading]="'common.updated-at' | translate" id="updated-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('updatedAt')"
     >
@@ -62,7 +62,7 @@
             {{ country.updatedAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false" [sort]="sorts.get('name')">
+    <vdr-dt2-column [heading]="'common.name' | translate" id="name" [optional]="false" [sort]="sorts.get('name')">
         <ng-template let-country="item">
             <a class="button-ghost" [routerLink]="['./', country.id]"
                 ><span>{{ country.name }}</span>
@@ -70,12 +70,12 @@
             </a>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.code' | translate" [sort]="sorts.get('code')">
+    <vdr-dt2-column [heading]="'common.code' | translate" id="code" [sort]="sorts.get('code')">
         <ng-template let-country="item">
             {{ country.code }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.enabled' | translate">
+    <vdr-dt2-column [heading]="'common.enabled' | translate" id="enabled">
         <ng-template let-country="item">
             <vdr-chip *ngIf="country.enabled" colorType="success">{{
                 'common.enabled' | translate
diff --git a/packages/admin-ui/src/lib/settings/src/components/payment-method-list/payment-method-list.component.html b/packages/admin-ui/src/lib/settings/src/components/payment-method-list/payment-method-list.component.html
index e45b59de64..65f4ac32b7 100644
--- a/packages/admin-ui/src/lib/settings/src/components/payment-method-list/payment-method-list.component.html
+++ b/packages/admin-ui/src/lib/settings/src/components/payment-method-list/payment-method-list.component.html
@@ -38,13 +38,13 @@
         [searchTermControl]="searchTermControl"
         [searchTermPlaceholder]="'catalog.filter-by-name' | translate"
     ></vdr-dt2-search>
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true" [sort]="sorts.get('id')">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true" [sort]="sorts.get('id')">
         <ng-template let-paymentMethod="item">
             {{ paymentMethod.id }}
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.created-at' | translate"
+        [heading]="'common.created-at' | translate" id="created-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('createdAt')"
     >
@@ -53,7 +53,7 @@
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.updated-at' | translate"
+        [heading]="'common.updated-at' | translate" id="updated-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('updatedAt')"
     >
@@ -61,7 +61,7 @@
             {{ paymentMethod.updatedAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false" [sort]="sorts.get('name')">
+    <vdr-dt2-column [heading]="'common.name' | translate" id="name" [optional]="false" [sort]="sorts.get('name')">
         <ng-template let-paymentMethod="item">
             <a class="button-ghost" [routerLink]="['./', paymentMethod.id]"
                 ><span>{{ paymentMethod.name }}</span>
@@ -69,12 +69,12 @@
             </a>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.code' | translate" [sort]="sorts.get('code')">
+    <vdr-dt2-column [heading]="'common.code' | translate" id="code" [sort]="sorts.get('code')">
         <ng-template let-paymentMethod="item">
             {{ paymentMethod.code }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.enabled' | translate">
+    <vdr-dt2-column [heading]="'common.enabled' | translate" id="enabled">
         <ng-template let-paymentMethod="item">
             <vdr-chip *ngIf="paymentMethod.enabled" colorType="success">{{
                 'common.enabled' | translate
diff --git a/packages/admin-ui/src/lib/settings/src/components/role-list/role-list.component.html b/packages/admin-ui/src/lib/settings/src/components/role-list/role-list.component.html
index 79628b5a31..7ce1bb4be1 100644
--- a/packages/admin-ui/src/lib/settings/src/components/role-list/role-list.component.html
+++ b/packages/admin-ui/src/lib/settings/src/components/role-list/role-list.component.html
@@ -33,13 +33,13 @@
         [searchTermControl]="searchTermControl"
         [searchTermPlaceholder]="'catalog.filter-by-name' | translate"
     />
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
         <ng-template let-role="item">
             {{ role.id }}
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.created-at' | translate"
+        [heading]="'common.created-at' | translate" id="created-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('createdAt')"
     >
@@ -48,7 +48,7 @@
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.updated-at' | translate"
+        [heading]="'common.updated-at' | translate" id="updated-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('updatedAt')"
     >
@@ -57,7 +57,7 @@
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.description' | translate"
+        [heading]="'common.description' | translate" id="description"
         [optional]="false"
         [sort]="sorts.get('description')"
     >
@@ -74,12 +74,12 @@
             </ng-template>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.code' | translate" [sort]="sorts.get('code')">
+    <vdr-dt2-column [heading]="'common.code' | translate" id="code" [sort]="sorts.get('code')">
         <ng-template let-role="item">
             <span *ngIf="!isDefaultRole(role)">{{ role.code }}</span>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'settings.channel' | translate">
+    <vdr-dt2-column [heading]="'settings.channel' | translate" id="channel">
         <ng-template let-role="item">
             <ng-container *ngIf="!isDefaultRole(role)">
                 <vdr-chip *ngFor="let channel of role.channels">
@@ -89,7 +89,7 @@
             </ng-container>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'settings.permissions' | translate">
+    <vdr-dt2-column [heading]="'settings.permissions' | translate" id="permissions">
         <ng-template let-role="item">
             <ng-container *ngIf="!isDefaultRole(role); else defaultRole">
                 <div class="permissions-list">
diff --git a/packages/admin-ui/src/lib/settings/src/components/seller-list/seller-list.component.html b/packages/admin-ui/src/lib/settings/src/components/seller-list/seller-list.component.html
index ff6c08189b..3b4804a276 100644
--- a/packages/admin-ui/src/lib/settings/src/components/seller-list/seller-list.component.html
+++ b/packages/admin-ui/src/lib/settings/src/components/seller-list/seller-list.component.html
@@ -29,11 +29,11 @@
         [searchTermControl]="searchTermControl"
         [searchTermPlaceholder]="'catalog.filter-by-name' | translate"
     />
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
         <ng-template let-seller="item">{{ seller.id }}</ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.created-at' | translate"
+        [heading]="'common.created-at' | translate" id="created-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('createdAt')"
     >
@@ -42,7 +42,7 @@
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.updated-at' | translate"
+        [heading]="'common.updated-at' | translate" id="updated-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('updatedAt')"
     >
@@ -50,7 +50,7 @@
             {{ seller.updatedAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false" [sort]="sorts.get('name')">
+    <vdr-dt2-column [heading]="'common.name' | translate" id="name" [optional]="false" [sort]="sorts.get('name')">
         <ng-template let-seller="item">
             <a class="button-ghost" [routerLink]="['./', seller.id]"
                 ><span>{{ seller.name }}</span>
diff --git a/packages/admin-ui/src/lib/settings/src/components/shipping-method-list/shipping-method-list.component.html b/packages/admin-ui/src/lib/settings/src/components/shipping-method-list/shipping-method-list.component.html
index 24e81a6e5e..bdb16458d5 100644
--- a/packages/admin-ui/src/lib/settings/src/components/shipping-method-list/shipping-method-list.component.html
+++ b/packages/admin-ui/src/lib/settings/src/components/shipping-method-list/shipping-method-list.component.html
@@ -39,13 +39,13 @@
         [searchTermControl]="searchTermControl"
         [searchTermPlaceholder]="'catalog.filter-by-name' | translate"
     />
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
         <ng-template let-shippingMethod="item">
             {{ shippingMethod.id }}
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.created-at' | translate"
+        [heading]="'common.created-at' | translate" id="created-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('createdAt')"
     >
@@ -54,7 +54,7 @@
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.updated-at' | translate"
+        [heading]="'common.updated-at' | translate" id="updated-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('updatedAt')"
     >
@@ -62,7 +62,7 @@
             {{ shippingMethod.updatedAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false" [sort]="sorts.get('name')">
+    <vdr-dt2-column [heading]="'common.name' | translate" id="name" [optional]="false" [sort]="sorts.get('name')">
         <ng-template let-shippingMethod="item">
             <a class="button-ghost" [routerLink]="['./', shippingMethod.id]"
                 ><span>{{ shippingMethod.name }}</span>
@@ -70,13 +70,13 @@
             </a>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.code' | translate" [sort]="sorts.get('code')">
+    <vdr-dt2-column [heading]="'common.code' | translate" id="code" [sort]="sorts.get('code')">
         <ng-template let-shippingMethod="item">
             {{ shippingMethod.code }}
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.description' | translate"
+        [heading]="'common.description' | translate" id="description"
         [sort]="sorts.get('description')"
         [hiddenByDefault]="true"
     >
@@ -84,7 +84,7 @@
             {{ shippingMethod.description }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'settings.fulfillment-handler' | translate" [sort]="sorts.get('fulfillmentHandlerCode')">
+    <vdr-dt2-column [heading]="'settings.fulfillment-handler' | translate" id="fulfillment-handler" [sort]="sorts.get('fulfillmentHandlerCode')">
         <ng-template let-shippingMethod="item">
             {{ shippingMethod.fulfillmentHandlerCode }}
         </ng-template>
diff --git a/packages/admin-ui/src/lib/settings/src/components/tax-category-list/tax-category-list.component.html b/packages/admin-ui/src/lib/settings/src/components/tax-category-list/tax-category-list.component.html
index c2375d6469..644f905b54 100644
--- a/packages/admin-ui/src/lib/settings/src/components/tax-category-list/tax-category-list.component.html
+++ b/packages/admin-ui/src/lib/settings/src/components/tax-category-list/tax-category-list.component.html
@@ -33,13 +33,13 @@
         [searchTermControl]="searchTermControl"
         [searchTermPlaceholder]="'catalog.filter-by-name' | translate"
     />
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
         <ng-template let-taxCategory="item">
             {{ taxCategory.id }}
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.created-at' | translate"
+        [heading]="'common.created-at' | translate" id="created-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('createdAt')"
     >
@@ -48,7 +48,7 @@
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.updated-at' | translate"
+        [heading]="'common.updated-at' | translate" id="updated-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('updatedAt')"
     >
@@ -56,7 +56,7 @@
             {{ taxCategory.updatedAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false" [sort]="sorts.get('name')">
+    <vdr-dt2-column [heading]="'common.name' | translate" id="name" [optional]="false" [sort]="sorts.get('name')">
         <ng-template let-taxCategory="item">
             <a class="button-ghost" [routerLink]="['./', taxCategory.id]"
                 ><span>{{ taxCategory.name }}</span>
@@ -64,7 +64,7 @@
             </a>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.default-tax-category' | translate">
+    <vdr-dt2-column [heading]="'common.default-tax-category' | translate" id="default-tax-category">
         <ng-template let-taxCategory="item">
             <vdr-chip *ngIf="taxCategory.isDefault">{{ 'common.default-tax-category' | translate }}</vdr-chip>
         </ng-template>
diff --git a/packages/admin-ui/src/lib/settings/src/components/tax-rate-list/tax-rate-list.component.html b/packages/admin-ui/src/lib/settings/src/components/tax-rate-list/tax-rate-list.component.html
index e104377a2d..315a64ec7c 100644
--- a/packages/admin-ui/src/lib/settings/src/components/tax-rate-list/tax-rate-list.component.html
+++ b/packages/admin-ui/src/lib/settings/src/components/tax-rate-list/tax-rate-list.component.html
@@ -33,13 +33,13 @@
         [searchTermControl]="searchTermControl"
         [searchTermPlaceholder]="'catalog.filter-by-name' | translate"
     />
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
         <ng-template let-taxRate="item">
             {{ taxRate.id }}
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.created-at' | translate"
+        [heading]="'common.created-at' | translate" id="created-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('createdAt')"
     >
@@ -48,7 +48,7 @@
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.updated-at' | translate"
+        [heading]="'common.updated-at' | translate" id="updated-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('updatedAt')"
     >
@@ -56,7 +56,7 @@
             {{ taxRate.updatedAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false" [sort]="sorts.get('name')">
+    <vdr-dt2-column [heading]="'common.name' | translate" id="name" [optional]="false" [sort]="sorts.get('name')">
         <ng-template let-taxRate="item">
             <a class="button-ghost" [routerLink]="['./', taxRate.id]"
                 ><span>{{ taxRate.name }}</span>
@@ -64,25 +64,25 @@
             </a>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'settings.tax-category' | translate">
+    <vdr-dt2-column [heading]="'settings.tax-category' | translate" id="tax-category">
         <ng-template let-taxRate="item">
             {{ taxRate.category.name }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'settings.zone' | translate">
+    <vdr-dt2-column [heading]="'settings.zone' | translate" id="zone">
         <ng-template let-taxRate="item">
             {{ taxRate.zone.name }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'customer.customer-group' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'customer.customer-group' | translate" id="customer-group" [hiddenByDefault]="true">
         <ng-template let-taxRate="item">
             {{ taxRate.customerGroup?.name }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'settings.tax-rate' | translate" [sort]="sorts.get('value')">
+    <vdr-dt2-column [heading]="'settings.tax-rate' | translate" id="tax-rate" [sort]="sorts.get('value')">
         <ng-template let-taxRate="item"> {{ taxRate.value }}% </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.enabled' | translate">
+    <vdr-dt2-column [heading]="'common.enabled' | translate" id="enabled">
         <ng-template let-taxRate="item">
             <vdr-chip *ngIf="taxRate.enabled" colorType="success">{{
                 'common.enabled' | translate
diff --git a/packages/admin-ui/src/lib/settings/src/components/zone-list/zone-list.component.html b/packages/admin-ui/src/lib/settings/src/components/zone-list/zone-list.component.html
index 5637fb9ada..24bd7ee9ce 100644
--- a/packages/admin-ui/src/lib/settings/src/components/zone-list/zone-list.component.html
+++ b/packages/admin-ui/src/lib/settings/src/components/zone-list/zone-list.component.html
@@ -41,13 +41,13 @@
                 [searchTermControl]="searchTermControl"
                 [searchTermPlaceholder]="'common.search-by-name' | translate"
             />
-            <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+            <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
                 <ng-template let-customerGroup="item">
                     {{ customerGroup.id }}
                 </ng-template>
             </vdr-dt2-column>
             <vdr-dt2-column
-                [heading]="'common.created-at' | translate"
+                [heading]="'common.created-at' | translate" id="created-at"
                 [hiddenByDefault]="true"
                 [sort]="sorts.get('createdAt')"
             >
@@ -56,7 +56,7 @@
                 </ng-template>
             </vdr-dt2-column>
             <vdr-dt2-column
-                [heading]="'common.updated-at' | translate"
+                [heading]="'common.updated-at' | translate" id="updated-at"
                 [hiddenByDefault]="true"
                 [sort]="sorts.get('updatedAt')"
             >
@@ -65,7 +65,7 @@
                 </ng-template>
             </vdr-dt2-column>
             <vdr-dt2-column
-                [heading]="'common.name' | translate"
+                [heading]="'common.name' | translate" id="name"
                 [optional]="false"
                 [sort]="sorts.get('name')"
             >
@@ -76,7 +76,7 @@
                     </a>
                 </ng-template>
             </vdr-dt2-column>
-            <vdr-dt2-column [heading]="'common.view-contents' | translate" [optional]="false">
+            <vdr-dt2-column [heading]="'common.view-contents' | translate" id="view-contents" [optional]="false">
                 <ng-template let-customerGroup="item">
                     <a
                         class="button-small bg-weight-150"
diff --git a/packages/admin-ui/src/lib/settings/src/components/zone-member-list/zone-member-list.component.html b/packages/admin-ui/src/lib/settings/src/components/zone-member-list/zone-member-list.component.html
index 671ac13ef4..589afc69c2 100644
--- a/packages/admin-ui/src/lib/settings/src/components/zone-member-list/zone-member-list.component.html
+++ b/packages/admin-ui/src/lib/settings/src/components/zone-member-list/zone-member-list.component.html
@@ -16,22 +16,22 @@
         [searchTermControl]="filterTermControl"
         [searchTermPlaceholder]="'common.search-by-name' | translate"
     ></vdr-dt2-search>
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
         <ng-template let-member="item">
             {{ member.id }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.created-at' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'common.created-at' | translate" id="created-at" [hiddenByDefault]="true">
         <ng-template let-member="item">
             {{ member.createdAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.updated-at' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'common.updated-at' | translate" id="updated-at" [hiddenByDefault]="true">
         <ng-template let-member="item">
             {{ member.createdAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false">
+    <vdr-dt2-column [heading]="'common.name' | translate" id="name" [optional]="false">
         <ng-template let-member="item">
             <a class="button-ghost" [routerLink]="['/settings/countries', member.id]"
                 ><span> {{ member.name }}</span>
@@ -39,12 +39,12 @@
             </a>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.code' | translate">
+    <vdr-dt2-column [heading]="'common.code' | translate" id="code">
         <ng-template let-member="item">
             {{ member.code }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.enabled' | translate">
+    <vdr-dt2-column [heading]="'common.enabled' | translate" id="enabled">
         <ng-template let-member="item">
             <vdr-chip  *ngIf="member.enabled" colorType="success">{{ 'common.enabled' | translate }}</vdr-chip>
             <vdr-chip  *ngIf="!member.enabled" colorType="warning">{{ 'common.disabled' | translate }}</vdr-chip>
diff --git a/packages/admin-ui/src/lib/system/src/components/job-list/job-list.component.html b/packages/admin-ui/src/lib/system/src/components/job-list/job-list.component.html
index b39002e80f..61542bab87 100644
--- a/packages/admin-ui/src/lib/system/src/components/job-list/job-list.component.html
+++ b/packages/admin-ui/src/lib/system/src/components/job-list/job-list.component.html
@@ -56,22 +56,22 @@
         (pageChange)="setPageNumber($event)"
         (itemsPerPageChange)="setItemsPerPage($event)"
     >
-        <vdr-dt2-column [heading]="'common.id' | translate">
+        <vdr-dt2-column [heading]="'common.id' | translate" id="id">
             <ng-template let-job="item">
                 {{ job.id }}
             </ng-template>
         </vdr-dt2-column>
-        <vdr-dt2-column [heading]="'common.created-at' | translate">
+        <vdr-dt2-column [heading]="'common.created-at' | translate" id="created-at">
             <ng-template let-job="item">
                 {{ job.createdAt | timeAgo }}
             </ng-template>
         </vdr-dt2-column>
-        <vdr-dt2-column [heading]="'system.job-queue-name' | translate" [optional]="false">
+        <vdr-dt2-column [heading]="'system.job-queue-name' | translate" id="job-queue-name" [optional]="false">
             <ng-template let-job="item">
                 <vdr-chip [colorFrom]="job.queueName">{{ job.queueName }}</vdr-chip>
             </ng-template>
         </vdr-dt2-column>
-        <vdr-dt2-column [heading]="'system.job-data' | translate" [optional]="false">
+        <vdr-dt2-column [heading]="'system.job-data' | translate" id="job-data" [optional]="false">
             <ng-template let-job="item">
                 <vdr-dropdown *ngIf="job.data">
                     <button
@@ -89,7 +89,7 @@
                 </vdr-dropdown>
             </ng-template>
         </vdr-dt2-column>
-        <vdr-dt2-column [heading]="'system.job-state' | translate">
+        <vdr-dt2-column [heading]="'system.job-state' | translate" id="job-state">
             <ng-template let-job="item">
                 <vdr-job-state-label [job]="job"></vdr-job-state-label>
                 <div *ngIf="job.state === 'FAILED'" class="retry-info">after {{ job.attempts }} attempts</div>
@@ -98,12 +98,12 @@
                 </div>
             </ng-template>
         </vdr-dt2-column>
-        <vdr-dt2-column [heading]="'system.job-duration' | translate">
+        <vdr-dt2-column [heading]="'system.job-duration' | translate" id="job-duration">
             <ng-template let-job="item">
                 {{ job.duration | duration }}
             </ng-template>
         </vdr-dt2-column>
-        <vdr-dt2-column [heading]="'system.job-result' | translate">
+        <vdr-dt2-column [heading]="'system.job-result' | translate" id="job-result">
             <ng-template let-job="item">
                 <vdr-dropdown *ngIf="hasResult(job)">
                     <button class="btn btn-link btn-sm details-button" vdrDropdownTrigger>