Version:

Install ​

shell
npm i @mate-angular/grid

Import ​

typescript
import { MateGridComponent, MateGridColumnComponent, MateGridSortColumnComponent } from '@mate-angular/grid';

Variants ​

Default ​

html
<mate-grid-ng [items]="items">
  <mate-grid-column-ng header="Name" path="name" [autoWidth]="true"></mate-grid-column-ng>
  <mate-grid-column-ng header="Email" path="email" [flexGrow]="2"></mate-grid-column-ng>
</mate-grid-ng>

With sorting ​

html
<mate-grid-ng [items]="items">
  <mate-grid-sort-column-ng header="Name" path="name" [autoWidth]="true"></mate-grid-sort-column-ng>
  <mate-grid-sort-column-ng header="Email" path="email" [flexGrow]="2"></mate-grid-sort-column-ng>
</mate-grid-ng>

With multi-select ​

html
<mate-grid-ng [items]="items" [multiSelect]="true" (selectedItemsChange)="onSelectionChange($event)">
  <mate-grid-column-ng header="Name" path="name" [autoWidth]="true"></mate-grid-column-ng>
</mate-grid-ng>

With custom cell renderer ​

html
<mate-grid-ng [items]="items">
  <mate-grid-column-ng header="Status" [autoWidth]="true">
    <ng-template let-item>
      <span theme="badge success">{{ item.status }}</span>
    </ng-template>
  </mate-grid-column-ng>
  <mate-grid-column-ng header="Actions" width="60px" [flexGrow]="0" textAlign="center">
    <ng-template let-item>
      <vaadin-button theme="icon tertiary" (click)="onEdit(item)">
        <span theme="icon">edit</span>
      </vaadin-button>
    </ng-template>
  </mate-grid-column-ng>
</mate-grid-ng>