# 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>