Polaris component for structuring elements - including other components - in table

Solved
Highlighted
Shopify Partner
30 0 1

Hi,

 

I am creating an app where the user needs to configure various options.

In several of the configuration pages I need to show a list of elements where the user needs to make a choice for each of the elements, e.g. by selecting between different options.

I have looked at the react polaris component Data table, but the content of each cell must be either 'text' or 'number'.

I have looked at the react polaris component Stack, but elements are not aligned vertically.

So I am thinking I need to create my own component using <table> with nested components - but if there is a polaris component I would rather use that.

 

Thanks,

-Louise

0 Likes

Success.

Shopify Partner
1843 172 544

Hello Louise,

 

Have you considered the Layout and Card components? Together, you can achieve a lot with the two while remaining in-line with Shopify app experience guidelines. The main issue with table based layout would be on devices such as mobile.

 

Best wishes!

I turn coffee in to code - since 1998
0 Likes
Shopify Partner
30 0 1

Hi 

 

 

0 Likes
Shopify Partner
1843 172 544

Sure, no problem and hope you enjoy the frontend side of development.

 

You mention you'd like a 5x5 layout - that would not work with the Layout component from Polaris because it only offers up to 3 wide. Of course, you could nest those too if that isn't an issue for your app, but I'd consider once more - why 5 columns?

 

When developing UI simply do not think like a developer i.e. I need 5 columns but XYZ only supports 3 so I will make an ABC that can have up to 10 columns and everyone is happy! The user may not be happy seeing those 10 columns on their tablet device. Another user on a 30" screen may still not be happy because even though they see all 10 columns and 15 rows, it is just too much information and they're lost.

 

Either way, just a few of my opinions there. Best of luck to you!

I turn coffee in to code - since 1998
0 Likes
Shopify Partner
30 0 1

Yes thanks, surprisingly I am enjoying frontend development - I was not looking forward to moving away from my safe typed Java world to an untyped, or at least less typed world, but the stuff I have seen so far with React and Polaris is very neat.

 

Thanks for your advice about staying critical as to what is necessary to show, I will take it into consideration.

 

Thanks,

-Louise

0 Likes
Shopify Partner
1843 172 544

Polaris works a treat with TypeScript if you're after type safety. In fact, it is entirely written in TypeScript.

I turn coffee in to code - since 1998
0 Likes