@acpaas-ui/ngx-table

This module provides the components to build an "Interactive Table"

The module contains:

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

Usage

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

Documentation

Visit our documentation site for full how-to docs and guidelines

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

1import { TableModule } from '@acpaas-ui/ngx-table';
2
3@NgModule({
4    imports: [
5        TableModule
6    ]
7});
8
9export class AppModule {};

1import { Component } from '@angular/core';
2import { Cell } from '@acpaas-ui/ngx-table';
3
4@Component({
5  template: `
6    <button type="button" class="a-button has-icon" title="View {{ data?.firstName }}'s profile">
7      <aui-icon name="ai-view-1"></aui-icon>
8    </button>
9  `,
10})
11export class TableActionComponent implements Cell {
12  public data: any;
13}

1public columns: TableColumn[] = [
2	{
3		label: '#',
4		value: 'id',
5	},
6	{
7		label: 'First Name',
8		value: 'firstName',
9	},
10	{
11		label: 'Last Name',
12		value: 'lastName',
13	},
14	{
15		label: 'Registered',
16		value: 'registeredAt',
17		format: (value) => this.datePipe.transform(value, 'dd/MM/yyyy'),
18	},
19	{
20		label: 'Actions',
21		component: TableActionComponent,
22	},
23];
24
25public rows = [
26    {
27        'id': 0,
28        'firstName': 'Wyatt',
29        'lastName': 'Cooper',
30        'registeredAt': 'Sat Feb 07 1981 01:04:46 GMT+0000 (UTC)',
31    },
32    {
33        'id': 1,
34        'firstName': 'Mullen',
35        'lastName': 'Ballard',
36        'registeredAt': 'Fri Aug 31 2001 06:47:22 GMT+0000 (UTC)',
37    },
38    {
39        'id': 2,
40        'firstName': 'Sonia',
41        'lastName': 'Bass',
42        'registeredAt': 'Sat Jul 12 1975 16:00:43 GMT+0000 (UTC)',
43    },
44    {
45        'id': 3,
46        'firstName': 'Kristen',
47        'lastName': 'Moore',
48        'registeredAt': 'Mon Nov 09 2015 16:11:21 GMT+0000 (UTC)',
49    },
50    {
51        'id': 4,
52        'firstName': 'Moss',
53        'lastName': 'Bowen',
54        'registeredAt': 'Thu Aug 04 1977 05:52:52 GMT+0000 (UTC)',
55    },
56    {
57        'id': 5,
58        'firstName': 'Elaine',
59        'lastName': 'Michael',
60        'registeredAt': 'Wed Mar 30 1977 01:48:30 GMT+0000 (UTC)',
61    },
62    {
63        'id': 6,
64        'firstName': 'Jerri',
65        'lastName': 'Hicks',
66        'registeredAt': 'Wed Jul 10 2013 22:53:48 GMT+0000 (UTC)',
67    },
68    {
69        'id': 7,
70        'firstName': 'Sharron',
71        'lastName': 'Castro',
72        'registeredAt': 'Mon Sep 27 1976 07:55:10 GMT+0000 (UTC)',
73    },
74    {
75        'id': 8,
76        'firstName': 'Harriett',
77        'lastName': 'Horton',
78        'registeredAt': 'Wed Aug 18 2010 14:06:33 GMT+0000 (UTC)',
79    },
80    {
81        'id': 9,
82        'firstName': 'Griffin',
83        'lastName': 'Navarro',
84        'registeredAt': 'Tue Oct 24 2017 23:45:35 GMT+0000 (UTC)',
85    },
86];
87
88
89public loading = false;
90
91constructor(
92	private datePipe: DatePipe
93) { }

1<aui-table
2  noDataMessage="There is no data!"
3  loadDataMessage="Loading..."
4  noColumsMessage="There are no columns!"
5  [loading]="loading"
6  [columns]="columns"
7  [rows]="rows"
8>
9</aui-table>

Contributing

Visit our Contribution Guidelines for more information on how to contribute.