cars);
DataTablePaginatorDemo.ts
<p-dataTable [value]="cars" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]">
<p-header>List of Cars</p-header>
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
DataTablePaginatorDemo.html
Sorting
简单使列对象排序的性能足以让一列排序。属性时要使用的默认排序字段，可以使用sortfield定制。
<p-column field="vin" header="Vin" sortable="true"></p-column>
默认情况下，在单击列执行排序。做的多字段分类，设置“多”SortMode属性和使用元键点击另一列。
<p-dataTable [value]="cars" [sortMode]="multiple">
如果你想显示表按默认最初的负载，使用单一模式的sortfield SortOrder属性。
<p-dataTable [value]="cars" sortField="year" [sortOrder]="1">
<p-column field="vin" header="Vin" sortable="true"></p-column>
<p-column field="year" header="Year" sortable="true"></p-column>
<p-column field="brand" header="Brand" sortable="true"></p-column>
<p-column field="color" header="Color" sortable="true"></p-column>
</p-dataTable>
在multiple mode，使用multisortmeta属性和约束sortmeta对象数组。在多个模式，使用multisortmeta属性和约束sortmeta对象数组。
<p-dataTable [value]="cars" [multiSortMeta]="multiSortMeta">
<p-column field="vin" header="Vin" sortable="true"></p-column>
<p-column field="year" header="Year" sortable="true"></p-column>
<p-column field="brand" header="Brand" sortable="true"></p-column>
<p-column field="color" header="Color" sortable="true"></p-column>
</p-dataTable>
this.multiSortMeta = [];
this.multiSortMeta.push({field: 'year', order: 1});
this.multiSortMeta.push({field: 'brand', order: -1});
自定义排序，将排序选项，自定义，定义一个sortfunction分类列表。
<p-dataTable [value]="cars" [multiSortMeta]="multiSortMeta">
<p-column field="vin" header="Vin" sortable="true"></p-column>
<p-column field="year" header="Year" sortable="custom" (sortFunction)="mysort($event)"></p-column>
<p-column field="brand" header="Brand" sortable="true"></p-column>
<p-column field="color" header="Color" sortable="true"></p-column>
</p-dataTable>
mysort(event) {
//event.field = Field to sort
//event.order = Sort order
demo code
export class DataTableSortDemo implements OnInit {
cars1: Car[];
cars2: Car[];
constructor(private carService: CarService) { }
ngOnInit() {
this.carService.getCarsSmall().then(cars => this.cars1 = cars);
this.carService.getCarsSmall().then(cars => this.cars2 = cars);
DataTableSortDemo.ts
<h3 class="first">Single Column</h3>
<p-dataTable [value]="cars1">
<p-column field="vin" header="Vin" [sortable]="true"></p-column>
<p-column field="year" header="Year" [sortable]="true"></p-column>
<p-column field="brand" header="Brand" [sortable]="true"></p-column>
<p-column field="color" header="Color" [sortable]="true"></p-column>
</p-dataTable>
<h3>Multiple Columns</h3>
<p-dataTable [value]="cars2" sortMode="multiple">
<p-column field="vin" header="Vin" [sortable]="true"></p-column>
<p-column field="year" header="Year" [sortable]="true"></p-column>
<p-column field="brand" header="Brand" [sortable]="true"></p-column>
<p-column field="color" header="Color" [sortable]="true"></p-column>
</p-dataTable>
DataTableSortDemo.html
Filtering
通过在列上设置筛选器属性为True，启用了筛选。默认的匹配模式是“startsWith”，这可以被配置为使用filtermatchmode属性，也接受"contains", "endsWith", "equals" and "in"。
<p-column field="vin" header="Vin (startsWith)" [filter]="true" filterPlaceholder="Search"></p-column>
<p-column field="year" header="Year (contains)" [filter]="true" filterMatchMode="contains"></p-column>
<p-column field="brand" header="Brand (startsWith)" [filter]="true"></p-column>
<p-column field="color" header="Color (endsWith)" [filter]="true" filterMatchMode="endsWith"></p-column>
一个可选的全球过滤功能可与相同的关键字搜索的所有领域，使这个地方输入组件的KeyUp事件会听了过滤和绑定的局部ng模板变量名为全球的滤波特性。
<input #gb type="text" placeholder="Global search">
<p-dataTable [value]="cars" [rows]="10" [globalFilter]="gb">
默认情况下，输入字段用作过滤器元素，并且可以使用模板进行自定义。它是用在过滤元件改变回调通过值调用DataTable的过滤方法重要，场和matchmode性质。
<p-column field="brand" header="Brand (Custom)" [filter]="true" [style]="{'overflow':'visible'}" filterMatchMode="equals">
<ng-template pTemplate="filter" let-col>
<p-dropdown [options]="brands" [style]="{'width':'100%'}" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-dropdown>
</ng-template>
</p-column>
demo code
export class DataTableFilterDemo implements OnInit {
cars: Car[];
brands: SelectItem[];
colors: SelectItem[];
constructor(private carService: CarService) {}
ngOnInit() {
this.carService.getCarsMedium().then(cars => this.cars = cars);
this.brands = [];
this.brands.push({label: 'All Brands', value: null});
this.brands.push({label: 'Audi', value: 'Audi'});
this.brands.push({label: 'BMW', value: 'BMW'});
this.brands.push({label: 'Fiat', value: 'Fiat'});
this.brands.push({label: 'Honda', value: 'Honda'});
this.brands.push({label: 'Jaguar', value: 'Jaguar'});
this.brands.push({label: 'Mercedes', value: 'Mercedes'});
this.brands.push({label: 'Renault', value: 'Renault'});
this.brands.push({label: 'VW', value: 'VW'});
this.brands.push({label: 'Volvo', value: 'Volvo'});
this.colors = [];
this.colors.push({label: 'White', value: 'White'});
this.colors.push({label: 'Green', value: 'Green'});
this.colors.push({label: 'Silver', value: 'Silver'});
this.colors.push({label: 'Black', value: 'Black'});
this.colors.push({label: 'Red', value: 'Red'});
this.colors.push({label: 'Maroon', value: 'Maroon'});
this.colors.push({label: 'Brown', value: 'Brown'});
this.colors.push({label: 'Orange', value: 'Orange'});
this.colors.push({label: 'Blue', value: 'Blue'});
DataTableFilterDemo.ts
<div class="ui-widget-header" style="padding:4px 10px;border-bottom: 0 none">
<i class="fa fa-search" style="margin:4px 4px 0 0"></i>
<input #gb type="text" pInputText size="50" placeholder="Global Filter">
<p-dataTable [value]="cars" [rows]="10" [paginator]="true" [globalFilter]="gb" #dt>
<p-header>List of Cars</p-header>
<p-column field="vin" header="Vin (startsWith)" [filter]="true" filterPlaceholder="Search"></p-column>
<p-column field="year" header="Year ({{yearFilter||'No Filter'}}" [filter]="true" filterMatchMode="equals">
<ng-template pTemplate="filter" let-col>
<i class="fa fa-close" (click)="yearFilter=null;dt.filter(null,col.field,col.filterMatchMode)"></i>
<p-slider [style]="{'width':'100%','margin-top':'8px'}" [(ngModel)]="yearFilter" [min]="1970" [max]="2010" (onSlideEnd)="dt.filter($event.value,col.field,col.filterMatchMode)"></p-slider>
</ng-template>
</p-column>
<p-column field="brand" header="Brand (Custom)" [filter]="true" [style]="{'overflow':'visible'}" filterMatchMode="equals">
<ng-template pTemplate="filter" let-col>
<p-dropdown [options]="brands" [style]="{'width':'100%'}" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-dropdown>
</ng-template>
</p-column>
<p-column field="color" header="Color (Custom)" [filter]="true" filterMatchMode="in" [style]="{'overflow':'visible'}">
<ng-template pTemplate="filter" let-col>
<p-multiSelect [options]="colors" defaultLabel="All Colors" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-multiSelect>
</ng-template>
</p-column>
</p-dataTable>
DataTableFilterDemo.html
Selection
DataTable提供一排点击单个和多个模式的选择。选定行必然选择属性和onrowselect onrowunselect事件提供了可选的回调。另外基于列的选择可以使用单选按钮或复选框使用一个特定的列SelectionMode为。比较时，如果一行被选中，DataTable穿越影响性能结果的对象的所有属性。建议定义一个DataKey属性唯一标识一个记录，避免深对象比较和提高性能。
在单一模式下，选择绑定是一个对象引用。
export class DataTableDemo implements OnInit {
cars: Car[];
selectedCar: Car;
constructor(private carService: CarService) { }
ngOnInit() {
this.carService.getCarsSmall().then(cars => this.cars = cars);
<p-dataTable [value]="cars" selectionMode="single" [(selection)]="selectedCar" dataKey="vin">
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
在多模式选择的结合应该是一个数组和多个项目可以选择使用元键或切换单独依靠metakeyselection属性值是真正的默认值。触摸功能的设备metakeyselection自动关闭。
export class DataTableDemo implements OnInit {
cars: Car[];
selectedCars: Car[];
constructor(private carService: CarService) { }
ngOnInit() {
this.carService.getCarsSmall().then(cars => this.cars = cars);
<p-dataTable [value]="cars" selectionMode="multiple" [(selection)]="selectedCars" dataKey="vin">
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
如果你喜欢一个单选按钮或复选框，而不是连续点击，使用一列的SelectionMode为相反。以下数据表显示在每一行的第一列的复选框，复选框中自动添加一个标题行切换选择。
<p-dataTable [value]="cars" [(selection)]="selectedCars" dataKey="vin">
<p-column selectionMode="multiple"></p-column>
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
ContextMenu
DataTable与ContextMenu独家整合。为了将一个菜单数据表，定义了一个局部的菜单模板变量并将其绑定到DataTable的ContextMenu属性。这使显示的菜单时，行右键单击。
<p-dataTable [value]="cars" selectionMode="single" [(selection)]="selectedCar" [contextMenu]="cm">
<p-header>Right Click on Rows for ContextMenu</p-header>
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
<p-contextMenu #cm [model]="items"></p-contextMenu>
Editing
Incell editing通过设置编辑属性编辑对DataTable和列真正启用。单击单元格切换到编辑模式，点击Enter键或单击另一个单元格将其切换回查看模式。
<p-dataTable [value]="cars" [editable]="true">
<p-column field="vin" header="Vin" [editable]="true"></p-column>
<p-column field="year" header="Year" [editable]="true"></p-column>
<p-column field="brand" header="Brand" [editable]="true"></p-column>
<p-column field="color" header="Color" [editable]="true"></p-column>
</p-dataTable>
简单的输入字段作为编辑元素默认情况下，这可以通过添加一个定制的ptemplate命名编辑。
<p-dataTable [value]="cars" [editable]="true">
<p-column field="vin" header="Vin" [editable]="true"></p-column>
<p-column field="year" header="Year" [editable]="true"></p-column>
<p-column field="brand" header="Brand" [editable]="true" [style]="{'overflow':'visible'}">
<ng-template let-col let-car="rowData" pTemplate="editor">
<p-dropdown [(ngModel)]="car[col.field]" [options]="brands" [autoWidth]="false" [style]="{'width':'100%'}" required="true"></p-dropdown>
</ng-template>
</p-column>
<p-column field="color" header="Color" [editable]="true"></p-column>
<p-column field="saleDate" header="Sale Date" [editable]="true" [style]=" {'overflow':'visible' }">
<ng-template let-col let-car="rowData" pTemplate="body">
{{car[col.field]|date }}
</ng-template>
<ng-template let-col let-car="rowData" pTemplate="editor">
<p-calendar [(ngModel)]="car[col.field]"></p-calendar>
</ng-template>
</p-column>
</p-dataTable>
demo code
export class DataTableEditableDemo implements OnInit {
cars: Car[];
constructor(private carService: CarService) { }
ngOnInit() {
this.carService.getCarsSmall().then(cars => this.cars = cars);
DataTableEditableDemo.ts
<p-dataTable [value]="cars" [editable]="true">
<p-column field="vin" header="Vin" [editable]="true"></p-column>
<p-column field="year" header="Year" [editable]="true"></p-column>
<p-column field="brand" header="Brand" [editable]="true" [style]="{'overflow':'visible'}">
<ng-template let-col let-car="rowData" pTemplate="editor">
<p-dropdown [(ngModel)]="car[col.field]" [options]="brands" [autoWidth]="false" [style]="{'width':'100%'}" required="true"></p-dropdown>
</ng-template>
</p-column>
<p-column field="color" header="Color" [editable]="true"></p-column>
<p-column field="saleDate" header="Sale Date" [editable]="true" [style]=" {'overflow':'visible' }">
<ng-template let-col let-car="rowData" pTemplate="body">
{{car[col.field]|date }}
</ng-template>
<ng-template let-col let-car="rowData" pTemplate="editor">
<p-calendar [(ngModel)]="car[col.field]"></p-calendar>
</ng-template>
</p-column>
</p-dataTable>
DataTableEditableDemo.html
Expandable Rows
行扩展允许显示特定行的详细内容。要使用此功能，使expandablerows属性，添加膨胀柱宣布扩大内容提供ptemplate“rowexpansion”为价值。
<p-dataTable [value]="cars" expandableRows="true">
<p-column expander="true" [style]="{'width':'22px'}"></p-column>
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
<ng-template let-car pTemplate="rowexpansion">
<div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px">
<div class="ui-grid-row">
<div class="ui-grid-col-3" style="text-align:center">
<img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif">
<div class="ui-grid-col-9">
<div class="ui-grid ui-grid-responsive ui-grid-pad">
<div class="ui-grid-row">
<div class="ui-grid-col-2 label">Vin: </div>
<div class="ui-grid-col-10">{{car.vin}}</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2 label">Year: </div>
<div class="ui-grid-col-10">{{car.year}}</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2 label">Brand: </div>
<div class="ui-grid-col-10">{{car.brand}}</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2 label">Color: </div>
<div class="ui-grid-col-10">{{car.color}}</div>
</ng-template>
</p-dataTable>
默认情况下所有行倒塌，expandadrows财产需要填充的行数据实例来显示特定行为扩展默认。
Column Resize
列的大小可以使用拖放设置resizablecolumns真实。有两个大小调整模式；"fit" and "expand"。"fit"是默认的和整体的桌子的宽度并没有改变时，一列大小。在"expand"模式下，表宽也随着列宽度的变化而变化。oncolumnresize回调是通过调整列标题作为参数。
<p-dataTable [value]="cars" [resizableColumns]="true">
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
Data Export
DataTable可以以CSV格式的使用exportcsv()方法其数据输出。
<p-dataTable #dt [value]="cars">
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
<button type="button" pButton icon="fa-file-o" iconPos="left" label="CSV" (click)="dt.exportCSV()"></button>
Scrolling
DataTable支持水平和垂直滚动通过定义scrollwidth和scrollheight选项分别。属性可以采取固定像素值或百分比来计算滚动视图相对于DataTable母。样品使用垂直滚动，头下面是固定的，数据是可滚动的。在水平滚动，重要的是给固定宽度的列。
<p-dataTable [value]="cars" [scrollable]="true" scrollHeight="200px">
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
在水平滚动中，通过在列级上启用冻结属性，可以固定某些列。
<p-dataTable [value]="cars" [scrollable]="true" scrollHeight="200px" frozenWidth="100px" scrollWidth="600px">
<p-column field="vin" header="Vin" frozen="true"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
此外，virtualscroll模式可以通过加载数据需求处理大型数据集时滚动。
Lazy Loading
懒模式是得心应手地处理大型数据集，而不是加载整个数据，小块数据是通过调用回调onlazyload每次分页加载，排序和过滤发生。实现懒加载，使懒惰的属性和提供利用onlazyload实际加载数据从远程数据源的方法回调。onlazyload获取一个事件对象包含有关如何负荷。它还指定行数的逻辑totalrecords做一个页面配置投影查询，页面显示UI假设实际上有记录totalrecords规模虽然在现实中他们没有在懒人模式重要，只显示当前页的记录存在。
<p-dataTable [value]="cars" [scrollable]="true" [lazy]="true" (onLazyLoad)="loadData($event)" [totalRecords]="totalRecords">
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
loadData(event: LazyLoadEvent) {
//event.first = First row offset
//event.rows = Number of rows per page
//event.sortField = Field name to sort in single sort mode
//event.sortOrder = Sort order as number, 1 for asc and -1 for dec in single sort mode
//multiSortMeta: An array of SortMeta objects used in multiple columns sorting. Each SortMeta has field and order properties.
//filters: Filters object having field as key and filter value, filter matchMode as value
//globalFilter: Value of the global filter if available
this.cars = //do a request to a remote datasource using a service and return the cars that match the lazy load criteria
Responsive
数据表列显示为堆放在应答模式如果屏幕尺寸变得小于某个断点值。此功能启用响应设置为true。
<p-dataTable [value]="cars" [responsive]="true">
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
Overlays in Cells
Cells of datatable隐藏溢出默认情况下，这可以防止一部分像下拉菜单可正常显示叠加。在这样的情况下，设置列的样式以允许溢出。
<p-column field="color" [style]="{'overflow':'visible'}">
<ng-template let-col let-car="rowData">
<p-dropdown></p-dropdown>
</ng-template>
</p-column>
Immutable Mode
使用diff检查如果DataTable来实现底层的数据发生了变化，这可能会降低性能，避免它一成不变的模式，确保您的数据的变化，如添加或删除一个记录都创建一个新数组引用。例如，添加项目时使用切片而不是剪接，添加项目时使用扩展运算符而不是推送方法。
Loading Status
DataTable具有承载性能，当启用旋转图标显示数据加载。
<p-dataTable [value]="cars" [loading]="loading">
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
export class DataTableDemo implements OnInit {
loading: boolean;
cars: Car[];
constructor(private carService: CarService) { }
ngOnInit() {
this.loading = true;
setTimeout(() => {
this.carService.getCarsSmall().then(cars => this.cars = cars);
this.loading = false;
}, 1000);
Attributes
Name TypeDefaultDescription
value
array
An array of objects to display.
headerRows
array
An array of column definitions for column grouping at header.
footerRows
array
An array of column definitions for column grouping at footer.
number
Number of rows to display per page.
paginator
boolean
false
When specified as true, enables the pagination.
totalRecords
number
Number of total records, defaults to length of value when not defined.
pageLinks
number
Number of page links to display in paginator.
rowsPerPageOptions
array
Array of integer values to display inside rows per page dropdown of paginator
sortMode
string
single
Defines whether sorting works on single column or on multiple columns.
sortField
string
Name of the field to sort data by default.
sortOrder
number
Order to sort the data by default.
multiSortMeta
array
An array of SortMeta objects to sort the data by default in multiple sort mode.
rowGroupMode
string
Type of the row grouping, valid values are "subheader" and "rowspan".
groupField
string
Name of the field to group by in subheader row grouping mode.
sortableGroupRow
boolean
Whether to sort the data if the row group subheader is clicked.
expandableRowGroups
boolean
false
When enabled, adds a clickable icon at group header to expand or collapse the group.
expandedRowGroups
array
Collection of group field values to show a group as expanded by default.
responsive
boolean
false
Defines if the columns should be stacked in smaller screens.
selectionMode
string
Specifies the selection mode, valid values are "single" and "multiple".
selection
Selected row in single mode or an array of values in multiple mode.
editable
boolean
false
Activates incell editing when enabled.
expandableRows
boolean
false
Activates expandable rows feature when true.
expandedRows
array
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".
globalFilter
Reference of an input field to use as a global filter.
filterDelay
number
Delay in milliseconds before filtering the data.
boolean
false
Defines if data is loaded and interacted with in lazy manner.
resizableColumns
boolean
false
When enabled, columns can be resized using drag and drop.
columnResizeMode
boolean
false
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.
scrollable
boolean
false
When specifies, enables horizontal and/or vertical scrolling.
scrollHeight
number/string
Height of the scroll viewport, can be pixel as a number or a percentage.
scrollWidth
number/string
Width of the scroll viewport, can be pixel as a number or a percentage.
virtualScroll
boolean
false
Whether the data should be loaded on demand during scroll.
style
string
Inline style of the component.
styleClass
string
Style class of the component.
contextMenu
ContextMenu
Local ng-template varilable of a ContextMenu.
csvSeparator
string
Character to use as the csv separator.
exportFilename
string
download
Name of the exported file.
emptyMessage
string
No records found.
Text to display when there is no data.
paginatorPosition
string
bottom
Position of the paginator, options are "top","bottom" or "both".
rowTrackBy
function
TrackBy function of ngFor directive used when rendering rows.
rowStyleClass
function
Function that gets the row data and row index as parameters and returns a style class for the row.
rowHover
boolean
false
Adds hover effect to rows without the need for selectionMode.
filters
array
An array of FilterMetadata objects to provide external filters.
metaKeySelection
boolean
Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
immutable
boolean
false
Improves performance by avoiding diff checking, changes to value should be done in an immutable way on application side when immutable property is enabled.
dataKey
string
A property to uniquely identify a record in data.
loading
boolean
false
Displays a loader to indicate data load is in progress.
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.
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.
onHeaderCheckboxToggle
event.originalEvent: Browser event
event.checked: State of the header checkbox
Callback to invoke when state of header checkbox changes.
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.
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.
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.
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.
Callback to invoke when data is filtered.
<p-dataTable [value]="cars" selectionMode="single" [(selection)]="selectedCar" (onRowSelect)="handleRowSelect($event)">
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
<p-dataTable #dt [value]="cars">
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
<button type="button" pButton (click)="update(dt)" label="Reset"></button>
update(dt: DataTable) {
dt.reset();
Styling
以下是结构式的类列表，对于主题类主题页面访问。
Name Element
ui-datatable
Container element.
ui-datatable-header
Header section.
ui-datatable-footer
Footer section.
ui-column-title
Title of a column.
ui-sortable-column
Sortable column header.
ui-column-filter
Filter element in header.
ui-cell-data
Data cell in body.
ui-cell-editor
Input element for incell editing.
ui-datatable-scrollable-header
Container of header in a scrollable table.
ui-datatable-scrollable-header
Container of body in a scrollable table.
ui-datatable-scrollable-header
Container of footer in a scrollable table.
ui-datatable-responsive
Container element of a responsive datatable.
ui-datatable-emptymessage
Cell containing the empty message.
参考资料：
https://www.primefaces.org/primeng/#/datatable
如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，博主在此感谢！
本文版权归作者和博客园共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。
