Search/filter function

[hackily]

Hey there! Great work on this component!

Do you think you could create a search/filter component for the table as well?
I have a use case where px-data-table would be overkill, but there would be too many rows to fit onto the screen without scrolling if I'm using px-table-view.

I'm envisioning a component with properties that you can enable to search the title, body, and/or the labels.

Thanks!

[mdwragg]

Hi, thanks very much!

That component does sound useful. Do you have a sketch that explains what you're thinking?

Thanks.

[mdwragg]

(I should also say, the thanks should be directed at @jonniespratley - all his fine work :-)

[hackily]

Sure! I'm aiming for something that may look like this.

While that snapshot is more aimed towards mobile, I think a search field taking up the entire row wouldn't look altogether terrible for a full desktop sized screen either, like so

My thought is that by default, filtering would work for all the text fields - Title, subtitle, body, label1 and label2.

However, if the developer wants the user to only be able to search through a subset of the text fields, they would be able to include parameters like so: <px-table-filter filter-by="{"title","body"}">, where filter-by would take an object containing strings matching the text fields of the table rows.

[jonniespratley]

Hi @unkani,

If you want to perform various list functions I would suggest using the great iron-list component with the px-table-view component. This component is not intended to do the heavy lifting of filtering and such, this component is more or less the aesthetics with some nice utilities.

For some heavy lifting list rendering/sorting/filtering, etc. I would implement iron-list for the logic, and px-table-view for the visual. Take a look at this bare bones example using iron list.

iron list example

If this is no help, pull requests are always welcome ;).