I've followed the steps listed in this article and added a grid to my layout, next I wrapped my datatable with <lightning-layout> and <lightning-layout-item> tags. but when I shrink the screen size the datatable stays the same.

I tried implementing this solution but the datatable stays the same and not shrinking.

What am I missing?

<template >
        <div class="slds-grid slds-gutters">
          <div class="slds-col">
              <lightning-layout-item size="12">
  • What's the issue (ex. where are you running into issues with responsiveness in particular?). If you just use lightning-datatable it does auto-size (although that doesn't mean it meets your need). See following playground that compares your code to just using the standard component on its own. Commented Jun 8, 2021 at 19:30

1 Answer 1


In this case, it's probably easiest to just add a single class to a datatable without any surrounding markup. Like this:

  <lightning-datatable key-field="id" data={data} columns={columns} class="slds-max-medium-table_stacked">

Playground here

  • It seems the issue in my code is that the datatable is within a lightning tab
    – Json
    Commented Jun 10, 2021 at 7:58
  • 1
    I manage to resolve everything by removing the two most outer divs: <div class="slds-grid slds-gutters"> AND <div class="slds-var-m-around_xx-large">
    – Json
    Commented Jun 10, 2021 at 8:50

You must log in to answer this question.

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