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 {Injectable} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Car} from '../domain/car';

@Injectable()
export class CarService {

    constructor(private http: Http) {}

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

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


export class DataTableDemo 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.

Templates

Table is a template driven component with named templates such as header and body that we've used so far. Templates grant a great level of customization and flexibility where you have total control over the presentation while table handles the features such as paging, sorting, filtering and more. This speeds up development without sacrifing flexibility. Here is the full list of available templates.

Name	Parameters	Description
caption	-	Caption content of the table.
header	$implicit: Columns	Content of the thead element.
body	$implicit: Data of the row rowIndex: Index of the row columns: Columns collection expanded: Whethert the row is expanded	Content of the tbody element.
footer	$implicit: Columns	Content of the tfoot element.
summary	-	Summary section to display below the table.
colgroup	$implicit: Columns	ColGroup element of the table to customize columns.
rowexpansion	$implicit: Data of the row rowIndex: Index of the row columns: Columns collection	Content of an extended row.
frozenrows	$implicit: Data of the row rowIndex: Index of the row columns: Columns collection	Content of the tbody element to display frozen rows.
frozenheader	$implicit: Columns	Content of the thead element in frozen side.
frozenbody	$implicit: Data of the row rowIndex: Index of the row columns: Columns collection	Content of the tbody element in frozen side.
frozenfooter	$implicit: Columns	Content of the tfoot element in frozen side.
frozencolgroup	$implicit: Columns	ColGroup element of the table to customize frozen columns.
emptymessage	$implicit: Columns	Content to display when there is no value to display.
paginatorleft	state: $implicit state.page: Current page state.rows: Rows per page state.first: Index of the first records state.totalRecords: Number of total records	Content to display when there is no value to display.
paginatorright	state: $implicit state.page: Current page state.rows: Rows per page state.first: Index of the first records state.totalRecords: Number of total records	Content to display when there is no value to display.

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>

Name	Type	Default	Description
value	array	null	An array of objects to display.
columns	array	null	An array of objects to represent dynamic columns.
frozenColumns	array	null	An array of objects to represent dynamic columns that are frozen.
frozenValue	array	null	An array of objects to display as frozen.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
paginator	boolean	false	When specified as true, enables the pagination.
rows	number	null	Number of rows to display per page.
first	number	0	Index of the first row to be displayed.
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
alwaysShowPaginator	boolean	true	Whether to show it even there is only one page.
paginatorPosition	string	bottom	Position of the paginator, options are "top","bottom" or "both".
sortMode	string	single	Defines whether sorting works on single column or on multiple columns.
sortField	string	null	Name of the field to sort data by default.
sortOrder	number	1	Order to sort when default sorting is enabled.
multiSortMeta	array	null	An array of SortMeta objects to sort the data by default in multiple sort mode.
rowGroupMode	string	null	Type of the row grouping, valid values are "subheader" and "rowspan".
defaultSortOrder	number	1	Sort order to use when an unsorted column gets sorted by user interaction.
customSort	boolean	false	Whether to use the default sorting or a custom one using sortFunction.
sortFunction	function	null	A function to implement custom sorting, refer to sorting section for details.
selectionMode	string	null	Specifies the selection mode, valid values are "single" and "multiple".
selection	any	null	Selected row in single mode or an array of values in multiple mode.
contextMenuSelection	any	null	Selected row with a context menu.
dataKey	string	null	A property to uniquely identify a record in data.
rowTrackBy	Function	null	Function to optimize the dom operations by delegating to ngForTrackBy, default algoritm checks for object identity.
lazy	boolean	false	Defines if data is loaded and interacted with in lazy manner.
compareSelectionBy	string	deepEquals	Algorithm to define if a row is selected, valid values are "equals" that compares by reference and "deepEquals" that compares all fields.
csvSeparator	string	,	Character to use as the csv separator.
exportFilename	string	download	Name of the exported file.
filters	array	null	An array of FilterMetadata objects to provide external filters.
filterDelay	number	300	Delay in milliseconds before filtering the data.
globalFilterFields	array	null	An array of fields as string to use in global filtering.
expandedRowKeys	array	null	Collection of rows to display as expanded.
rowExpandMode	string	multiple	Whether multiple rows can be expanded at any time. Valid values are "multiple" and "single".
scrollable	boolean	false	When specifies, enables horizontal and/or vertical scrolling.
scrollHeight	string	null	Height of the scroll viewport in fixed pixels or percentage.
virtualScroll	boolean	false	Whether the data should be loaded on demand during scroll.
virtualScrollDelay	number	500	Delay in virtual scroll before doing a call to lazy load.
virtualRowHeight	number	27	Height of a row to use in calculations of virtual scrolling.
frozenWidth	string	null	Width of the frozen columns container.
responsive	boolean	false	Defines if the columns should be stacked in smaller screens.
contextMenu	ContextMenu	null	Local ng-template varilable of a ContextMenu.
resizableColumns	boolean	false	When enabled, columns can be resized using drag and drop.
columnResizeMode	string	fit	Defines whether the overall table width should change on column resize, valid values are "fit" and "expand".
reorderableColumns	boolean	false	When enabled, columns can be reordered using drag and drop.
loading	boolean	false	Displays a loader to indicate data load is in progress.
loadingIcon	string	fa-circle-o-notch	The icon to show while indicating data load is in progress.
rowHover	boolean	false	Adds hover effect to rows without the need for selectionMode.
paginatorDropdownAppendTo	any	null	Target element to attach the paginator dropdown overlay, valid values are "body" or a local ng-template variable of another element.
autoLayout	boolean	false	Whether the cell widths scale according to their content or not.

Name	Parameters	Description
onRowSelect	event.originalEvent: Browser event event.data: Selected data event.type: Type of selection, valid values are "row", "radiobutton" and "checkbox"	Callback to invoke when a row is selected.
onRowUnselect	event.originalEvent: Browser event event.data: Unselected data event.type: Type of unselection, valid values are "row" and "checkbox"	Callback to invoke when a row is unselected with metakey.
onPage	event.first: Index of first record in page event.rows: Number of rows on the page	Callback to invoke when pagination occurs.
onSort	event.field: Field name of the sorted column event.order: Sort order as 1 or -1 event.multisortmeta: Sort metadata in multi sort mode. See multiple sorting section for the structure of this object.	Callback to invoke when a column gets sorted.
onFilter	event.filters: Filters object having a field as the property key and an object with value, matchMode as the property value. event.filteredValue: Filtered data after running the filtering.	Callback to invoke when data is filtered.
onLazyLoad	event.first = First row offset event.rows = Number of rows per page event.sortField = Field name to sort with event.sortOrder = Sort order as number, 1 for asc and -1 for dec filters: FilterMetadata object having field as key and filter value, filter matchMode as value	Callback to invoke when paging, sorting or filtering happens in lazy mode.
onRowExpand	event.originalEvent: Browser event data: Row data to expand.	Callback to invoke when a row is expanded.
onRowCollapse	event.originalEvent: Browser event data: Row data to collapse.	Callback to invoke when a row is collapsed.
onContextMenuSelect	event.originalEvent: Browser event event.data: Selected data	Callback to invoke when a row is selected with right click.
onColResize	event.element: Resized column header event.delta: Change of width in number of pixels	Callback to invoke when a column is resized.
onColReorder	event.dragIndex: Index of the dragged column event.dropIndex: Index of the dropped column event.columns: Columns array after reorder.	Callback to invoke when a column is reordered.
onEditInit	event.column: Column object of the cell event.data: Row data	Callback to invoke when a cell switches to edit mode.
onEdit	event.originalEvent: Browser event event.column: Column object of the cell event.data: Row data event.index: Row index	Callback to invoke when cell data is being edited.
onEditComplete	event.column: Column object of the cell event.data: Row data event.index: Row index	Callback to invoke when cell edit is completed.
onEditCancel	event.column: Column object of the cell event.data: Row data event.index: Row index	Callback to invoke when cell edit is cancelled with escape key.
onHeaderCheckboxToggle	event.originalEvent: Browser event event.checked: State of the header checkbox	Callback to invoke when state of header checkbox changes.

Name	Parameters	Description
reset	-	Resets sort, filter and paginator state.
exportCSV	config?.selectionOnly: Exports only the selection.	Exports the data in csv format.

Name	Element
ui-table	Container element.
ui-datatable-caption	Caption element.
ui-table-summary	Section section.
ui-sortable-column	Sortable column header.
ui-table-scrollable-header	Container of header in a scrollable table.
ui-table-scrollable-body	Container of body in a scrollable table.
ui-table-scrollable-footer	Container of footer in a scrollable table.
ui-table-responsive	Container element of a responsive datatable.
ui-table-loading	Loader mask.
ui-table-loading-content	Loader content.
ui-table-wrapper	Loader content.
ui-table-scrollable-wrapper	Loader content.
ui-table-resizer-helper	Vertical resize indicator bar.
ui-table-reorder-indicator-top	Top indicator of column reordering.
ui-table-reorder-indicator-top	Bottom indicator of column reordering.

Basic

Dynamic Columns

Import

Getting Started

Dynamic Columns

Table Layout

Templates

Change Detection

Sections

Column Grouping

Row Grouping

Multi Field grouping

Paginator

Sorting

Filtering

Selection

ContextMenu

Editing

Expandable Rows

Column Resize

Column Reordering

Data Export

Scrolling

Lazy Loading

Responsive

EmptyMessage

Loading Status

Styling Certain Rows and Columns

Performance Tips

Properties

Events

Methods

Styling

Dependencies