/ionic-angular-datatable

:clipboard: Ionic app to show json data table, using Swimlane npm module 'ngx-datatable'.

Primary LanguageTypeScriptMIT LicenseMIT

⚡ Ionic Angular Data Table

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

📄 Table of contents

📚 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.

📷 Screenshots

screenshot screenshot

📶 Technologies

💾 Setup

  • Run npm i to install dependencies
  • To start the server on localhost://8100 type: 'ionic serve'

💻 Code Examples

  • home.page.html template to specify data table format.
  <ngx-datatable
  [rows]="companies"
  [ngClass]="tableStyle"
  [rowHeight]="'auto'"
  [headerHeight]="50"
  [columnMode]="'force'"
  [rowClass]="getRowClass.bind(this)">

  <ngx-datatable-column name="Name"></ngx-datatable-column>
  <ngx-datatable-column name="Gender"></ngx-datatable-column>
  <ngx-datatable-column name="Company"></ngx-datatable-column>

  <ngx-datatable-column name="Actions" [sortable]="false">
    <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
      <ion-button size="small" fill="outline" (click)="open(row)">Details</ion-button>
    </ng-template>
  </ngx-datatable-column>
  </ngx-datatable>

🆒 Features

  • User can easily switch between dark to light themes
  • row class can be switched by user to highlight features in table

📋 Status & To-do list

  • Status: Working
  • To-do: Nothing

👏 Inspiration

📁 License

  • This project is licensed under the terms of the MIT license.

✉️ Contact