New: Headless Commerce with Remix! read more

DataTableComponent

DataTableComponent

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

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 {
  @Input() items: T[];
  @Input() itemsPerPage: number;
  @Input() currentPage: number;
  @Input() totalItems: number;
  @Input() allSelected: boolean;
  @Input() isRowSelectedFn: (item: T) => boolean;
  @Input() emptyStateLabel: string;
  @Output() allSelectChange = new EventEmitter<void>();
  @Output() rowSelectChange = new EventEmitter<T>();
  @Output() pageChange = new EventEmitter<number>();
  @Output() itemsPerPageChange = new EventEmitter<number>();
  @ContentChildren(DataTableColumnComponent) columns: QueryList<DataTableColumnComponent>;
  @ContentChildren(TemplateRef) templateRefs: QueryList<TemplateRef<any>>;
  rowTemplate: TemplateRef<any>;
  ngAfterContentInit() => void;
  trackByFn(index: number, item: any) => ;
}

Implements

  • AfterContentInit

Members

items

property
type:
T[]

itemsPerPage

property
type:
number

currentPage

property
type:
number

totalItems

property
type:
number

allSelected

property
type:
boolean

isRowSelectedFn

property
type:
(item: T) => boolean

emptyStateLabel

property
type:
string

allSelectChange

property
type:

rowSelectChange

property
type:

pageChange

property
type:

itemsPerPageChange

property
type:

columns

property
type:
QueryList<DataTableColumnComponent>

templateRefs

property
type:
QueryList<TemplateRef<any>>

rowTemplate

property
type:
TemplateRef<any>

ngAfterContentInit

method
type:
() => void

trackByFn

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