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.


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

    <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>
                    <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}>

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

2 Answers 2


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.

enter image description here

  • 2
    Thanks Yaswanth, you just saved me a lot of trouble. Just setting this class on the component works <lightning-datatable class="slds-max-medium-table_stacked" ...>. The breakpoint where the layout flips is fixed at 768px but that is a pretty good compromise.
    – Keith C
    Jun 23, 2020 at 20:18
  • I also note that the documentation says "lightning-datatable is not supported on mobile devices; in-cell editing is certainly broken in stacked mode.
    – Keith C
    Jun 30, 2020 at 20:02
  • for rows we can simple add data-label="Example" for <td> tag because table header is not viewed Sep 18, 2020 at 16:01
  • gah, those archive links don't work anymore :( and it looks like this Responsive variant is missing from the latest docs.
    – Charles T
    Apr 19, 2021 at 21:25

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:supportedFormFactor type="Large"/>
        <design:supportedFormFactor type="Small"/>
  • 1
    Hi Vinayak, I'm surprised if that changes the table layout? And it is LWC I'm using or aura.
    – Keith C
    Aug 19 at 15:05

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .