0

I have a lightning-datatable set up to use infinite loading via onloadmore so batches of new records are fetched as the user scrolls. This works well.

But I want to fade the bottom of the scrolling area as a visual indicator when there is more left to scroll, specifically like this:

  • Not fully loaded - show fade
  • Fully loaded and fully scrolled - do not show fade (so the user knows they are at the end of the data)
  • Fully loaded and not fully scrolled - show fade (so the user knows they can scroll down to get back to the end of the data)

In other circumstances, the "fully scrolled" condition can be detected via e.g.:

<div class="slds-scrollable_y" onscroll={handleScroll}>

but in lightning-datatable the slds-scrollable_y is buried inside what the component renders and so not accessible. And there is no onscroll available on lightning-datatable itself and while its scrollTop and scrollHeight properties are defined, they always return 0.

So I suspect the scroll position is just not accessible. Am I correct?

1 Answer 1

3

You can add a scroll listener to your lightning-datatable. All you need to do is to extend from the standard component.

  1. Create a new component with the desired name (e.g. myCustomDatatable)
  2. Update the JS class like this:
import LightningDatatable from "lightning/datatable";

export default class MyCustomDatatable extends LightningDatatable {

  renderedCallback() {
    super.renderedCallback();

    const scrollableContainer = this.template.querySelector(".slds-scrollable_y");
    scrollableContainer.addEventListener("scroll", (e) => {
      console.log(e.target.scrollTop);
      console.log(e.target.scrollHeight);
    });
  }
}
  1. Within the scroll listener you can use both scrollTop parameter as well as scrollHeight.
  2. Use <c-my-custom-datatable> instead of <lightning-datatable> in your components. Since you've extended from the base class - all of the datatable parameters will be available.
  3. When you use your <c-my-custom-datatable> the outer container should limit the size of the component for the scroll listener to work. Example for a stand-alone table:
<c-my-datatable
    style="height: 400px; display: block"
    key-field="name"
    data={data}
    columns={columns}
  ></c-my-datatable>

You must log in to answer this question.

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