RED-8679: added support for custom table item id formats.

src/lib/listing/listing.module.ts

@@ -21,6 +21,7 @@ import { CircleButtonComponent, IconButtonComponent } from '../buttons';
 import { MatIconModule } from '@angular/material/icon';
 import { EmptyStateComponent } from '../empty-state';
 import { InputWithActionComponent, RoundCheckboxComponent } from '../inputs';
+import { SnakeCasePipe } from '../pipes/snake-case.pipe';
 
 const matModules = [MatTooltipModule, MatIconModule];
 const components = [
@@ -50,6 +51,7 @@ const modules = [DragDropModule, TranslateModule, IqserFiltersModule, ScrollingM
         RoundCheckboxComponent,
         InputWithActionComponent,
         SyncWidthDirective,
+        SnakeCasePipe,
     ],
 })
 export class IqserListingModule {}

src/lib/listing/table-content/table-content.component.html

@@ -15,7 +15,7 @@
                 (mouseleave)="itemMouseLeaveFn && itemMouseLeaveFn(entity)"
                 *ngIf="itemMouseEnterFn || itemMouseLeaveFn; else withoutMouseEvents"
                 [class.help-mode-active]="helpModeService?.isHelpModeActive$ | async"
-                [id]="'item-' + entity.id"
+                [id]="rowIdPrefix + '-' + ((entity[namePropertyKey] | snakeCase) ?? entity.id)"
                 [ngClass]="getTableItemClasses(entity)"
                 [routerLink]="entity.routerLink"
             >
@@ -29,7 +29,7 @@
             <ng-template #withoutMouseEvents>
                 <div
                     [class.help-mode-active]="helpModeService?.isHelpModeActive$ | async"
-                    [id]="'item-' + entity.id"
+                    [id]="rowIdPrefix + '-' + ((entity[namePropertyKey] | snakeCase) ?? entity.id)"
                     [ngClass]="getTableItemClasses(entity)"
                     [routerLink]="entity.routerLink"
                 >

src/lib/listing/table-content/table-content.component.ts

@@ -23,6 +23,8 @@ export class TableContentComponent<Class extends IListable<PrimaryKey>, PrimaryK
     @Input() itemMouseLeaveFn?: (entity: Class) => void;
     @Input() tableItemClasses?: Record<string, (e: Class) => boolean>;
     @Input() selectionEnabled!: boolean;
+    @Input() rowIdPrefix: string = 'item';
+    @Input() namePropertyKey?: string;
     readonly trackBy = trackByFactory<Class>();
 
     @ViewChild(CdkVirtualScrollViewport, { static: true }) readonly scrollViewport!: CdkVirtualScrollViewport;

src/lib/listing/table/table.component.html

@@ -30,6 +30,8 @@
     [itemSize]="itemSize"
     [selectionEnabled]="selectionEnabled"
     [tableItemClasses]="tableItemClasses"
+    [rowIdPrefix]="rowIdPrefix"
+    [namePropertyKey]="namePropertyKey"
 ></iqser-table-content>
 
 <iqser-scroll-button

src/lib/listing/table/table.component.ts

@@ -46,6 +46,8 @@ export class TableComponent<Class extends IListable<PrimaryKey>, PrimaryKey exte
     @Input() helpModeKey?: string;
     @Input() headerHelpModeKey?: string;
     @Input() tableItemClasses?: Record<string, (e: Class) => boolean>;
+    @Input() rowIdPrefix: string = 'item';
+    @Input() namePropertyKey?: string;
     @Input() itemMouseEnterFn?: (entity: Class) => void;
     @Input() itemMouseLeaveFn?: (entity: Class) => void;
     @Output() readonly noDataAction = new EventEmitter<void>();

src/lib/pipes/snake-case.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'snakeCase',
+    standalone: true,
+})
+export class SnakeCasePipe implements PipeTransform {
+    transform(value: string): string | undefined {
+        if (!value) {
+            return undefined;
+        }
+        return value.toLowerCase().replaceAll(' ', '_');
+    }
+}