Build table with for:each and Field Sets (LWC)

Question

I'm making a table that displays a custom object with fields retrieved from Field Set on that object (that can, of course, be changed). I have apex logic that returns the List of CustomObject__c and now I am trying to display a custom table with the data (LWC).

<table>
  <template for:each={columns} for:item='colum'>
  <thead >
    <tr class="slds-line-height_reset licenseTable-tr">
      <th key={column}>
        <div>{column}</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <template for:each={customobjects} for:item='customobject'>
      <tr key={customobject.Id}>
        <template for:each={customobject} for:item='objectfield'>
          <td key={objectfield} >
            <div>{objectfield}</div>
          </td>
        </template>
      </tr>
    </template>
  </tbody>
</table>

Where columns variable holds API names of fields retrieved from fieldset. The approach above is throwing an error (Uncaught (in promise) TypeError: t[Yn] is not a function). Since I have the field API names in columns variable, initially in the inner loop I tried looping over columns and displaying {customboject[column]} but LWC does not allow expressions in HTML. Any ideas on how could I achieve such a table? Thanks

Answer 1

At a basic level, you could just use lightning-datatable, which is build for this purpose.

Doing it yourself, you'd want to transform the object in to a list (Array), such that you'd have data like this:

[
 [ 'Value 1','Value 2','Value 3'],
 [ 'Value 1','Value 2','Value 3']
]

If possible, I recommend just using the pre-built component instead of trying to roll your own.