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