title: ThymeLeaf - POST Table Data (ArrayList) to Another Controller
body: <p>I am having a hardtime to bind a ObjectList in Thymeleaf POST.  </p>
  
  <p>I am trying to achieve the below requirements using  Spring 5 and ThymeLeaf</p>
  
  <pre><code>1. User uploads a Excel File
  2. Display data in HTML Table (For Java Script Data Validation)
  3. Allow User to Delete Invalid Rows  (from Inmemory User Specific ArrayList)
  4. Display Remaining Values
  5. POST valid remaining values to Server
  </code></pre>
  
  <p>I am planning to add a delete button in each row, . And a Submit button to save all the remaining rows in DB.</p>
  
  <p>How can I forward eachRowList to another controller (for delete action and DB save).  </p>
  
  <pre><code>@PostMapping("/load-excel")
  public ModelAndView loadFile(@RequestParam("fileName") MultipartFile file,
           @RequestParam("selectedApplicationName") String selectedApplicationName,RedirectAttributes redirectAttr,Model model) {
  
          List&lt;EachRowinExcel&gt; eachRowList = fileReaderService.convertExceltoObjList();
          ....
  
          modelAndView.addObject("eachRowList", eachRowList);
  
          return modelAndView;
  }
  
  
  
   &lt;tr th:each="eachRow : ${eachRowList}"&gt;
                &lt;td th:text="${eachRow.column1}"&gt;&lt;/td&gt;
                &lt;td th:text="${eachRow.column2}"&gt;&lt;/td&gt;
                &lt;td th:text="${eachRow.column3}"&gt;&lt;/td&gt;
                &lt;td th:text="${eachRow.column4}"&gt;&lt;/td&gt;
                &lt;td th:text="${eachRow.column5}"&gt;&lt;/td&gt;
                &lt;td th:text="${eachRow.column6}"&gt;&lt;/td&gt;
                &lt;td th:text="${eachRow.column7}"&gt;&lt;/td&gt;
                &lt;!-- Special Columns --&gt;
                &lt;th:block th:each="customColumnValue:${eachRow.customColumnsList}"&gt;
                  &lt;td th:text="${customColumnValue}"&gt;&lt;/td&gt;
                &lt;/th:block&gt; 
  
              &lt;/tr&gt;
  </code></pre>
  
  <p><strong>Update 1:</strong></p>
  
  <p>Modified View</p>
  
  <pre><code>&lt;form action="#" th:action="@{/access/delete}" th:object="${form}" method="post"&gt;
      &lt;table id="accessRequestDataTable"  class="display compact" style="width:100%"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;!-- Headers --&gt;       
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
       &lt;tr th:each="eachRow, iter : ${form.eachRowList}"&gt;
            &lt;td  th:text="${eachRow.accessReqeustCounter}" th:field="*{eachRowList[__${iter.index}__].accessReqeustCounter}"&gt;&lt;/td&gt;
            &lt;td  th:text="${eachRow.accessReqeustID}" th:field="*{eachRowList[__${iter.index}__].accessReqeustID}"&gt;&lt;/td&gt;
            &lt;td  th:text="${eachRow.accessRequestType}" th:field="*{eachRowList[__${iter.index}__].accessRequestType}"&gt;&lt;/td&gt;
            &lt;td  th:text="${eachRow.userProfile}" th:field="*{eachRowList[__${iter.index}__].userProfile}"&gt;&lt;/td&gt;
            &lt;td  th:text="${eachRow.userFinalName}" th:field="*{eachRowList[__${iter.index}__].userFinalName}"&gt;&lt;/td&gt;
            &lt;td  th:text="${eachRow.userLoginName}" th:field="*{eachRowList[__${iter.index}__].userLoginName}"&gt;&lt;/td&gt;
            &lt;td  th:text="${eachRow.userEmail}" th:field="*{eachRowList[__${iter.index}__].userEmail}"&gt;&lt;/td&gt;
  
            &lt;td&gt;              
              &lt;button class="btn btn-danger btn-sm" 
              type="submit" value="submit"&gt;Delete&lt;/button&gt;             
            &lt;/td&gt;
          &lt;/tr&gt;        
  
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p><strong>POST Controller</strong></p>
  
  <pre><code>@RequestMapping(value = "/access/delete", method = RequestMethod.POST)
  public ModelAndView deleteUserFromTable(@ModelAttribute("form") EachRowListWrapper eachRowListWrapper){
      System.out.println(eachRowListWrapper.getEachRowList().size());
      ModelAndView modelAndView = new ModelAndView();
      eachRowListWrapper.getEachRowList().remove(0);
      modelAndView.setViewName("access-table");
      return modelAndView;        
  }
  </code></pre>
  
  <p><strong>Update 2</strong></p>
  
  <p>Followed the similar approach for column headers. I have another List object in the wrapper class.
  It works at initial load, but  headers are missing after returning from  a POST controller.</p>
  
  <pre><code>  &lt;thead&gt;
      &lt;tr&gt;              
        &lt;th scope="col"&gt;User Name&lt;/th&gt;
        &lt;th scope="col"&gt;Login&lt;/th&gt;
        &lt;th scope="col"&gt;Email&lt;/th&gt;
        &lt;th:block th:each="key, iter : ${form.customColumns}"&gt;
          &lt;th th:text="${key}" scope="col"&gt;&lt;/th&gt;
          &lt;input type="hidden" th:field="${form.customColumns[__${iter.index}__]}" /&gt;
        &lt;/th:block&gt; 
        &lt;th scope="col"&gt;Action&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  </code></pre>
  
  <p><strong>Final Update:</strong></p>
  
  <p>Apparently th:field input tag will not bind within thead section (its not supposed to have input fields LoL) . Everything works as expected after I moved it before the table  starts.</p>