Hi,
I want to create a widget that break a list of items to multiple columns dynamically. The following code list down index number of each item in a single column. and my intention is to put the items in 3 rows per columns and repeat that until the list is exhausted, e.g
0 3 6
1 4 7
2 5 8
component: oh-list-card
config:
mediaList: false
slots:
default:
- component: oh-repeater
config:
accordionList: true
fetchMetadata: stateDescription,semantics
filter: loop.item.groupNames.includes(props.groups)
for: item
fragement: true
sourceType: itemsInGroup
slots:
default:
- component: f7-row
config:
style:
align-items: start
background: none
margin: 0px
slots:
default:
- component: f7-row
config:
style:
background: none
margin: 0px
slots:
default:
- component: Label
config:
text: =loop.item_idx
JustinG
January 16, 2026, 3:32pm
2
Several possibilities depending what else you intend to do with this and how consistent your array is.
You can nest repeaters just like you can any scripting loop:
- component: f7-row
slots:
default:
- component: oh-repeater
config:
for: colNum
sourceType: range
rangeStart: 0
rangeStop: 2
fragment: true
slots:
default:
- component: f7-col
slots:
default:
- component: oh-repeater
config:
for: rowNum
sourceType: range
rangeStart: 0
rangeStop: 2
fragment: true
slots:
default:
- component: Label
config:
text: =3*loop.colNum + loop.rowNum
As another example, you could just put all your items into one div and let css make the columns for you:
- component: div
config:
style:
column-count: 3
slots:
default:
- component: oh-repeater
config:
for: itemNum
sourceType: range
rangeStart: 0
rangeStop: 8
fragment: true
slots:
default:
- component: Label
config:
text: =loop.itemNum
