Links

Angular Tables

In this angular template there are three types of tables:
  • Regular
  • Extended
  • Smart tables

Angular Regular Tables

  • This is a regular html table.
  • The data for our regular table example is in src/assets/data/regular_table.json and is consumed through the TableDataService.
  • Definition for the table columns is in src/app/tables/services/table-data.service.ts

Angular Extended Tables

  • This is an html table with more complex columns.
  • The data for our extended table example is in src/assets/data/extended_table.json and is consumed through the TableDataService.
  • Definition for the table columns is in src/app/tables/services/table-data.service.ts

Angular Smart Tables

  • This is a smart table build with ng2-smart-table library. Documentation is in: https://akveo.github.io/ng2-smart-table/#/documentation
  • The data for our smart table example is in src/assets/data/smart_table.json and is consumed through the TableDataService.
  • Definition for the table columns is in src/app/tables/services/table-data.service.ts
  • We created two different tables so you can use the one that fits you better for your needs: with custom filters and with local and simple filters.
  • Configurations for the smart tables are in src/app/tables/pages/smart/smart-tables.component.ts

Custom Filters

This table has the following features:
  • Pagination and Results per page
  • Order by column
  • Search by all columns (you can define which columns are included in this search)
  • Search by range
  • Search by interests/tags (we use Material Chips for these tags)
  • Search by date (we use Material Datepicker)
  • Edit, Delete, Add new cell

Local Filters

This table has the following features:
  • Pagination
  • Order by column
  • Search by each columns
  • A column with a dropdown to filter by values
  • Edit, Delete, Add new cell