Add filtering capability to paper-datatable about paper-datatable HOT 16 CLOSED

Wait, this makes very little sense to my ears 😇 Let me start at the beginning, this is purely about <paper-datatable>, not about <paper-datatable-card>, right? So in that case what you're asking is a filter attribute like on dom-repeat right? In case you still need to specify the function you wish to filter by yourself. Does that sound reasonable?

from paper-datatable.

Perhaps I need to look further into <paper-datatable-card>. I'm looking for a simple, out-of-the-box implementation of what datatables.net does with search(). The docs do have a similar example for dom-repeat, but you need to specify all the columns to be searched. If <paper-datatable-column> had something like a filterable attribute then, theoretically at least, you should be able to create the filter function dynamically.

from paper-datatable.

The big difference is that the demo you link is loading all data client side which looks okay with not too much data but is super crappy with a lot. Now, search only becomes logical with a lot of data, so you end up with a natural contradiction which argues against having complex default filtering on the client side. (Not to say a filter attribute wouldn't be useful though, but you wouldn't use that for searching)

from paper-datatable.

Perhaps "search" was a poor terminology in their part. I think that a filter would have the same utility as the sort that is already part of the component.

from paper-datatable.

+1 for this feature. I have a lot of use cases that need filtering. A simple use-case is filtering to show only selected items, or showing all rows that have a specific property.

Polymer already supports both filtering and sorting so I hope it's not too time consuming? https://www.polymer-project.org/1.0/docs/devguide/templates.html#filtering-and-sorting-lists

from paper-datatable.

I did this before when I tried to implement a paper-datatable a month ago. I'm not familiar enough with your codebase to pull request but below is my code, hope it helps :)

Front-end looks something like this: the first row is header, clicking on it = sorting like you did. Second row is for filtering. User can enter a String or a RegEx to filter data on that column.

Whenever user inputs a filter (and then press enter), the data passes through 3 functions.

1. A function that iterates through all existing filters: https://gist.github.com/NamTThai/0552dc176d95f2d32bc9
2. A function to check for special filter. Special filters are pre-defined and have a dropdown like in the picture below.
   https://gist.github.com/NamTThai/9360bb9a7cea932814cc
   
3. A final function that uses RegEx for filtering: https://gist.github.com/NamTThai/316aaa07fd8a4ecb16f7

Very simple :3

from paper-datatable.

@NamTThai Well, the thing to realize here is that in general you should not keep your data on the client side, so although I do plan to implement a filter attribute similar to the one on dom-repeat this is an attribute you SHOULD NOT USE most of the time. The filtering is something you should do on the server side which is already supported.

from paper-datatable.

@moderndeveloperllc Yeah, as I explained above the automatic sorting is only available for very small datasets which fit on one page/screen. Filtering does not make sense for such short lists... So there is a huge difference between the two use cases.

from paper-datatable.

@David-Mulder hold on what you said doesn't really make sense to me. This is DATA table. We ARE keeping DATA on the client side. Sorting and filtering usually go together in datasheets; does it make sense to say "the sorting is something you should do on the server side which is already supported"?

from paper-datatable.

@NamTThai Okay, let's first get terminology out of the way:

• Data table: a generic term referring to tables showing data
• Datasheet: 'a document that summarizes the performance and other technical characteristics of a product, machine, component'

Then let's get to use cases for data tables:

1. You have a fixed number of records. For example performance of certain factors over the last 6 weeks where every week is a record. All this data should be shown at the same time and can thus be safely stored in memory at the same time. Search-like functionality makes no sense here, although filtering might sometimes make sense. This is what <paper-datatable> is for.
2. You have a dynamic number of records stored in some kind of database (whether that db is on the client side or server side). The number of records might exceed what you want to keep in memory at once and thus pagination is the solution here. In this case search and sorting are incredibly important. This is what <paper-datatable-card> is for (which of course uses <paper-datatable> internally to show a single set of in-memory rows). In this case both sorting and filtering can only be done realistically on the db-side (wherever that db may sit).

So, I am going to add a barebone filter attribute to the <paper-datatable> as there are probably rare situations where you wish to filter a small fixed number of records, but in general it shouldn't be used. (And I might add a search option to one of the <paper-datatable-card> demos just to make it clear how to implement such a thing)

from paper-datatable.

So, demo/complex-paper-datatable-card.html shows a simple demo of how you can set up search. And demo/filter.html shows you can use filtering (though it can be a bit confusing till #55 gets fixed).

from paper-datatable.

@David-Mulder Wow, thanks!

from paper-datatable.

@David-Mulder awesome tks!

from paper-datatable.

@David-Mulder Quick question, how do I get row item by key? When I listen to cell-tap, event detail has a key for that cell.

{
 "key": "#4",
 "target": "...",
 "originalEvent": "..."
}

from paper-datatable.

@David-Mulder found it. would be great if _getByKey() becomes public

from paper-datatable.

@NamTThai: In next push item will be exposed as well. My bad, in principle direct access to items should always be available, but I expose the polymer keys directly as well 'just in case' as I am using them a lot.

from paper-datatable.