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.
Solved! Go to the solution
This is an accepted solution.
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.
Thank you for your reply.
I am brand new to frontend development, so I did not know there was an issue with tables om mobile phones - thanks for letting me know.
I have looked at Layout and Card, but I did not think about combining them. I will have a look at them again to see if I can figure out how to combine them e.g. to make a structure like a 5 x 5 table.
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!
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.