Need to convert html table to lightning datatable

Question

I need to covert the below html table into lightning datatable. I could not find any references to show custom data on the rows in lightning datatable. Any suggestions how to do it?

   <table class="slds-table Fixed" border="1">
            <tr
              class="slds-text-title_caps"
              style="padding: 0.5rem; background: #16325c"
            >
              <th
                class="slds-text-title_caps slds-text-color_inverse"
                scope="col"
              >
                Applies To
              </th>
              <th
                class="slds-text-title_caps slds-text-color_inverse"
                scope="col"
              >
                Selected Clauses
              </th>
            </tr>
  
            <template for:each={selection} for:item="product">
              <tr class="slds-hint-parent slds-p-top_small" key={product.productId}>
                <th data-label="Applies To" scope="row">{product.coverageLabel} , {product.productLabel} </th>
                <td data-label="Selected Clauses">
                  <template for:each={product.selectedClauses} for:item="clause">
                    <div key={clause.id}>
                      <div class="slds-grid slds-gutters">
                        <div class="slds-col slds-size_1-of-12">
                          {clause.sequence}.
                        </div>
                        <div class="slds-col slds-size_5-of-12">
                          {clause.headingName}
                        </div>
                        <div class="slds-col slds-size_1-of-12">
                          <span
                            class="up"
                            data-id={product.id}
                            data-cid={clause.id}
                            onclick={handleUp}
                          ></span>
                          <span
                            class="down slds-m-left_x-small"
                            data-id={product.id}
                            data-cid={clause.id}
                            onclick={handleDown}
                          ></span>
                        </div>
                      </div>
                    </div>
                  </template>
                </td>
              </tr>
            </template>
          </table>

Answer 1

The lightning-datatable documentation includes examples e.g. this Basic Data Table. No HTML markup is involved; instead JavaScript data for the column definitions and the row values are passed in and the component generates all the HTML starting from those.

See the Creating Custom Data Types section of the documentation for how to customise the presentation of table cells. The row data you pass in can be pretty much anything you like.

But if your requirements are best handled by custom markup and you don't need any of the fancy feature of lightning-datatable, you may be better sticking to your own table markup as posted in your question.