0

EDIT : Background of original requirement.

We want to implement a "freezed" 1st column in a custom lightning datatable. When we scroll to the right, 1st column should always be in view. When I researched for similar questions (references below), it looks like it is not possible with pure CSS/design tokens/Wrapping in Aura etc. So the approach I am thinking is that we will catch the horizontal scroll in JS and keep pushing the 1st column and its data to next position in array for a certain x-scroll offset. Hence the following question.

Reference post 1: Freeze first column in the lightning data table lwc

Reference post 2: Freeze first column in horizontal scroll on lightning data table salesforce:

I have implemented a custom lightning data table and want that if users scroll horizontally (inline), it should catch this event and then perform some JavaScript logic. I have tried several approaches and scroll event listener does get attached to the data table, but callback function isn't called on scroll. Is this an existing limitation in lightning data table?

Here is what I have tried till now:

HTML

<template>
    <div class="slds-box minHeight" >
        <c-simulator-custom-table class="datatable-colors datatable-fixed-column" key-field="id" data={data} columns={columnData}
                min-column-width="100" onquantityupdate={handleQuantityUpdate}
                wrap-text-max-lines="3" hide-checkbox-column >
        </c-simulator-custom-table>
</div>
</template>

JS (relevant code only)

import { LightningElement } from 'lwc';

export default class CommissionSimulatorComponent extends LightningElement {

    isEventListnerAdded = false;

    //Callback function
    handleScroll = () => {
        console.log('Inside handleScroll.');
    }

    renderedCallback() {
        //Adding event listner in rendered callback to lightning datatable.
        if (!this.isEventListnerAdded) {

            /*APPRAOCH 1 : DOESN'T EXECUTE CALLBACK FUNCTION. 
            let scrolldiv = this.template.querySelector(".slds-box");
            if(scrolldiv){
                this.isEventListnerAdded = true;
                scrolldiv.addEventListener('scroll', (event) => {
                    console.log('SCROLLED!!!');
                });
            }
            else{
                console.log('Scroll div not found!!!');
            } */

            /* APPRAOCH 2 Doesnt work. This is as per LWC documentation. 
            this.template.addEventListener('scroll', () => {
                console.log('SCROLLED!!!');
            });
            this.isEventListnerAdded = true; */

            /* APPRAOCH 3 : Adds event listner to browser, not to the component.
            window.addEventListener('scroll', () => {
                console.log('SCROLLED!!!');
            });
            this.isEventListnerAdded = true; */

            //APPRAOCH 4 : Doesn't call callback function. Tried with inline function instead of function as a varaiable.
            let scrollDiv = this.template.querySelector(".datatable-colors");
            if (scrollDiv) {
                this.isEventListnerAdded = true;
                scrollDiv.onscroll = this.handleScroll;
                console.log('scroll : ' + scrollDiv);
            }
            else {
                console.log('Scroll div not found!!!');
            }

        }
    }
}

CSS

.slds-box{
    padding:0;
}
.minHeight {
    max-height: 15rem;
}

This is the horizontal scrollbar : enter image description here

Edit 2

I think the scroll event was not captured because I was not identifying the correct "scrollable" div. On inspecting I observed that div with class .slds-table_header-fixed_container slds-scrollable_x is the element that scrolls. Assuming this was correct, I tried to access this div using this.querySelector(".slds-table_header-fixed_container slds-scrollable_x") (because this element is added via "slot" and not a part of shadow tree of my component) but it does not return me any element as well. Can we not access elements that are not part of my html file but are generated internally by LWC?

9
  • What's the purpose behind what you're trying to do? This may be an X-Y Problem. You can edit your question to include any relevant background information that can help us determine if what you need is this solution or a completely different solution.
    – sfdcfox
    Commented Jul 6, 2021 at 17:24
  • Added the background, thanks.
    – Sarang
    Commented Jul 7, 2021 at 4:53
  • Are you using HTML table using th and td tags or lightning data table?
    – gs650x
    Commented Jul 7, 2021 at 7:23
  • @gs650x : using lightning data table.
    – Sarang
    Commented Jul 7, 2021 at 7:26
  • this is possible using pure CSS if you would use HTML tables but not sure about lightning data table.
    – gs650x
    Commented Jul 7, 2021 at 7:27

1 Answer 1

0

I implemented this and write a short blog here.

You must log in to answer this question.

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