Table

Overview

Click a column heading to sort. Search filters the entire collection.

Sort a column, change page or open a product.

Server pagination

This example simulates an API with an 800 ms delay. Each response contains only three records. Change the page to see the loading state.

Loading page 1…

<av-table [value]="records()" [columns]="columns" lazy paginator
  [rows]="3" [totalRecords]="totalRecords()" [loading]="isLoading()"
  (onPageChange)="loadPage($event)" />

async loadPage(event: AvTablePageEvent): Promise<void> {
  this.isLoading.set(true);
  this.error.set('');
  try {
    const response = await fetch(
      '/api/products?offset=' + event.first + '&limit=' + event.rows
    );
    if (!response.ok) throw new Error('Request failed');
    const result = await response.json();
    this.records.set(result.items);
    this.totalRecords.set(result.total);
  } catch {
    this.records.set([]);
    this.error.set('Could not load products. Please retry.');
  } finally {
    this.isLoading.set(false);
  }
}

Call loadPage once when the parent initializes. onPageChange fires on user navigation and includes zero-based page, rows and first. Pass the API total in totalRecords and only the current page in value. Set loading before the request and clear it on success or error. Render your error message with a retry action in the parent.

In lazy mode the table does not slice or sort returned records. Handle onSort on the server and request the first page when sorting changes. Use pageIndex to reset the page after an external filter change. Changing rows resets the page; the parent must load that page. Replacing value preserves the current page.

Cell templates

Define columns with a field and header. Set sortable to enable sorting. Without a template, cells display the field value. Import AvTable and AvTableCell in your component.

import { AvTable, AvTableCell, AvTableColumn } from 'avero-ui';

columns: AvTableColumn<Product>[] = [
  { field: 'name', header: 'Product', sortable: true },
  { field: 'price', header: 'Price', sortable: true, align: 'right' }
];

<av-table [value]="products" [columns]="columns" paginator [rows]="5"
  label="Products" (onSort)="sortChanged($event)" (onPage)="pageChanged($event)">
  <ng-template [avTableCell]="products" let-product let-column="column" let-value="value">
    @if (column.field === 'price') {
      {{ product.price | currency: 'USD' }}
    } @else {
      {{ value }}
    }
  </ng-template>
</av-table>

The template receives the row, column, value and absolute index within the sorted collection. Bind avTableCell to your collection for type inference.

Usage and API

Required: columns. Data: value, trackBy. Appearance: label, avSize, striped, gridlines. States: loading, emptyMessage. Pagination: paginator (off by default), rows (10 by default).