title: Thymeleaf dynamic header and content table from database
body: <p>I am new in thymeleaf. I have question about dynamic table. Here is my case : </p>
  
  <pre><code>[
     {
        "country":"country 1",
        "districs":[
           {
              "district":"district 1",
              "cinemas":[
                 {
                    "cinema": "cinema 1"
                    "movie":"Sherlock",
                    "visitor":30
                 },{
                    "cinema": "cinema 2"
                    "movie":"Terminator",
                    "visitor":40
                 },{
                    "cinema": "cinema 2"
                    "movie":"Tarzan",
                    "visitor":20
                 }]
           }, {
              "district":"district 2",
              "cinemas":[
                 {
                    "cinema": "cinema 1"
                    "movie":"Sherlock",
                    "visitor":12
                 },{
                    "cinema": "cinema 2"
                    "movie":"Terminator",
                    "visitor":41
                 },{
                    "cinema": "cinema 2"
                    "movie":"Tarzan",
                    "visitor":24
                 }]
              }, {
              "district":"district 3",
              "cinemas":[
                 {
                    "cinema": "cinema 1"
                    "movie":"Sherlock",
                    "visitor":12
                 },{
                    "cinema": "cinema 2"
                    "movie":"Terminator",
                    "visitor":41
                 }]
              }]
      },    {
        "country":"country 2",
        "districs":[
           {
              "district":"district 1",
              "cinemas":[
                 {
                    "cinema": "cinema 2"
                    "movie":"Terminator",
                    "visitor":40
                 },{
                    "cinema": "cinema 2"
                    "movie":"Tarzan",
                    "visitor":20
                 }]
           }, {
              "district":"district 2",
              "cinemas":[
                 {
                    "cinema": "cinema 1"
                    "movie":"Sherlock",
                    "visitor":12
                 },{
                    "cinema": "cinema 2"
                    "movie":"Tarzan",
                    "visitor":24
                 }]
              }, {
              "district":"district 3",
              "cinemas":[
                 {
                    "cinema": "cinema 1"
                    "movie":"Sherlock",
                    "visitor":12
                 },{
                    "cinema": "cinema 2"
                    "movie":"Terminator",
                    "visitor":41
                 }]
              }]
      }]
  </code></pre>
  
  <p>And then I want to display like this :</p>
  
  <pre><code>---------------------------------------------------------------------------------------------------------
  Movies     |country 1                                   | country 2                                     |
             ----------------------------------------------------------------------------------------------
             |district 1   | district 2  | district 3   | district 1    | district 2    | district 3      |
  ---------------------------------------------------------------------------------------------------------
  Sherlock   | 30          | 12          | 12           | 0             | 12            | 12              |
  Terminat   | 40          | 41          | 41           | 40            | 0             | 41              |
  Tarzan     | 20          | 24          | 0            | 20            | 24            | 0               |
  ---------------------------------------------------------------------------------------------------------
  </code></pre>
  
  <p>How I could achieve this in thymeleaf? 
  My code as below, but still cannot achieve this output. </p>
  
  <pre><code>&lt;table&gt;
          &lt;thead&gt;
            &lt;tr&gt;                    
                &lt;th:block th:each="data : ${countries}"&gt;
                     &lt;th th:colspan="${data.districts.size()}" th:text="${data.country}" &gt;&lt;/th&gt;
                &lt;/th:block&gt;
            &lt;/tr&gt;
            &lt;tr&gt;    
               &lt;th:block th:each="data : ${countries}"&gt;
                    &lt;th:block th:each="district :${data.districts}"&gt;
                        &lt;th th:text="${district.district}"&gt;&lt;/th&gt;
                     &lt;/th:block&gt;
                &lt;/th:block&gt;
            &lt;/tr&gt;
      &lt;thead&gt;
          &lt;tbody&gt;
             &lt;tr&gt;
               &lt;th:block th:each="data : ${countries}"&gt;
                   &lt;th:block th:each="district :${data.districts}"&gt;
                        &lt;th:block th:each="cinema :${district.cinemas}"&gt;
                           &lt;td th:text="${cinema.visitor}" /&gt;
                        &lt;/th:block&gt;
                   &lt;/th:block&gt;
                &lt;/th:block&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Please if anyone has any idea to solve this problem. 
  BTW, for json I generated using spring rest. 
  Thanks a lot. </p>