Lightning Web Component for table rows and cells

Question

I'm trying to build a LWC that renders a complex table-based UI. It needs to have distinct rows and columns with dynamically-determined colspans - a real table. It's for assigning lodging, and each row will represent a room and each column for which the room can be assigned. It will involve drag/drop etc.

I was hoping to make each row and each cell a component, so that data and logic could be encapsulated in each of those. However, that doesn't seem to work because LWC includes a tag w/ the component name in the rendered HTML.

Here's some test code.

Table component markup:

<template>
<p>
    This is our very nice room table!
</p>
<table style="border:1px black solid">
    <!--header row goes here -->
    <template for:each={rooms} for:item="room">
        <c-ncilodgeroomtablerow key={room}>
        </c-ncilodgeroomtablerow>
    </template>
</table>
</template>

The var rooms is just set to [1,2,3] in the js controller so that it will iterate 3 times.

Here's the row component markup, just hard-coded w/ static content for now:

<template>
<tr>
    <td>
        cell one
    </td>
    <td>
        cell two
    </td>
</tr>
</template>

This does not render as desired. It ends up with everything in one cell, because it puts c- tags around the tr tags, and I think the tr's need to be immediate children of the table. Here's the rendered markup:

<table style="border: 1px solid black;">
<c-ncilodgeroomtablerow>
    <tr>
        <td>cell one</td>
        <td>cell two</td>
    </tr>
</c-ncilodgeroomtablerow>
<c-ncilodgeroomtablerow>
    <tr>
        <td>cell one</td>
        <td>cell two</td>
    </tr>
</c-ncilodgeroomtablerow>
<c-ncilodgeroomtablerow>
    <tr>
        <td>cell one</td>
        <td>cell two</td>
    </tr>
</c-ncilodgeroomtablerow>
</table>

I also tried putting the trs in the table component markup, inside the iterator, and then changing the row component to just include the td tags and not the tr's. That didn't work either - again because of the c- tags inside the tr's.

Is there any way to make something like this work w/ LWCs? Or do I need to look into making a css-based table layout? Open to general advice.

Answer 1

Building on the answer provided already by @sfdcfox, this following seems to be working for me and allows me to componentize the entire row (much easier to emit events this way).

parent.html

<table class="slds-table slds-table_bordered slds-border_left slds-border_right">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="" scope="col">
        <div class="slds-truncate" title="Name">Name</div>
      </th>
      <th class="" scope="col">
        <div class="slds-truncate" title="Some Custom Column">Some Custom Column</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <template for:each={iterableDataSet} for:item="row">
      <c-child-row row={row}>
      </c-child-row>
    </template>
  </tbody>
</table>

childRow.html

<template>
  <!-- taken straight from SLDS -->
  <th data-label="Name" scope="row">
    <div class="slds-truncate" title={row.Name}>{row.Name}</div>
  </th>
  <td data-label="Some Custom Column">
    <div class="slds-truncate">
      <lightning-input
        data-id={row.Id}
        type="number"
        variant="label-hidden"
        name="inputForDataField"
        onchange={handleOnChange}
        value={row.Data_Field__c}>
      </lightning-input>
    </div>
  </td>
  <!-- more tds .... -->
</template>

And the critical piece on childRow.css

:host {
  display: table-row;
}

Answer 2

Ideally, you shouldn't use table; lightning-layout and lightning-layout-item work as tables for all practical purposes. If that doesn't work for you, then you'd want to simply apply the appropriate CSS to your components.

Row Display

:host {
  display: table-row;
}

Cell Display

:host {
  display: table-cell;
}

I seem to be having a problem writing a working version of this, but it should work once everything is nested. Do not include tr in your row component, nor td in your cell component. Your component becomes the row/cell, so you don't need to nest them.

Answer 3

I agree with most statements from the comments where there are better choices than a table but another option I found is to use the following CSS in your "row" component:

:host{
    display: contents;
}

This causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself.

Do note that browser support still has some issues.

https://caniuse.com/#search=display%3A%20contents

Specifically in the accessibility area (people using assistive technology). You can read about that here:

https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents

So if accessibility would be a criteria for your components, keep this in mind.

Answer 4

What may work is dummy slots that pass data into the parent via eventDispatch like the lightning-column and lightning-columns work.

<template>
    <c-table>
        <c-table-heading>
            <c-table-cell>id</c-table-cell>
            <c-table-cell>name</c-table-cell>
        </c-table-heading>

        <c-table-row>
            <c-table-cell>1</c-table-cell>
            <c-table-cell>Bob</c-table-cell>
        </c-tabel-row>
    </c-table>
</template>

c-table-row and c-table-heading (could just be one component with an @api for heading)

class TableRow extends LightningElement {
    get slotElement() {
        return this.template.querySelector('slot');
    }

    get slotChildren() {
        return this.slotElement.children;
    }

    renderedCallback() {
        this.dispatchEvent(
            new CustomEvent('privatetablerow', {
                detail: { slot: this.slotChildren },
            })
        );
    }
}

c-table...

class Table extends LightningElement {
    connectedCallback() {
        this.privatelistener = (event) => {
            event.stopPropagation();
            const { slot } = event.detail;
            
            /**
             * From here you have access to the children passed into <t-table-cell>.
             * You can add your slots to an array and create a loop making <tr> items.
             * 
             * Of note: you should keep track of the nodes and overwrite them in the array.
             * I will give all my elements a unique id and pass that into the detail object.
             * I do this by extending LightningElement into a CustomElement and having all 
             * my elements extend CustomElement instead of LightningElement.
             */
        };

        this.addEventListener('privatetablerow', this.privatelistener);
    }

    disconnectedCallback() {
        this.removeEventListener('privatetablerow', this.privatelistener);
    }
}

This would be a bare minimum approach. You would still need to build the template for c-table and using lwc:dom="manual" inject createElement('tr') and 'td' elements.