Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andrewjbateman/ionic-angular-datatable
:clipboard: Ionic app to show json data table, using Swimlane npm module 'ngx-datatable'.
https://github.com/andrewjbateman/ionic-angular-datatable
angular angular15 data-table html5 ionic ionic6 ngx-datatable scss-styles swimlane typescript4
Last synced: 6 days ago
JSON representation
:clipboard: Ionic app to show json data table, using Swimlane npm module 'ngx-datatable'.
- Host: GitHub
- URL: https://github.com/andrewjbateman/ionic-angular-datatable
- Owner: AndrewJBateman
- License: mit
- Created: 2019-09-29T20:36:10.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-03T05:01:01.000Z (almost 2 years ago)
- Last Synced: 2023-03-02T09:37:16.983Z (over 1 year ago)
- Topics: angular, angular15, data-table, html5, ionic, ionic6, ngx-datatable, scss-styles, swimlane, typescript4
- Language: TypeScript
- Homepage:
- Size: 1.59 MB
- Stars: 5
- Watchers: 1
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# :zap: Ionic Angular Data Table
* App to show json data table, using [Swimlane npm module 'ngx-datatable'](https://github.com/swimlane/ngx-datatable) and the [Ionic framework](https://ionicframework.com/docs).
* This is another great Ionic Quick Win from [Simon Grimm at the IonicAcademy'](https://www.youtube.com/channel/UCZZPgUIorPao48a1tBYSDgg) - see [:clap: Inspiration](#clap-inspiration) below.
* **Note:** to open web links in a new window use: _ctrl+click on link_
## :page_facing_up: Table of contents
* [:zap: Ionic Angular Data Table](#zap-ionic-angular-data-table)
* [:page_facing_up: Table of contents](#page_facing_up-table-of-contents)
* [:books: General info](#books-general-info)
* [:camera: Screenshots](#camera-screenshots)
* [:signal_strength: Technologies](#signal_strength-technologies)
* [:floppy_disk: Setup](#floppy_disk-setup)
* [:computer: Code Examples](#computer-code-examples)
* [:cool: Features](#cool-features)
* [:clipboard: Status & To-do list](#clipboard-status--to-do-list)
* [:clap: Inspiration](#clap-inspiration)
* [:file_folder: License](#file_folder-license)
* [:envelope: Contact](#envelope-contact)
## :books: General info
* JSON data is displayed in a table that is very quickly created using the ngx-datatable module. Buttons are added to change 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.
## :camera: Screenshots
## :signal_strength: Technologies
* [Ionic v6](https://ionicframework.com/)
* [Ionic/angular v6](https://ionicframework.com/)
* [Angular v15](https://angular.io/)
* [swimlane npm module 'ngx-datatable' v20](http://swimlane.github.io/ngx-datatable/)
## :floppy_disk: Setup
* Run `npm i` to install dependencies
* To start the server on _localhost://8100_ type: 'ionic serve'
## :computer: Code Examples
* `home.page.html` template to specify data table format.
```html
Details
```
## :cool: Features
* User can easily switch between dark to light themes
* row class can be switched by user to highlight features in table
## :clipboard: Status & To-do list
* Status: Working
* To-do: Nothing
## :clap: Inspiration
* [Simon Grimm IonicAcademy Youtube video 'Creating Ionic Datatable With ngx-datatable'](https://www.youtube.com/watch?v=Ji52_xdxkDg)
* [ngx-datatable documentation](https://swimlane.gitbook.io/ngx-datatable/)
## :file_folder: License
* This project is licensed under the terms of the MIT license.
## :envelope: Contact
* Repo created by [ABateman](https://github.com/AndrewJBateman), email: [email protected]