ResourceList.Item Columns?

Solved
olivert
Explorer
51 11 15

Hi,

I've been trying to figure this one out but I can't find it in the documentation.

How do you get columns in your Resource List?

I know I can use a DataTable.

But i've seen the image below, which looks to be a resource list and it looks to be formatted.

for example the $100 at the end and the date.

 

33080758-dc30f54e-cea6-11e7-8700-268987015167.png

 

 Here is how i'm rendering my items in my list:

 

function renderItem(item) {
   const {id, title, productType} = item;
   const media = <Avatar customer size="medium" name={name} />;
   const badges = createBadges(item)
   return (
    <ResourceItem id={id} media={media} onClick={() => handleSelectItemChange(item)}>
     <h3>
        <TextStyle variation="strong">{title}</TextStyle>
     </h3>
<div>{productType}</div>
<Stack>
     {badges}
</Stack>
</ResourceItem>
);
}

0 Likes
hassain
Shopify Staff (Retired)
Shopify Staff (Retired)
623 104 148

Hey @olivert ,

 

Please correct me if I am incorrect here, but I believe the question/issue you are asking here is related to Shopify Polaris Components? (i.e. The React component library designed by Shopify to help developers quickly create the best experience for Shopify merchants)

 

If so, I think maybe asking in the GitHub project for Shopify Polaris-React may be the best place to get help or suggestions (or getting improved documentation made) for your question.

 

 

Hassain | Developer Support Specialist @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

This is an accepted solution.

Hi @olivert 

 

Polaris's ResourceList doesn't provide you a way to format the items. So you need to do this yourself.

I personally used CSS flexbox.

 

For example, if you want to show the badges towards the end of the row, you can do something like this.

Noticed that I grouped title and productType into another div.

 

         <ResourceItem id={id} media={media} onClick={() => handleSelectItemChange(item)}>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <h3>
                <TextStyle variation="strong">{title}</TextStyle>
              </h3>
              <div>{productType}</div>
            </div>
            <Stack>
              {badges}
            </Stack>
          </ResourceItem>
https://apps.shopify.com/adsimpli
olivert
Explorer
51 11 15
Thanks mate. Yes indeed ill have a go there next time
0 Likes
olivert
Explorer
51 11 15
Legend.
Thanks for this. I was hoping for a native solution but this works a dream.
It means another dependancy but thats ok
0 Likes
bryantabaird
New Member
2 0 0

Setting the distribution prop on Stack to be "fillEvenly" may also be helpful. See the docs here:

https://polaris.shopify.com/components/structure/stack

Something like this, for React:

<ResourceItem>
  <Stack distribution="fillEvenly>
    ....
  </Stack>
</ResourceItem>

 

 

0 Likes