0

I've got a datatable with custom datatype that displays popover when hovering on text. The popovers are not visible after scrolling first 20-30 records out of view. It seems popover position is not calculated correct and it wants to display somewhere below viewport. I've noticed the nubbins don't get displayed correctly either, but I'm fine with that.

Markup of custom component

<div class="anchor">
    <section class="slds-popover slds-float_left slds-popover_x-large">
        <a href={foo.nameUrl} onmouseleave={hidePop} onmouseover={showPop} target="_blank">
            {foo.name}
        </a>
        <template if:true={showPop}>
            <section class="slds-popover slds-float_left slds-popover_x-large">
                <!-- more markup -->
            </section>
        </template>
    </section>
</div>

With a bit of css

:host .anchor {
    position: relative;
    display: block;
}
:host .slds-popover {
    position: fixed;
}
:host .slds-popover_x-large {
    width: 45rem;
}

The solution above has been inspired by LWC lightning datatable: Enabling Popover Overflow

3

1 Answer 1

0

I've built a small POC (don't use without improvements!) for a datatable with custom data type and pop-up and couldn't reproduce the indicated problems. Here is the code:

Markup of custom component

<template>
    <div>
        <div class="slds-m-vertical_small">
            <a href={foo.nameUrl} 
                aria-haspopup={pop} 
                onmouseleave={hidePop} 
                onmouseover={showPop} 
                target="_blank">
                {foo.name}
            </a>
        </div>
    </div>
    <template if:true={pop}>
        <div style="position: absolute;">
            <section aria-label="Dialog title" 
                aria-describedby="popover-body-id" 
                class="slds-popover slds-nubbin_top-left" 
                role="dialog">
                <lightning-button-icon icon-name="utility:close" 
                    alternative-text="Close" 
                    title="Close">
                </lightning-button-icon>
                <div id="popover-body-id" class="slds-popover__body">
                <p>{foo.index}</p>
                </div>
            </section>
        </div>
    </template>
</template>

I didn't make use of CSS, but added one inline style.

Maybe I misunderstood the problem. sfdcfox may be right and there was an issue in the CSS that I removed. I changed some of the markup. The slds-popover and slds-popover_x-large were used on the outer section, when I expected them to be attributes of the pop-over element itself (inner section). The position of the slds-popover was fixed, but the question this is inspired by already stated that this doesn't work. I hope I haven't removed some essentials?!

In any case: The user can scroll and the pop-up works - including nubbins. (I took the code from here.) (I've added a lightning button icon in case the pop-up is to stay and the onmouseleave to go (maybe others need this setup) - but haven't added the click handler to make this button work.)

Some other files I used for my test setup:

HTML for type

<template>
    <c-custom-datatable-field foo={typeAttributes.foo}></c-custom-datatable-field>
</template>

Javascript of type

import LightningDatatable from "lightning/datatable";
import customSomeTemplate from "./customSome.html";

export default class MyCustomTypeDatatable extends LightningDatatable {
    static customTypes = {
        customSome: {
            template: customSomeTemplate,
            standardCellLayout: false,
            typeAttributes: ["foo"],
        },
    };
}

HTML of top LWC

<template>
    <c-my-custom-type-datatable
        key-field="Id"
        data={accounts}
        columns={columns}>
    </c-my-custom-type-datatable>
</template>

Javascript of top LWC

import { LightningElement } from "lwc";

const COLS = [
    {label: "Account Name", fieldName: "Name"},
    {label: "Industry", fieldName: "Industry"},
    {
        label: "Some",
        type: "customSome",
        typeAttributes: {foo: { fieldName: "Some" }}
    },
    {label: "Employees", type: "number", fieldName: "NumberOfEmployees"}
];

export default class MyDatatable extends LightningElement {
    columns = COLS;
    accounts = [];

    connectedCallback() {
        for (let i = 0; i < 1000; i++) {
            this.accounts.push({
                Id: '' + i,
                Name:  Math.random().toString(36).substring(2, 15),
                Industry: ["Agriculture", "Energy", "Insurance"][Math.floor(Math.random() * 3)],
                NumberOfEmployees: Math.floor(Math.random() * 100000),
                Some: {name: 'foo' + i, nameUrl: 'https://www.salesforce.com', index: 'pop-up ' + i}
            });
        }
    }
}

Useful?

You must log in to answer this question.

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