An extension for advanced filtering that is primarily designed for the data-table library (ng2-pack).

Team Members

Launch Site

A filtering extension (library)

An extension for advanced filtering that is primarily designed for the data-table library "ng2-pack".

V800 table extensions

Description

The project provides components for an easy creation of advanced filtering. After the Angular Attack, the components will become an extension (library) for ng2-pack. Our goal is to get the feedback by creating a demo application.
The main challenge was the design of the filtering for complex column types (an array and an object) that are created by the data table library. For example, we were considering whether filtering on a study (sub-rows) should limit the number of sub-rows for a person (row). We decided to abandon that approach to keep the context of other sub-rows. A secondary goal of this Angular project was to demonstrate how easy it is to create an extension for the table library.

Instructions

The demo app displays a table with sample data. You can look for information in any column by typing into the input box above the table. Typing changes the displayed rows to match the typed conditions. If you are looking for an information in a specific column, then you can toggle an advanced search with the show link. You can specify an operator (OR/AND) for joining the filters. In other words, whether the results should match all filters or it is enough to match only one of them. Notice that some columns can contain a sub-columns that have a separate filtering input. Again only the corresponding rows are displayed.

Built With

Angular 4. The table is rendered by the table library. We use Bootstrap 4 to style the demo app a bit.

Feedback / Ratings (5)

All Feedback