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.
It's really just a vanilla UX and React decision to consider.
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
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!
|2 hours ago|
|4 hours ago|