DataView
NewYour data, presented as a list or a responsive grid.
Overview
Browse the collection, switch layouts or filter and sort the products.
- Home
Ceramic mug
Out of stock$24.00 - Workspace
Desk lamp
In stock$59.00 - Workspace
Desk organizer
Out of stock$45.00 - Travel
Everyday backpack
In stock$89.00 - Workspace
Pocket notebook
In stock$18.00 - Audio
Studio headphones
In stock$129.00
Switch layout or change page to see events. No product selected.
Item templates
Import AvDataView and AvDataViewItem from avero-ui. Bind the collection to avDataViewItem to infer the item type. Each template receives the item, its absolute index and the current layout.
HTMLTyped item template
<av-data-view [value]="products" paginator [rows]="6"
[(layout)]="layout" (onPage)="pageChanged($event)">
<ng-template [avDataViewItem]="products" let-product let-layout="layout">
<article [class.card]="layout === 'grid'">
<h3>{{ product.name }}</h3>
<p>{{ product.price }}</p>
</article>
</ng-template>
</av-data-view>Usage and API
Use value for your collection, layout for list or grid, paginator to enable paging, and rows for page size. The default layout is list and paging is off. Optional inputs include label, loading, emptyMessage, showLayoutOptions and trackBy.
Events. layoutChange emits the selected layout. onPage emits { page, rows, first } with zero-based indexes after user navigation. New data or a changed page size resets pagination to the first page without emitting a user event.
Data ownership. Filtering and sorting happen in the application, as shown above. Pass a new array when data changes. This version paginates data already loaded in memory; server-side loading and virtual scrolling are not included.
Customization. Add content marked avDataViewHeader for a custom header. Style your item template freely and adjust --av-data-view-background, --av-data-view-header, --av-data-view-border, --av-data-view-radius, --av-data-view-accent and --av-data-view-gap.