Import

import {DataGridModule} from 'primeng/datagrid';

Getting Started

DataGrid requires a collection of items as its value and a ng-template to display each item. ng-template should contain a div element as a wrapper with Grid CSS style class of your choice to define the grid layout.

Throughout the samples, a car interface having vin, brand, year and color properties are used to define an object to be displayed by the datagrid. 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 DataGrid that displays a list of cars where each row contains 3 cars.

export class DataGridDemo implements OnInit {

    cars: Car[];

    constructor(private carService: CarService) { }

    ngOnInit() {
        this.carService.getCarsLarge().then(cars => this.cars = cars);
    }
}

<p-dataGrid [value]="cars">
    <ng-template let-car pTemplate="item">
        <div class="ui-g-12 ui-md-3">
            Car content
        </div>
    </ng-template>
</p-dataGrid>

Index of the row is available at the ng-template.

<p-dataGrid [value]="cars">
    <ng-template let-car let-i="index" pTemplate="item">
        <div class="ui-g-12 ui-md-3">
            Car content for {{i}}
        </div>
    </ng-template>
</p-dataGrid>

Change Detection

DataGrid either uses setter based checking or ngDoCheck to realize if the underlying data has changed to update the UI. This is configured using the immutable property, when enabled (default) setter based detection is utilized so your data changes such as adding or removing a record should always create a new array reference instead of manipulating an existing array as Angular does not trigger setters if the reference does not change. For example, use slice instead of splice when removing an item or use spread operator instead of push method when adding an item. On the other hand, setting immutable property to false removes this restriction by using ngDoCheck with IterableDiffers to listen changes without the need to create a new reference of data. Setter based method is faster however both methods can be used depending on your preference.

Facets

Header and Footer are the two sections aka facets that are capable of displaying custom content.

<p-dataGrid [value]="cars">
    <p-header>List of Cars</p-header>
    <p-footer>Choose from the list.</p-footer>
    <ng-template let-car pTemplate="item">
        <div class="ui-g-12 ui-md-3">
            Car content
        </div>
    </ng-template>
</p-dataGrid>

Paginator

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-dataGrid [value]="cars" [paginator]="true" [rows]="9">
    <ng-template let-car pTemplate="item">
        <div class="ui-g-12 ui-md-3">
            Car content
        </div>
    </ng-template>
</p-dataGrid>

Lazy Loading

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-dataGrid [value]="cars" [paginator]="true" [rows]="9" [lazy]="true" (onLazyLoad)="loadData($event)" [totalRecords]="totalRecords">
    <ng-template let-car pTemplate="item">
        <div class="ui-g-12 ui-md-3">
            Car content
        </div>
    </ng-template>
</p-dataGrid>

loadData(event) {
    //event.first = First row offset
    //event.rows = Number of rows per page
}

Responsive

DataGrid is responsive by default, when the screen gets smaller than a certain value, items are displayed as stacked.

Properties

Events

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Dependencies

None.

<p-dataGrid [value]="cars" [paginator]="true" [rows]="20">
    <p-header>
        List of Cars
    </p-header>
    <ng-template let-car pTemplate="item">
        <div style="padding:3px" class="ui-g-12 ui-md-3">
            <p-panel [header]="car.vin" [style]="{'text-align':'center'}">
                <img src="assets/showcase/images/demo/car/{{car.brand}}.png" width="60">
                <div class="car-detail">{{car.year}} - {{car.color}}</div>
                <hr class="ui-widget-content" style="border-top:0">
                <i class="fa fa-search" (click)="selectCar(car)" style="cursor:pointer"></i>
            </p-panel>
        </div>
    </ng-template>
</p-dataGrid>

<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-grid-pad" *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="assets/showcase/images/demo/car/{{selectedCar.brand}}.png"></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 DataGridDemo 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;
    }
}