# Space-lua flexbox columns
**URL:** https://community.silverbullet.md/t/space-lua-flexbox-columns/2017
**Category:** Lua
**Created:** [March 21, 2025, 2:08pm UTC](https://community.silverbullet.md/t/space-lua-flexbox-columns/2017 "2025-03-21T14:08:59Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@anthillsocial](https://community.silverbullet.md/u/anthillsocial)
#### Post date: [March 21, 2025, 2:08pm UTC](https://community.silverbullet.md/t/space-lua-flexbox-columns/2017/1 "2025-03-21T14:08:59Z")
I’m interested in developing multi-column layouts, inspired by Notions use of columns. I’ve created an initial widget which displays columns of content based on CSS flexbox, which is really intuitive. Though it got me thinking.
1. Is there a neater way to implement this when incorporating sizable amounts of content in columns?
2. How might I pass a reference to a page and render its content in a column?
3. How could I render a flexbox layout of pages as an alternative to the standard HTML table? (any advice/examples appreciated here).
4. I stumbled across the contenteditable attribute which got me thinking it would be interesting to implement a Notion-style database (direct editing of columns) where each cell is a page of content - click to edit/create. Again, any advice/examples/pointers appreciated here.
Existing widget below.
````auto
```space-style
.row {display: flex;flex-direction: row;flex-wrap: wrap;width: 100%;}
.column {display: flex;flex-direction: column;flex-basis: 100%;flex: 1;}
```
```space-lua
function columns(cols)
-- Create the flexbox layout
for i,v in ipairs(cols) do
cols[i] = ''..v ..'
';
end
thehtml = ''..table.concat(cols)..'
'
---Build the widget
return widget.new {
html=thehtml;
display="block";
cssClasses={"my-cols"},
events={
click=function()
editor.flashNotification("You column clicked: " .. text)
end
}
}
end
```
````
**Inline widget**
`${columns({"First", "Second", "Third"})}`
**Displays as**
**Edit by @zef** : Going to help you a bit with formatting here.
---
### Author:  [@zef](https://community.silverbullet.md/u/zef)
#### Post date: [March 21, 2025, 3:22pm UTC](https://community.silverbullet.md/t/space-lua-flexbox-columns/2017/2 "2025-03-21T15:22:16Z")
Thank you for experimenting with this. I don’t have answers to everything, but a few things:
1. you can pass in a page reference as a string (and since strings in Lua can be encoded with `[[page name]]` this actually looks quite natural), and read its content with `space.readPage(pageName)`
Another observation is that likely we’ll need to add an abstraction to make rendering “safe” HTML easier from Lua. String concatenation is not going to cut it, because e.g. putting a “\<” in one of these arguments is going to break the whole thing.
Perhaps we can have an API like (pseudo code):
```lua
h.div {
class="row",
"Body content"
}
```
That would render to `Body content
` but would do proper HTML entity encoding etc. This is where Lua’s meta tables can be leveraged nicely (like a metatable on `h`, using `__index` so that we don’t have to predefine all HTML elements in existence).
---
### Author:  [@anthillsocial](https://community.silverbullet.md/u/anthillsocial)
#### Post date: [March 25, 2025, 9:22am UTC](https://community.silverbullet.md/t/space-lua-flexbox-columns/2017/3 "2025-03-25T09:22:18Z")
Thanks Zef,
Re: page reference as a string
That’s great to know.
RE: API
The pseudo code looks pretty intuitive, though I wonder if innerHTML (drawing from DOM terminology) would better communicate what’s going on under the hood.
```auto
h.div {
class="row",
innerHTML = "Body content"
}
```
I’ll keep playing!
Out of interest, where is the code which generates the HTML table output defined, in something like this:
```template
{{{page select name, tags }}}
```
---
### Author:  [@zef](https://community.silverbullet.md/u/zef)
#### Post date: [March 25, 2025, 1:05pm UTC](https://community.silverbullet.md/t/space-lua-flexbox-columns/2017/4 "2025-03-25T13:05:40Z")
> [@anthillsocial](#):
>
> Out of interest, where is the code which generates the HTML table output defined, in something like this:
>