PrimeNG之DataTable

公告

--数据表显示在表格格式数据。

Basic

Import

import {DataTableModule,SharedModule} from 'primeng/primeng';

source

<h3 class="first">Basic</h3>
<p-dataTable [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>

<h3>Dynamic Columns</h3>
<p-dataTable [value]="cars">
    <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>

export class DataTableDemo 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'}
        ];
    }
}

Getting Started（入门）

数据表需要一个数组作为值对象和列p-column组件定义。在整个样本，汽车接口具有VIN，品牌，年份和颜色属性是用来定义一个对象是由数据表中显示。汽车是由一个carservice连接到服务器去取车的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) {}

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

下面的示例数据表有4列，从服务检索数据的初始化。

export class DataTableDemo implements OnInit {

    cars: Car[];

    constructor(private carService: CarService) { }

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

汽车列表绑定到值的属性和列使用p-column组件定义。

<p-dataTable [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>

Column Component

列组件定义了各种选项以指定相应的功能。

Attributes

Name

	Type	Default	Description
field	string	null	Property of a row data.
sortField	string	null	Property of a row data used for sorting, defaults to field.
header	string	null	Header text of a column.
footer	string	null	Footer text of a column.
sortable	any	false	Defines if a column is sortable.
sortFunction	function	null	Sort function for custom sorting.
editable	boolean	false	Defines if a column is editable.
filter	boolean	false	Defines if a column can be filtered.
filterMatchMode	string	null	Defines filterMatchMode; "startsWith", "contains", "endsWidth", "equals" and "in".
filterPlaceholder	string	null	Defines placeholder of the input fields.
rowspan	string	null	Number of rows to span for grouping.
colspan	string	null	Number of columns to span for grouping.
style	string	null	Inline style of the column.
styleClass	string	null	Style class of the column.
tableStyle	string	null	Inline style of the table element.
tableStyleClass	string	null	Style class of the table element.
hidden	boolean	false	Controls visiblity of the column.
expander	boolean	false	Displays an icon to toggle row expansion.
selectionMode	string	null	Defines column based selection mode, options are "single" and "multiple".
frozen	boolean	false	Whether the column is fixed in horizontal scrolling or not.

<p-column field="vin" header="Vin" [sortable]="true"></p-column>

Dynamic Colums

列可以被实例化使用数组以及ngfor迭代。

export class DataTableDemo 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'}
        ];
    }
}

<p-dataTable [value]="cars">
    <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>

Templates

一个相应的行字段的数据显示为默认的单元格的内容，可以自定义模板，使用隐式变量传递到ng模板列定义和当前行数据rowData财产。在目前除了指数可以使用可选的rowIndex变量访问。类似地，自定义内容可以放在列的页眉和页脚上，模板。

ng-template内的列必须用ptemplate指令来表明ng-template属于的类型。可能的值是“头”、“体”和“页脚”。

<p-column field="color" header="Color">
    <ng-template let-col let-car="rowData" let-ri="rowIndex" pTemplate="body">
        <span>{{car[col.field]}}</span>
    </ng-template>
</p-column>
<p-column>
    <ng-template pTemplate="header">
        <button type="button" pButton (click)="selectAllCars()" icon="fa-check"></button>
    </ng-template>
    <ng-template let-car="rowData" pTemplate="body">
        <button type="button" pButton (click)="selectCar(car)" icon="fa-search"></button>
    </ng-template>
</p-column>

行的索引在ng-template可用。

 <p-column>
        <ng-template let-car="rowData" let-i="rowIndex" pTemplate="body">
            <button type="button" pButton (click)="selectCar(i)" icon="fa-search"></button>
        </ng-template>
  </p-column>

example

Facets

页眉和页脚是可以显示自定义内容的两个部分。

import {Header} from 'primeng/primeng';
import {Footer} from 'primeng/primeng';

<p-dataTable [value]="cars">
    <p-header>List of Cars</p-header>
    <p-footer>Choose from the list.</p-footer>
    <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>

Column Grouping

列可以被分组在页眉和页脚使用headercolumngroup和footercolumngroup组件包含行与列。模板也支持内分组列。

<p-dataTable [value]="sales">
    <p-headerColumnGroup>
        <p-row>
            <p-column header="Brand" rowspan="3"></p-column>
            <p-column header="Sale Rate" colspan="4"></p-column>
        </p-row>
        <p-row>
            <p-column header="Sales" colspan="2"></p-column>
            <p-column header="Profits" colspan="2"></p-column>
        </p-row>
        <p-row>
            <p-column header="Last Year"></p-column>
            <p-column header="This Year"></p-column>
            <p-column header="Last Year"></p-column>
            <p-column header="This Year"></p-column>
        </p-row>
    </p-headerColumnGroup>
    
    <p-column field="brand"></p-column>
    <p-column field="lastYearSale"></p-column>
    <p-column field="thisYearSale"></p-column>
    <p-column field="lastYearProfit"></p-column>
    <p-column field="thisYearProfit"></p-column>
    
    <p-footerColumnGroup>
        <p-row>
            <p-column footer="Totals:" colspan="3"></p-column>
            <p-column footer="$506,202"></p-column>
            <p-column footer="$531,020"></p-column>
        </p-row>
    </p-footerColumnGroup>
