Data

DataView

A collection in your own list and grid templates with a layout switch, pagination, sorting, search, server data, a loading overlay and an empty state.

Features10

API

Theming

Basic

Items of a collection rendered by your own list template.

Oak deskFurniture€420
Desk lampLighting€65
Office chairFurniture€280
Wall shelfStorage€90
Wool rugTextiles€150
Floor lampLighting€120
Linen curtainsTextiles€75
BookcaseStorage€310

16 lines

<tx-data-view ariaLabel="Products" [value]="products">  <ng-template txDataViewList let-items>    <ul class="list">      @for (product of items; track product.id) {        <li class="row">          <span class="thumb" aria-hidden="true"><tx-icon name="box" /></span>          <span class="info">            <strong>{{ product.name }}</strong>            <span class="muted">{{ product.category }}</span>          </span>          <tx-amount class="price" currency="EUR" [amount]="product.price" />        </li>      }    </ul>  </ng-template></tx-data-view>

Layout

<tx-data-view-layout> in the header switches between the list and the grid template; [(layout)] keeps the choice. The content fades in on every switch.

Oak deskFurniture€420
Desk lampLighting€65
Office chairFurniture€280
Wall shelfStorage€90
Wool rugTextiles€150
Floor lampLighting€120
Linen curtainsTextiles€75
BookcaseStorage€310

34 lines

<tx-data-view ariaLabel="Products" [value]="products" [(layout)]="layout">  <ng-template txDataViewHeader>    <div class="bar">      <strong>{{ products.length }} products</strong>      <tx-data-view-layout [(layout)]="layout" />    </div>  </ng-template>  <ng-template txDataViewList let-items>    <ul class="list">      @for (product of items; track product.id) {        <li class="row">          <span class="thumb" aria-hidden="true"><tx-icon name="box" /></span>          <span class="info">            <strong>{{ product.name }}</strong>            <span class="muted">{{ product.category }}</span>          </span>          <tx-amount class="price" currency="EUR" [amount]="product.price" />        </li>      }    </ul>  </ng-template>  <ng-template txDataViewGrid let-items>    <ul class="cards">      @for (product of items; track product.id) {        <li class="card">          <span class="thumb" aria-hidden="true"><tx-icon name="box" /></span>          <strong>{{ product.name }}</strong>          <span class="muted">{{ product.category }}</span>          <tx-amount class="price" currency="EUR" [amount]="product.price" />        </li>      }    </ul>  </ng-template></tx-data-view>

Pagination

paginator pages the items; paginatorPosition puts it at the top, bottom or both. All paginator options work.

Oak deskFurniture420 €
Desk lampLighting65 €
Office chairFurniture280 €

24 lines

<tx-data-view  ariaLabel="Products"  paginator  paginatorPosition="both"  showCurrentPageReport  [rows]="3"  [rowsPerPageOptions]="[3, 6]"  [value]="products">  <ng-template txDataViewList let-items>    <ul class="list">      @for (product of items; track product.id) {        <li class="row">          <span class="thumb" aria-hidden="true"><tx-icon name="box" /></span>          <span class="info">            <strong>{{ product.name }}</strong>            <span class="muted">{{ product.category }}</span>          </span>          <span class="price">{{ product.price }} €</span>        </li>      }    </ul>  </ng-template></tx-data-view>

Sort

[(sortField)] and [(sortOrder)] sort the items; put a select into the header to choose.

Desk lampLighting65 €
Linen curtainsTextiles75 €
Wall shelfStorage90 €
Floor lampLighting120 €
Wool rugTextiles150 €
Office chairFurniture280 €
BookcaseStorage310 €
Oak deskFurniture420 €

24 lines

<tx-data-view  ariaLabel="Products"  [value]="products"  [sortField]="sort().field"  [sortOrder]="sort().order">  <ng-template txDataViewHeader>    <tx-select ariaLabel="Sort by" [options]="sorts" [(ngModel)]="sortKey" />  </ng-template>  <ng-template txDataViewList let-items>    <ul class="list">      @for (product of items; track product.id) {        <li class="row">          <span class="thumb" aria-hidden="true"><tx-icon name="box" /></span>          <span class="info">            <strong>{{ product.name }}</strong>            <span class="muted">{{ product.category }}</span>          </span>          <span class="price">{{ product.price }} €</span>        </li>      }    </ul>  </ng-template></tx-data-view>

Filter

filterBy names the searched fields and [(filterValue)] holds the text; with no match the empty state shows.

Oak deskFurniture420 €
Desk lampLighting65 €
Office chairFurniture280 €
Wall shelfStorage90 €
Wool rugTextiles150 €
Floor lampLighting120 €
Linen curtainsTextiles75 €
BookcaseStorage310 €

