Search and filter a Data Table in Polaris

Shopify Expert
5 0 1

We're moving our app over to Polaris. There are a significant number of reporting views that we need the ability to search and filter (like you would Products or Reports in the Shopify admin). I see that the Resource List has search/filters built-in. Is there any way for the Data Table to also use the same/similar components? If not, the Data Table component feels like it's missing a major feature. Searching and filtering data is a common use case. 

 

Note: I've read, in detail all the Polaris documentation, and have searched this forum for similar topics. 

 

@KarlOffenberger, you seem to know your stuff. Maybe you can help me out with this one. 

0 Likes
Highlighted
Shopify Partner
1838 174 624

Hi!

 

It's really just a vanilla UX and React decision to consider.

 

  • Resource lists list items. They do not represent tabular data in that they do not have columns. That also makes them inherently unsuitable for most reporting use cases IMO. If you look around Shopify UI you will also notice they are used for the main resource type lists i.e. products, orders, collections etc.
  • Data tables on the other hand are well suited for 2 dimensional data as is often found in reports. Shopify uses them for reports and in some extent (haven't checked if it is the same underlying component or still legacy) they use data tables for bulk editing resources.

So from a UX standpoint, data table for sure! It's also consistent in how Shopify UI uses these.

 

But as you noted, data table doesn't have filters and all that. Neither does Shopify's. They compose 'em using other Polaris components. For instance

 

uEyhqdE

 

To achieve above report UI takes a few lines of code. Check it out in this sandbox and the result here. Keep in mind, this is a demo hodgepodge but the main thing to see there is that if you were to keep your row data, column definitions etc. in React's context (or Redux, MobX whichever), you'd be doing the filtering in your reducers. It is also a quick mockup of a typical report you'd find in Shopify UI. The UI is just the mostly stateless dummy dispatching actions and redrawing on context changes so to speak. And that's also what Polaris encourage I'd believe.

 

Hope this helps clear up some of your questions. Happy coding!

I turn coffee in to code - since 1998
1 Like
Highlighted
Shopify Expert
5 0 1

Super helpful. Thanks for the detailed response. 

 

Orders and products in Shopify seem to use some sort of hybrid list. They are tables with sortable column headers. But they have filtering, batch actions, and saved search. That is ideally what I wish Polaris had. 

0 Likes
Highlighted
Shopify Partner
1838 174 624

Those are still legacy i.e. not Polaris. Haven't tried recreating one, but I think you could get pretty close using Polaris as is - it provides all the building blocks for it. The actual filtering (not the UI bits) itself isn't a Polaris concern.

I turn coffee in to code - since 1998
0 Likes