Data - Table - 《PrimeNG Document》 - 书栈网

Change Detection
Sections
Column Grouping
Row Grouping
Multi Field grouping
Paginator
Sorting
Filtering
Selection
ContextMenu
Cell Editing
Row Editing
Expandable Rows
Column Resize
Column Reordering
Rows Reordering
Data Export
Scrolling
Lazy Loading
TableState
Responsive
EmptyMessage
Loading Status
Styling Certain Rows and Columns
Performance Tips
Properties
Events
Methods
Styling
Dependencies
Source

- ● Documentation
- ● Sections
- ● Page
- ● Sort
- ● Selection
- ● Filter
- ● ColGroup
- ● Lazy
- ● Edit
- ● Scroll
- ● RowExpand
- ● RowGroup
- ● Resize
- ● Reorder
- ● Toggle
- ● Style
- ● Export
- ● ContextMenu
- ● Responsive
- ● Crud
- ● State
- ● Sticky

TurboTableTable is the successor of p-dataTable with a lightning fast performance (at least 10x faster) and excellent level of control over the presentation. p-table is called as TurboTable in order to differantiate if from the deprecated p-dataTable.

## Documentation

### 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 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. Note that Scrollable and/or Resizable tables do not support auto layout due to technical reasons.

### 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: Whether 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.pageCount: Total page count state.rows: Rows per page state.first: Index of the first records state.totalRecords: Number of total records	Custom content for the left section of the paginator.
paginatorright	state: $implicit state.page: Current page state.pageCount: Total page count state.rows: Rows per page state.first: Index of the first records state.totalRecords: Number of total records	Custom content for the right section of the paginator.
loadingbody	columns: Columns collection	Content of the tbody element to show when data is being loaded in virtual scroll mode.

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.
tableStyle	any	null	Inline style of the table.
tableStyleClass	string	null	Style class of the table.
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".
currentPageReportTemplate	string	{currentPage} of {totalPages}	Text to display the current page information.
showCurrentPageReport	boolean	false	Whether to display current page report.
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.
contextMenuSelectionMode	string	separate	Defines the behavior of context menu selection, in "separate" mode context menu updates contextMenuSelection propertty whereas in joint mode selection property is used instead so that when row selection is enabled, both row selection and context menu selection use the same property.
dataKey	string	null	A property to uniquely identify a record in data.
metaKeySelection	boolean	true	Defines whether metaKey is should be considered for the selection. On touch enabled devices, metaKeySelection is turned off automatically.
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.
lazyLoadOnInit	boolean	true	Whether to call lazy loading on initialization.
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	{[s: string]: boolean;}	null	Map instance to keep the expanded rows where key of the map is the data key of the row.
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, percentage or a calc expression.
virtualScroll	boolean	false	Whether the data should be loaded on demand during scroll.
virtualScrollDelay	number	150	Delay in virtual scroll before doing a call to lazy load.
virtualRowHeight	number	28	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.
showLoader	boolean	true	Whether to show the loading mask when loading property is true.
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.
resetPageOnSort	boolean	true	When true, resets paginator to first page after sorting.
exportFunction	function	null	A function to implement custom export. Need to return string value. event.data: Field data. event.field: Column field.
stateKey	string	null	Unique identifier of a stateful table to use in state storage.
stateStorage	string	session	Defines where a stateful table keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.
editMode	string	cell	Defines the editing mode, valid values are "cell" and "row".
editingRowKeys	{[s: string]: boolean;}	null	Map instance to keep the rows being edited where key of the map is the data key of the row.

Name	Parameters	Description
onRowSelect	event.originalEvent: Browser event event.data: Selected data event.type: Type of selection, valid values are "row", "radiobutton" and "checkbox" event.index: Index of the row	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.
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 event.multiSortMeta: An array of SortMeta objects used in multiple columns sorting. Each SortMeta has field and order properties. event.filters: FilterMetadata object having field as key and filter value, filter matchMode as value event.globalFilter: Value of the global filter if available	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.
onRowReorder	event.dragIndex: Index of the dragged row event.dropIndex: Index of the drop location	Callback to invoke when a row is reordered.
onEditInit	event.column: Column object of the cell event.data: Row data	Callback to invoke when a cell switches to edit mode.
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.
onStateSave	state: Table state	Callback to invoke table state is saved.
onStateRestore	state: Table state	Callback to invoke table state is restored.

Name	Parameters	Description
reset	-	Resets sort, filter and paginator state.
clearState	-	Clears table state.
exportCSV	config?.selectionOnly: Exports only the selection.	Exports the data in csv format.
closeCellEdit	-	Closes the editing cell.

Name	Element
ui-table	Container element.
ui-table-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-column-resizer-helper	Vertical resize indicator bar. To show the resize indicator bar set the "background-color" property.
ui-table-reorder-indicator-top	Top indicator of column reordering.
ui-table-reorder-indicator-top	Bottom indicator of column reordering.

Table

Change Detection

Sections

Column Grouping

Row Grouping

Multi Field grouping

Paginator

Sorting

Filtering

Selection

ContextMenu

Cell Editing

Row Editing

Expandable Rows

Column Resize

Column Reordering

Rows Reordering

Data Export

Scrolling

Lazy Loading

TableState

Responsive

EmptyMessage

Loading Status

Styling Certain Rows and Columns

Performance Tips

Properties

Events

Methods

Styling

Dependencies

Source