title: How can I dynamically generate a table using data from my database?
body: <p>I am very new to this, so please be kind. I have a table 'users' in my database and each user is part of a team. What I was trying to do is to display all users in different tables, based on their team name.
  This is the code in my UserService:</p>
  
  <pre><code>    public List&lt;User&gt; getUsersFromFirstTeam() {
      List&lt;User&gt; usersFromFirstTeam = userRepository.findByTeam(FIRST_TEAM);
      return usersFromFirstTeam;
  }
  
  public List&lt;User&gt; getUsersFromSecondTeam() {
      List&lt;User&gt; usersFromSecondTeam = userRepository.findByTeam(SECOND_TEAM);
      return usersFromSecondTeam;
  }
  </code></pre>
  
  <p>This is the code in my UserController:</p>
  
  <pre><code>@Autowired
  private UserService userService;
  
  @GetMapping(value = "/admin/usermanagement")
  public ModelAndView userManagement(Model firstTeamModel, Model secondTeamModel) {
      ModelAndView modelAndView = new ModelAndView();
      firstTeamModel.addAttribute("firstTeamUsers", userService.getUsersFromFirstTeam());
      secondTeamModel.addAttribute("secondTeamUsers", userService.getUsersFromSecondTeam());
      modelAndView.setViewName("userManagement");
      return modelAndView;
  }
  </code></pre>
  
  <p>And finally this is my .jsp page that is displayed:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class = "tab" style="width: 250px"&gt;
  &lt;button class ="tablinks" onclick = "openTable(event, 'FirstTeam')"&gt;First 
  Team&lt;/button&gt;
  &lt;button class ="tablinks" onclick = "openTable(event, 'SecondTeam')"&gt;Second
  Team&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="FirstTeam" class="tabcontent"&gt;
  &lt;h3&gt;First team members&lt;/h3&gt;
  &lt;table class="table"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Username&lt;/th&gt;
            &lt;th&gt;Firstname&lt;/th&gt;
            &lt;th&gt;Lastname&lt;/th&gt;
            &lt;th&gt;Email&lt;/th&gt;
  
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
                &lt;c:forEach  items="${firstTeamUsers}" var ="user"&gt;
                &lt;tr&gt;
                  &lt;td&gt;${user.username}&lt;/td&gt;
                  &lt;td&gt;${user.firstName}&lt;/td&gt;
                  &lt;td&gt;${user.lastName}&lt;/td&gt;
                  &lt;td&gt;${user.email}&lt;/td&gt;
                &lt;/tr&gt;
                &lt;/c:forEach&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div id="SecondTeam" class="tabcontent"&gt;
  &lt;h3&gt;Secondteam members&lt;/h3&gt;
  &lt;table class="table"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Username&lt;/th&gt;
              &lt;th&gt;Firstname&lt;/th&gt;
              &lt;th&gt;Lastname&lt;/th&gt;
              &lt;th&gt;Email&lt;/th&gt;
  
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
                  &lt;c:forEach  items="${secondTeamUsers}" var ="user"&gt;
                  &lt;tr&gt;
                    &lt;td&gt;${user.username}&lt;/td&gt;
                    &lt;td&gt;${user.firstName}&lt;/td&gt;
                    &lt;td&gt;${user.lastName}&lt;/td&gt;
                    &lt;td&gt;${user.email}&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;/c:forEach&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>So, this code works and does exactly what I want. It creates two tabs 'First Team' and 'Second Team' and when I click on each tab it displays the table with sorted users by team name. My problem is that I want to do this whole thing without hardcoding the team's name and by generating the divs dinamically so that it won't matter how many teams will be in the future or what are their names. Any ideas on how I can achieve that?
  Thank you in advance for your time and help!</p>