Components: DataTable - Update Example with multiple features included

Created on 18 Jul 2017 · 9Comments · Source: angular/components

The sample example for DataTable should include ways to use both sorting and filter feature, or documentation on how to add more than one feature in md-table. The implementation of this process is not very straightforward.

has pr

Source

fad250

Most helpful comment

Here's an example of a table that includes pagination, sorting, filtering, and selection.

https://plnkr.co/edit/EU3BBlViWpPf2NJW4PXx?p=preview

The code is actually already in the repo as table-overview-example but we have yet to include it into the docs site due to some theming issues. Will leave this issue up until we do so.

andrewseguin on 18 Jul 2017

👍6 ❤2

All 9 comments

For the case of sorting + filter, what do you find makes it difficult to combine them?

Building the template
Triggering changes
Sorting and filtering the data simultaneously

willshowell on 18 Jul 2017

The issue I am facing is when I am triggering changes, I am only getting results for one feature.

fad250 on 18 Jul 2017

All that really matters is that in connect(), you must make sure that your return Observable is correctly mapping trigger events to the right results.

In the sorting example, you map the observable to a sorted array of _exampleDatabase.data
In the filtering example, you map the observable to a filtered array of _exampleDatabase.data

So really all you need to do is take your data, sort it, and filter it (or filter and then sort).

return Observable.merge(...displayDataChanges).map(() => {

  return this.getSortedData()
    .filter((item: UserData) => {
      let searchStr = (item.name + item.color).toLowerCase();
      return searchStr.indexOf(this.filter.toLowerCase()) != -1;
    });

});