Sample Screen for React Spectrum

Question

Does anybody have some help on how to create the following UI items within a Firefly app?

Screen with tiles, similar to the Experience Cloud overview screen (as a welcome screen for my app where user can jump to other screens of the app
table to display data, eg. from a data fetch or from storage, really simple table with header row and some rows with data, something like this

Thanks in advance for any hints on this topic.

duynguyen_adobe · Accepted Answer

Hi @urs_boller ,1. For app layout, you could leverage the Flex and Grid components in React Spectrum.https://react-spectrum.adobe.com/react-spectrum/layout.htmlhttps://react-spectrum.adobe.com/react-spectrum/Flex.htmlhttps://react-spectrum.adobe.com/react-spectrum/Grid.htmlIn your case, Flex would be more suitable.2. For table data, you could use the Table component. Currently it is in alpha release, but you are welcomed to try it out. Please let us know if you have any issue.https://react-spectrum.adobe.com/releases/2020-08-18.html#released-packagesSample code: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/table/stories/Table.stories.tsx

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded