fix(admin-ui): Lazy-load only selected custom fields in list views

Relates to #3097

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

@@ -25,7 +25,7 @@
     <ng-template vdrSplitViewLeft>
         <vdr-collection-data-table
             class="mt-2"
-            id="collection-list"
+            [id]="dataTableListId"
             [items]="items$ | async"
             [subCollections]="subCollections$ | async"
             [itemsPerPage]="itemsPerPage$ | async"
@@ -36,6 +36,7 @@
             (pageChange)="setPageNumber($event)"
             (itemsPerPageChange)="setItemsPerPage($event)"
             (changeOrder)="onRearrange($event)"
+            (visibleColumnsChange)="setVisibleColumns($event)"
         >
             <vdr-bulk-action-menu
                 locationId="collection-list"

packages/admin-ui/src/lib/catalog/src/components/collection-list/collection-list.component.ts

@@ -28,6 +28,7 @@ export class CollectionListComponent
     activeCollectionTitle$: Observable<string>;
     subCollections$: Observable<Array<ItemOf<GetCollectionListQuery, 'collections'>>>;
     expandedIds: string[] = [];
+    dataTableListId = 'collection-list';
     readonly customFields = this.getCustomFieldConfig('Collection');
     readonly filters = this.createFilterCollection()
         .addIdFilter()
@@ -58,7 +59,10 @@ export class CollectionListComponent
         .addCustomFieldSorts(this.customFields)
         .connectToRoute(this.route);
 
