0

I'm creating custom table, row, and cell LWC components. The lightning-menu-item options display under other components no matter what I try. I've been adjusting the display and position values of all the components, and I haven't found a combination that works. It seems to be possible because the out of the box lightning-datatable row action menu will display over other components.

Does anyone now how to get the row action's button menu to display over other components?

Display under following components

Display under header

testTables.html

<template>
    <table
        class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_col-bordered slds-m-bottom_x-small"
        role="treegrid"
    >
        <thead>
            <tr class="slds-line-height_reset">
                <template for:each={table1FieldList} for:item="field">
                    <th
                        aria-label={field.label}
                        aria-sort="none"
                        class="slds-has-button-menu slds-is-sortable"
                        key={field.property}
                        scope="col"
                    >
                        <a class="slds-th__action slds-text-link_reset" href="#" role="button" tabindex="-1">
                            <span class="slds-assistive-text">Sort by: </span>
                            <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                                <span class="slds-truncate" title={field.label}>{field.label}</span>
                            </div>
                        </a>
                    </th>
                </template>
                <th scope="col" style="width: 3.25rem">
                    <div class="slds-truncate slds-assistive-text" title="Actions">Actions</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <template if:true={table1Data} for:each={table1Data} for:item="row">
                <c-test-row key={row.field1} field-list={table1FieldList} row-data={row}></c-test-row>
            </template>
        </tbody>
    </table>

    <table
        class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols slds-tree slds-table_tree slds-table_col-bordered"
        role="treegrid"
        aria-label="Child Relationships"
    >
        <thead>
            <tr class="slds-line-height_reset">
                <template for:each={table2FieldList} for:item="field">
                    <th
                        aria-label={field.label}
                        aria-sort="none"
                        class="slds-has-button-menu slds-is-sortable"
                        key={field.property}
                        scope="col"
                    >
                        <a class="slds-th__action slds-text-link_reset" href="#" role="button" tabindex="-1">
                            <span class="slds-assistive-text">Sort by: </span>
                            <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                                <span class="slds-truncate" title={field.label}>{field.label}</span>
                            </div>
                        </a>
                    </th>
                </template>
                <th scope="col" style="width: 3.25rem">
                    <div class="slds-truncate slds-assistive-text" title="Actions">Actions</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <template if:true={table2Data} for:each={table2Data} for:item="row">
                <c-test-row key={row.field1} field-list={table2FieldList} row-data={row}></c-test-row>
            </template>
        </tbody>
    </table>
</template>

testTables.css

:host {
    position: relative;
}

testTables.js

import { LightningElement, track } from "lwc";

export default class TestTables extends LightningElement {
    @track table1Data = [{ field1: "value1a", field2: "value2a", field3: "value3a" }];
    @track table2Data = [
        { field1: "value1a", field2: "value2a", field3: "value3a", field4: "value4a" },
        { field1: "value1b", field2: "value2b", field3: "value3b", field4: "value4b" },
        { field1: "value1c", field2: "value2c", field3: "value3c", field4: "value4c" }
    ];
    @track table1FieldList = [
        { label: "field1", property: "field1" },
        { label: "field2", property: "field2" },
        { label: "field3", property: "field3" }
    ];
    @track table2FieldList = [
        { label: "field1", property: "field1" },
        { label: "field2", property: "field2" },
        { label: "field3", property: "field3" },
        { label: "field4", property: "field4" }
    ];
}

testRow.html

<template>
    <template if:true={fieldList}>
        <tr>
            <template iterator:it={fieldList}>
                <td key={it.value.property}>
                    <span class="slds-grid slds-grid_align-spread">
                        <div class="slds-truncate">
                            <c-test-cell row-data={rowData} field={it.value}></c-test-cell>
                        </div>
                    </span>
                </td>
            </template>

            <td role="gridcell" style="width: 3.25rem" aria-readonly="true" tabindex="0">
                <span class="slds-grid slds-align_absolute-center slds-grid_align-spread">
                    <div>
                        <span>
                            <lightning-button-menu menu-alignment="auto" icon-size="x-small" variant="border-filled">
                                <lightning-menu-item value="1" label="1"></lightning-menu-item>
                                <lightning-menu-item value="2" label="2"></lightning-menu-item>
                                <lightning-menu-item value="3" label="3"></lightning-menu-item>
                                <lightning-menu-item value="4" label="4"></lightning-menu-item>
                                <lightning-menu-item value="5" label="5"></lightning-menu-item>
                            </lightning-button-menu>
                        </span>
                    </div>
                </span>
            </td>
        </tr>
    </template>
</template>

testRow.css

:host {
    display: contents;
}

testRow.js

import { LightningElement, api } from "lwc";

export default class TestRow extends LightningElement {
    @api rowData;
    @api fieldList;
}

testCell.html

<template>
    <lightning-formatted-text value={fieldValue}></lightning-formatted-text>
</template>

testCell.js

import { LightningElement, api } from "lwc";

export default class TestCell extends LightningElement {
    @api rowData;
    @api field;

    get fieldValue() {
        return this.rowData[this.field.property];
    }
}

1 Answer 1

2

Remove slds-table_fixed-layout from the table tag:

<table class="....  ̶s̶l̶d̶s̶-̶t̶a̶b̶l̶e̶_̶f̶i̶x̶e̶d̶-̶l̶a̶y̶o̶u̶t̶">

Add a custom class to the table:

<table class=".... fixed-layout">

Provide fixed table layout to the table through custom CSS:

.fixed-layout {
  table-layout: fixed;
}
3
  • Thank you. That worked, but now that broke the slds-truncate ability to hide content when the page width is small. Any guesses on how to make that work at the same time? May 22 at 13:50
  • @DaveHelgerson - please use custom CSS. The answer is updated accordingly.
    – Sneh
    May 22 at 14:41
  • The custom CSS worked. Thanks for saving me countless hours of headaches. May 23 at 1:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.