Use a html table with iteration as below.
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
        <thead>
            <tr class="slds-line-height_reset">
                
                <aura:iteration items="{!v.headerLIst}" var="item" indexVar="key">
                    <th class="slds-text-title_caps" scope="col">
                        
                        'define your headers'
                    </th>
                </aura:iteration> 
            </tr>
        </thead>
        <tbody>
           <aura:iteration items="{!v.rowList}" var="item" indexVar="rowKey">
                <tr class="slds-hint-parent" data-label="{!item.name}" onclick="{!v.onRowClick}">
                    <th data-label="Opportunity Name" scope="row">
                        <div class="slds-truncate" title=""  >{!item.name}</div>
                    </th>
                    
                    <aura:iteration items="{!item.columns}" var="item1" indexVar="key">
                        
                        'List your columns'
                    </aura:iteration>
                </tr>
            </aura:iteration>
        </tbody>
    </table>

Define a json accordingly to support your structure sompething similar to this- 

   var allValues = response.getReturnValue();
                
            var opt=[];
                for (var i = 0; i < allValues.length; i++) {
                   
                    opt.push({
                        id: rec[1],
                        name: rec[0],
                        columns:helper.getColumns(component, event, helper,rec[0]) //list out the json structure for the columns you want to show.
                        
                    });
                component.set("v.rowList", opt);