<vdr-data-table-2
    id="product-review-list"
    [items]="items$ | async"
    [itemsPerPage]="itemsPerPage$ | async"
    [totalItems]="totalItems$ | async"
    [currentPage]="currentPage$ | async"
    [filters]="filters"
    (pageChange)="setPageNumber($event)"
    (itemsPerPageChange)="setItemsPerPage($event)"
>
    <vdr-bulk-action-menu
        locationId="product-review-list"
        [hostComponent]="this"
        [selectionManager]="selectionManager"
    />
    <vdr-dt2-search
        [searchTermControl]="searchTermControl"
        searchTermPlaceholder="Filter by title"
    />
    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
        <ng-template let-review="item">
            {{ review.id }}
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column
        [heading]="'common.created-at' | translate"
        [hiddenByDefault]="true"
        [sort]="sorts.get('createdAt')"
    >
        <ng-template let-review="item">
            {{ review.createdAt | localeDate : 'short' }}
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column
        [heading]="'common.updated-at' | translate"
        [hiddenByDefault]="true"
        [sort]="sorts.get('updatedAt')"
    >
        <ng-template let-review="item">
            {{ review.updatedAt | localeDate : 'short' }}
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false" [sort]="sorts.get('name')">
        <ng-template let-review="item">
            <a class="button-ghost" [routerLink]="['./', review.id]"
                ><span>{{ review.name }}</span>
                <clr-icon shape="arrow right"></clr-icon>
            </a>
        </ng-template>
    </vdr-dt2-column>
</vdr-data-table-2>

class DataTable2Component<T> implements AfterContentInit, OnChanges, OnDestroy {
  @Input() @Input() id: string;
  @Input() @Input() items: T[];
  @Input() @Input() itemsPerPage: number;
  @Input() @Input() currentPage: number;
  @Input() @Input() totalItems: number;
  @Input() @Input() emptyStateLabel: string;
  @Input() @Input() filters: DataTableFilterCollection;
  @Input() @Input() activeIndex = -1;
  @Output() @Output() pageChange = new EventEmitter<number>();
  @Output() @Output() itemsPerPageChange = new EventEmitter<number>();
  @ContentChildren(DataTable2ColumnComponent) @ContentChildren(DataTable2ColumnComponent) columns: QueryList<DataTable2ColumnComponent<T>>;
  @ContentChildren(DataTableCustomFieldColumnComponent) @ContentChildren(DataTableCustomFieldColumnComponent)
    customFieldColumns: QueryList<DataTableCustomFieldColumnComponent<T>>;
  @ContentChild(DataTable2SearchComponent) @ContentChild(DataTable2SearchComponent) searchComponent: DataTable2SearchComponent;
  @ContentChild(BulkActionMenuComponent) @ContentChild(BulkActionMenuComponent) bulkActionMenuComponent: BulkActionMenuComponent;
  @ContentChild('vdrDt2CustomSearch') @ContentChild('vdrDt2CustomSearch') customSearchTemplate: TemplateRef<any>;
  @ContentChildren(TemplateRef) @ContentChildren(TemplateRef) templateRefs: QueryList<TemplateRef<any>>;
  rowTemplate: TemplateRef<any>;
  currentStart: number;
  currentEnd: number;
  disableSelect = false;
  showSearchFilterRow = false;
  protected protected uiLanguage$: Observable<LanguageCode>;
  constructor(changeDetectorRef: ChangeDetectorRef, localStorageService: LocalStorageService, dataService: DataService)
  selectionManager: void
  allColumns: void
  visibleSortedColumns: void
  sortedColumns: void
  ngOnChanges(changes: SimpleChanges) => ;
  ngOnDestroy() => ;
  ngAfterContentInit() => void;
  onColumnReorder(event: { column: DataTable2ColumnComponent<any>; newIndex: number }) => ;
  onColumnsReset() => ;
  toggleSearchFilterRow() => ;
  trackByFn(index: number, item: any) => ;
  onToggleAllClick() => ;
  onRowClick(item: T, event: MouseEvent) => ;
  protected getDataTableConfig() => DataTableConfig;
}