Hi,
in the below ‘for loop’ the data is stored into one column, however if would like to split up the data in 3 columns, with a max of 20 items per column, could you help me further with this?
Before we can guide you into the right direction, we do have a couple of questions.
The code example you provided is a little bit difficult to understand in the context of your question, would you be able to provide perhaps a simplified example or wireframe of what you want to accomplish? Also, when sharing code it’s best to use the Preformatted text as otherwise some of your styling code gets applied in your text.
In case you are looking into a way to loop through an array and present you data in a certain format, you could play around with the limit and offset tags perhaps?
A little breakdown and a few notes on the example on how it can apply in your case:
So I start with looping through the rows. In the example I only need 3 rows as the total amount of elements is 9 (so 3 rows with 3 elements). In your case if the amount is always 20 it could be (0..19), or dynamic if the number of elements change
Then for each row we loop through the tax_titles, here is where we start using the limit and offset.
- I’m setting a fixed limit of 3 to indicate I only want to have 3 columns on each row;
- Next to that, I also indicate where in the tax_titles array I want to start. So for the first row, the 3 first items of the tax_titles array should be displayed, for the second row the items 4,5,6 should be displayed (so offset_i is 4), and so on.
I have also added an empty first column for each iteration, this is to make sure the total width amounts to 100 (as you cannot divide 100 over 3 columns). You can also add this empty column to the end or divide the usr-width of the other columns a bit differently.
The most important thing to keep in mind is that each row should have the same amount of columns or the table will error (struggled a bit myself when I was prepping the example ). In case you end up with 2 columns of 20 items and 1 column of 19 items you will need to add an empty column in that last row.
Does this example provide enough support to apply in your use-case?
Hi,
It’s already helpful!
But I’m still struggling to get your code implemented in my snippet. Would it be possible to implement your part into it?
Secondly, I want to have the 2nd title below the first, not in the next column.
Meaning 1 to 3 in the first column, 4 to 6 in the second column, …
Otherwise it’s a lot of work to maintain.
Okay, first if element 1 to 3 should be in the first column, 4 to 6 in the second column and so on, the code approach needs to change a bit. Please have a look at my updated example:
{% assign tax_titles = "1|2|3|4|5|6|7|8|9" | split:"|" %}
{% assign offset_i = 0 %}
{% assign element = 0 %}
<table class="usr-width-100">
<tbody>
{% for i in (0..2) %}
{% assign element = INT(forloop.index0) %}
<tr>
<td class=""></td>
{% for tax_title in tax_titles limit:3 %}
<td class="usr-width-5">{% input custom.tax_memo.[tax_title] as:boolean %}</td>
<td class="usr-width-25">{{ tax_titles[element] }}</td>
{% assign element = INT(element+3) %}
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
So in this case we do not need the offset tag anymore and the approach is structurally a bit different. Let me elaborate:
Still we loop through a number of rows. As with the previous example this number can be fixed but also dynamic depending on how your table will be build
For each of the rows, we’ll need to print 3 elements of the tax_titles. Also that part is unchanged
Now which items to print where, that has changed a bit. We will have to print a specific element in each column for each row. To determine the correct element I have attached this to the forloop index. So for the first row, the first column element 0 will be printed, the column next to that element 3 will be printed, and next to that element 6. When a new row starts, we start with element 1, which will be element 4 in column next to it, and so on.
Happy to try and merge this into your use-case but it’s a bit hard since I have no view on what the tax_titles array entails. Also not sure about what this main title is actually or what it should do .
I would suggest trying to implement what I now shared in your code yourself first, but more than happy to help out if needed .
). In case you end up with 2 columns of 20 items and 1 column of 19 items you will need to add an empty column in that last row.
.