LWC Extending LightningTreeGrid does not render

Question

I would like add functionality to the Lightning Tree Grid component.

Starting with a base component of:

import LightningTreeGrid from 'lightning/treeGrid';

export default class CustomTreeGrid extends LightningTreeGrid {}

And referencing the component as

<c-custom-tree-grid
    data={data}
    columns={columns}
    key-field="Id"
    expanded-rows={currentExpanded}
    onrowaction={handleRowAction}
    selected-rows={selectedRows}
    hide-checkbox-column="true"
></c-custom-tree-grid>

I would expect this to render a normal Tree Grid, but instead nothing is rendered at all. Walking through the component life cycle tells me that all the attributes are being correctly set, and the constructor on the actual LightningTreeGrid is being called properly.

The one oddity I noticed is that the rendered CustomTreeGrid javascript's template function is blank.

(function() {
    const {$A, aura, Sfdc, sforce} = {};

    return function (lwc, LightningTreeGrid) {

        function tmpl($api, $cmp, $slotset, $ctx) {
        return [];
        }

        var _tmpl = lwc.registerTemplate(tmpl);
        tmpl.stylesheets = [];
        tmpl.stylesheetTokens = {
        hostAttribute: "c-customTreeGrid_customTreeGrid-host",
        shadowAttribute: "c-customTreeGrid_customTreeGrid"
        };

        class CustomTreeGrid extends LightningTreeGrid {}

        var customTreeGrid = lwc.registerComponent(CustomTreeGrid, {
        tmpl: _tmpl
        });

        return customTreeGrid;

    }

}())

Here is a playground demonstrating the issue.

Answer 1

I am not a Javascript wizard but will try to answer what I noticed.

You are extending LightningTreeGrid as

export default class CustomTreeGrid extends LightningTreeGrid {}

This only extends the Javascript of LightningTreeGrid, but does not extends the markup. Now this means you can access all methods and attributes of LightningTreeGrid class in CustomTreeGrid .

Now in your LWC component CustomTreeGrid the html markup is blank, thus it does not know you intend to build a lightning-tree-grid . It only means you intend to use JS method from LightningTreeGrid

Solution: Add markup of lightning-tree-grid in CustomTreeGrid html.

CustomTreeGrid.html :

<template>
    <lightning-tree-grid                   
                columns={columns}
                data={data}               
                key-field={keyField}
            ></lightning-tree-grid>
</template>

CustomTreeGrid.js :

import LightningTreeGrid from 'lightning/treeGrid';
import { LightningElement, track, api } from 'lwc';

export default class CustomTreeGrid extends LightningTreeGrid {
    @api data;
    @api columns;
    @api keyField;

}

Playground Link : https://developer.salesforce.com/docs/component-library/tools/playground/Dulcc42an/3/edit

Answer 2

As per the documentation https://developer.salesforce.com/docs/component-library/bundle/lightning:treeGrid/documentation, I can't see if lightning has exported treeGrid likewise LightningDataTable. Thanks