Join the Webstudio community

Updated 3 weeks ago

Add Radix Semantic table element to the Radix components

Here is more info about the Radix table element: https://www.radix-ui.com/themes/docs/components/table
1
J
O
L
13 comments
@Luis, I agree, more radix components and themes would be cool, but you don't need them to make tables.

Making a responsive div table (fully accessible) isn't too difficult in Webstudio, without needed a component. Here's an example (I did no styling, so it looks basic).
Attachment
CleanShot_2024-05-08_at_23.13.212x.png
You are looking at radix themes, not radix primitives, themes were introduced later, they are just theme/styles on top of the primitives, there is no table in primitives, because it has no logic. We will not be introducing radix table at all, but we do need the html table component.
After implementing @Jeremy workaround, is it even worth adding an HTML table component? Jeremy's solution works perfectly and isn't difficult to do. Honestly a 10-minute video tutorial on how to do that table, post it on WebStudio YouTube, and call it a day πŸ˜† .
Well table is a a bit different
There is one thing I found while doing the table. Not sure if is a bug. Here is a video to replicate
there is actual table, what jeremy did is a flex-based div
That's correct, it's divs. I added roles to the appropriate divs to make it semantic for accessibility.
tables have a bit more of backed in behavior, I think there will be a difference and table has probably more weight in SEO
not sure if seo reads accessibility attributes
I heard webflow people screamed for a long time until last year webflow added tables
anyways, we will have them soon enough
is the html table component still in the works?
unfortunately haven't even started making it as a component, it works by using advanced section and setting: display: table, which is kinda the same but harder to use
Add a reply
Sign up and join the conversation on Discord