Multi-column list group

[bsystems]

Hello
I’ve spent the day piecing together from different tutorials, to no avail.

I’m trying to create a 3 column List group (bootstrap), with data populated from a single db query.
Each column will display a number of results based on the total number of results / 3

Database connection is setup and working. Server connect setup and working.
I can create a bootstrap table and output the data. No dramas there at all. (tutorials stop at this point)

I can’t for the life of me figure out, or find documentation, on how to manipulate the results of a single query and split the results from that query over the 3 list-groups.

If someone could give me a rough idea of where I should be looking, I’m more than happy to keep researching and playing around.
DMX stuff seems powerful, but I just can’t find enough documentation and examples to exploit that power.

Thanks in advance

[Teodor]

Hello @bsystems,

that’s more related to the layout you are repeating than a feature of the repeater The repeat region just repeats whatever structure you have on your page. If you are repeating a block element, then it will be one column, if you are repeating an inline element - then it will be repeated on the same line etc.

What you probably want to use is css columns: https://www.w3schools.com/css/css3_multiple_columns.asp

You can even have different number of columns, on different screen sizes. So, you can add a custom class to your list group say multi-cols and then in your CSS you can add:

@media (min-width: 768px) {
    .multi-cols {
        -webkit-column-count: 2;
           -moz-column-count: 2;
                column-count: 2;
    }
}
@media (min-width: 992px) {
    .multi-cols {
        -webkit-column-count: 3;
           -moz-column-count: 3;
                column-count: 3;
    }
}

So, on smaller screens the number of columns will be 1, on medium screen sizes the columns will be 2 and on large devices - 3.

[bsystems]

Thanks for replying. I don’t think i’ve explained the issue well enough.
The layout is no problem. I have three list groups all formatted correctly, each in its own column, fully responsive. Zero issues there.

My issue is getting the data from a single database query, split into 3 columns.
Let’s say my query returns 30 rows.
I have 3 columns, within each column is a list-group.
I want the 30 data rows split up into each column.
Column 1 : records 1 - 10
Column 2 : records 11 - 21
Column 3 : records 22 - 30

I get the impression this has something to do with pagination and offsetting the results for each column. Can’t quite get my head around it.

[Teodor]

I see, so are your records always going to be 30?
The solution i provided may suit better if the number of records change.

Anyway if that’s the case, just use the Slice formatting option in the collections menu, when you select the expression for the repeat:

to get the records from 1 to 10 add: From 0 to 9:

For the second column use From 10 to 19

For the third column use From 20 to 29

[bsystems]

Thank you again, very much appreciated.