DataTableComponent
DataTableComponent
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
<vdr-data-table
[items]="items$ | async"
[itemsPerPage]="itemsPerPage$ | async"
[totalItems]="totalItems$ | async"
[currentPage]="currentPage$ | async"
(pageChange)="setPageNumber($event)"
(itemsPerPageChange)="setItemsPerPage($event)"
>
<!-- The header columns are defined first -->
<vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
<vdr-dt-column></vdr-dt-column>
<vdr-dt-column></vdr-dt-column>
<!-- Then we define how a row is rendered -->
<ng-template let-taxRate="item">
<td class="left align-middle">{{ taxRate.name }}</td>
<td class="left align-middle">{{ taxRate.category.name }}</td>
<td class="left align-middle">{{ taxRate.zone.name }}</td>
<td class="left align-middle">{{ taxRate.value }}%</td>
<td class="right align-middle">
<vdr-table-row-action
iconShape="edit"
[label]="'common.edit' | translate"
[linkTo]="['./', taxRate.id]"
></vdr-table-row-action>
</td>
<td class="right align-middle">
<vdr-dropdown>
<button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
{{ 'common.actions' | translate }}
<clr-icon shape="caret down"></clr-icon>
</button>
<vdr-dropdown-menu vdrPosition="bottom-right">
<button
type="button"
class="delete-button"
(click)="deleteTaxRate(taxRate)"
[disabled]="!(['DeleteSettings', 'DeleteTaxRate'] | hasPermission)"
vdrDropdownItem
>
<clr-icon shape="trash" class="is-danger"></clr-icon>
{{ 'common.delete' | translate }}
</button>
</vdr-dropdown-menu>
</vdr-dropdown>
</td>
</ng-template>
</vdr-data-table>
Signature
class DataTableComponent<T> 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<T>;
@Output() @Output() pageChange = new EventEmitter<number>();
@Output() @Output() itemsPerPageChange = new EventEmitter<number>();
@Input() @Input() allSelected: boolean;
@Input() @Input() isRowSelectedFn: (item: T) => boolean;
@Output() @Output() allSelectChange = new EventEmitter<void>();
@Output() @Output() rowSelectChange = new EventEmitter<{ event: MouseEvent; item: T }>();
@ContentChildren(DataTableColumnComponent) @ContentChildren(DataTableColumnComponent) columns: QueryList<DataTableColumnComponent>;
@ContentChildren(TemplateRef) @ContentChildren(TemplateRef) templateRefs: QueryList<TemplateRef<any>>;
rowTemplate: TemplateRef<any>;
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
property
type:
T[]
itemsPerPage
property
type:
number
currentPage
property
type:
number
totalItems
property
type:
number
emptyStateLabel
property
type:
string
selectionManager
property
type:
SelectionManager<T>
pageChange
property
type:
itemsPerPageChange
property
type:
allSelected
property
type:
boolean
isRowSelectedFn
property
type:
(item: T) => boolean
allSelectChange
property
type:
rowSelectChange
property
type:
columns
property
type:
QueryList<DataTableColumnComponent>
templateRefs
property
type:
QueryList<TemplateRef<any>>
rowTemplate
property
type:
TemplateRef<any>
currentStart
property
type:
number
currentEnd
property
type:
number
disableSelect
property
type:
constructor
method
type:
(changeDetectorRef: ChangeDetectorRef) => DataTableComponent
ngOnInit
method
type:
() =>
ngOnChanges
method
type:
(changes: SimpleChanges) =>
ngOnDestroy
method
type:
() =>
ngAfterContentInit
method
type:
() => void
trackByFn
method
type:
(index: number, item: any) =>
onToggleAllClick
method
type:
() =>
onRowClick
method
type:
(item: T, event: MouseEvent) =>