Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 80d0692

Browse files
tutorial code complete and working
1 parent e219aac commit 80d0692

File tree

7 files changed

+589
-11
lines changed

7 files changed

+589
-11
lines changed

‎src/app/home/home.module.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { IonicModule } from '@ionic/angular';
44
import { FormsModule } from '@angular/forms';
55
import { RouterModule } from '@angular/router';
66

7+
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
8+
79
import { HomePage } from './home.page';
810

911
@NgModule({
@@ -16,7 +18,8 @@ import { HomePage } from './home.page';
1618
path: '',
1719
component: HomePage
1820
}
19-
])
21+
]),
22+
NgxDatatableModule
2023
],
2124
declarations: [HomePage]
2225
})

‎src/app/home/home.page.html

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,43 @@
11
<ion-header>
2-
<ion-toolbar>
2+
<ion-toolbarcolor="dark">
33
<ion-title>
4-
Ionic Blank
4+
ngx-Table
55
</ion-title>
6+
7+
<ion-button slot="start">
8+
<ion-button (click)="switchStyle()">
9+
{{ tableStyle }}
10+
</ion-button>
11+
</ion-button>
12+
13+
<ion-button slot="end">
14+
<ion-button (click)="customRowClass = !customRowClass">
15+
<ion-icon name="bulb" slot="icon-only"></ion-icon>
16+
</ion-button>
17+
</ion-button>
18+
619
</ion-toolbar>
720
</ion-header>
821

922
<ion-content>
10-
<div class="ion-padding">
11-
The world is your oyster.
12-
<p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
13-
</div>
23+
24+
<ngx-datatable
25+
[rows]="companies"
26+
[ngClass]="tableStyle"
27+
[rowHeight]="'auto'"
28+
[headerHeight]="50"
29+
[columnMode]="'force'"
30+
[rowClass]="getRowClass.bind(this)">
31+
32+
<ngx-datatable-column name="Name"></ngx-datatable-column>
33+
<ngx-datatable-column name="Gender"></ngx-datatable-column>
34+
<ngx-datatable-column name="Company"></ngx-datatable-column>
35+
36+
<ngx-datatable-column name="Actions" [sortable]="false">
37+
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
38+
<ion-button size="small" fill="outline" (click)="open(row)">Details</ion-button>
39+
</ng-template>
40+
</ngx-datatable-column>
41+
42+
</ngx-datatable>
1443
</ion-content>

‎src/app/home/home.page.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-

‎src/app/home/home.page.ts

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,44 @@
11
import { Component } from '@angular/core';
22

3+
import data from '../../assets/company.json';
4+
35
@Component({
46
selector: 'app-home',
57
templateUrl: 'home.page.html',
68
styleUrls: ['home.page.scss'],
79
})
810
export class HomePage {
11+
public companies = data;
12+
tableStyle = 'bootstrap';
13+
customRowClass = false;
14+
15+
constructor() {
16+
console.log(this.companies);
17+
}
18+
19+
switchStyle() {
20+
if (this.tableStyle === 'dark') {
21+
this.tableStyle = 'bootstrap';
22+
} else {
23+
this.tableStyle = 'dark';
24+
}
25+
}
26+
27+
getRowClass(row) {
28+
console.log('class: ', row);
29+
const isMale = row.gender === 'male';
30+
31+
if (!this.customRowClass) {
32+
return {};
33+
}
34+
return {
35+
'male-row': isMale,
36+
'female-row': !isMale
37+
};
38+
}
939

10-
constructor() {}
40+
async open(row) {
41+
console.log(row);
42+
}
1143

1244
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /