+ Start a Discussion
Yuvaraj PalaniYuvaraj Palani 

Data Table not Responsive inside Lightning Layout LWC

I'm trying to use a Lighting Data Table inside lightning Layout. But the Data table loses its responsiveness. 
Here is my code. 

 
<lightning-layout>
                    <lightning-layout-item>
                        <lightning-datatable key-field="Id" data={records} columns={columns} errors={errors}>

                        </lightning-datatable>
                    </lightning-layout-item>
                    <lightning-layout-item>
                        <template if:true={showListManage}>
                            <c-team-record-list-view-manage current-list-view={currentListViewData}
                                list-action-type={selectedListAction} onlistsuccess={handleListSuccess}>
                            </c-team-record-list-view-manage>
                        </template>
                    </lightning-layout-item>
                </lightning-layout>

User-added image

Is this a bug with Salesforce or I'm missing something ? 
Danish HodaDanish Hoda
Hi Yuvaraj,
please specify the size in the lightning-layout-item to fit the datatable on to your screen width:

<lightning-layout-item size="12" >
<lightning-datatable key-field="Id" data={records} columns={columns} errors={errors}> </lightning-datatable>
</lightning-layout-item>
Yuvaraj PalaniYuvaraj Palani
Here is my requirement. First layout item should take the full width by default . Second layout item will be rendered based on a logic , so when that displays , the first layout should adjust automatically and both the items should fit Get Outlook for Android
Danish HodaDanish Hoda
Hi Yuvaraj,
Not sure, but you can try passing a variable inside size attribute of the lightning-layout-item and set per your requirement in the JS file.
Subodh shuklaSubodh shukla
Hi Yuvraaj please let me know how you resolve the above-mentioned issue, stuck on something which is similar to the above-mentioned issue.