Cell Templates

To apply custom template to the cell use ng-template along with qGridColumnHead, qGridColumnBody, qGridColumnFoot, qGridColumnEdit directives.

<q-grid>
   <ng-template qGridColumnBody="birthday" let-$cell>
      <em>{{$cell.value}}</em>
   </ng-template>
</q-grid>
How to change column header template?

Default header template contains sort and filter components that could be used in custom templates also.

<q-grid>
   <ng-template qGridColumnHead="age" let-$cell>

      <q-grid-column-sort [column]="$cell.column" class="q-grid-sort">
         {{$cell.column.title}}
      </q-grid-column-sort>

      <q-grid-column-filter-trigger [column]="$cell.column" class="q-grid-column-filter-trigger">
      </q-grid-column-filter-trigger>

   </ng-template>
</q-grid>
How to change cell editor template?

Edit templates are in game when q-grid enters to the edit mode.

<q-grid>
   <ng-template qGridColumnEdit="age" let-$cell let-$view="$view">
      <input type="number"
             q-grid-focus
             [(ngModel)]="$view.edit.cell.value"
             (blur)="$view.edit.cell.exit.execute($cell)" />
   </ng-template>
</q-grid>
How to change aggregation template in the column footer?

Use let-$cell to have access to aggregated value, it will work when aggregation property is setup for the column.

<q-grid [rows]="rows$ | async">
   <ng-template qGridColumnFoot="phase" let-$cell>
      Count is {{$cell.value}}
   </ng-template>
</q-grid>
Suggested Links