Table stacked in mobile

Question

I have a table in my aura component. I use class="slds-max-medium-table_stacked but I can't see header. I want result as in the link: How to present a lightning-datatable on mobile devices?

Answer 1

For this we can simple add data-label="Label" to our tag:

<table class="slds-table slds-table--bordered slds-table--striped slds-max-medium-table_stacked-horizontal">
        <thead>
            <tr>
                <th>Appraisal Name</th>
                <th>Advertised Price</th>
                <th>Customer Trade Value</th>
                <th>Trading Value</th>
            </tr>
        </thead>
        <tbody class="slds-text-body_regular">
            <aura:iteration items="{!v.appraisals}" var="appraisal">
                <tr>
                    <td data-label="Appraisal Name">{!appraisal.Name}</td>
                    <td data-label="Advertised Price">Test</td>
                    <td data-label="Customer Trade Value">Test</td>
                    <td data-label="Trading Value">Test</td>
                </tr>
            </aura:iteration>            
        </tbody>
    </table>