</p-dataTable>

Row Grouping

行可以按一个单独的分组的行或使用的行。在这两种情况下，数据必须由分组字段首先进行排序。

<p-dataTable [value]="cars1" sortField="brand" rowGroupMode="subheader" groupField="brand">
    <p-header>Subheader</p-header>
    <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData['brand']}}</ng-template>
    <p-column field="color" header="Color"></p-column>
    <p-column field="year" header="Year"></p-column>
    <p-column field="vin" header="Vin"></p-column>
</p-dataTable>

<p-dataTable [value]="cars2" sortField="brand" rowGroupMode="rowspan">
    <p-header>RowSpan</p-header>
    <p-column field="brand" header="Brand"></p-column>
    <p-column field="color" header="Color"></p-column>
    <p-column field="year" header="Year"></p-column>
    <p-column field="vin" header="Vin"></p-column>
</p-dataTable>

一组知名度可切换使用的图标放在旁边，用expandablerowgroups属性组的名称。默认情况下，所有的组都崩溃了，expandadrowgroups财产需要填充组字段值显示特定群体扩展默认。

<p-dataTable [value]="cars" sortField="brand" rowGroupMode="subheader" groupField="brand" expandableRowGroups="true">
    <p-header>Subheader</p-header>
    <ng-template pTemplate="rowgroup" let-rowData>{{rowData['brand']}}</ng-template>
    <p-column field="color" header="Color"></p-column>
    <p-column field="year" header="Year"></p-column>
    <p-column field="vin" header="Vin"></p-column>
</p-dataTable>

一个排的页脚可以使用rowgroupfooter ng模板定义。

 1 <p-dataTable [value]="cars" sortField="brand" rowGroupMode="subheader" groupField="brand" expandableRowGroups="true"
 2         [sortableRowGroup]="false">
 3     <p-header>Toggleable Row Groups with Footers</p-header>
 4     <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData['brand']}}</ng-template>
 5     <p-column field="color" header="Color"></p-column>
 6     <p-column field="year" header="Year"></p-column>
 7     <p-column field="vin" header="Vin"></p-column>
 8     <p-column field="price" header="Price">
 9         <ng-template let-col let-car="rowData" pTemplate="body">
10             <span>{{car[col.field] | currency:'USD':true:'.0-0'}}</span>
11         </ng-template>
12     </p-column>
13     <ng-template pTemplate="rowgroupfooter" let-car>
14         <td colspan="3" style="text-align:right">Total Price</td>
15         <td>{{calculateGroupTotal(car['brand']) | currency:'USD':true:'.0-0' }}</td>
16     </ng-template>
17 </p-dataTable>

View Code

单击行组分类根据组字段的数据，你可以使用sortablerowgroup财产这一行为控制

demo code

export class DataTableRowGroupDemo implements OnInit {

    cars1: Car[];
    
    cars2: Car[];
    
    cars3: Car[];
    
    constructor(private carService: CarService) {}

    ngOnInit() {
        this.carService.getCarsMedium().then(cars => this.cars1 = cars);
        this.carService.getCarsMedium().then(cars => this.cars2 = cars);
        this.carService.getCarsMedium().then(cars => this.cars3 = cars);
    }
    
    calculateGroupTotal(brand: string) {
        let total = 0;
        
        if(this.cars1) {
            for(let car of this.cars1) {
                if(car.brand === brand) {
                    total += car.price;
                }
            }
        }

        return total;
    }
}

DataTableRowGroupDemo.ts

<p-dataTable [value]="cars1" sortField="brand" rowGroupMode="subheader" groupField="brand" expandableRowGroups="true"
        [sortableRowGroup]="false">
    <p-header>Toggleable Row Groups with Footers</p-header>
    <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData['brand']}}</ng-template>
    <p-column field="color" header="Color"></p-column>
    <p-column field="year" header="Year"></p-column>
    <p-column field="vin" header="Vin"></p-column>
    <p-column field="price" header="Price">
        <ng-template let-col let-car="rowData" pTemplate="body">
            <span>{{car[col.field] | currency:'USD':true:'.0-0'}}</span>
        </ng-template>
    </p-column>
    <ng-template pTemplate="rowgroupfooter" let-car>
        <td colspan="3" style="text-align:right">Total Price</td>
        <td>{{calculateGroupTotal(car['brand']) | currency:'USD':true:'.0-0' }}</td>
    </ng-template>
