Html – Render table with Jade/Express.js having multiple elements per row

expresshtmlhtml-tablenode.jspug

I'm trying to render a table using jade from a simple array of objects. But instead of simply rendering one row per object, I want to render three objects on each row.

<table>
  <thead>...</thead>
  <tbody>
    <tr>
      <td>obj0</td>
      <td>obj1</td>
      <td>obj2</td>
    </tr>
    <tr>
      <td>obj3</td>
      <td>obj4</td>
      <td>obj5</td>
    </tr>
    ...
  </tbody>
</table

Best Answer

Accepted answer technically works, but I didn't like that you had to construct the data so that the logic works. I think that the logic should accomodate the data. As such, I came up with this:

objects = [obj0, obj1, obj2, obj3, obj4, obj5]

table
  thead
  tbody
    - var columns = 3
    - for (var i = 0; i < objects.length; i=i+columns)
      tr
        - for (var j = 0; j < columns && i+j < objects.length; j++)
          td=objects[i+j]
Related Topic