Hello guys!
I have trouble figuring out to create round edges on my newly created tables. I've been experimenting with all Style objects in the table properties, but it seems like one set of Style is not available. I wonder if anyone has any clues on how to round all edges on these objects? Please see attached image for reference.
The padding is required to prevent the header row spilling out over the radius and hiding it. You could probably avoid that by applying a radius to the header and footor or rows of your table.
Note that there is a separate props.rows.style section for styling that and others for header and footer where similar rules could be applied.
Best practice, as nearly always, is to define these in a Perspective Style class so that that class can be consistently applied across your application and a global edits made very simply when required.
As you noticed, if you apply the border-radius declaration to the Table's props.style property, you still won't get fully rounded edges.
The CSS class that you're looking for is
.table-container {
border-radius: 4px;
}
You would need to either "inject" this CSS, add it as a custom CSS file property (don't know why I said property), or as of v22, add a Style resource.
Here is an example of what this looks like:
Um, mine are rounder than yours. Can you elaborate?
I wasn't referring to how round they are. Here is a default table with no radius:
Here is a table with props.style.border-radius set to 10px:
You can clearly see that the rounding isn't working fully because of how the Table component is nested within containers. What I was suggesting was not to use the extra padding and just do what I posted above:
.table-container {
border-radius: 10px;
}
Not a huge deal, but if you have OCD like I probably do, little details like this keep me up at night 
This is good to know 
Appreciate it! Now its no longer a table only my mother could love 
You can do this without modifying any back-end styles.
Add "overflow:hidden" and it will crop the table to the outer dimensions.
I would actually do this in a style class but didn't in this example. I used the wizard so it created a property for each corner. I just clicked the checkbox for "all corners" and it made all these properties.
I merged 2 screenshots together so you could see the style properties I used and what it looks like without the designer's object selector handles.