</p-dataTable>

<p-dataTable [value]="cars2" sortField="brand" rowGroupMode="subheader" groupField="brand" [style]="{'margin-top':'50px'}">
    <p-header>Subheader</p-header>
    <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData['brand']}}</ng-template>
    <p-column field="color" header="Color" sortable="true"></p-column>
    <p-column field="year" header="Year" sortable="true"></p-column>
    <p-column field="vin" header="Vin" sortable="true"></p-column>
</p-dataTable>

<p-dataTable [value]="cars3" sortField="brand" rowGroupMode="rowspan" [style]="{'margin-top':'50px'}">
    <p-header>RowSpan</p-header>
    <p-column field="brand" header="Brand" sortable="true"></p-column>
    <p-column field="color" header="Color" sortable="true"></p-column>
    <p-column field="year" header="Year" sortable="true"></p-column>
    <p-column field="vin" header="Vin" sortable="true"></p-column>
</p-dataTable>

DataTableRowGroupDemo.html

Paginator

分页的设置页面属性来启用，行属性定义每个页面的行数和页面连接，指定要显示的数页链接。

<p-dataTable [value]="cars" [rows]="10" [paginator]="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>

demo code

export class DataTablePaginatorDemo implements OnInit {

    cars: Car[];

    constructor(private carService: CarService) { }

    ngOnInit() {
        this.carService.getCarsMedium().then(cars => this.cars = 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">
</div>
<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>
                <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>
                        <div class="ui-grid-row">
                            <div class="ui-grid-col-2 label">Year: </div>
                            <div class="ui-grid-col-10">{{car.year}}</div>
                        </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>
                        <div class="ui-grid-row">
                            <div class="ui-grid-col-2 label">Color: </div>
                            <div class="ui-grid-col-10">{{car.color}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </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	Type	Default	Description
value	array	null	An array of objects to display.
headerRows	array	null	An array of column definitions for column grouping at header.
footerRows	array	null	An array of column definitions for column grouping at footer.
rows	number	null	Number of rows to display per page.
paginator	boolean	false	When specified as true, enables the pagination.
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
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	null	Order to sort the data by default.
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".
groupField	string	null	Name of the field to group by in subheader row grouping mode.
sortableGroupRow	boolean	true	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	null	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	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.
editable	boolean	false	Activates incell editing when enabled.
expandableRows	boolean	false	Activates expandable rows feature when true.
expandedRows	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".
globalFilter	any	null	Reference of an input field to use as a global filter.
filterDelay	number	300	Delay in milliseconds before filtering the data.
lazy	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	null	Height of the scroll viewport, can be pixel as a number or a percentage.
scrollWidth	number/string	null	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	null	Inline style of the component.
styleClass	string	null	Style class of the component.
contextMenu	ContextMenu	null	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	null	TrackBy function of ngFor directive used when rendering rows.
rowStyleClass	function	null	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	null	An array of FilterMetadata objects to provide external filters.
metaKeySelection	boolean	true	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	null	A property to uniquely identify a record in data.
loading	boolean	false	Displays a loader to indicate data load is in progress.

Events

Name	Parameters	Description
onRowClick	event.originalEvent: Browser event event.data: Selected data	Callback to invoke when a row is clicked.
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.
onRowDblclick	event.originalEvent: Browser event event.data: Selected data	Callback to invoke when a row is selected with double clicked.
onHeaderCheckboxToggle	event.originalEvent: Browser event event.checked: State of the header checkbox	Callback to invoke when state of header checkbox changes.
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.
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.
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.
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.	Callback to invoke when data is filtered.
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.
onRowGroupExpand	event.originalEvent: Browser event group: Value of the group.	Callback to invoke when a row group is expanded.
onRowGroupCollapse	event.originalEvent: Browser event group: Value of the group.	Callback to invoke when a row group is collapsed.

<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>

handleRowSelect(event) {
    //event.data = Selected row data
}

Methods

Name	Parameters	Description
reset	-	Resets sort, filter and paginator state.
exportCSV	-	Exports the data in csv format.
toggleRow	data	Toggles row expansion for given row data.

<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

posted on 2017-04-25 00:48 p1uto 阅读(11923) 评论(1) 编辑收藏举报

刷新页面返回顶部

地平线很远

公告

PrimeNG之DataTable

Basic

Import

source

Getting Started（入门）

Column Component

Attributes

Dynamic Colums

Templates

example

Facets

Column Grouping

Row Grouping

demo code

Paginator

demo code

Sorting

demo code

Filtering

demo code

Selection

ContextMenu

Editing

demo code

Expandable Rows

Column Resize

Data Export

Scrolling

Lazy Loading

Responsive

Overlays in Cells

Immutable Mode

Loading Status

Attributes

Events

Methods

Styling

参考资料：