1

I'm working on an LWC to render a report in a Lightning Page & have come across an issue in my HTML that when I have a Table Header in the parent component and table body in the child component. If I set the Colspan in the TD of the child component row it does not span and instead just renders below the first Header from the Table headers.

If you view the following code

<div id="report" class="report-container slds-var-p-around_small">
<div class="slds-theme_default slds-is-relative">
    <table class="slds-table slds-table--bordered">
        <thead>
            <tr class="slds-text-title_caps">
                <th style="text-align:right;">Testing 1</th>
                <th style="text-align:right;">Testing 2</th>
                <th style="text-align:right;">Testing 3</th>
                <th style="text-align:right;">Testing 4</th>
                <th style="text-align:right;">Testing 5</th>
                <th style="text-align:right;">Testing 6</th>
            </tr>
        </thead>

        <tbody>
            <!--<tr class="level-row-0">
                <td colspan="6" class="level-col-1">
                    Hello Here
                </td>
            </tr>-->

            <template if:true={groupings}>
                <c-report-grouping num-columns={detailColumnslength} groupings={reportData.groupingsDown.groupings} level="0" grouping-level-to-label={groupingLevelToLabel} fact-map={factMap}></c-report-grouping>
            </template>
        </tbody>
    </table>
</div>

Where the following is the child component (with just hardcoded html for now as I was troubleshooting)

<template>
    <tr class="level-row-0">
        <td colspan="6" class="level-col-1">
            Hello Here
        </td>
    </tr>
</template>

it renders as follows

enter image description here

However I want it to render as below and it does render like this if I don't use the child component and I uncomment the hardcoded table row in the parent component, and it also works ok if I let the page render with the child component retained and I then cut out the HTML and past it above the component reference in Chrome Dev Tools Elements. enter image description here

Note I copied the CSS to both components to check it if this could be a factor.

I wondered is there a reason the table header span is not recognised in the child component and it tries to render the column in the first column alone and not across the full span that the table head provided?

I'm sure I'm just doing something very minor incorrect.

Any tips on how to address this would be appreciated. Thanks in advance.

1 Answer 1

2

Tables do not behave well if there are other elements (including custom elements that are LWC components) in the hierarchy that don't look like parts of a table.

The solution for this is, I believe, to ensure you apply appropriate CSS display properties on the LWC component itself.

For you, I think you need to add something like the following to your c-report-grouping component's CSS:

:host {
  display: table-row;
}

This makes your browser treat the custom element as if it were a <tr> element (and, obviously, you should not explicitly include an actual <tr> in the custom component's template).

6
  • Hi Phil, Thanks for your help. In my second component I had planned to reference additional child components also & therefore not just to have the table-row. I'll have to think over the solution & see if I can use your suggestion. Thanks.
    – RedQueries
    Feb 15 at 10:46
  • If those components can be considered as cells in the row, you have an easy win via table-cell (or if they appear in cells just ensure they are referenced within <td> elements). The point I am making is that you are limited by what browsers allow in terms of DOM structure/CSS equivalence for tables. Check the docs for display around table element equivalents.
    – Phil W
    Feb 15 at 11:36
  • Phil, Apologies for the slow feedback. I had to park the work for the moment as it was proving tricky to complete and timelines for other work came up. I'll mark your answer as accepted for now as I noted the following also on another search salesforce.stackexchange.com/questions/348111/… There is a plan to pick up my work again soon on this and if there is any change on solution tips I'll provide feedback here again. Thank you for your help. Much appreciated.
    – RedQueries
    Feb 21 at 9:43
  • @RedQueries you are welcome. Feel free to upvote/mark both answers as you see fit ;)
    – Phil W
    Feb 21 at 10:55
  • this led me down the right path, but display: contents is what worked for me
    – willard
    May 23 at 3:56

You must log in to answer this question.

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