I have the following code in a web component:
<lightning-accordion-section name="Products" label="Products">
<lightning-layout>
<lightning-layout-item size="8" padding="around-medium">
<c-custom-datatable key-field="id"
data={generalDetailsLicenseItemsDisplay}
columns={generalDetailsColumns}
sorted-by={generalDetailsSortBy}
sorted-direction={generalDetailsSortDirection}
onsort={handleGeneralDetailsSortdata}
onrowaction={handleRowAction}
class = "customDataTable"
hide-checkbox-column>
</c-custom-datatable>
</lightning-layout-item>
<lightning-layout-item size="4" class="slds-border_left" padding="around-medium">
<article class="slds-card slds-card_boundary">
<div style="height: 300px; " class="slds-card__body slds-card__body_inner">
<lightning-input type="date" name="input2" label="License Expiration Date" value="2017-09-07"></lightning-input>
<lightning-input type="number" name="input2" label="Days" value="12345"></lightning-input>
</div>
<footer class="slds-card__footer">
<lightning-button label="Apply" alternative-text="Filter" variant="brand" class="slds-m-left_xx-small"></lightning-button>
</footer>
</article>
</lightning-layout-item>
</lightning-layout>
</lightning-accordion-section>
When i put the datatable inside the lightning-layout-item
tag, i receive the following:
[![enter image description here][1]][1]
The datatable is stretched to the bottom of screen.
On the lightning-layout
tag, i see that slds-grid
is applied with Display: flex;
.
When i remove Display: flex;
it looks better, without that grey area, but i don't know how to avoid it, and how to fix the size of the datatable.