geonetwork-ui 2.2.0-dev.95201f8f → 2.2.0-dev.a9d33529

package/src/libs/feature/search/src/lib/filter-dropdown/filter-dropdown.component.ts

@@ -10,7 +10,7 @@ import { catchError, filter, map, startWith } from 'rxjs/operators'
 import { SearchFacade } from '../state/search.facade'
 import { SearchService } from '../utils/service/search.service'
 import { FieldsService } from '../utils/service/fields.service'
-import { FieldAvailableValue } from '../utils/service/fields'
+import { FieldAvailableValue, FieldValue } from '../utils/service/fields'
 
 @Component({
   selector: 'gn-ui-filter-dropdown',
@@ -31,11 +31,11 @@ export class FilterDropdownComponent implements OnInit {
     filter((selected) => !!selected),
     startWith([]),
     catchError(() => of([]))
-  )
+  ) as Observable<FieldValue[]>
 
-  onSelectedValues(values: (string | number)[]) {
+  onSelectedValues(values: unknown[]) {
     this.fieldsService
-      .buildFiltersFromFieldValues({ [this.fieldName]: values })
+      .buildFiltersFromFieldValues({ [this.fieldName]: values as FieldValue[] })
       .subscribe((filters) => this.searchService.updateFilters(filters))
   }
 

package/src/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.ts

@@ -11,12 +11,13 @@ import {
   AutocompleteComponent,
   AutocompleteItem,
 } from '../../../../../../libs/ui/inputs/src'
-import { Observable } from 'rxjs'
+import { Observable, firstValueFrom } from 'rxjs'
 import { map } from 'rxjs/operators'
 import { SearchFacade } from '../state/search.facade'
 import { SearchService } from '../utils/service/search.service'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
+import { SearchFilters } from '../../../../../../libs/api/metadata-converter/src'
 
 @Component({
   selector: 'gn-ui-fuzzy-search',
@@ -75,7 +76,12 @@ export class FuzzySearchComponent implements OnInit {
     }
   }
 
-  handleInputCleared() {
-    this.searchService.updateFilters({ any: '' })
+  async handleInputCleared() {
+    const currentSearchFilters: SearchFilters = await firstValueFrom(
+      this.searchFacade.searchFilters$
+    )
+    if (currentSearchFilters.any) {
+      this.searchService.updateFilters({ any: '' })
+    }
   }
 }

package/src/libs/feature/search/src/lib/results-table/results-table.component.html

@@ -0,0 +1,135 @@
+<div>
+  <div class="flex" data-cy="records-information">
+    <div
+      translate
+      class="my-8 ml-4 block text-gray-800"
+      [translateParams]="{
+        displayed: (records$ | async).length,
+        hits: (recordCount$ | async)
+      }"
+    >
+      results.records.hits.displayedOn
+    </div>
+    <div
+      *ngIf="(selectedRecords$ | async).length as selectedRecordCount"
+      class="my-8 ml-6 block text-gray-400 selected-records"
+      translate
+      [translateParams]="{ amount: selectedRecordCount }"
+    >
+      results.records.hits.selected
+    </div>
+  </div>
+
+  <gn-ui-interactive-table
+    [items]="records$ | async"
+    (itemClick)="handleRecordClick($event)"
+  >
+    <!-- SELECTED COLUMN -->
+    <gn-ui-interactive-table-column>
+      <ng-template #header>
+        <gn-ui-checkbox
+          [checked]="isAllSelected() | async"
+          [indeterminate]="isSomeSelected() | async"
+          (changed)="toggleSelectAll()"
+          type="default"
+          class="-m-2 mr-3"
+        >
+        </gn-ui-checkbox>
+      </ng-template>
+      <ng-template #cell let-item>
+        <gn-ui-checkbox
+          [checked]="isChecked(item) | async"
+          (changed)="handleRecordSelectedChange($event, item)"
+          class="-m-2"
+          type="default"
+        ></gn-ui-checkbox>
+      </ng-template>
+    </gn-ui-interactive-table-column>
+
+    <!-- TITLE COLUMN -->
+    <gn-ui-interactive-table-column
+      [sortable]="true"
+      [activeSort]="isSortedBy('resourceTitleObject.default.keyword') | async"
+      (sortChange)="setSortBy('resourceTitleObject.default.keyword', $event)"
+    >
+      <ng-template #header>
+        <span translate>record.metadata.title</span>
+      </ng-template>
+      <ng-template #cell let-item>
+        {{ item.title }}
+      </ng-template>
+    </gn-ui-interactive-table-column>
+
+    <!-- FORMATS COLUMN -->
+    <gn-ui-interactive-table-column>
+      <ng-template #header>
+        <span translate>record.metadata.formats</span>
+      </ng-template>
+      <ng-template #cell let-item>
+        <div
+          class="flex justify-start items-center gap-2"
+          *ngIf="getRecordFormats(item) as formats"
+          [title]="formats.join(', ')"
+        >
+          <span
+            class="badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0"
+            [style.background-color]="getBadgeColor(formats[0])"
+            *ngIf="formats[0]"
+          >
+            {{ formats[0] }}
+          </span>
+          <span
+            class="badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0"
+            [style.background-color]="getBadgeColor(formats[1])"
+            *ngIf="formats[1]"
+          >
+            {{ formats[1] }}
+          </span>
+          <div class="flex-shrink-0" *ngIf="formats.slice(2).length > 0">
+            <span>+{{ formats.slice(2).length }}</span>
+          </div>
+        </div>
+        <div *ngIf="!getRecordFormats(item)"></div>
+      </ng-template>
+    </gn-ui-interactive-table-column>
+
+    <!-- OWNER COLUMN -->
+    <gn-ui-interactive-table-column
+      [sortable]="true"
+      [activeSort]="isSortedBy('recordOwner') | async"
+      (sortChange)="setSortBy('recordOwner', $event)"
+    >
+      <ng-template #header>
+        <span translate>record.metadata.author</span>
+      </ng-template>
+      <ng-template #cell let-item>
+        <mat-icon class="material-symbols-outlined">person</mat-icon>
+        <span>{{ formatUserInfo(item.extras?.ownerInfo) }}</span>
+      </ng-template>
+    </gn-ui-interactive-table-column>
+
+    <!-- STATUS COLUMN -->
+    <gn-ui-interactive-table-column>
+      <ng-template #header>
+        <span translate>record.metadata.status</span>
+      </ng-template>
+      <ng-template #cell let-item>
+        {{ item.status }}
+      </ng-template>
+    </gn-ui-interactive-table-column>
+
+    <!-- UPDATE DATE COLUMN -->
+    <gn-ui-interactive-table-column
+      [sortable]="true"
+      [activeSort]="isSortedBy('changeDate') | async"
+      (sortChange)="setSortBy('changeDate', $event)"
+    >
+      <ng-template #header>
+        <span translate>record.metadata.updatedOn</span>
+      </ng-template>
+      <ng-template #cell let-item>
+        {{ dateToString(item.recordUpdated) }}
+      </ng-template>
+    </gn-ui-interactive-table-column>
+  </gn-ui-interactive-table>
+</div>

package/src/libs/feature/search/src/lib/results-table/results-table.component.ts

@@ -0,0 +1,165 @@
+import { Component, EventEmitter, Output } from '@angular/core'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  FileFormat,
+  getBadgeColor,
+  getFileFormat,
+  getFormatPriority,
+} from '../../../../../../libs/util/shared/src'
+import { UiInputsModule } from '../../../../../../libs/ui/inputs/src'
+import {
+  InteractiveTableColumnComponent,
+  InteractiveTableComponent,
+} from '../../../../../../libs/ui/layout/src'
+import { MatIconModule } from '@angular/material/icon'
+import { TranslateModule } from '@ngx-translate/core'
+import { SearchFacade } from '../state/search.facade'
+import { SelectionService } from '../../../../../../libs/api/repository/src'
+import { combineLatest, firstValueFrom, Observable } from 'rxjs'
+import { CommonModule } from '@angular/common'
+import { map, take } from 'rxjs/operators'
+import { FieldSort } from '../../../../../../libs/common/domain/src/lib/model/search'
+import { SearchService } from '../utils/service/search.service'
+
+@Component({
+  selector: 'gn-ui-results-table',
+  templateUrl: './results-table.component.html',
+  styleUrls: ['./results-table.component.css'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    UiInputsModule,
+    InteractiveTableComponent,
+    InteractiveTableColumnComponent,
+    MatIconModule,
+    TranslateModule,
+  ],
+})
+export class ResultsTableComponent {
+  @Output() recordClick = new EventEmitter<CatalogRecord>()
+
+  records$ = this.searchFacade.results$
+  recordCount$ = this.searchFacade.resultsHits$
+  selectedRecords$ = this.selectionService.selectedRecordsIdentifiers$
+
+  constructor(
+    private searchFacade: SearchFacade,
+    private searchService: SearchService,
+    private selectionService: SelectionService
+  ) {}
+
+  dateToString(date: Date): string {
+    return date?.toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      timeZone: 'UTC',
+    })
+  }
+
+  getStatus(isPublishedToAll: boolean | unknown) {
+    return isPublishedToAll ? 'published' : 'not published'
+  }
+
+  getRecordFormats(record: CatalogRecord): FileFormat[] {
+    if (record.kind === 'service' || !('distributions' in record)) {
+      return []
+    }
+    const formats = Array.from(
+      new Set(
+        record.distributions.map((distribution) => getFileFormat(distribution))
+      )
+    ).filter((format) => !!format)
+    formats.sort((a, b) => getFormatPriority(b) - getFormatPriority(a))
+    return formats
+  }
+
+  formatUserInfo(userInfo: string | unknown): string {
+    const infos = (typeof userInfo === 'string' ? userInfo : '').split('|')
+    if (infos && infos.length === 4) {
+      return `${infos[2]} ${infos[1]}`
+    }
+    return undefined
+  }
+
+  getBadgeColor(format: FileFormat): string {
+    return getBadgeColor(format)
+  }
+
+  handleRecordClick(item: unknown) {
+    this.recordClick.emit(item as CatalogRecord)
+  }
+
+  setSortBy(col: string, order: 'asc' | 'desc') {
+    this.searchService.setSortBy([order, col])
+  }
+
+  isSortedBy(col: string): Observable<'asc' | 'desc' | null> {
+    return this.searchFacade.sortBy$.pipe(
+      take(1),
+      map((sortOrder) => {
+        const sortArray = Array.isArray(sortOrder[0])
+          ? (sortOrder as FieldSort[])
+          : ([sortOrder] as FieldSort[])
+        for (const sort of sortArray) {
+          if (sort[1] === col) {
+            return sort[0]
+          }
+        }
+        return null
+      })
+    )
+  }
+
+  isChecked(record: CatalogRecord): Observable<boolean> {
+    return this.selectedRecords$.pipe(
+      take(1),
+      map((selectedRecords) => {
+        return selectedRecords.includes(record.uniqueIdentifier)
+      })
+    )
+  }
+
+  handleRecordSelectedChange(selected: boolean, record: CatalogRecord) {
+    if (!selected) {
+      this.selectionService.deselectRecords([record])
+    } else {
+      this.selectionService.selectRecords([record])
+    }
+  }
+
+  async toggleSelectAll() {
+    const records = await firstValueFrom(this.records$)
+    if (await firstValueFrom(this.isAllSelected())) {
+      this.selectionService.deselectRecords(records)
+    } else {
+      this.selectionService.selectRecords(records)
+    }
+  }
+
+  isAllSelected(): Observable<boolean> {
+    return combineLatest([this.records$, this.selectedRecords$]).pipe(
+      take(1),
+      map(([records, selectedRecords]) => {
+        return records.every((record) =>
+          selectedRecords.includes(record.uniqueIdentifier)
+        )
+      })
+    )
+  }
+
+  isSomeSelected(): Observable<boolean> {
+    return combineLatest([this.records$, this.selectedRecords$]).pipe(
+      take(1),
+      map(([records, selectedRecords]) => {
+        const allSelected = records.every((record) =>
+          selectedRecords.includes(record.uniqueIdentifier)
+        )
+        const someSelected = records.some((record) =>
+          selectedRecords.includes(record.uniqueIdentifier)
+        )
+        return !allSelected && someSelected
+      })
+    )
+  }
+}

