Angular Table

Angular Table displays data in tabular format.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

CDK

VirtualScrolling depends on @angular/cdk's ScrollingModule so begin with installing CDK if not already installed.

npm install @angular/cdk --save

Import

import {TableModule} from 'primeng/table';

Getting Started

Table requires a value as an array of objects and templates for the presentation. Throughout the samples, a car interface having vin, brand, year and color properties is used to define an object to be displayed by the table. Cars are loaded by a CarService that connects to a server to fetch the data.

export interface Car {
    vin;
    year;
    brand;
    color;
}

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { Car } from '../domain/car';

@Injectable()
export class CarService {

    constructor(private http: HttpClient) {}

    getCarsSmall() {
        return this.http.get('/showcase/resources/data/cars-small.json')
                    .toPromise()
                    .then(res => <Car[]> res.data)
                    .then(data => { return data; });
    }
}

Following sample has a table of 4 columns and retrieves the data from a service on ngOnInit.

export class TableDemo implements OnInit {

    cars: Car[];

    constructor(private carService: CarService) { }

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

List of cars are bound to the value property whereas header and body templates are used to define the content of these sections.

<p-table [value]="cars">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Brand</th>
            <th>Color</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td>{{car.vin}}</td>
            <td>{{car.year}}</td>
            <td>{{car.brand}}</td>
            <td>{{car.color}}</td>
        </tr>
    </ng-template>
</p-table>

Dynamic Columns

Instead of configuring columns one by one, a simple ngFor can be used to implement dynamic columns. cols property below is an array of objects that represent a column, only property that table component uses is field, rest of the properties like header depend on your choice.

export class DynamicColumnsDemo implements OnInit {

    cars: Car[];

    cols: any[];

    constructor(private carService: CarService) { }

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

        this.cols = [
            { field: 'vin', header: 'Vin' },
            { field: 'year', header: 'Year' },
            { field: 'brand', header: 'Brand' },
            { field: 'color', header: 'Color' }
        ];
    }
}

There are two ways to render dynamic columns, since cols property is in the scope of component you can just simply bind it to ngFor directive to generate the structure.

<p-table [value]="cars">
    <ng-template pTemplate="header">
        <tr>
            <th *ngFor="let col of cols">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td *ngFor="let col of cols">
                    {{car[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

Other alternative is binding the cols array to the columns property and then defining a template variable to access it within your templates. There are 3 cases where this is required which are csv export, reorderable columns and global filtering without the globalFilterFields property.

<p-table [columns]="cols" [value]="cars">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                    {{car[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

Tip: Use ngSwitch to customize the column content per dynamic column.

Table Layout

For performance reasons, default table-layout is fixed meaning the cell widths do not depend on their content. If you require cells to scale based on their contents set autoLayout property to true. Note that Scrollable and/or Resizable tables do not support auto layout due to technical reasons.

Change Detection

Table may need to be aware of changes in its value in some cases such as reapplying sort. For the sake of performance, this is only done when the reference of the value changes meaning a setter is used instead of ngDoCheck/IterableDiffers which can reduce performance. So when you manipulate the value such as removing or adding an item, instead of using array methods such as push, splice create a new array reference using a spread operator or similar.

Sections

Table offers various templates to display additional information about the data such as a caption or summary.

<p-table [columns]="cols" [value]="cars">
    <ng-template pTemplate="caption">
        List of Cars
    </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
            {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="footer" let-columns>
        <tr>
            <td *ngFor="let col of columns">
            {{col.header}}
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="summary">
        There are {{cars?.length}} cars
    </ng-template>
</p-table>

Angular Table

Setup

CDK

Import

Getting Started

Dynamic Columns

Table Layout

Change Detection

Sections

Column Grouping

Row Grouping

Multi Field grouping

Paginator

Sorting

Filtering

Data Types

Separate Row and Filter Menu

Match modes

Custom Form Elements

Global Filtering

Custom Filters

Selection

ContextMenu

Cell Editing

Row Editing

Expandable Rows

Column Resize

Column Reordering

Rows Reordering

Data Export

Scrolling

Flex Scroll

Full Page Scroll

Horizontal Scroll

Frozen Rows and Columns

Virtual Scrolling

Lazy Loading

TableState

Responsive

EmptyMessage

Loading Status

Styling Certain Rows and Columns

Performance Tips

Theming

Resources