Apex Code Development You need to sign in to do that
Don't have an account?
CellAttributes in lightning-tree-grid
I have a project to display sales grouped by division, region, store and salesperson that appears to lend itself to a tree grid display component. However, I will need to adjust cell styles based on the content of a cell and I have not found a way to do that yet.
As an example, as I load the tree grid with data, booked sales will show in black, pending sales should show in yellow and the total should be red if it's below the sales target and green if it meets or exceeds the target.
I found reference to a column attribute called "cellAttributes" but I cannot find a definition of the "cellAttributes" object definition. The only examples in the documentation are to add icons to the cell. I've seen other examples of cellAttributes (on the datatable component) where a class can be added to the cells using cellAttributes:{class: {fieldName:'cellStyle'}}. But apparently this only works if you use slds- class names in your cellStyle field. It's better than nothing, but only a little.
Is there any way to have finer control over how cell contents are displayed in a lightning-tree-grid?
As an example, as I load the tree grid with data, booked sales will show in black, pending sales should show in yellow and the total should be red if it's below the sales target and green if it meets or exceeds the target.
I found reference to a column attribute called "cellAttributes" but I cannot find a definition of the "cellAttributes" object definition. The only examples in the documentation are to add icons to the cell. I've seen other examples of cellAttributes (on the datatable component) where a class can be added to the cells using cellAttributes:{class: {fieldName:'cellStyle'}}. But apparently this only works if you use slds- class names in your cellStyle field. It's better than nothing, but only a little.
Is there any way to have finer control over how cell contents are displayed in a lightning-tree-grid?
One option I found that does appear to work, is to specify an actual "style" attributes.
HML:
<lightning-tree-grid data={treeData} hide-checkbox-column="true" columns={treeColumns} key-field="name"> </lightning-tree-grid>JS:
treeColumns: [ {type:'text', fieldName:'name', label:'Group', cellAttributes:{style:{fieldName:'dataColor'}}}, {type:'number', fieldName:'value', label:'Sales', cellAttributes:{style:{fieldName:'dataColor'}}} ]; treeData= [ { name:"Group 1", dataColor:'color:black;', _children: [ {name:"Value 1", value:1, dataColor:'color:black;'} ] }, { name:"Group 2", dataColor:'color:green;', _children: [ {name:"Value 1", value:1, dataColor:'color:black;'}, {name:"Value 2", value:2, dataColor:'color:green;'} ] }, { name:"Group 3", dataColor:'color:red;', _children: [ {name:"Value 1", value:1, dataColor:'color:black;'}, {name:"Value 2", value:2, dataColor:'color:green;'}, {name:"Value 3", value:3, dataColor:'color:red;'} ] } ];