ResourceList.Item Columns?

Solved
Tourist
3 0 0

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
Highlighted
Shopify Staff
Shopify Staff
265 42 46

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 

1 Like
Highlighted

Success.

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
1 Like
Highlighted
Tourist
3 0 0
Thanks mate. Yes indeed ill have a go there next time
0 Likes
Highlighted
Tourist
3 0 0
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