Does LWC lightning-datatable supports mobile

Question

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.

Answer 1

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

Answer 2

The lightning datatable is not supported on mobile as mentioned in the documentation

lightning-datatable is not supported on mobile devices. 

As is it does work on mobile but there issue with header placement on scrolling. There are several CSS solutions that allow it to work on mobile devices but they keep breaking at times with newer releases.