Formatting tables in app studio

meerens
meerens Member
in App Studio

One of my fav features is the ability to create different styles for tables. What I'm really struggling with is having the table fit the width of the card and have the text wrap when you resize. I made it work but can't figure out how I did it. Anyone have any experience with using tables in the App Studio? Please send help!

screenshot1.png screenshot2.png
Tagged:

Answers

  • vtiwari
    vtiwari Domo Employee

    Hi,

    I understand how important it is to have your table fit the width of the card and ensure text wrapping works seamlessly, especially when resizing. Domo's App Studio provides several tools and features that can help you achieve this responsive design. Ensuring Table Fits Card Width

    To make your table automatically adjust to the card's width:

    1. Use Relative Layouts: Ensure your card's layout is set to be responsive. This allows the table to adjust its width dynamically as the card resizes.
    2. Set Table Width to 100%: In the table's styling options, set the width to 100%. This ensures the table expands to fill the available space within the card. Enabling Text Wrapping

    To make sure text wraps appropriately within table cells:

    1. Enable Text Wrapping: In the table's style settings, look for the option to enable text wrapping. This will ensure that longer text within cells wraps to the next line instead of overflowing.
    2. Adjust Column Widths: If certain columns contain longer text, consider adjusting their widths to accommodate the content without excessive wrapping.

    Additional Tips

    • Use Spacer Components: In App Studio, you can use spacer components to adjust the spacing around your table, ensuring it aligns well within the card.
    • Preview Responsiveness: Regularly preview your app in different screen sizes to ensure the table behaves as expected across devices.

    Thanks!

Categories