34 lines

<tx-data-view  ariaLabel="Products"  filterBy="name,category"  [value]="products"  [(filterValue)]="query">  <ng-template txDataViewHeader>    <tx-icon-field>      <tx-input-icon icon="search" />      <input        txInput        type="search"        aria-label="Search products"        placeholder="Search products"        [(ngModel)]="query"      />      <tx-input-clear />    </tx-icon-field>  </ng-template>  <ng-template txDataViewList let-items>    <ul class="list">      @for (product of items; track product.id) {        <li class="row">          <span class="thumb" aria-hidden="true"><tx-icon name="box" /></span>          <span class="info">            <strong>{{ product.name }}</strong>            <span class="muted">{{ product.category }}</span>          </span>          <span class="price">{{ product.price }} €</span>        </li>      }    </ul>  </ng-template></tx-data-view>

Server

lazy hands pages, sort and search to the server through lazyLoad; totalRecords sizes the paginator and loading blurs the items meanwhile.

No results found

25 lines

<tx-data-view  ariaLabel="Products from the server"  lazy  paginator  [rows]="3"  [value]="page()"  [totalRecords]="total"  [loading]="loading()"  (lazyLoad)="load($event)">  <ng-template txDataViewList let-items>    <ul class="list">      @for (product of items; track product.id) {        <li class="row">          <span class="thumb" aria-hidden="true"><tx-icon name="box" /></span>          <span class="info">            <strong>{{ product.name }}</strong>            <span class="muted">{{ product.category }}</span>          </span>          <span class="price">{{ product.price }} €</span>        </li>      }    </ul>  </ng-template></tx-data-view>

Header footer

txDataViewHeader and txDataViewFooter add content above and below the items.

Oak deskFurniture420 €
Desk lampLighting65 €
Office chairFurniture280 €
Wall shelfStorage90 €

18 lines

<tx-data-view ariaLabel="Products" [value]="products">  <ng-template txDataViewHeader><strong>Workspace</strong></ng-template>  <ng-template txDataViewList let-items>    <ul class="list">      @for (product of items; track product.id) {        <li class="row">          <span class="thumb" aria-hidden="true"><tx-icon name="box" /></span>          <span class="info">            <strong>{{ product.name }}</strong>            <span class="muted">{{ product.category }}</span>          </span>          <span class="price">{{ product.price }} €</span>        </li>      }    </ul>  </ng-template>  <ng-template txDataViewFooter><span class="muted">Prices include VAT</span></ng-template></tx-data-view>

Empty

emptyMessage or txDataViewEmpty replace the default text when there is nothing to show.

No saved products yet

22 lines

<tx-data-view ariaLabel="Saved products" [value]="[]">  <ng-template txDataViewEmpty>    <div class="empty">      <tx-icon name="inbox" />      <span>No saved products yet</span>    </div>  </ng-template>  <ng-template txDataViewList let-items>    <ul class="list">      @for (product of items; track product.id) {        <li class="row">          <span class="thumb" aria-hidden="true"><tx-icon name="box" /></span>          <span class="info">            <strong>{{ product.name }}</strong>            <span class="muted">{{ product.category }}</span>          </span>          <span class="price">{{ product.price }} €</span>        </li>      }    </ul>  </ng-template></tx-data-view>

Design tokens

dt changes the tokens of one data view — a tinted header and a roomier footer.

Desk lampLighting65 €
Floor lampLighting120 €

17 lines

<tx-data-view ariaLabel="Products" [value]="products" [dt]="tokens">  <ng-template txDataViewHeader><strong>Lighting</strong></ng-template>  <ng-template txDataViewList let-items>    <ul class="list">      @for (product of items; track product.id) {        <li class="row">          <span class="thumb" aria-hidden="true"><tx-icon name="box" /></span>          <span class="info">            <strong>{{ product.name }}</strong>            <span class="muted">{{ product.category }}</span>          </span>          <span class="price">{{ product.price }} €</span>        </li>      }    </ul>  </ng-template></tx-data-view>

Pass through

pt adds classes and styles to the parts of the data view.

Oak deskFurniture420 €
Desk lampLighting65 €
Office chairFurniture280 €

16 lines

<tx-data-view ariaLabel="Products" paginator [rows]="3" [value]="products" [pt]="pt">  <ng-template txDataViewList let-items>    <ul class="list">      @for (product of items; track product.id) {        <li class="row">          <span class="thumb" aria-hidden="true"><tx-icon name="box" /></span>          <span class="info">            <strong>{{ product.name }}</strong>            <span class="muted">{{ product.category }}</span>          </span>          <span class="price">{{ product.price }} €</span>        </li>      }    </ul>  </ng-template></tx-data-view>