Creating a Grid / Table

21 views
Skip to first unread message

Michael Brewer

unread,
Oct 24, 2014, 6:48:26 PM10/24/14
to tot...@googlegroups.com
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

unread,
Oct 24, 2014, 8:13:58 PM10/24/14
to tot...@googlegroups.com
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

unread,
Oct 25, 2014, 3:50:00 AM10/25/14
to tot...@googlegroups.com
Hi Michael,
thanks for reply :-)
Reply all
Reply to author
Forward
0 new messages