Rendering table data with max cells per row

[aliwr...@googlemail.com]

Hi there,

I'm currently trying to build quite a specific table layout where there aren't actual column headers per se. I just want to display data as 6 cells per row. So when populating the data, the loop would count to 6 then start a new row, and then populate the next 6 cells, and so on. If the last row only has say 3 cells of data, it would still display 6, but the last 3 would be empty (well maybe containing a non-breaking space).

So far I've had to be quite specific which doesn't give a great deal of flexibility when generating the JSON data...

The HTML table:

<table class="orderdetails">

  <thead>

    <tr>

      <th colspan="6">

          <div class="minV"></div><div class="ordertype"></div>

      </th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td class="cell1"></td>

      <td class="cell2"></td>

      <td class="cell3"></td>

      <td class="cell4"></td>

      <td class="cell5"></td>

      <td class="cell6"></td>

    </tr>

  </tbody>

</table> 

The data:

"data": [

          {

              "cell1": {"label":"Blah 1","val":"1"},

              "cell2": {"label":"Blah 2","val":"2"},

              "cell3": {"label":"Blah 3","val":"3"},

              "cell4": {"label":"Blah 4","val":"4"},

              "cell5": {"label":"Blah 5","val":"5"},

              "cell6": {"label":"Blah 6","val":"6"}

          },

          {

              "cell1": {"label":"Blah 7","val":"1"},

              "cell2": {"label":"Blah 8","val":"2"},

              "cell3": {"label":"Blah 9","val":"3"},

              "cell4": {"label":"Blah 10","val":"4"},

              "cell5": {"label":"Blah 11","val":"5"},

              "cell6": {"label":"Blah 12","val":"6"}

          },

          {

              "cell1": {"label":"Blah 13","val":"1"},

              "cell2": {"label":"Blah 14","val":"2"},

              "cell3": {"label":"Blah 15","val":"3"},

              "cell4": {"label":"Blah 16","val":"4"},

              "cell5": {"label":"Blah 17","val":"5"},

              "cell6": {"label":"Blah 18","val":"6"}

          },

          {

              "cell1": {"label":"Blah 19","val":"1"},

              "cell2": {"label":"Blah 20","val":"2"},

              "cell3": {"label":"Blah 21","val":"3"},

              "cell4": {"label":"Blah 22","val":"4"},

              "cell5": {"label":"Blah 23","val":"5"},

              "cell6": {"label":"Blah 24","val":"6"}

          }

        ]

The directive for inserting the data into the tbody of the table:

"tbody tr":{

  "row <-":{

    "td.cell1":"<div class=\"minH\">#{row.cell1.label}</div><div class=\"minV\">#{row.cell1.val}</div>",

    "td.cell2":"<div class=\"minH\">#{row.cell2.label}</div><div class=\"minV\">#{row.cell2.val}</div>",

    "td.cell3":"<div class=\"minH\">#{row.cell3.label}</div><div class=\"minV\">#{row.cell3.val}</div>",

    "td.cell4":"<div class=\"minH\">#{row.cell4.label}</div><div class=\"minV\">#{row.cell4.val}</div>",

    "td.cell5":"<div class=\"minH\">#{row.cell5.label}</div><div class=\"minV\">#{row.cell5.val}</div>",

    "td.cell6":"<div class=\"minH\">#{row.cell6.label}</div><div class=\"minV\">#{row.cell6.val}</div>"

    }

}

In an ideal world I want to provide the data a bit like this:

"data": [

           {"label":"Blah 1","val":"1"},

           {"label":"Blah 2","val":"2"},

           {"label":"Blah 3","val":"3"},

           {"label":"Blah 4","val":"4"},

           {"label":"Blah 5","val":"5"},

           {"label":"Blah 6","val":"6"},

           {"label":"Blah 7","val":"1"},

           {"label":"Blah 8","val":"2"},

           {"label":"Blah 9","val":"3"},

           {"label":"Blah 10","val":"4"},

           {"label":"Blah 11","val":"5"},

           {"label":"Blah 12","val":"6"},

           {"label":"Blah 13","val":"1"},

           {"label":"Blah 14","val":"2"},

           {"label":"Blah 15","val":"3"},

           {"label":"Blah 16","val":"4"},

           {"label":"Blah 17","val":"5"},

           {"label":"Blah 18","val":"6"},

           {"label":"Blah 19","val":"1"},

           {"label":"Blah 20","val":"2"},

           {"label":"Blah 21","val":"3"},

           {"label":"Blah 22","val":"4"},

           {"label":"Blah 23","val":"5"},

           {"label":"Blah 24","val":"6"}

        ]

Any ideas? Is it even possible? I appreciate it is a very specific request. It would just make life easier if there was a way of counting during the pure loop and doing some sort of if/else statement possibly...

I did explore the idea of using divs instead of tables, and using display:table-cell etc. I could easily add a custom class using jQuery to every 6th 'cell', but had an issue of how to force the '7th' cell into a new line without creating more markup (or adding a class to the 7th cell and so on). I also tried floating divs, but had the issue of each div having an inconsistent width, if the content of each 'cell' varied.

Ta!

Ali.

[Mic (BeeBole)]

Hi Ali,

There is no direct way, you need to pre-format the data.

Here is one way to do it: https://gist.github.com/beebole/8802630

[Ali Wright]

This is perfect! It never occurred to me to pre-format the data like this, but I suppose it is obvious. Fantastic. Thanks Mic! Loving PURE :)

[Chris Jeffries]

Late to this thread, but...

Faced with this requirement, I would probably use <div>s and CSS to solve the problem, not a table. Basically, you are using a <table> for something that isn't really a table.

Assuming it's OK to resize the cells to ensure 6 fit on the page width (whatever it might be)

            <div style="float:left;width:15%;min-height:nnpx;max-height:nnpx;" class="selectionkey"></div> 

                             <!--15% gives a little leeway for margins/border/padding. you may need a smaller value. You need to set the height to make sure they all line up nicely-->

If you want to have fixed width cells

          <div style=width:100%;overflow:auto;> 

                  <div style="float:left;width:mmpx;height:nnpx;" class="selectionkey"></div>

         <div>