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.


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

| improve this answer | |
  • 1
    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 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 at 20:02
  • for rows we can simple add data-label="Example" for <td> tag because table header is not viewed – Igor Vasylevskyi Sep 18 at 16:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.