Join the Webstudio community

Updated 2 months ago

Add Radix Semantic table element to the Radix components

At a glance

The post provides information about the Radix table element, and the comments discuss the need for an HTML table component in WebStudio. Community members suggest that creating a responsive div-based table can be a viable alternative to using a Radix table component, and some argue that it may not be worth adding a table component if the div-based solution works well. There is also discussion around the differences between tables and div-based solutions, including considerations around accessibility, SEO, and built-in table behaviors. The community members indicate that an HTML table component is still in the works, but it has not been implemented yet.

Useful resources
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