-    constructor(protected dataService: DataService, private notificationService: NotificationService) {
+    constructor(
+        protected dataService: DataService,
+        private notificationService: NotificationService,
+    ) {
         super();
         super.configure({
             document: GetCollectionListDocument,

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

@@ -23,7 +23,7 @@
 </vdr-page-block>
 <vdr-data-table-2
     class="mt-2"
-    id="facet-list"
+    [id]="dataTableListId"
     [items]="items$ | async"
     [itemsPerPage]="itemsPerPage$ | async"
     [totalItems]="totalItems$ | async"
@@ -31,6 +31,7 @@
     [filters]="filters"
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
+    (visibleColumnsChange)="setVisibleColumns($event)"
 >
     <vdr-bulk-action-menu
         locationId="facet-list"

packages/admin-ui/src/lib/catalog/src/components/facet-list/facet-list.component.ts

@@ -35,6 +35,7 @@ export class FacetListComponent
     readonly initialLimit = 3;
     displayLimit: { [id: string]: number } = {};
 
+    dataTableListId = 'facet-list';
     readonly customFields = this.getCustomFieldConfig('Facet');
     readonly filters = this.createFilterCollection()
         .addIdFilter()

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

@@ -8,7 +8,7 @@
             ></vdr-language-selector>
         </vdr-ab-left>
         <vdr-ab-right>
-            <vdr-action-bar-items locationId="product-list"></vdr-action-bar-items>
+            <vdr-action-bar-items [locationId]="pageLocationId"></vdr-action-bar-items>
             <a
                 class="button primary mr-1"
                 [routerLink]="['./create']"
@@ -17,7 +17,7 @@
                 <clr-icon shape="plus"></clr-icon>
                 {{ 'catalog.create-new-product' | translate }}
             </a>
-            <vdr-action-bar-dropdown-menu [alwaysShow]="true" locationId="product-list">
+            <vdr-action-bar-dropdown-menu [alwaysShow]="true" [locationId]="pageLocationId">
                 <button type="button" vdrDropdownItem (click)="rebuildSearchIndex()">
                     <clr-icon shape="refresh" class=""></clr-icon>
                     {{ 'catalog.rebuild-search-index' | translate }}
@@ -28,7 +28,7 @@
 </vdr-page-block>
 <vdr-data-table-2
     class="mt-2"
-    id="product-list"
+    [id]="dataTableListId"
     [items]="items$ | async"
     [itemsPerPage]="itemsPerPage$ | async"
     [totalItems]="totalItems$ | async"
@@ -36,9 +36,10 @@
     [filters]="filters"
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
+    (visibleColumnsChange)="setVisibleColumns($event)"
 >
     <vdr-bulk-action-menu
-        locationId="product-list"
+        [locationId]="dataTableListId"
         [hostComponent]="this"
         [selectionManager]="selectionManager"
     ></vdr-bulk-action-menu>

packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.ts

@@ -24,6 +24,8 @@ export class ProductListComponent
     implements OnInit
 {
     pendingSearchIndexUpdates = 0;
+    dataTableListId = 'product-list';
+    pageLocationId = 'product-list';
     readonly customFields = this.getCustomFieldConfig('Product');
     readonly filters = this.createFilterCollection()
         .addIdFilter()

packages/admin-ui/src/lib/core/src/data/providers/collection-data.service.ts

@@ -17,7 +17,7 @@ import {
     UPDATE_COLLECTION,
 } from '../definitions/collection-definitions';
 
-import { BaseDataService } from './base-data.service';
+import { BaseDataService, ExtendedQueryOptions } from './base-data.service';
 
 export class CollectionDataService {
     constructor(private baseDataService: BaseDataService) {}
@@ -110,21 +110,32 @@ export class CollectionDataService {
         >(PREVIEW_COLLECTION_CONTENTS, { input, options });
     }
 
-    getCollectionContents(id: string, take = 10, skip = 0, filterTerm?: string) {
+    getCollectionContents(
+        id: string,
+        take = 10,
+        skip = 0,
+        filterTerm?: string,
+        options: ExtendedQueryOptions = {},
+    ) {
         const filter = filterTerm
             ? ({ name: { contains: filterTerm } } as Codegen.CollectionFilterParameter)
             : undefined;
         return this.baseDataService.query<
             Codegen.GetCollectionContentsQuery,
             Codegen.GetCollectionContentsQueryVariables
-        >(GET_COLLECTION_CONTENTS, {
-            id,
-            options: {
-                skip,
-                take,
-                filter,
+        >(
+            GET_COLLECTION_CONTENTS,
+            {
+                id,
+                options: {
+                    skip,
+                    take,
+                    filter,
+                },
             },
-        });
+            'cache-and-network',
+            options,
+        );
     }
 
     assignCollectionsToChannel(input: Codegen.AssignCollectionsToChannelInput) {

packages/admin-ui/src/lib/core/src/data/providers/product-data.service.ts

@@ -355,6 +355,9 @@ export class ProductDataService {
                     },
                 },
             },
+            undefined,
+            // By default do not load custom fields in the list view
+            { includeCustomFields: [] },
         );
     }
 

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

@@ -22,8 +22,8 @@ import { Observable, Subject } from 'rxjs';
 import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
 import { LanguageCode } from '../../../common/generated-types';
 import { DataService } from '../../../data/providers/data.service';
+import { DataTableConfigService } from '../../../providers/data-table/data-table-config.service';
 import { DataTableFilterCollection } from '../../../providers/data-table/data-table-filter-collection';
-import { DataTableConfig, LocalStorageService } from '../../../providers/local-storage/local-storage.service';
 import { BulkActionMenuComponent } from '../bulk-action-menu/bulk-action-menu.component';
 
 import { FilterPresetService } from '../data-table-filter-presets/filter-preset.service';
@@ -130,6 +130,7 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnDe
     route = inject(ActivatedRoute);
     filterPresetService = inject(FilterPresetService);
     dataTableCustomComponentService = inject(DataTableCustomComponentService);
+    dataTableConfigService = inject(DataTableConfigService);
     protected customComponents = new Map<string, { config: DataTableComponentConfig; injector: Injector }>();
 
     rowTemplate: TemplateRef<any>;
@@ -145,7 +146,6 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnDe
 
     constructor(
         protected changeDetectorRef: ChangeDetectorRef,
-        protected localStorageService: LocalStorageService,
         protected dataService: DataService,
     ) {
         this.uiLanguage$ = this.dataService.client
@@ -167,8 +167,8 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnDe
 
     get sortedColumns() {
         const columns = this.allColumns;
-        const dataTableConfig = this.getDataTableConfig();
-        for (const [id, index] of Object.entries(dataTableConfig[this.id].order)) {
+        const dataTableConfig = this.dataTableConfigService.getConfig(this.id);
+        for (const [id, index] of Object.entries(dataTableConfig.order)) {
             const column = columns.find(c => c.id === id);
             const currentIndex = columns.findIndex(c => c.id === id);
             if (currentIndex !== -1 && column) {
@@ -212,21 +212,21 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnDe
 
     ngAfterContentInit(): void {
         this.rowTemplate = this.templateRefs.last;
-        const dataTableConfig = this.getDataTableConfig();
+        const dataTableConfig = this.dataTableConfigService.getConfig(this.id);
 
         if (!this.id) {
             console.warn(`No id was assigned to the data table component`);
         }
         const updateColumnVisibility = () => {
-            dataTableConfig[this.id].visibility = this.allColumns
+            dataTableConfig.visibility = this.allColumns
                 .filter(c => (c.visible && c.hiddenByDefault) || (!c.visible && !c.hiddenByDefault))
                 .map(c => c.id);
-            this.localStorageService.set('dataTableConfig', dataTableConfig);
+            this.dataTableConfigService.setConfig(this.id, dataTableConfig);
             this.visibleColumnsChange.emit(this.visibleSortedColumns);
         };
 
         this.allColumns.forEach(column => {
-            if (dataTableConfig?.[this.id]?.visibility.includes(column.id)) {
+            if (dataTableConfig?.visibility.includes(column.id)) {
                 column.setVisibility(column.hiddenByDefault);
             }
             column.onColumnChange(updateColumnVisibility);
@@ -250,8 +250,7 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnDe
             this.selectionManager.setCurrentItems(this.items);
         }
         this.showSearchFilterRow =
-            !!this.filters?.activeFilters.length ||
-            (dataTableConfig?.[this.id]?.showSearchFilterRow ?? false);
+            !!this.filters?.activeFilters.length || (dataTableConfig?.showSearchFilterRow ?? false);
         this.columns.changes.subscribe(() => {
             this.changeDetectorRef.markForCheck();
         });
@@ -273,27 +272,27 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnDe
 
     onColumnReorder(event: { column: DataTable2ColumnComponent<any>; newIndex: number }) {
         const naturalIndex = this.allColumns.findIndex(c => c.id === event.column.id);
-        const dataTableConfig = this.getDataTableConfig();
+        const dataTableConfig = this.dataTableConfigService.getConfig(this.id);
         if (naturalIndex === event.newIndex) {
-            delete dataTableConfig[this.id].order[event.column.id];
+            delete dataTableConfig.order[event.column.id];
         } else {
-            dataTableConfig[this.id].order[event.column.id] = event.newIndex;
+            dataTableConfig.order[event.column.id] = event.newIndex;
         }
-        this.localStorageService.set('dataTableConfig', dataTableConfig);
+        this.dataTableConfigService.setConfig(this.id, dataTableConfig);
     }
 
     onColumnsReset() {
-        const dataTableConfig = this.getDataTableConfig();
-        dataTableConfig[this.id].order = {};
-        dataTableConfig[this.id].visibility = [];
-        this.localStorageService.set('dataTableConfig', dataTableConfig);
+        const dataTableConfig = this.dataTableConfigService.getConfig(this.id);
+        dataTableConfig.order = {};
+        dataTableConfig.visibility = [];
+        this.dataTableConfigService.setConfig(this.id, dataTableConfig);
     }
 
     toggleSearchFilterRow() {
         this.showSearchFilterRow = !this.showSearchFilterRow;
-        const dataTableConfig = this.getDataTableConfig();
-        dataTableConfig[this.id].showSearchFilterRow = this.showSearchFilterRow;
-        this.localStorageService.set('dataTableConfig', dataTableConfig);
+        const dataTableConfig = this.dataTableConfigService.getConfig(this.id);
+        dataTableConfig.showSearchFilterRow = this.showSearchFilterRow;
+        this.dataTableConfigService.setConfig(this.id, dataTableConfig);
     }
 
     trackByFn(index: number, item: any) {
@@ -311,17 +310,4 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnDe
     onRowClick(item: T, event: MouseEvent) {
         this.selectionManager?.toggleSelection(item, event);
     }
-
-    protected getDataTableConfig(): DataTableConfig {
-        const dataTableConfig = this.localStorageService.get('dataTableConfig') ?? {};
-        if (!dataTableConfig[this.id]) {
-            dataTableConfig[this.id] = {
-                visibility: [],
-                order: {},
-                showSearchFilterRow: false,
-                filterPresets: [],
-            };
-        }
-        return dataTableConfig;
-    }
 }

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

@@ -15,7 +15,7 @@
     <ng-template vdrSplitViewLeft>
         <vdr-data-table-2
             class="mt-2"
-            id="customer-group-list"
+            [id]="dataTableListId"
             [items]="items$ | async"
             [itemsPerPage]="itemsPerPage$ | async"
             [totalItems]="totalItems$ | async"
@@ -24,6 +24,7 @@
             [activeIndex]="activeIndex$ | async"
             (pageChange)="setPageNumber($event)"
             (itemsPerPageChange)="setItemsPerPage($event)"
+            (visibleColumnsChange)="setVisibleColumns($event)"
         >
             <vdr-bulk-action-menu
                 locationId="customer-group-list"

packages/admin-ui/src/lib/customer/src/components/customer-group-list/customer-group-list.component.ts

@@ -41,6 +41,7 @@ export class CustomerGroupListComponent
     extends TypedBaseListComponent<typeof GetCustomerGroupListDocument, 'customerGroups'>
     implements OnInit
 {
+    dataTableListId = 'customer-group-list';
     readonly customFields = this.getCustomFieldConfig('CustomerGroup');
     activeGroup$: Observable<ItemOf<GetCustomerGroupsQuery, 'customerGroups'> | undefined>;
     activeIndex$: Observable<number>;

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

@@ -14,7 +14,7 @@
 
 <vdr-data-table-2
     class="mt-2"
-    id="customer-list"
+    [id]="dataTableListId"
     [items]="items$ | async"
     [itemsPerPage]="itemsPerPage$ | async"
     [totalItems]="totalItems$ | async"
@@ -22,6 +22,7 @@
     [filters]="filters"
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
+    (visibleColumnsChange)="setVisibleColumns($event)"
 >
     <vdr-bulk-action-menu
         locationId="customer-list"

packages/admin-ui/src/lib/customer/src/components/customer-list/customer-list.component.ts

@@ -37,6 +37,7 @@ export class CustomerListComponent
     extends TypedBaseListComponent<typeof CustomerListQueryDocument, 'customers'>
     implements OnInit
 {
+    dataTableListId = 'customer-list';
     readonly customFields = this.getCustomFieldConfig('Customer');
     readonly filters = this.createFilterCollection()
         .addIdFilter()

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

@@ -19,7 +19,7 @@
 </vdr-page-block>
 
 <vdr-data-table-2
-    id="promotion-list"
+    [id]="dataTableListId"
     [items]="items$ | async"
     [itemsPerPage]="itemsPerPage$ | async"
     [totalItems]="totalItems$ | async"
@@ -27,6 +27,7 @@
     [filters]="filters"
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
+    (visibleColumnsChange)="setVisibleColumns($event)"
 >
     <vdr-bulk-action-menu
         locationId="promotion-list"

packages/admin-ui/src/lib/marketing/src/components/promotion-list/promotion-list.component.ts

@@ -32,6 +32,7 @@ export class PromotionListComponent
     extends TypedBaseListComponent<typeof GetPromotionListDocument, 'promotions'>
     implements OnInit
 {
+    dataTableListId = 'promotion-list';
     readonly customFields = this.getCustomFieldConfig('Promotion');
     readonly filters = this.createFilterCollection()
         .addIdFilter()

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

@@ -14,7 +14,7 @@
 </vdr-page-block>
 <vdr-data-table-2
     class="mt-2"
-    id="order-list"
+    [id]="dataTableListId"
     [items]="items$ | async"
     [itemsPerPage]="itemsPerPage$ | async"
     [totalItems]="totalItems$ | async"
@@ -22,6 +22,7 @@
     [filters]="filters"
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
+    (visibleColumnsChange)="setVisibleColumns($event)"
 >
     <vdr-bulk-action-menu
         locationId="order-list"

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

@@ -23,6 +23,7 @@ export class OrderListComponent
     extends TypedBaseListComponent<typeof GetOrderListDocument, 'orders'>
     implements OnInit
 {
+    dataTableListId = 'order-list';
     orderStates = this.serverConfigService.getOrderProcessStates().map(item => item.name);
     readonly OrderType = OrderType;
     readonly customFields = this.getCustomFieldConfig('Order');
@@ -99,7 +100,10 @@ export class OrderListComponent
     canCreateDraftOrder = false;
     private activeChannelIsDefaultChannel = false;
 
-    constructor(protected serverConfigService: ServerConfigService, private channelService: ChannelService) {
+    constructor(
+        protected serverConfigService: ServerConfigService,
+        private channelService: ChannelService,
+    ) {
         super();
         super.configure({
             document: GetOrderListDocument,

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

@@ -17,7 +17,7 @@
 </vdr-page-block>
 <vdr-data-table-2
     class="mt-2"
-    id="administrator-list"
+    [id]="dataTableListId"
     [items]="items$ | async"
     [itemsPerPage]="itemsPerPage$ | async"
     [totalItems]="totalItems$ | async"
@@ -25,6 +25,7 @@
     [filters]="filters"
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
+    (visibleColumnsChange)="setVisibleColumns($event)"
 >
     <vdr-bulk-action-menu
         locationId="administrator-list"

packages/admin-ui/src/lib/settings/src/components/administrator-list/administrator-list.component.ts

@@ -48,6 +48,7 @@ export class AdministratorListComponent extends TypedBaseListComponent<
     typeof GetAdministratorListDocument,
     'administrators'
 > {
+    dataTableListId = 'administrator-list';
     readonly customFields = this.getCustomFieldConfig('Administrator');
     readonly filters = this.createFilterCollection()
         .addIdFilter()

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

@@ -13,7 +13,7 @@
 </vdr-page-block>
 <vdr-data-table-2
     class="mt-2"
-    id="channel-list"
+    [id]="dataTableListId"
     [items]="items$ | async"
     [itemsPerPage]="itemsPerPage$ | async"
     [totalItems]="totalItems$ | async"
@@ -21,6 +21,7 @@
     [filters]="filters"
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
+    (visibleColumnsChange)="setVisibleColumns($event)"
 >
     <vdr-bulk-action-menu
         locationId="channel-list"

packages/admin-ui/src/lib/settings/src/components/channel-list/channel-list.component.ts

@@ -26,6 +26,7 @@ export class ChannelListComponent
     extends TypedBaseListComponent<typeof GetChannelListDocument, 'channels'>
     implements OnInit
 {
+    dataTableListId = 'channel-list';
     readonly customFields = this.getCustomFieldConfig('Channel');
     readonly filters = this.createFilterCollection()
         .addIdFilter()

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

@@ -23,7 +23,7 @@
 </vdr-page-block>
 <vdr-data-table-2
     class="mt-2"
-    id="country-list"
+    [id]="dataTableListId"
     [items]="items$ | async"
     [itemsPerPage]="itemsPerPage$ | async"
     [totalItems]="totalItems$ | async"
@@ -31,6 +31,7 @@
     [filters]="filters"
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
+    (visibleColumnsChange)="setVisibleColumns($event)"
 >
     <vdr-bulk-action-menu
         locationId="country-list"

packages/admin-ui/src/lib/settings/src/components/country-list/country-list.component.ts

@@ -30,6 +30,7 @@ export const GET_COUNTRY_LIST = gql`
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CountryListComponent extends TypedBaseListComponent<typeof GetCountryListDocument, 'countries'> {
+    dataTableListId = 'country-list';
     readonly customFields = this.getCustomFieldConfig('Region');
     readonly filters = this.createFilterCollection()
         .addIdFilter()

packages/admin-ui/src/lib/settings/src/components/payment-method-list/payment-method-list.component.html

@@ -22,7 +22,7 @@
     </vdr-action-bar>
 </vdr-page-block>
 <vdr-data-table-2
-    id="payment-method-list"
+    [id]="dataTableListId"
     [items]="items$ | async"
     [itemsPerPage]="itemsPerPage$ | async"
     [totalItems]="totalItems$ | async"
@@ -30,6 +30,7 @@
     [filters]="filters"
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
+    (visibleColumnsChange)="setVisibleColumns($event)"
 >
     <vdr-bulk-action-menu
         locationId="payment-method-list"

packages/admin-ui/src/lib/settings/src/components/payment-method-list/payment-method-list.component.ts

@@ -33,6 +33,7 @@ export class PaymentMethodListComponent extends TypedBaseListComponent<
     typeof GetPaymentMethodListDocument,
     'paymentMethods'
 > {
+    dataTableListId = 'payment-method-list';
     readonly customFields = this.getCustomFieldConfig('PaymentMethod');
     readonly filters = this.createFilterCollection()
         .addIdFilter()

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

@@ -16,7 +16,7 @@
     </vdr-action-bar>
 </vdr-page-block>
 <vdr-data-table-2
-    id="role-list"
+    [id]="dataTableListId"
     [items]="items$ | async"
     [itemsPerPage]="itemsPerPage$ | async"
     [totalItems]="totalItems$ | async"
@@ -24,6 +24,7 @@
     [filters]="filters"
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
+    (visibleColumnsChange)="setVisibleColumns($event)"
 >
     <vdr-bulk-action-menu
         locationId="role-list"

packages/admin-ui/src/lib/settings/src/components/role-list/role-list.component.ts

@@ -33,6 +33,7 @@ export class RoleListComponent
     extends TypedBaseListComponent<typeof GetRoleListDocument, 'roles'>
     implements OnInit
 {
+    dataTableListId = 'role-list';
     readonly initialLimit = 3;
     displayLimit: { [id: string]: number } = {};
     readonly filters = this.createFilterCollection()

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

@@ -12,7 +12,7 @@
     </vdr-action-bar>
 </vdr-page-block>
 <vdr-data-table-2
-    id="seller-list"
+    [id]="dataTableListId"
     [items]="items$ | async"
     [itemsPerPage]="itemsPerPage$ | async"
     [totalItems]="totalItems$ | async"
@@ -20,6 +20,7 @@
     [filters]="filters"
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
+    (visibleColumnsChange)="setVisibleColumns($event)"
 >
     <vdr-bulk-action-menu
         locationId="seller-list"

packages/admin-ui/src/lib/settings/src/components/seller-list/seller-list.component.ts

@@ -30,6 +30,7 @@ export class SellerListComponent
     extends TypedBaseListComponent<typeof GetSellerListDocument, 'sellers'>
     implements OnInit
 {
+    dataTableListId = 'seller-list';
     readonly customFields = this.getCustomFieldConfig('Seller');
     readonly filters = this.createFilterCollection()
         .addIdFilter()

packages/admin-ui/src/lib/settings/src/components/shipping-method-list/shipping-method-list.component.html

@@ -22,7 +22,7 @@
     </vdr-action-bar>
 </vdr-page-block>
 <vdr-data-table-2
-    id="shipping-method-list"
+    [id]="dataTableListId"
     [items]="items$ | async"
     [itemsPerPage]="itemsPerPage$ | async"
     [totalItems]="totalItems$ | async"
@@ -30,6 +30,7 @@
     [filters]="filters"
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
+    (visibleColumnsChange)="setVisibleColumns($event)"
 >
     <vdr-bulk-action-menu
         locationId="shipping-method-list"

packages/admin-ui/src/lib/settings/src/components/shipping-method-list/shipping-method-list.component.ts

@@ -33,6 +33,7 @@ export class ShippingMethodListComponent
     extends TypedBaseListComponent<typeof GetShippingMethodListDocument, 'shippingMethods'>
     implements OnInit
 {
+    dataTableListId = 'shipping-method-list';
     readonly customFields = this.getCustomFieldConfig('ShippingMethod');
     readonly filters = this.createFilterCollection()
         .addIdFilter()

packages/admin-ui/src/lib/settings/src/components/stock-location-list/stock-location-list.component.html

@@ -17,7 +17,7 @@
 </vdr-page-block>
 <vdr-data-table-2
     class="mt-2"
-    id="stock-location-list"
+    [id]="dataTableListId"
     [items]="items$ | async"
     [itemsPerPage]="itemsPerPage$ | async"
     [totalItems]="totalItems$ | async"
@@ -25,6 +25,7 @@
     [filters]="filters"
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
+    (visibleColumnsChange)="setVisibleColumns($event)"
 >
     <vdr-bulk-action-menu
         locationId="stock-location-list"

packages/admin-ui/src/lib/settings/src/components/stock-location-list/stock-location-list.component.ts

@@ -31,6 +31,7 @@ export class StockLocationListComponent
     extends TypedBaseListComponent<typeof GetStockLocationListDocument, 'stockLocations'>
     implements OnInit
 {
+    dataTableListId = 'stock-location-list';
     readonly customFields = this.getCustomFieldConfig('StockLocation');
     readonly filters = this.createFilterCollection()
         .addIdFilter()

packages/admin-ui/src/lib/settings/src/components/tax-category-list/tax-category-list.component.html

@@ -16,7 +16,7 @@
     </vdr-action-bar>
 </vdr-page-block>
 <vdr-data-table-2
-    id="tax-category-list"
+    [id]="dataTableListId"
     [items]="items$ | async"
     [itemsPerPage]="itemsPerPage$ | async"
     [totalItems]="totalItems$ | async"
@@ -24,6 +24,7 @@
     [filters]="filters"
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
+    (visibleColumnsChange)="setVisibleColumns($event)"
 >
     <vdr-bulk-action-menu
         locationId="tax-category-list"

packages/admin-ui/src/lib/settings/src/components/tax-category-list/tax-category-list.component.ts

@@ -29,6 +29,7 @@ export class TaxCategoryListComponent extends TypedBaseListComponent<
     typeof GetTaxCategoryListDocument,
     'taxCategories'
 > {
+    dataTableListId = 'tax-category-list';
     readonly customFields = this.serverConfigService.getCustomFieldsFor('TaxCategory');
     readonly filters = this.createFilterCollection()
         .addIdFilter()

packages/admin-ui/src/lib/settings/src/components/tax-rate-list/tax-rate-list.component.html

@@ -16,7 +16,7 @@
     </vdr-action-bar>
 </vdr-page-block>
 <vdr-data-table-2
-    id="tax-rate-list"
+    [id]="dataTableListId"
     [items]="items$ | async"
     [itemsPerPage]="itemsPerPage$ | async"
     [totalItems]="totalItems$ | async"
@@ -24,6 +24,7 @@
     [filters]="filters"
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
+    (visibleColumnsChange)="setVisibleColumns($event)"
 >
     <vdr-bulk-action-menu
         locationId="tax-rate-list"

packages/admin-ui/src/lib/settings/src/components/tax-rate-list/tax-rate-list.component.ts

@@ -22,6 +22,7 @@ export const GET_TAX_RATE_LIST = gql`
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TaxRateListComponent extends TypedBaseListComponent<typeof GetTaxRateListDocument, 'taxRates'> {
+    dataTableListId = 'tax-rate-list';
     readonly customFields = this.getCustomFieldConfig('TaxRate');
     readonly filters = this.createFilterCollection()
         .addIdFilter()

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

@@ -24,7 +24,7 @@
 <vdr-split-view [rightPanelOpen]="activeZone$ | async" (closeClicked)="closeMembers()">
     <ng-template vdrSplitViewLeft>
         <vdr-data-table-2
-            id="zone-list"
+            [id]="dataTableListId"
             [items]="items$ | async"
             [itemsPerPage]="itemsPerPage$ | async"
             [totalItems]="totalItems$ | async"
@@ -33,6 +33,7 @@
             [activeIndex]="activeIndex$ | async"
             (pageChange)="setPageNumber($event)"
             (itemsPerPageChange)="setItemsPerPage($event)"
+            (visibleColumnsChange)="setVisibleColumns($event)"
         >
             <vdr-bulk-action-menu
                 locationId="zone-list"

packages/admin-ui/src/lib/settings/src/components/zone-list/zone-list.component.ts

@@ -45,6 +45,7 @@ export class ZoneListComponent
     extends TypedBaseListComponent<typeof GetZoneListDocument, 'zones'>
     implements OnInit
 {
+    dataTableListId = 'zone-list';
     activeZone$: Observable<ItemOf<GetZoneListQuery, 'zones'> | undefined>;
     activeIndex$: Observable<number>;
     selectedMemberIds: string[] = [];