package/src/libs/feature/search/src/lib/state/effects.ts

@@ -126,10 +126,11 @@ export class SearchEffects {
           ),
           switchMap(([state, favorites]) => {
             if (!state.params.useSpatialFilter || !this.filterGeometry$) {
-              return of([state, favorites, null])
+              return of([state, favorites, undefined])
             }
             return this.filterGeometry$.pipe(
               tap((geom) => {
+                if (!geom) return
                 try {
                   const trace = validGeoJson(geom, true) as string[]
                   if (trace?.length > 0) {
@@ -145,7 +146,7 @@ export class SearchEffects {
               }),
               map((geom) => [state, favorites, geom]),
               catchError((e) => {
-                return of([state, favorites, null])
+                return of([state, favorites, undefined])
               })
             )
           }),
@@ -153,7 +154,7 @@ export class SearchEffects {
             ([state, favorites, geometry]: [
               SearchStateSearch,
               string[],
-              Geometry | null
+              Geometry | undefined
             ]) => {
               const { currentPage, pageSize, sort } = state.params
               const filters = {

package/src/libs/ui/elements/src/index.ts

@@ -18,6 +18,7 @@ export * from './lib/pagination/pagination.component'
 export * from './lib/related-record-card/related-record-card.component'
 export * from './lib/search-results-error/search-results-error.component'
 export * from './lib/user-preview/user-preview.component'
+export * from './lib/max-lines/max-lines.component'
 export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/markdown-parser/markdown-parser.component'
 export * from './lib/image-overlay-preview/image-overlay-preview.component'

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.html

@@ -8,7 +8,10 @@
   >
     record.metadata.download
   </p>
-  <div class="flex flex-wrap justify-start sm:justify-end sm:pb-4">
+  <div
+    class="flex flex-wrap justify-start sm:justify-end sm:pb-4"
+    data-cy="download-format-filters"
+  >
     <gn-ui-button
       class="m-1 format-filter"
       [extraClass]="

package/src/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html

@@ -1,11 +1,12 @@
 <gn-ui-content-ghost
   [showContent]="imageUrl !== undefined"
-  ghostClass="h-36 mb-3"
+  ghostClass="h-48 mb-3"
 >
   <div
     *ngIf="imageUrl"
+    [showContent]="imageUrl !== undefined"
     data-cy="record-thumbnail"
-    class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36 group-hover:shadow-xl group-hover:border-0 mb-3"
+    class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3"
   >
     <gn-ui-thumbnail
       class="relative h-full w-full"

package/src/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.html

@@ -1,4 +1,4 @@
-<div class="py-5 px-5 rounded bg-gray-100 text-black mb-6 sm:mb-12">
+<div class="py-5 px-5 rounded bg-gray-100 text-black mb-6">
   <div class="grid gap-3">
     <div>
       <p class="text-sm font-medium" translate>record.metadata.contact</p>

package/src/libs/ui/elements/src/lib/ui-elements.module.ts

@@ -88,6 +88,7 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     AvatarComponent,
     UserPreviewComponent,
     PaginationButtonsComponent,
+    MaxLinesComponent,
     RecordApiFormComponent,
     MarkdownParserComponent,
     ImageOverlayPreviewComponent,

package/src/libs/ui/inputs/src/index.ts

@@ -19,3 +19,4 @@ export * from './lib/viewport-intersector/viewport-intersector.component'
 export * from './lib/checkbox/checkbox.component'
 export * from './lib/search-input/search-input.component'
 export * from './lib/date-range-picker/date-range-picker.component'
+export * from './lib/editable-label/editable-label.directive'

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html

@@ -6,7 +6,7 @@
     [placeholder]="placeholder"
     [formControl]="control"
     [matAutocomplete]="auto"
-    (keyup.enter)="handleEnter($event.target.value)"
+    (keyup.enter)="handleEnter(searchInput.value)"
   />
   <button
     type="button"

package/src/libs/ui/inputs/src/lib/checkbox/checkbox.component.html

@@ -1,7 +1,6 @@
 <mat-checkbox
   class="cursor-pointer"
   [class]="classList"
-  type="checkbox"
   [checked]="checked"
   [indeterminate]="indeterminate"
   (click)="handleClick($event)"

package/src/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.html

@@ -113,7 +113,7 @@
         type="checkbox"
         #checkBox
         [checked]="isSelected(choice)"
-        (change)="select(choice, $event.target.checked)"
+        (change)="select(choice, checkBox.checked)"
       />
       <span class="ml-[8px] text-[14px] truncate">
         {{ choice.label }}

package/src/libs/ui/inputs/src/lib/editable-label/editable-label.directive.ts

@@ -0,0 +1,48 @@
+import {
+  Directive,
+  ElementRef,
+  Renderer2,
+  AfterViewInit,
+  EventEmitter,
+  Output,
+  Input,
+} from '@angular/core'
+
+@Directive({
+  selector: '[gnUiEditableLabel]',
+  standalone: true,
+})
+export class EditableLabelDirective implements AfterViewInit {
+  @Output() editableLabelChanged = new EventEmitter<string>()
+  @Input() gnUiEditableLabel?: boolean
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  ngAfterViewInit() {
+    if (this.gnUiEditableLabel !== false) {
+      const appendedInput = this.renderer.createElement('input')
+
+      this.renderer.setStyle(appendedInput, 'background', 'inherit')
+      this.renderer.setStyle(appendedInput, 'color', 'inherit')
+      this.renderer.setStyle(appendedInput, 'font', 'inherit')
+      this.renderer.setStyle(appendedInput, 'border', 'inherit')
+      this.renderer.setStyle(appendedInput, 'width', '100%')
+      this.renderer.setStyle(appendedInput, 'padding', 'inherit')
+      this.renderer.setStyle(appendedInput, 'margin', '0')
+      this.renderer.setStyle(appendedInput, 'height', 'inherit')
+      this.renderer.setStyle(appendedInput, 'line-height', 'inherit')
+      this.renderer.setStyle(appendedInput, 'text-decoration', 'inherit')
+
+      const hostContent = this.el.nativeElement.textContent || ''
+      const formattedContent = hostContent.replace(/\s+/g, ' ').trim()
+      this.renderer.setProperty(appendedInput, 'value', formattedContent)
+      this.renderer.setProperty(this.el.nativeElement, 'innerHTML', '')
+
+      this.renderer.listen(appendedInput, 'input', (event) => {
+        this.editableLabelChanged.emit(event.target.value)
+      })
+
+      this.renderer.appendChild(this.el.nativeElement, appendedInput)
+    }
+  }
+}

package/src/libs/ui/inputs/src/lib/ui-inputs.module.ts

@@ -41,6 +41,7 @@ import { MatFormFieldModule } from '@angular/material/form-field'
 import { MatInputModule } from '@angular/material/input'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MatNativeDateModule } from '@angular/material/core'
+import { EditableLabelDirective } from './editable-label/editable-label.directive'
 
 @NgModule({
   declarations: [
@@ -87,6 +88,7 @@ import { MatNativeDateModule } from '@angular/material/core'
     MatInputModule,
     MatDatepickerModule,
     MatNativeDateModule,
+    EditableLabelDirective,
   ],
   exports: [
     DropdownSelectorComponent,
@@ -106,6 +108,7 @@ import { MatNativeDateModule } from '@angular/material/core'
     CheckboxComponent,
     SearchInputComponent,
     DateRangePickerComponent,
+    EditableLabelDirective,
   ],
 })
 export class UiInputsModule {}

package/src/libs/ui/layout/src/index.ts

@@ -4,3 +4,5 @@ export * from './lib/carousel/carousel.component'
 export * from './lib/expandable-panel/expandable-panel.component'
 export * from './lib/sticky-header/sticky-header.component'
 export * from './lib/expandable-panel-button/expandable-panel-button.component'
+export * from './lib/interactive-table/interactive-table.component'
+export * from './lib/interactive-table/interactive-table-column/interactive-table-column.component'

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table-column/interactive-table-column.component.html

@@ -0,0 +1 @@
+<span>empty</span>

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table-column/interactive-table-column.component.ts

@@ -0,0 +1,33 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+
+@Component({
+  selector: 'gn-ui-interactive-table-column',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './interactive-table-column.component.html',
+  styleUrls: ['./interactive-table-column.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InteractiveTableColumnComponent {
+  @ContentChild('header') header: TemplateRef<unknown>
+  @ContentChild('cell') cell: TemplateRef<unknown>
+
+  @Input() grow = false
+  @Input() sortable = false
+  @Input() activeSort: 'asc' | 'desc' | null = null
+  @Output() sortChange = new EventEmitter<'asc' | 'desc'>()
+
+  handleSortChange() {
+    this.activeSort = this.activeSort === 'asc' ? 'desc' : 'asc'
+    this.sortChange.emit(this.activeSort)
+  }
+}

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table.component.css

@@ -0,0 +1,15 @@
+.sort-button mat-icon {
+  padding: 0;
+  margin: 0;
+  height: 8px;
+  line-height: 8px;
+  font-size: 18px;
+}
+
+.table-header-cell {
+  @apply text-gray-700 px-4 py-5 flex items-center truncate bg-white;
+}
+
+button.table-header-cell {
+  @apply transition-colors duration-75 hover:text-main hover:bg-gray-50 focus:text-main focus:bg-gray-50;
+}

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table.component.html

@@ -0,0 +1,54 @@
+<div class="grid w-full" [ngStyle]="gridStyle">
+  <div class="contents">
+    <ng-container *ngFor="let column of columns">
+      <button
+        *ngIf="column.sortable"
+        type="button"
+        class="table-header-cell"
+        (click)="column.sortable && column.handleSortChange()"
+      >
+        <ng-container *ngTemplateOutlet="column.header"></ng-container>
+        <div class="sort-button flex flex-col" *ngIf="column.sortable">
+          <mat-icon
+            class="material-symbols-outlined text-gray-600"
+            [ngClass]="{ 'text-main': column.activeSort === 'asc' }"
+            >expand_less</mat-icon
+          >
+          <mat-icon
+            class="material-symbols-outlined text-gray-600"
+            [ngClass]="{ 'text-main': column.activeSort === 'desc' }"
+            >expand_more</mat-icon
+          >
+        </div>
+      </button>
+      <div *ngIf="!column.sortable" class="table-header-cell">
+        <ng-container *ngTemplateOutlet="column.header"></ng-container>
+      </div>
+    </ng-container>
+  </div>
+  <div
+    class="contents text-gray-900 cursor-pointer group"
+    *ngFor="let item of items"
+    (click)="handleRowClick(item)"
+  >
+    <div
+      class="relative h-0"
+      [ngStyle]="{ 'grid-column': 'span ' + this.columns.length }"
+    >
+      <!-- this element is only used in keyboard navigation -->
+      <button
+        type="button"
+        class="absolute inset-x-0 h-[50px] bg-transparent pointer-events-none"
+      ></button>
+    </div>
+    <ng-container *ngFor="let column of columns">
+      <div
+        class="table-row-cell px-4 py-3 flex items-center bg-white transition-colors duration-75 truncate group-hover:text-main group-hover:bg-gray-50 border-b border-gray-200"
+      >
+        <ng-container
+          *ngTemplateOutlet="column.cell; context: { $implicit: item }"
+        ></ng-container>
+      </div>
+    </ng-container>
+  </div>
+</div>