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

Last updated