Normally the width of a <lightning-datatable>
changes dynamically as you change the width of the browser.
However, When I put a <lightning-datatable>
inside a grid (<div class="slds-grid">...</div>
, which is basically display: flex
), there's an issue. The datatable does dynamically expand, but once expanded it keeps it's expanded width and does not contract. You can see this behavior in the screen capture below taken from this code:
Does anyone know why this bug is happening and if there's a workaround?
lightning-datatable doesn't fully support containers with display:inline-block or flex properties.
<lightning:layout>
, which of course uses grids (via flexbox). Using grids/flexbox in a layout seems like an extremely basic and common thing for lightning datatable to have a limitation on.