Creating a Grid / Table

[Michael Brewer]

What possible ways can I create a table-like structure or grid with a view? I want to populate a grid of elements, automatically creating a new row when I exceed a certain threshold per line. Below is an example of pseudo code for a view that I wish would work:

@{var columnCount = 0}
@{var rowCount = 0}

@{foreach item in model.itemList}
    @{if ++columnCount % 4 === 0}
        @{if rowCount > 0}</div>@{endif}
        <div class="row">
        @{++rowCount}
    @{endif}
    <div class="gridCell">@{item}</div>
@{end}

[Michael Brewer]

Below is my solution. 

@{model.test = [0,1,2,3,4,5,6,7,8,9,10,11,12,13]}

@{model.rows = model.test.reduce(function(p,e,i) {

if (i % 4 === 0) {

p.push([]);

}

p[p.length - 1].push(e);

return p;

}, [])}

@{foreach row in model.rows}

<div class="row">

@{foreach column in row}

<div class="gridCell">@{column}</div>

@{end}

</div>

@{end}

[Peter Širka]

Hi Michael,

thanks for reply :-)