How to present a lightning-datatable on mobile devices?

Question

While a lightning-datatable will squish up on a narrow screen, the columns typically become so narrow as to be unreadable.

Are there examples anywhere of changing to e.g. tiles for a narrow screen? Would be cool to re-use the columns data when doing that.

This is a big stretch, but a CSS-only solution as illustrated here Responsive Data Tables would be great.

PS

Flipping to tiles looks like it works based on a quick test:

<template>
    <template for:each={records} for:item="r">
        <lightning-tile key={r.Id} label="Item" href="/path/to/somewhere">
            <dl class="slds-dl_horizontal">
                <template for:each={columns} for:item="c">
                    <dt key={c.fieldName} class="slds-dl_horizontal__label">
                        <p class="slds-truncate">{c.label}:</p>
                    </dt>
                    <dd key={c.fieldName} class="slds-dl_horizontal__detail slds-tile__meta">
                        <p class="slds-truncate">
                            <c-tile-table-value object={r} field={c.fieldName} type={c.type}>
                            </c-tile-table-value>
                        </p>
                    </dd>
                </template>
            </dl>
        </lightning-tile>
    </template>
</template>

but Yaswanth's answer of adding the class slds-max-medium-table_stacked is a much cleaner approach.

Answer 1

There is something we do have in the slds, with the appending of single class few changes in the markup level for th and td, table will support in the desktop as well as mobile. Check here for the slds classes and styles, from the above link, Select the variants as responsive and form factor as mobile, then you will see the below attached screenshot.

Answer 2

It is very simple. just need to do two things.

1. implement this interface force:appHostable
2. include following code in design file:

<design:component label="Tender Product Matching Supplier">
    <design:supportedFormFactors>
        <design:supportedFormFactor type="Large"/>
        <design:supportedFormFactor type="Small"/>
    </design:supportedFormFactors>
</design:component>