title: Dynamic tables with Mustache using dynamic arrays
body: <p>I am wondering if there is a more graceful solution to my current solution for the following problem</p>
  
  <p>Problem: Generate dynamic tables from a dynamic array with Mustache given that:</p>
  
  <ol>
  <li>Total column count is unknown</li>
  <li>Only one or two column names are known and must be rendered conditionally</li>
  <li>Helper functions may not be used</li>
  <li>Data is only provided in arrays. Not model classes</li>
  </ol>
  
  <p>Typical data-set with variable column count where ID is the only column know to always be provided:</p>
  
  <pre><code>[id*]   [Col-1]    [Col-2]    [Col-3]   ...(more)
   1      'Foo'      'Bar'      'Baz'    ...(more)
   2      'Foo'      'Bar'      'Baz'    ...(more)
   3      'Foo'      'Bar'      'Baz'    ...(more)
   ...
  (more)
  </code></pre>
  
  <p><em>Current</em> Solution: Mix variating key names with constant key name
  In this example below, the variating keys are based on the various column names provided dynamically from the datasource which are ("id"; "name"; "legal_name"; "email"; "signon_email"; "editable") and the constant key name is "field"</p>
  
  <p>Sample array:</p>
  
  <pre><code>array (size=6)
    0 =&gt; 
      array (size=2)
        'id' =&gt; string '10' (length=2)
        'field' =&gt; string 'id' (length=2)
    1 =&gt; 
      array (size=2)
        'value' =&gt; string 'J. Doe' (length=8)
        'field' =&gt; string 'name' (length=8)
    2 =&gt; 
      array (size=2)
        'value' =&gt; string 'Jane Doe' (length=8)
        'field' =&gt; string 'legal_name' (length=8)
    3 =&gt; 
      array (size=2)
        'value' =&gt; string 'Jane@Doe.com' (length=12)
        'field' =&gt; string 'email' (length=12)
  
  
  array (size=6)
    0 =&gt; 
      array (size=2)
        'id' =&gt; string '11' (length=2)
        'field' =&gt; string 'id' (length=2)
    1 =&gt; 
      array (size=2)
        'value' =&gt; string 'Jon Doe' (length=8)
        'field' =&gt; string 'name' (length=8)
    2 =&gt; 
      array (size=2)
        'value' =&gt; string 'John Doe' (length=8)
        'field' =&gt; string 'legal_name' (length=8)
    3 =&gt; 
      array (size=2)
        'value' =&gt; string 'John@Doe.com' (length=12)
        'field' =&gt; string 'email' (length=12)
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>{{#rows}}
      &lt;tr&gt;{{#fields}}
              &lt;td&gt;{{#id}}&lt;a href="foo/{{id}}"&gt;{{id}}&lt;/a&gt;{{/id}}
                  {{^id}}{{field}}: {{value} {{/id}}
              &lt;/td&gt;
          {{/fields}}
      &lt;/tr&gt;
  {{/rows}}
  </code></pre>
  
  <p>Result:</p>
  
  <pre><code>&lt;tr&gt;
          &lt;td&gt;&lt;a href="foo/10"&gt;10&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;name: J Doe&lt;/td&gt;
          &lt;td&gt;legal_name: Jane Doe&lt;/td&gt;
          &lt;td&gt;email: Jane@Doe.com&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
          &lt;td&gt;&lt;a href="foo/11"&gt;11&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;name: Jon Doe&lt;/td&gt;
          &lt;td&gt;legal_name: John Doe&lt;/td&gt;
          &lt;td&gt;email: John@Doe.com&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Redundancy of data is not a concern since the data-sets are really small. Most importantly we want a language neutral solution (no lambdas).</p>