Pages UI
Search…
Tables / Datatables
Tables and Datatables are powered by the famous ngx-datatable plugin. Please refer there documentation for more details. https://github.com/swimlane/ngx-datatable

Importing

First import it to your app module or any submodule as you wish
1
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
2
@NgModule({
3
imports: [NgxDatatableModule,...]
4
})
5
export class AppModule(){}
Copied!

How to use

Simple table example.
More examples can be found in angular/src/app/tables/advance and angular/src/app/tables/simple pages
HTML
Typescript
1
<ngx-datatable
2
class='table table-hover'
3
[rows]="basic_table_data"
4
[columnMode]="'force'"
5
[headerHeight]="43"
6
[footerHeight]="50"
7
[rowHeight]="'auto'"
8
[limit]="5"
9
[selected]="selected"
10
[selectionType]="'checkbox'"
11
(activate)="onActivate($event)"
12
(select)='onSelect($event)'>
13
<ngx-datatable-column [width]="30" [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false" cellClass="d-flex align-items-center">
14
<ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected" let-selectFn="selectFn">
15
<button class="btn btn-link"><i class="pg pg-trash"></i>
16
</button>
17
</ng-template>
18
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row" let-value="value" let-isSelected="isSelected" let-onCheckboxChangeFn="onCheckboxChangeFn">
19
<div class="checkbox d-flex align-items-center">
20
<input type="checkbox" value="1" id="checkbox_1{{rowIndex}}" [checked]="isSelected" (change)="onCheckboxChangeFn($event)">
21
<label for="checkbox_1{{rowIndex}}"></label>
22
</div>
23
</ng-template>
24
</ngx-datatable-column>
25
<ngx-datatable-column name="Title" cellClass="d-flex align-items-center"></ngx-datatable-column>
26
<ngx-datatable-column name="Place" cellClass="d-flex align-items-center">
27
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
28
<a href="javascript:;" *ngFor="let value of row.places" class="btn btn-tag">{{value}}</a>
29
</ng-template>
30
</ngx-datatable-column>
31
<ngx-datatable-column name="Activities" cellClass="d-flex align-items-center"></ngx-datatable-column>
32
<ngx-datatable-column name="Status" cellClass="d-flex align-items-center"></ngx-datatable-column>
33
<ngx-datatable-column name="Last Update" cellClass="d-flex align-items-center"></ngx-datatable-column>
34
</ngx-datatable>
Copied!
1
import { Component, OnInit,ViewChild } from '@angular/core';
2
3
@Component({
4
selector: 'app-basic',
5
templateUrl: './basic.component.html',
6
styleUrls: ['./basic.component.scss']
7
})
8
export class BasicComponent implements OnInit {
9
10
basic_table_data;
11
12
constructor() {
13
this.fetch((data) => {
14
this.basic_table_data = data;
15
});
16
}
17
18
ngOnInit() {
19
}
20
21
fetch(cb) {
22
const req = new XMLHttpRequest();
23
req.open('GET', `assets/data/table.json`);
24
25
req.onload = () => {
26
cb(JSON.parse(req.response));
27
};
28
29
req.send();
30
}
31
32
}
33
Copied!
Copy link