Tables: Consider enabling array iteration in macros

[paroxp]

What

We've got an use case, where we'd like to pass some data into the template without pre-processing it to fit the table macro.

Our use case using pure HTML:

<table>
{% for product in products %}
  <tr>
    <td>{{ product.name }}</td>
    <td>{{ product.description }}</td>
    <td>{{ product.price }}</td>
  </tr>
{% endfor %}
</table>

What we'd like to be able to do when using macros:

{{ govukTable({
  "firstCellIsHeader": true,
  "head":[
    {"text":"Name"},
    {"text":"Description"},
    {"text":"Price"}
  ],
  "data": products,
  "rows": [
    {"text": product.name},
    {"text": product.description},
    {"text": product.price},
  ]
}) }}

[NickColley]

See also: Digital Marketplace's approach to tables: http://alphagov.github.io/digitalmarketplace-frontend-toolkit/summary-table.html

[NickColley]

See Tijmen's look into this from a Ruby perspective: alphagov/govuk_publishing_components#337

[NickColley]

Another look into how our tables are being integrated into GOV.UK Publishing Components: https://github.com/alphagov/govuk_publishing_components/pull/531/files#r219539033

[trang-erskine]

Already done.

[joelanman]

Checked with @36degrees - not sure this was done?

[joelanman]

just thinking about the proposal, product is undefined. I'm thinking something like this instead:

products = [
  { name: "Desk", descriptionHTML: "<p>a nice desk</p>", price: "£100" },
  { name: "Phone", descriptionHTML: "<p>a nice phone</p>", price: "£200" },
  { name: "Pen", descriptionHTML: "<p>a nice pen</p>", price: "£1" }
]

{{ govukTable({
  "firstCellIsHeader": true,
  "head":[
    {"text":"Name"},
    {"text":"Description"},
    {"text":"Price"}
  ],
  "data": products,
  "columns": [
    {"text": "name"},
    {"html": "descriptionHTML"},
    {"text": "price"}
  ]
}) }}

or for an array of arrays, not objects:

products = [
  [ "Desk", "<p>a nice desk</p>", "£100" ],
  [ "Phone", "<p>a nice phone</p>", "£200" ],
  [ "Pen", "<p>a nice pen</p>", "£1" ]
]

{{ govukTable({
  "firstCellIsHeader": true,
  "head":[
    {"text":"Name"},
    {"text":"Description"},
    {"text":"Price"}
  ],
  "data": products,
  "columns": [
    {"text": 0},
    {"html": 1},
    {"text": 2}
  ]
}) }}

[joelanman]

columns could also just be a second argument to data:

"data": products, [
    {"text": "name"},
    {"html": "descriptionHTML"},
    {"text": "price"}
  ]