Skip to main content

DataTable2Component

DataTable2Component​

@vendure/admin-uidata-table2.component.ts

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

Example

<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>
Signature
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;
    @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) => ;
}
  • Implements: AfterContentInit, OnChanges, OnDestroy

id​

property
DataTableLocationId

items​

property
T[]

itemsPerPage​

property
number

currentPage​

property
number

totalItems​

property
number

emptyStateLabel​

property
string

filters​

property
DataTableFilterCollection

activeIndex​

property

pageChange​

property

itemsPerPageChange​

property

visibleColumnsChange​

property

columns​

property
QueryList<DataTable2ColumnComponent<T>>

customFieldColumns​

property
QueryList<DataTableCustomFieldColumnComponent<T>>

searchComponent​

property
DataTable2SearchComponent

bulkActionMenuComponent​

property
BulkActionMenuComponent

customSearchTemplate​

property
TemplateRef<any>

templateRefs​

property
QueryList<TemplateRef<any>>

injector​

property

route​

property

filterPresetService​

property

dataTableCustomComponentService​

property

dataTableConfigService​

property

customComponents​

property

rowTemplate​

property
TemplateRef<any>

currentStart​

property
number

currentEnd​

property
number

disableSelect​

property

showSearchFilterRow​

property

uiLanguage$​

property
Observable<LanguageCode>

destroy$​

property

constructor​

method
(changeDetectorRef: ChangeDetectorRef, dataService: DataService) => DataTable2Component

selectionManager​

property

allColumns​

property

visibleSortedColumns​

property

sortedColumns​

property

ngOnChanges​

method
(changes: SimpleChanges) =>

ngOnDestroy​

method
() =>

ngAfterContentInit​

method
() => void

onColumnReorder​

method
(event: { column: DataTable2ColumnComponent<any>; newIndex: number }) =>

onColumnsReset​

method
() =>

toggleSearchFilterRow​

method
() =>

trackByFn​

method
(index: number, item: any) =>

onToggleAllClick​

method
() =>

onRowClick​

method
(item: T, event: MouseEvent) =>