[SalesForce] Does LWC lightning-datatable supports mobile

Does LWC lightning-datatable supports mobile. If yes, how to make it mobile responsive. If no, Is there any workaround.

The cool feature like headeractions filter might not be available in layout or table.

Best Answer

As Manjit correctly mentioned, as per documentation lightning-datatable is not supported on mobile devices.

A workaround you can use is apply a responsive slds class from the Lightning Design System Datatables example to achieve a tile like view.

Try with the classes slds-max-medium-table_stacked or slds-max-medium-table_stacked-horizontal which will give you a Tile like view in mobile

The code would be something like this:

<template>
    <div style="height: 300px;">
        <lightning-datatable
                key-field="id"
                data={data}
                class="slds-max-medium-table_stacked-horizontal"
                columns={columns}>
        </lightning-datatable>
    </div>    
</template>

Another option is to use use grid or lightning:layout and build the table

Related Solutions

[SalesForce] Flatten data to display it using lightning datatable in LWC

you can prepare data before passing it to lightning-datatable

@wire(getAddress, { LeadID: '$recordId' }) wired(result) {
    this.refreshTable = result;
    if (result.data) {
        this.addresses = result.data.map((elem) => ({
                ...elem,
                ...{
                    'Account_Id': elem.AccountId.Id,
                    'Account_Name': elem.AccountId.Name,
                    'Contact_Id': elem.ContactID.Id,
                    'Contact_Name': elem.ContactID.Name,
                    'Contact_Title': elem.ContactID.Title
                    // and so on for other fields
                }
        }));
    }
    if (result.error) {
        this.error = result.error;
    }
}

after that set column with names of fields from result.data.map function

const columns = [
    {
        type: 'action',
        typeAttributes: { rowActions: actions },
    },
    { label: 'Account Id', fieldName: 'Account_Id', type: 'text' },
    { label: 'Account Name', fieldName: 'Account_Name', type: 'text' },
    { label: 'Contact Id', fieldName: 'Contact_Id', type: 'text' },
    { label: 'Contact Name', fieldName: 'Contact_Name', type: 'text' },
    { label: 'Contact Title', fieldName: 'Contact_Title', type: 'text' }
];

[SalesForce] How to present a lightning-datatable on mobile devices

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.

Best Answer

Related Solutions

[SalesForce] Flatten data to display it using lightning datatable in LWC

[SalesForce] How to present a lightning-datatable on mobile devices

Related Topic