DataTable2Component

@vendure/admin-ui Source

A table for displaying PaginatedList results. It is designed to be used inside components which extend the BaseListComponent or TypedBaseListComponent class.

Example

Html

<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>

DataTable2Component

A table for displaying PaginatedList results. It is designed to be used inside components which extend the BaseListComponent or TypedBaseListComponent class.

Example

Html

<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() id: DataTableLocationId; @Input() items: T[]; @Input() itemsPerPage: number; @Input() currentPage: number; @Input() totalItems: number; @Input() emptyStateLabel: string; @Input() filters: DataTableFilterCollection; @Input() activeIndex = -1; @Input() trackByPath = 'id'; @Output() pageChange = new EventEmitter<number>(); @Output() itemsPerPageChange = new EventEmitter<number>(); @Output() visibleColumnsChange = new EventEmitter<Array<DataTable2ColumnComponent<T>>>(); @ContentChildren(DataTable2ColumnComponent) columns: QueryList<DataTable2ColumnComponent<T>>; @ContentChildren(DataTableCustomFieldColumnComponent) customFieldColumns: QueryList<DataTableCustomFieldColumnComponent<T>>; @ContentChild(DataTable2SearchComponent) searchComponent: DataTable2SearchComponent; @ContentChild(BulkActionMenuComponent) bulkActionMenuComponent: BulkActionMenuComponent; @ContentChild('vdrDt2CustomSearch') customSearchTemplate: TemplateRef<any>; @ContentChildren(TemplateRef) templateRefs: QueryList<TemplateRef<any>>; injector = inject(Injector); route = inject(ActivatedRoute); filterPresetService = inject(FilterPresetService); dataTableCustomComponentService = inject(DataTableCustomComponentService); dataTableConfigService = inject(DataTableConfigService); protected customComponents = new Map<string, { config: DataTableComponentConfig; injector: Injector }>(); rowTemplate: TemplateRef<any>; currentStart: number; currentEnd: number; disableSelect = false; showSearchFilterRow = false; protected uiLanguage$: Observable<LanguageCode>; protected destroy$ = new Subject<void>(); constructor(changeDetectorRef: ChangeDetectorRef, 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) => ;}