1

Question 1

How to sets the visibility of the button-icon based on the fields in the data. such as 'status'

Question 2

How to resize button-icon?. enter image description here

html

<template>
    <div class="slds-box slds-theme--default">
        <center >
            <lightning-button-group>
                <lightning-button label="ExpandAll"  onclick={clickToExpandAll}></lightning-button>
                <lightning-button label="CollapseAll"  onclick={clickToCollapseAll}></lightning-button>
            </lightning-button-group>
        </center>
        <div class="slds-p-around_medium lgc-bg">
            <lightning-tree-grid
                columns={columns}
                data={data}
                hide-checkbox-column="true"
                key-field="name"
                show-row-number-column="true"
                expanded-rows={currentExpanded}
                onrowaction={handleRowAction}
            ></lightning-tree-grid>
        </div>
    </div>
</template>

js

import { LightningElement,track,api } from 'lwc';

const columns = [
    {
        type: 'text',
        fieldName: 'accountName',
        label: 'Account Name',
        initialWidth: 1200,
    },
    {
        type: 'button-icon',
        typeAttributes: {
            name: 'download',
            title: 'download',
            iconName: 'action:download',
            iconClass: 'xx-small',
            class: 'slds-icon_xx-small',
            // disabled: true,
            variant: 'brand',
            // cellAttributes: {
            //     iconName: { fieldName: 'trendIcon' },
            // },
        },
    }
];

const nestedData = [
    {
        name: '123555',
        accountName: 'Rewis Inc',
        // trendIcon: 'utility:down',
    },
    {
        name: '123566',
        accountName: 'ALI Inc',
        _children: [
            {
                name: '123566-A',
                accountName: 'ALI GROUP',
            }
        ],
    },
    {
        name: '123556',
        accountName: 'Acme Corporation',
        _children: [
            {
                name: '123556-A',
                accountName: 'Acme Corporation (Bay Area)',
                _children: [
                    {
                        name: '123556-A-A',
                        accountName: 'Acme Corporation (Oakland)',
                    },
                    {
                        name: '123556-A-B',
                        accountName: 'Acme Corporation (San Francisco)',
                    },
                ],
            },
        ],
    },
];

export default class treeStructure_Portal extends LightningElement {
    @track columns = columns;
    @track data = nestedData;
    @track currentExpanded = ['123556','123556-A','123566'];
    

    clickToExpandAll() {
        const grid =  this.template.querySelector('lightning-tree-grid');
        grid.expandAll();
    }

    clickToCollapseAll() {
        const grid =  this.template.querySelector('lightning-tree-grid');
        grid.collapseAll();
    }

    handleRowAction(event) {
        console.log(event.detail.action.name);
        console.log(event.detail.row.name);
    }
}
1
  • It should be possible to set the disabled attribute on the button in the column definition. Not sure if similar can be achieved with hiding the button.
    – Damecek
    Apr 26, 2022 at 8:06

1 Answer 1

0

The following code works for me

{
    type: 'button-icon',
    label: columnOperate,
    // initialWidth: 80,
    typeAttributes: {
        name: columnDown,
        iconName: 'action:download',
        variant: 'bare',
        class: {fieldName: 'iconStyle'},
    },
}

Tree grid data:

[{
    "iconStyle": "slds-show", // OR slds-hide
    "_children": [], 
    "label": "Label 1", 
    "createdtime": "2022-08-29", 
    "parent": "a0E0w000005bC11111", 
    "name": "a030w000009n11111"
}]

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .