@acpaas-ui/ngx-table 中文文档教程

Question

@acpaas-ui/ngx-table

该模块提供构建“交互式表格”

的组件。该模块包含：

• Table Component
  • Table Cell Component
• Table Bar Component
  • auiTableBarItem
  • auiTableBarSearch
• Column Selector component
• Table Class
• Table Helper Service

Usage

import { TableModule } from '@acpaas-ui/ngx-table';

Documentation

访问我们的文档站点有关完整的操作文档和指南，请

Table module

API

Name	Default value	Description
@Input() rows: any[];	[]	This option has to be an array of objects.
@Input() columns: (TableColumn|string)[];	[]	An array of TableColumns or an array of strings. Use this option to define and manage the columns of the table.
@Input() loading: boolean;	false	Use this option to give the aui-table a loading state. To show the loading state set loading = true.
@Input() responsive: boolean;	true	By default all tables are responsive. Set to false to disable this feature.
@Input() hasClickAction: boolean;	false	By default a table row doesn't have a click action. Setting it to true enables this feature and emits the row's data via rowClicked.
@Input() activeSorting: OrderBy;	-	This option has to be an array of objects. When you do not provide this property, column sorting buttons will be hidden.
@Input() noDataMessage: string;	'Loading data...'	The message to show when the table holds no data.
@Input() loadDataMessage: string;	'No data available.'	The message to show when the table is loading data.
@Input() noColumnsMessage: string;	'No columns available.'	The message to show when the table has no visible.
@Output() orderBy: EventEmitter<any>;	-	This event will be fired when the user changes the sorting of the columns.
@Output() rowClicked: EventEmitter<any>;	-	this event will be fired when the row gets clicked.

Example

import { TableModule } from '@acpaas-ui/ngx-table';

@NgModule({
    imports: [
        TableModule
    ]
});

export class AppModule {};

import { Component } from '@angular/core';
import { Cell } from '@acpaas-ui/ngx-table';

@Component({
    template: `
        <button type="button" class="a-button has-icon" title="View {{ data?.firstName }}'s profile">
            <aui-icon name="ai-view-1"></aui-icon>
        </button>
    `,
})
export class TableActionComponent implements Cell {
    public data: any;
}

public columns: TableColumn[] = [
    {
        label: '#',
        value: 'id',
    },
    {
        label: 'First Name',
        value: 'firstName',
    },
    {
        label: 'Last Name',
        value: 'lastName',
    },
    {
        label: 'Registered',
        value: 'registeredAt',
        format: (value) => this.datePipe.transform(value, 'dd/MM/yyyy'),
    },
    {
        label: 'Actions',
        component: TableActionComponent,
    },
];

public rows = [
    {
        'id': 0,
        'firstName': 'Wyatt',
        'lastName': 'Cooper',
        'registeredAt': 'Sat Feb 07 1981 01:04:46 GMT+0000 (UTC)',
    },
    {
        'id': 1,
        'firstName': 'Mullen',
        'lastName': 'Ballard',
        'registeredAt': 'Fri Aug 31 2001 06:47:22 GMT+0000 (UTC)',
    },
    {
        'id': 2,
        'firstName': 'Sonia',
        'lastName': 'Bass',
        'registeredAt': 'Sat Jul 12 1975 16:00:43 GMT+0000 (UTC)',
    },
    {
        'id': 3,
        'firstName': 'Kristen',
        'lastName': 'Moore',
        'registeredAt': 'Mon Nov 09 2015 16:11:21 GMT+0000 (UTC)',
    },
    {
        'id': 4,
        'firstName': 'Moss',
        'lastName': 'Bowen',
        'registeredAt': 'Thu Aug 04 1977 05:52:52 GMT+0000 (UTC)',
    },
    {
        'id': 5,
        'firstName': 'Elaine',
        'lastName': 'Michael',
        'registeredAt': 'Wed Mar 30 1977 01:48:30 GMT+0000 (UTC)',
    },
    {
        'id': 6,
        'firstName': 'Jerri',
        'lastName': 'Hicks',
        'registeredAt': 'Wed Jul 10 2013 22:53:48 GMT+0000 (UTC)',
    },
    {
        'id': 7,
        'firstName': 'Sharron',
        'lastName': 'Castro',
        'registeredAt': 'Mon Sep 27 1976 07:55:10 GMT+0000 (UTC)',
    },
    {
        'id': 8,
        'firstName': 'Harriett',
        'lastName': 'Horton',
        'registeredAt': 'Wed Aug 18 2010 14:06:33 GMT+0000 (UTC)',
    },
    {
        'id': 9,
        'firstName': 'Griffin',
        'lastName': 'Navarro',
        'registeredAt': 'Tue Oct 24 2017 23:45:35 GMT+0000 (UTC)',
    },
];


public loading = false;

constructor(
    private datePipe: DatePipe
) { }

<aui-table
    noDataMessage="There is no data!"
    loadDataMessage="Loading..."
    noColumsMessage="There are no columns!"
    [loading]="loading"
    [columns]="columns"
    [rows]="rows">
</aui-table>

Contributing

访问我们的贡献指南，了解有关如何贡献的更多信息。