Polaris-react: Improved resource list component

[dfmcphee]

The new resource will support selection, sorting, bulk actions, and an improved API.

This is a preview of what it will look like:

Large screen

Small screen

Related issues: #147, #65

[USvER]

Any updates?

[tim-phillips]

https://github.com/Shopify/polaris/issues/254#issuecomment-359893991

[USvER]

Thanks!

[Anveio]

That looks great. And are those icons for exceptions? I didn't even realize how much I wanted those until now! I think my users will appreciate a more powerful ResourceList component and I can't wait for the release. 😁

[ry5n]

This is getting close to final, and I’m happy to say documentation is now available for the new version.

We’d love to get additional input on APIs and features. Let us know in this thread.

[sdn90]

Will you guys be adding column headers or is that something the user will need to implement themselves?

Example from product page in Shopify admin:

[ry5n]

We’ve done our best to design resource lists so they can work well at all screen sizes. At some minimum width, content in columns is going to have to wrap and re-arrange. For this reason we opted to not include column headers at all.

Most of the indexes in the Shopify admin today are still using our older table-based approach, and we’ll be converting these one at a time to use the new component.

Not having headers comes with some tradeoffs, but we think for indexes this is the right choice. To display data for analysis, there is a new DataTable component.

To learn more about creating list items to fit your content, check out the v2 docs: https://polaris-v2.shopify.com/components/lists/resource-list#study-custom-item

Let us know how that goes. We’re happy to help you with the specifics for your case.

[ry5n]

With the Polaris 2.0 release candidate now available, I’m happy to call the resource list component officially improved 🎉