Polaris-react: Data Table component

[tim-phillips]

I cannot find the Table component in the Polaris component library, even though it is used under the Components tab in Sketch.UI.Kit/Web UI Kit 1.7.0.sketch. Am I missing something?

[chaddjohnson]

I ended up importing styling from Uptown CSS (with some modifications) and using normal table markup for now until Shopify implements this in Polaris.

[Cam]

Isn't this essentially ResourceList with some minor additions?

[tim-phillips]

Coming back to this, I also can't find what is called Order Index:

This would be a useful component to allow filtering a list of things, otherwise I'm just putting tabs on top of a dropdown button next to an input on top of some headers above a resource list with checkboxes and then developing my own filtering and pagination.

[chloerice]

Hey @babenzele! We are currently finishing up a nice enhancement to the ResourceList component, but for your tabular data needs you are correct that a true table is missing from Polaris. Right now we're getting started with extracting the best parts of the different table implementations we are using under the hood across the Shopify admin. The forthcoming DataTable component will be available in the next major Polaris release. I'll keep you posted!

[tim-phillips]

Thanks @chloerice! Looking forward to that release.

[superwhykz]

hi @chloerice do you have ETA when 2.0 will be released? I am looking forward for that component.

[Cam]

Basic table support exists in the current version hosted on the CDN. You can use them right now by creating a table inside a <div class="table-wrapper"> wrapper.

[superwhykz]

@cam thanks! i will give a try to wrap my table.

[sbstnmsch]

@Cam you don't mean the current 1.10.1 version? There is no .table-wrapper class in, neither in 2.0.0-beta.4

[Cam]

@sbstnmsch Yeah, you're 100% right. Sorry @superwhykz. I was using an additional resource I had totally forgotten about 🤭

[sbstnmsch]

@Cam fair enough. Could u point us to it? ;-)

[tim-phillips]

Some info from Shopify regarding v2 beta: https://github.com/Shopify/polaris/issues/254#issuecomment-359893991

[dfmcphee]

The DataTable component is now included in v2.0.0-beta.10. You can find the documentation on our beta version of the style guide here: https://polaris-v2.shopify.com/components/lists/data-table#navigation

[sbstnmsch]

@dfmcphee we love you all! 👍

[tim-phillips]

ResourceList is the one.

https://polaris-v2.shopify.com/components/lists/resource-list#navigation

[chaddjohnson]

@dfmcphee and @chloerice

Thank you for the DataTable component as well as the improved ResourceList component. Polaris is really fantastic, and people really love our app because you've given us the ability to make it look great. Your work is highly appreciated :)

Here is my feedback on these components.

A ResourceList combined with a DataTable would be fantastic. This is what Shopify has on its built-in Orders page (/admin/orders).

ResourceList looks nice, but honestly it doesn't feel very useful without the ability to show data in a tabular format.

DataTable also looks nice, and it's useful, but without filtering and searching, DataTable is a bit lacking.

[Arvind6353]

Hi Team , Any update on the above mentioned functionality ?

[chloerice]

Hey @arvind6353, adding column headers to the ResourceList isn't in our plans right now, but the Filters component has been separated from ResourceList so you can compose a filtering experience with DataTable now.