LWC: Table Body Colspan Not Matching Table Header Span When The Table Body is in a Child Component

csshtmllightning-web-componentsspantable

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.

Best Answer

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).

Related Topic