title: Building a lazy grid with rows and columns - SwiftUI
body: <p>I am wanting to create a view in my app which acts basically as a table. I believe a lazy grid is the best way to do this in iOS 14, I'm just not sure what I am doing with them. The sort of table I want to create is pictured below:
  <a href="https://i.stack.imgur.com/DMpNp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DMpNp.png" alt="enter image description here" /></a></p>
  <p>Each of the rows are based off of an object, <code>Player()</code>, I have and then each one of the numbers in the row are attributes the object has, e.g. <code>player.tries</code>, <code>player.pens</code> etc.</p>
  <p>My attempt so far has been to loop through all players in the array <code>homeTeam.players</code> and create a HStack with different text according to the individual value. I am getting stuck then on how I would set each column to be the width I want, such as the Name to be the widest and all others much smaller, but also have the headings above them. My code is below:</p>
  <pre><code>let layout = [GridItem(.flexible(maximum: 300))]
  
  LazyVGrid(columns: layout){
      HStack{
          Text(&quot;Name&quot;)
          Spacer()
          Text(&quot;T | C | P | DG&quot;)
     }
     ForEach(homeTeam.players){ player in
         HStack(spacing: 0){
             Text(&quot;player.playerName&quot;)
             Spacer()
             Text(&quot;\(player.tries) | \(player.convs) | \(player.pens) | \(player.dgs)&quot;)
         }
          .padding()
     }
  }
  </code></pre>
  <p>Any help on getting the sizing and all numbers in the correct place would be hugely appreciated!</p>