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.