Create a table using boxes and html

Can I creat a table using boxes and html? .. can we pls allow Box to be set as table, thead, tbody, th, tr and td pls

22 comments

I agree. We really need to either add a table component or a custom element component that allows to use any tag.

For now you can achieve the same UI with flex or with grid (with advanced panel)

But I am awarae there are SEO reasons to use actual table element

Pls ... custom element with complete flexibility ... gives all the flexibility for eccentrics like me 😛 ..
kindly push .. that or just add those options to Box

we will most likely have both, a Table component could come with a nice UI for building those tables faster

Possible to add options to Box and deploy? I need it a bit urgently if its ok

webflow didn't have it for like 8 years of its existance lol, whats your use case exactly?

I just want to create table with styling with some standard ready css and javascript ... dont want to do it thru the settings etc

if its purely for visual table you can create a table with flex box

yeah .. need the markup too ... hacking it thru js now

Hey Santosh if it’s just a temporary thing, wouldn’t it work to just use HTML Embed? You could add the markup and customise using classes or style. Not ideal but good enough for now.

why is it not just a few boxes in your case? why does it need to be a hack?

yep .. i usually do this .. i just need to create table rows inside a collection resource .. hence this hack. i need the table markup since the css is ready and i dont quite know css stuff quite well 🙂

Ah ok that makes sense. If you need any help feel free to DM me. But since you can’t use it in a collection, I guess one workaround you can do is use JS to dynamically render the tables. It’s not the best way but it will mean less repetition. So like
use HTML Embed, paste your collection data in a script, then loop through the data and output a table using either template literals or a combo of document.createElement.

@Santosh so the story is you already have a css that you want to use with it as an html embed?

I have both the HTML and CSS for a table. I am just replicating it using Webstudio and generating the rows inside a collection resource ... It should work fine soon.

Just with a flexible custom element ... I dont need all these hacks for swapping divs with the table markup.

Its server side anyway ... so it show be ok

done @Oleg Isonen .. first cut 🙂

Attachment

My collection data is dynamic ... your idea would work great if I could set data to JSON.stringify(Collection Item) and the create the markup

For some reason, I cannot do this in HTML Embed.

<script>
var data = JSON.stringify(${$ws$dataSource$Y__DASH__C0ziR0IhalgUsLNclqW});
</script>

Any suggest on this @Oleg Isonen ... JSON.stringify of Collection Item possible anyway?

Hey couldn't you move the Collection call into the script itself? Under the hood the Collection is just an easy way to fetch data so couldn't you move that logic into script like:

Plain Text

var data = fetch("https://example.com", {
  headers: {
    Authorization: "TOKEN"
  }
}).then(r => //use the response)

But tokens would be exposed here no? Collection allows to maintain secret tokens ... atleast i understood that way

Yes you're right there the tokens would be exposed. I'll wait for a member of the team to chime in then. Afraid I can't be of any more help 😔.