|
| 1 | +# Ionic Angular Data Table |
| 2 | + |
| 3 | +App to show json data table, using [swimlane npm module 'ngx-datatable'](https://github.com/swimlane/ngx-datatable) and the [Ionic 5 framework](https://ionicframework.com/docs). This is another great Ionic Quick Win from [Simon Grimm IonicAcademy Youtube video 'Creating Ionic Datatable With ngx-datatable'](https://www.youtube.com/watch?v=Ji52_xdxkDg). |
| 4 | + |
| 5 | +## Table of contents |
| 6 | + |
| 7 | +* [General info](#general-info) |
| 8 | +* [Screenshots](#screenshots) |
| 9 | +* [Technologies](#technologies) |
| 10 | +* [Setup](#setup) |
| 11 | +* [Features](#features) |
| 12 | +* [Status](#status) |
| 13 | +* [Inspiration](#inspiration) |
| 14 | +* [Contact](#contact) |
| 15 | + |
| 16 | +## General info |
| 17 | + |
| 18 | +json data is displayed in a table that is very quickly created using the ngx-datatable module. Buttons are added to hange from Material to Bootstrap styles and also from light to dark mode. Another button changes the classes of the rows so male and female employees are shown in different colours. |
| 19 | + |
| 20 | +## Screenshots |
| 21 | + |
| 22 | + |
| 23 | + |
| 24 | + |
| 25 | +## Technologies |
| 26 | + |
| 27 | +* [Ionic v5.14.0](https://ionicframework.com/) |
| 28 | +* [Ionic/angular v4.10.0](https://ionicframework.com/) |
| 29 | +* [Angular v8.2.8](https://angular.io/) |
| 30 | +* [swimlane npm module 'ngx-datatable' v16.0.2](http://swimlane.github.io/ngx-datatable/) |
| 31 | + |
| 32 | +## Setup |
| 33 | + |
| 34 | +* To start the server on _localhost://8100_ type: 'ionic serve' |
| 35 | +* The Ionic DevApp was installed on an Android device from the Google Play app store. |
| 36 | + |
| 37 | +## Code Examples |
| 38 | + |
| 39 | +* template to specify data table format. |
| 40 | + |
| 41 | +```html |
| 42 | + <ngx-datatable |
| 43 | + [rows]="companies" |
| 44 | + [ngClass]="tableStyle" |
| 45 | + [rowHeight]="'auto'" |
| 46 | + [headerHeight]="50" |
| 47 | + [columnMode]="'force'" |
| 48 | + [rowClass]="getRowClass.bind(this)"> |
| 49 | + |
| 50 | + <ngx-datatable-column name="Name"></ngx-datatable-column> |
| 51 | + <ngx-datatable-column name="Gender"></ngx-datatable-column> |
| 52 | + <ngx-datatable-column name="Company"></ngx-datatable-column> |
| 53 | + |
| 54 | + <ngx-datatable-column name="Actions" [sortable]="false"> |
| 55 | + <ng-template let-row="row" let-value="value" ngx-datatable-cell-template> |
| 56 | + <ion-button size="small" fill="outline" (click)="open(row)">Details</ion-button> |
| 57 | + </ng-template> |
| 58 | + </ngx-datatable-column> |
| 59 | + </ngx-datatable> |
| 60 | +``` |
| 61 | + |
| 62 | +## Features |
| 63 | + |
| 64 | +* Updated to latest ionic/angular versions. Dependencies updated and conflicts resolved (typescript must be v3.4.5 or it will not compile). |
| 65 | + |
| 66 | +## Status & To-do list |
| 67 | + |
| 68 | +* Status: Working. |
| 69 | + |
| 70 | +* To-do: incorporate into one of my apps - e.g. Github API data table or repos. |
| 71 | + |
| 72 | +## Inspiration |
| 73 | + |
| 74 | +[Simon Grimm IonicAcademy Youtube video 'Creating Ionic Datatable With ngx-datatable'](https://www.youtube.com/watch?v=Ji52_xdxkDg) |
| 75 | + |
| 76 | +## Contact |
| 77 | + |
| 78 | +Repo created by [ABateman](https://www.andrewbateman.org) - feel free to contact me! |
0 commit comments