data-table-component.md 7.4 KB
title: "DataTableComponent" weight: 10 date: 2023-06-13T12:31:12.947Z showtoc: true
generated: true
DataTableComponent
# DataTableComponent
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/components/data-table/data-table.component.ts" sourceLine="86" packageName="@vendure/admin-ui">}}
A table for displaying PaginatedList results. It is designed to be used inside components which
extend the BaseListComponent class.
**Deprecated** This component is deprecated. Use the DataTable2Component instead.
*Example*
```HTML
{{ 'common.name' | translate }}
{{ taxRate.name }}
{{ taxRate.category.name }}
{{ taxRate.zone.name }}
{{ taxRate.value }}%
{{ 'common.actions' | translate }}
{{ 'common.delete' | translate }}
```
## Signature
```TypeScript
class DataTableComponent implements AfterContentInit, OnChanges, OnInit, OnDestroy {
@Input() @Input() items: T[];
@Input() @Input() itemsPerPage: number;
@Input() @Input() currentPage: number;
@Input() @Input() totalItems: number;
@Input() @Input() emptyStateLabel: string;
@Input() @Input() selectionManager?: SelectionManager;
@Output() @Output() pageChange = new EventEmitter();
@Output() @Output() itemsPerPageChange = new EventEmitter();
@Input() @Input() allSelected: boolean;
@Input() @Input() isRowSelectedFn: (item: T) => boolean;
@Output() @Output() allSelectChange = new EventEmitter();
@Output() @Output() rowSelectChange = new EventEmitter<{ event: MouseEvent; item: T }>();
@ContentChildren(DataTableColumnComponent) @ContentChildren(DataTableColumnComponent) columns: QueryList;
@ContentChildren(TemplateRef) @ContentChildren(TemplateRef) templateRefs: QueryList>;
rowTemplate: TemplateRef;
currentStart: number;
currentEnd: number;
disableSelect = false;
constructor(changeDetectorRef: ChangeDetectorRef)
ngOnInit() => ;
ngOnChanges(changes: SimpleChanges) => ;
ngOnDestroy() => ;
ngAfterContentInit() => void;
trackByFn(index: number, item: any) => ;
onToggleAllClick() => ;
onRowClick(item: T, event: MouseEvent) => ;
}
```
## Implements
* AfterContentInit
* OnChanges
* OnInit
* OnDestroy
## Members
### 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 >}}
### selectionManager
{{< member-info kind="property" type="SelectionManager<T>" >}}
{{< member-description >}}{{< /member-description >}}
### pageChange
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### itemsPerPageChange
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### allSelected
{{< member-info kind="property" type="boolean" >}}
{{< member-description >}}{{< /member-description >}}
### isRowSelectedFn
{{< member-info kind="property" type="(item: T) => boolean" >}}
{{< member-description >}}{{< /member-description >}}
### allSelectChange
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### rowSelectChange
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### columns
{{< member-info kind="property" type="QueryList<DataTableColumnComponent>" >}}
{{< 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 >}}
### constructor
{{< member-info kind="method" type="(changeDetectorRef: ChangeDetectorRef) => DataTableComponent" >}}
{{< member-description >}}{{< /member-description >}}
### ngOnInit
{{< member-info kind="method" 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 >}}
### 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 >}}