data-table2component.md 9.9 KB
title: "DataTable2Component" weight: 10 date: 2023-06-13T12:31:12.968Z showtoc: true
generated: true
DataTable2Component
# DataTable2Component
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table2.component.ts" sourceLine="92" packageName="@vendure/admin-ui">}}
A table for displaying PaginatedList results. It is designed to be used inside components which
extend the BaseListComponent or TypedBaseListComponent class.
*Example*
```HTML
{{ review.id }}
{{ review.createdAt | localeDate : 'short' }}
{{ review.updatedAt | localeDate : 'short' }}
{{ review.name }}
```
## Signature
```TypeScript
class DataTable2Component 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();
@Output() @Output() itemsPerPageChange = new EventEmitter();
@ContentChildren(DataTable2ColumnComponent) @ContentChildren(DataTable2ColumnComponent) columns: QueryList>;
@ContentChildren(DataTableCustomFieldColumnComponent) @ContentChildren(DataTableCustomFieldColumnComponent)
customFieldColumns: QueryList>;
@ContentChild(DataTable2SearchComponent) @ContentChild(DataTable2SearchComponent) searchComponent: DataTable2SearchComponent;
@ContentChild(BulkActionMenuComponent) @ContentChild(BulkActionMenuComponent) bulkActionMenuComponent: BulkActionMenuComponent;
@ContentChild('vdrDt2CustomSearch') @ContentChild('vdrDt2CustomSearch') customSearchTemplate: TemplateRef;
@ContentChildren(TemplateRef) @ContentChildren(TemplateRef) templateRefs: QueryList>;
rowTemplate: TemplateRef;
currentStart: number;
currentEnd: number;
disableSelect = false;
showSearchFilterRow = false;
protected protected uiLanguage$: Observable;
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; newIndex: number }) => ;
onColumnsReset() => ;
toggleSearchFilterRow() => ;
trackByFn(index: number, item: any) => ;
onToggleAllClick() => ;
onRowClick(item: T, event: MouseEvent) => ;
protected getDataTableConfig() => DataTableConfig;
}
```
## Implements
* AfterContentInit
* OnChanges
* OnDestroy
## Members
### id
{{< member-info kind="property" type="string" >}}
{{< member-description >}}{{< /member-description >}}
### items
{{< member-info kind="property" type="T[]" >}}
{{< member-description >}}{{< /member-description >}}
### itemsPerPage
{{< member-info kind="property" type="number" >}}
{{< member-description >}}{{< /member-description >}}
### currentPage
{{< member-info kind="property" type="number" >}}
{{< member-description >}}{{< /member-description >}}
### totalItems
{{< member-info kind="property" type="number" >}}
{{< member-description >}}{{< /member-description >}}
### emptyStateLabel
{{< member-info kind="property" type="string" >}}
{{< member-description >}}{{< /member-description >}}
### filters
{{< member-info kind="property" type="DataTableFilterCollection" >}}
{{< member-description >}}{{< /member-description >}}
### activeIndex
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### pageChange
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### itemsPerPageChange
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### columns
{{< member-info kind="property" type="QueryList<DataTable2ColumnComponent<T>>" >}}
{{< member-description >}}{{< /member-description >}}
### customFieldColumns
{{< member-info kind="property" type="QueryList<DataTableCustomFieldColumnComponent<T>>" >}}
{{< member-description >}}{{< /member-description >}}
### searchComponent
{{< member-info kind="property" type="DataTable2SearchComponent" >}}
{{< member-description >}}{{< /member-description >}}
### bulkActionMenuComponent
{{< member-info kind="property" type="BulkActionMenuComponent" >}}
{{< member-description >}}{{< /member-description >}}
### customSearchTemplate
{{< member-info kind="property" type="TemplateRef<any>" >}}
{{< member-description >}}{{< /member-description >}}
### templateRefs
{{< member-info kind="property" type="QueryList<TemplateRef<any>>" >}}
{{< member-description >}}{{< /member-description >}}
### rowTemplate
{{< member-info kind="property" type="TemplateRef<any>" >}}
{{< member-description >}}{{< /member-description >}}
### currentStart
{{< member-info kind="property" type="number" >}}
{{< member-description >}}{{< /member-description >}}
### currentEnd
{{< member-info kind="property" type="number" >}}
{{< member-description >}}{{< /member-description >}}
### disableSelect
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### showSearchFilterRow
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### uiLanguage$
{{< member-info kind="property" type="Observable<LanguageCode>" >}}
{{< member-description >}}{{< /member-description >}}
### constructor
{{< member-info kind="method" type="(changeDetectorRef: ChangeDetectorRef, localStorageService: LocalStorageService, dataService: DataService) => DataTable2Component" >}}
{{< member-description >}}{{< /member-description >}}
### selectionManager
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### allColumns
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### visibleSortedColumns
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### sortedColumns
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### ngOnChanges
{{< member-info kind="method" type="(changes: SimpleChanges) => " >}}
{{< member-description >}}{{< /member-description >}}
### ngOnDestroy
{{< member-info kind="method" type="() => " >}}
{{< member-description >}}{{< /member-description >}}
### ngAfterContentInit
{{< member-info kind="method" type="() => void" >}}
{{< member-description >}}{{< /member-description >}}
### onColumnReorder
{{< member-info kind="method" type="(event: { column: DataTable2ColumnComponent<any>; newIndex: number }) => " >}}
{{< member-description >}}{{< /member-description >}}
### onColumnsReset
{{< member-info kind="method" type="() => " >}}
{{< member-description >}}{{< /member-description >}}
### toggleSearchFilterRow
{{< member-info kind="method" type="() => " >}}
{{< member-description >}}{{< /member-description >}}
### trackByFn
{{< member-info kind="method" type="(index: number, item: any) => " >}}
{{< member-description >}}{{< /member-description >}}
### onToggleAllClick
{{< member-info kind="method" type="() => " >}}
{{< member-description >}}{{< /member-description >}}
### onRowClick
{{< member-info kind="method" type="(item: T, event: MouseEvent) => " >}}
{{< member-description >}}{{< /member-description >}}
### getDataTableConfig
{{< member-info kind="method" type="() => DataTableConfig" >}}
{{< member-description >}}{{< /member-description >}}