How to create slds table with cell merge in lwc

Hello Trailblazers!!

I found this wonderful question on stack exchange, where the poster wanted to know how to create a lightning datatable with an option to merge duplicate cells. Then I started searching for this and found that as of now(Nov 19), there is no option to achieve this using the standard lightning-datatable component. So I ended up writing below sample code for this problem using SLDS table and Lightning Web Component.

So the solution was to group records by duplicate cells and use HTML rowspan to merge the rows.

Input data

Expected Output

So here is the code for my web component:

HTML

<template>
 <table class="slds-table slds-table_cell-buffer slds-table_bordered ">
  <thead>
   <tr class="slds-line-height_reset">
    <th class="" scope="col">
     <div class="slds-truncate" title="">Product Family</div>
    </th>
    <th class="" scope="col">
     <div class="slds-truncate" title="">Asset Name</div>
    </th>
    <th class="" scope="col">
     <div class="slds-truncate" title="">Asset Type</div>
    </th>
   </tr>
  </thead>
  <tbody>
   <template if:true={productArray}>
    <template for:each={productArray} for:item="family">
     <tr key={family.family} class="slds-hint-parent">
      <td data-label="family" rowspan={family.rowspan}>
       {family.family}
      </td>
     </tr>
     <template for:each={family.products} for:item="product">
      <tr key={product.assetName}>
       <td key={product.assetName} data-label="family">
        {product.assetName}
       </td>
       <td key={product.assetName} data-label="family">
        {product.assetType}
       </td>
      </tr>
     </template>
    </template>
   </template>
  </tbody>
 </table>
</template>

JS

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    get productArray() {
        let samples = [
            {
                family: 'Family 1',
                assetName: 'Name 1',
                assetType: 'Type 1'
            },
            {
                family: 'Family 1',
                assetName: 'Name 2',
                assetType: 'Type 2'
            },
            {
                family: 'Family 1',
                assetName: 'Name 3',
                assetType: 'Type 3'
            },
            {
                family: 'Family 2',
                assetName: 'Name 4',
                assetType: 'Type 4'
            },
            {
                family: 'Family 2',
                assetName: 'Name 5',
                assetType: 'Type 5'
            },
            {
                family: 'Family 3',
                assetName: 'Name 6',
                assetType: 'Type 6'
            }
        ];

        let groupedDataMap = new Map();
        samples.forEach(product => {
            if (groupedDataMap.has(product.family)) {
                groupedDataMap.get(product.family).products.push(product);
            } else {
                let newProduct = {};
                newProduct.family = product.family;
                newProduct.products = [product];
                groupedDataMap.set(product.family, newProduct);
            }
        });

        let itr = groupedDataMap.values();
        let productArray = [];
        let result = itr.next();
        while (!result.done) {
            result.value.rowspan = result.value.products.length + 1;
            productArray.push(result.value);
            result = itr.next();
        }
        return productArray;
    }
}

Output: