10

I know when you specify a div with a height around your datatable you get a nice scrollable table:

<div style="height: 300px;">
    <lightning-datatable various-params></lightning-datatable>
</div>

You'll get something like this if the table goes beyond 300px Datatable with scrollable body and a sticky header

Where the scroll is inside the table and the headers stay fixed so you can always see them no matter where you are in the scroll.

The issue is when your data does NOT reach 300px in height, you just get a bunch of empty space after your table and it looks awful. I want a table that is only as tall as its contents UNTIL it reaches a max then the scroll bar appears in the data section like in the picture.

But wrapping a <div style="max-height: 300px;"></div> around my datatable did nothing. Is this possible with the datatable? Or an extreme, extreme oversight on Salesforce? Or can it be done by extending the datatable and using a custom datatable at all?

8
  • Did you mean <div style="max-height:300px;">?
    – sfdcfox
    Commented Jan 23, 2020 at 20:33
  • Yes I did, I fixed it. Commented Jan 23, 2020 at 20:49
  • You need to use enable-infinite-loading global If present, you can load a subset of data and then display more when users scroll to the end of the table. Use with the onloadmore event handler to retrieve more data. load-more-offset global Determines when to trigger infinite loading based on how many pixels the table's scroll position is from the bottom of the table. The default is 20. Commented Jan 23, 2020 at 21:42
  • Please see here salesforce.stackexchange.com/questions/279776/…, and it looks like done intentionally . Commented Jan 23, 2020 at 21:46
  • 1
    I'm not sure that entirely addresses the issue. I'm trying to set it up so that when a user has two things in their table, the table's height is enough to display those two rows and no more, but set a max height so when data causes the table height to exceed it, it gives a scroll bar and stops growing in height there. Not really displaying subsets of data with infinite loading. Commented Jan 23, 2020 at 22:03

2 Answers 2

3

I do think that this is an oversight by Salesforce. There is, however, a way to dynamically control the height of the datatable's container div as described in this thread: How to control the height of datatable dynamically in LWC?

Here is my implementation where I set a container height of 150px when the number of rows in my table is more than 3:

HTML Code

<div style={datatableHeight}>
    <lightning-datatable
        key-field="updateId"
        columns={columns}
        data={data}
        onrowaction={handleRowAction}
    >
    </lightning-datatable>
</div>

JS Code

get datatableHeight() {
    if (this.pendingUpdates.length > 3) {
        return 'height: 150px;';
    } else {
        return '';
    }
}
0

There are several ways how we can override CSS in LWC. Since there are no suitable SLDS Styling Hooks for datatable component at the moment (preferable option), so remaining options are:

  1. Override by importing CSS from Static Resources;
  2. Override by creating Style element straight after cmp rendering;

Example of the 2-nd option:

renderedCallback() {
  const style = document.createElement('style');
  style.innerText = `.slds-scrollable_y {
    max-height: 200px !important;
  }`;
  this.template.querySelector('lightning-datatable')?.appendChild(style);
}

You must log in to answer this question.

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