import {DataList} from 'primeng/primeng';
DataList requires a collection of items as its value and a template content to display where each item can be accessed using the implicit variable.
Throughout the samples, a car interface having vin, brand, year and color properties are used to define an object to be displayed by the datalist. Cars are loaded by a CarService that connects to a server to fetch the cars with a Promise.
export interface Car {
vin;
year;
brand;
color;
}
import {Injectable} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Car} from '../domain/car';
@Injectable()
export class CarService {
constructor(private http: Http) {}
getCarsLarge() {
return this.http.get('/showcase/resources/data/cars-large.json')
.toPromise()
.then(res => <Car[]> res.json().data)
.then(data => { return data; });
}
}
Here is a sample DataList that displays a list of cars.
export class DataListDemo implements OnInit {
cars: Car[];
constructor(private carService: CarService) { }
ngOnInit() {
this.carService.getCarsLarge().then(cars => this.cars = cars);
}
}
<p-dataList [value]="cars">
<template let-car>
Car content
</template>
</p-dataList>
Header and Footer are the two sections aka facets that are capable of displaying custom content.
import {Header} from 'primeng/primeng';
import {Footer} from 'primeng/primeng';
<p-dataList [value]="cars">
<header>List of Cars</header>
<footer>Choose from the list.</footer>
<template let-car>
Car content
</template>
</p-dataList>
Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number of page links to display.
<p-dataList [value]="cars" [paginator]="true" [rows]="10">
<template let-car>
Car content
</template>
</p-dataList>
Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking onLazyLoad callback everytime paging happens. To implement lazy loading, enable lazy attribute and provide a method callback using onLazyLoad that actually loads the data from a remote datasource. onLazyLoad gets an event object that contains information about what to load. It is also important to assign the logical number of rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI assuming there are actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist.
<p-dataList [value]="cars" [paginator]="true" [rows]="9" [lazy]="true" (onLazyLoad)="loadData($event)" [totalRecords]="totalRecords">
<template let-car>
Car content
</template>
</p-dataList>
loadData(event) {
//event.first = First row offset
//event.rows = Number of rows per page
}
Name | Type | Default | Description |
---|---|---|---|
value | array | null | An array of objects to display. |
rows | number | null | Number of rows to display per page. |
paginator | boolean | false | When specified as true, enables the pagination. |
totalRecords | number | null | Number of total records, defaults to length of value when not defined. |
pageLinks | number | null | Number of page links to display in paginator. |
rowsPerPageOptions | array | null | Array of integer values to display inside rows per page dropdown of paginator |
lazy | boolean | false | Defines if data is loaded and interacted with in lazy manner. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
paginatorPosition | string | bottom | Position of the paginator, options are "top","bottom" or "both". |
Name | Parameters | Description |
---|---|---|
onLazyLoad | event.first = First row offset event.rows = Number of rows per page |
Callback to invoke when paging, sorting or filtering happens in lazy mode. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-datalist | Container element. |
ui-datalist-header | Header section. |
ui-datalist-footer | Footer section. |
ui-datalist-content | Wrapper of item container. |
ui-datalist-data | Item container element. |
Native component that requires css of PrimeUI DataList.
<p-dataList [value]="cars" [paginator]="true" [rows]="5">
<header>
List of Cars
</header>
<template let-car>
<div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px;border-bottom:1px solid #D5D5D5;">
<div class="ui-grid-row">
<div class="ui-grid-col-3" style="text-align:center"><i class="fa fa-search" (click)="selectCar(car)" style="cursor:pointer;float:left;margin-top:40px"></i><img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"></div>
<div class="ui-grid-col-9">
<div class="ui-grid ui-grid-responsive ui-fluid">
<div class="ui-grid-row">
<div class="ui-grid-col-2">Vin: </div>
<div class="ui-grid-col-10">{{car.vin}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">Year: </div>
<div class="ui-grid-col-10">{{car.year}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">Brand: </div>
<div class="ui-grid-col-10">{{car.brand}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">Color: </div>
<div class="ui-grid-col-10">{{car.color}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
</p-dataList>
<p-dialog header="Car Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true" width="225" (onAfterHide)="onDialogHide()">
<div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="selectedCar" style="font-size:16px;text-align:center;padding:20px">
<div class="ui-grid-row">
<div class="ui-grid-col-12" style="text-align:center"><img src="showcase/resources/demo/images/car/{{selectedCar.brand}}-big.gif"></div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">Vin: </div>
<div class="ui-grid-col-8">{{selectedCar.vin}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">Year: </div>
<div class="ui-grid-col-8">{{selectedCar.year}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">Brand: </div>
<div class="ui-grid-col-8">{{selectedCar.brand}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">Color: </div>
<div class="ui-grid-col-8">{{selectedCar.color}}</div>
</div>
</div>
</p-dialog>
export class DataListDemo implements OnInit {
cars: Car[];
selectedCar: Car;
displayDialog: boolean;
constructor(private carService: CarService) { }
ngOnInit() {
this.carService.getCarsLarge().then(cars => this.cars = cars);
}
selectCar(car: Car) {
this.selectedCar = car;
this.displayDialog = true;
}
onDialogHide() {
this.selectedCar = null;
}
}