Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create dynamic tree grid with expande / collapse selected rows and select checkbox for the entire row select/deselect in Salesforce lightning web component LWC #61

Open
vijayk3327 opened this issue Jul 15, 2023 · 0 comments
Open

Create dynamic tree grid with expande / collapse selected rows and select checkbox for the entire row select/deselect in Salesforce lightning web component LWC #61

vijayk3327 opened this issue Jul 15, 2023 · 0 comments
Assignees
@vijayk3327
Labels
documentation Improvements or additions to documentation question Further information is requested

Comments

@vijayk3327
Copy link
Owner

In this post we are going to learn about How to Create dynamic tree grid with expanded/collapsed selected rows and select checkbox for the entire row select/deselect in Salesforce lightning web component LWC.

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component : lwcTreeGrid.html

`

Tree Grid:- Displays a hierarchical view of data in a table in Lightning Web Component (LWC) 



<div class="slds-p-around_medium lgc-bg">
    <lightning-tree-grid
        columns={gridColumns}
        data={gridData}
        key-field="name"
    ></lightning-tree-grid>

    <br/>


</div>
`

Step 2:- Create Lightning Web Component : lwcTreeGrid.js

` import { LightningElement, track } from 'lwc';
import {
EXAMPLES_COLUMNS_DEFINITION_BASIC,
EXAMPLES_DATA_BASIC,
} from './sampleData';

export default class LwcTreeGrid extends LightningElement {
@track currentExpandedRows;

// definition of columns for the tree grid
gridColumns = EXAMPLES_COLUMNS_DEFINITION_BASIC;

// data provided to the tree grid
gridData = EXAMPLES_DATA_BASIC;

// list of names for rows that are expanded
gridExpandedRows = [
    '123556',
    '123556-A',
    '123556-B',
    '123556-B-B',
    '123557',
];

// retrieve the list of rows currently marked as expanded
getCurrentExpandedRows() {
    const treegrid = this.template.querySelector('.lgc-example-treegrid');
    this.currentExpandedRows = treegrid.getCurrentExpandedRows().toString();
}

}`

Step 3:- Create Lightning Web Component : sampleData.js

` export const KEYFIELD = 'name';

export const COLUMNS_DEFINITION_BASIC = [
{
type: 'text',
fieldName: 'accountName',
label: 'Account Name',
},
{
type: 'phone',
fieldName: 'phone',
label: 'Phone Number',
},
];

export const COLUMNS_DEFINITION_NONWHITELIST = [
{
type: 'text',
fieldName: 'accountName',
label: 'Account Name',
},
{
type: 'phone',
fieldName: 'phone',
label: 'Phone Number',
sortable: true,
},
];

export const EXAMPLES_COLUMNS_DEFINITION_BASIC = [
{
type: 'text',
fieldName: 'accountName',
label: 'Account Name',
initialWidth: 300,
},
{
type: 'number',
fieldName: 'employees',
label: 'Employees',
},
{
type: 'phone',
fieldName: 'phone',
label: 'Phone Number',
},
{
type: 'url',
fieldName: 'accountOwner',
label: 'Account Owner',
typeAttributes: {
label: { fieldName: 'accountOwnerName' },
},
},
{
type: 'text',
fieldName: 'billingCity',
label: 'Billing City',
},
];

export const EXPANDED_ROWS_BASIC = ['584996-s7', '377526-zg'];

export const EXPANDED_ROWS_MISSING_CHILDREN_CONTENT = [
'584996-s7',
'377526-zg',
'816682-xr',
];

export const EXPANDED_ROWS_INVALID = [
'584996-s7',
'377526-zg',
'AWEFUL-bad_iD',
'882894-s3',
'PiCkLeS',
'31337-ID',
];

export const SELECTED_ROWS_BASIC = ['125313-7j', '584996-s7'];

export const SELECTED_ROWS_INVALID = [
'584996-s7',
'377526-zg',
'AWEFUL-bad_iD',
'882894-s3',
'PiCkLeS',
'31337-ID',
];

export const DATA_BASIC = [
{
name: '125313-7j',
accountName: 'Dach-Welch',
phone: '837-555-0100',
},
{
name: '584996-s7',
accountName: 'Corkery-Windler',
phone: '837-555-0100',
_children: [
{
name: '747773-jw',
accountName: 'Corkery-Abshire',
phone: '837-555-0100',
},
{
name: '377526-zg',
accountName: 'Robel, Friesen and Flatley',
phone: '837-555-0100',
_children: [
{
name: '955330-wp',
accountName: 'Donnelly Group',
phone: '837-555-0100',
},
{
name: '343693-9x',
accountName: 'Kshlerin Group',
phone: '837-555-0100',
},
],
},
{
name: '638483-y2',
accountName: 'Bruen, Steuber and Spencer',
phone: '837-555-0100',
},
],
},
{
name: '306979-mx',
accountName: 'Spinka LLC',
phone: '837-555-0100',
},
{
name: '066195-o1',
accountName: 'Koelpin LLC',
phone: '837-555-0100',
_children: [],
},
];

export const DATA_MISSING_CHILDREN_CONTENT = [
{
name: '125313-7j',
accountName: 'Dach-Welch',
phone: '837-555-0100',
},
{
name: '584996-s7',
accountName: 'Corkery-Windler',
phone: '837-555-0100',
_children: [],
},
{
name: '816682-xr',
accountName: 'Schmitt-Littel',
phone: '837-555-0100',
_children: [
{
name: '118985-mf',
accountName: 'Hegmann-Turcotte',
phone: '837-555-0100',
},
{
name: '841476-yo',
accountName: 'Kuhlman LLC',
phone: '837-555-0100',
},
],
},
{
name: '653331-j4',
accountName: 'Swaniawski-Hilpert',
phone: '366-145-6134',
_children: [
{
name: '605249-ei',
accountName: 'Swaniawski, Veum and Barton',
phone: '837-555-0100',
},
{
name: '686777-5d',
accountName: 'Lubowitz, McClure and Russel',
phone: '837-555-0100',
},
{
name: '582166-n4',
accountName: 'Reichel-Jerde',
phone: '837-555-0100',
_children: [
{
name: '513683-mm',
accountName: 'Tromp Inc',
phone: '837-555-0100',
},
],
},
],
},
{
name: '306979-mx',
accountName: 'Spinka LLC',
phone: '837-555-0100',
},
{
name: '066195-o1',
accountName: 'Koelpin LLC',
phone: '837-555-0100',
_children: [],
},
];

export const EXAMPLES_DATA_BASIC = [
{
name: '123555',
accountName: 'Rewis Inc',
employees: 3100,
phone: '837-555-0100',
accountOwner: 'http://salesforce.com/fake/url/jane-doe',
accountOwnerName: 'Jane Doe',
billingCity: 'Phoeniz, AZ',
},

 {
     name: '123556',
     accountName: 'Acme Corporation',
     employees: 10000,
     phone: '837-555-0100',
     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
     accountOwnerName: 'John Doe',
     billingCity: 'San Francisco, CA',
     _children: [
         {
             name: '123556-A',
             accountName: 'Acme Corporation (Bay Area)',
             employees: 3000,
             phone: '837-555-0100',
             accountOwner: 'http://salesforce.com/fake/url/jane-doe',
             accountOwnerName: 'John Doe',
             billingCity: 'New York, NY',
             _children: [
                 {
                     name: '123556-A-A',
                     accountName: 'Acme Corporation (Oakland)',
                     employees: 745,
                     phone: '837-555-0100',
                     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
                     accountOwnerName: 'John Doe',
                     billingCity: 'New York, NY',
                 },
                 {
                     name: '123556-A-B',
                     accountName: 'Acme Corporation (San Francisco)',
                     employees: 578,
                     phone: '837-555-0100',
                     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
                     accountOwnerName: 'Jane Doe',
                     billingCity: 'Los Angeles, CA',
                 },
             ],
         },

         {
             name: '123556-B',
             accountName: 'Acme Corporation (East)',
             employees: 430,
             phone: '837-555-0100',
             accountOwner: 'http://salesforce.com/fake/url/jane-doe',
             accountOwnerName: 'John Doe',
             billingCity: 'San Francisco, CA',
             _children: [
                 {
                     name: '123556-B-A',
                     accountName: 'Acme Corporation (NY)',
                     employees: 1210,
                     phone: '837-555-0100',
                     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
                     accountOwnerName: 'Jane Doe',
                     billingCity: 'New York, NY',
                 },
                 {
                     name: '123556-B-B',
                     accountName: 'Acme Corporation (VA)',
                     employees: 410,
                     phone: '837-555-0100',
                     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
                     accountOwnerName: 'John Doe',
                     billingCity: 'New York, NY',
                     _children: [
                         {
                             name: '123556-B-B-A',
                             accountName: 'Allied Technologies',
                             employees: 390,
                             phone: '837-555-0100',
                             accountOwner:
                                 'http://salesforce.com/fake/url/jane-doe',
                             accountOwnerName: 'Jane Doe',
                             billingCity: 'Los Angeles, CA',
                             _children: [
                                 {
                                     name: '123556-B-B-A-A',
                                     accountName: 'Allied Technologies (UV)',
                                     employees: 270,
                                     phone: '837-555-0100',
                                     accountOwner:
                                         'http://salesforce.com/fake/url/jane-doe',
                                     accountOwnerName: 'John Doe',
                                     billingCity: 'San Francisco, CA',
                                 },
                             ],
                         },
                     ],
                 },
             ],
         },
     ],
 },

 {
     name: '123557',
     accountName: 'Rhode Enterprises',
     employees: 6000,
     phone: '837-555-0100',
     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
     accountOwnerName: 'John Doe',
     billingCity: 'New York, NY',
     _children: [
         {
             name: '123557-A',
             accountName: 'Rhode Enterprises (UCA)',
             employees: 2540,
             phone: '837-555-0100',
             accountOwner: 'http://salesforce.com/fake/url/jane-doe',
             accountOwnerName: 'John Doe',
             billingCity: 'New York, NY',
         },
     ],
 },

 {
     name: '123558',
     accountName: 'Tech Labs',
     employees: 1856,
     phone: '837-555-0100',
     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
     accountOwnerName: 'John Doe',
     billingCity: 'New York, NY',
     _children: [
         {
             name: '123558-A',
             accountName: 'Opportunity Resources Inc',
             employees: 1934,
             phone: '837-555-0100',
             accountOwner: 'http://salesforce.com/fake/url/jane-doe',
             accountOwnerName: 'John Doe',
             billingCity: 'Los Angeles, CA',
         },
     ],
 },

];

export const EXAMPLES_DATA_LAZY_LOADING = [
{
name: '123555',
accountName: 'Rewis Inc',
employees: 3100,
phone: '837-555-0100',
accountOwner: 'http://salesforce.com/fake/url/jane-doe',
accountOwnerName: 'Jane Doe',
billingCity: 'Phoeniz, AZ',
},

 {
     name: '123556',
     accountName: 'Acme Corporation',
     employees: 10000,
     phone: '837-555-0100',
     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
     accountOwnerName: 'John Doe',
     billingCity: 'San Francisco, CA',
     _children: [
         {
             name: '123556-A',
             accountName: 'Acme Corporation (Bay Area)',
             employees: 3000,
             phone: '837-555-0100',
             accountOwner: 'http://salesforce.com/fake/url/jane-doe',
             accountOwnerName: 'John Doe',
             billingCity: 'New York, NY',
             _children: [],
         },

         {
             name: '123556-B',
             accountName: 'Acme Corporation (East)',
             employees: 430,
             phone: '837-555-0100',
             accountOwner: 'http://salesforce.com/fake/url/jane-doe',
             accountOwnerName: 'John Doe',
             billingCity: 'San Francisco, CA',
             _children: [
                 {
                     name: '123556-B-A',
                     accountName: 'Acme Corporation (NY)',
                     employees: 1210,
                     phone: '837-555-0100',
                     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
                     accountOwnerName: 'Jane Doe',
                     billingCity: 'New York, NY',
                 },
                 {
                     name: '123556-B-B',
                     accountName: 'Acme Corporation (VA)',
                     employees: 410,
                     phone: '837-555-0100',
                     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
                     accountOwnerName: 'John Doe',
                     billingCity: 'New York, NY',
                     _children: [],
                 },
             ],
         },
     ],
 },

 {
     name: '123557',
     accountName: 'Rhode Enterprises',
     employees: 6000,
     phone: '837-555-0100',
     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
     accountOwnerName: 'John Doe',
     billingCity: 'New York, NY',
     _children: [
         {
             name: '123557-A',
             accountName: 'Rhode Enterprises (UCA)',
             employees: 2540,
             phone: '837-555-0100',
             accountOwner: 'http://salesforce.com/fake/url/jane-doe',
             accountOwnerName: 'John Doe',
             billingCity: 'New York, NY',
         },
     ],
 },

 {
     name: '123558',
     accountName: 'Tech Labs',
     employees: 1856,
     phone: '837-555-0100',
     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
     accountOwnerName: 'John Doe',
     billingCity: 'New York, NY',
     _children: [
         {
             name: '123558-A',
             accountName: 'Opportunity Resources Inc',
             employees: 1934,
             phone: '837-555-0100',
             accountOwner: 'http://salesforce.com/fake/url/jane-doe',
             accountOwnerName: 'John Doe',
             billingCity: 'Los Angeles, CA',
         },
     ],
 },

];`

Step 4:- Create Lightning Web Component : lwcTreeGrid.css

` .lgc-bg {
background-color: rgb(242, 242, 242);
}

.lgc-bg-inverse {
background-color: rgb(22, 50, 92);
}`

Step 5:- Create Lightning Web Component : lwcTreeGrid.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>

→ Get source code live demo link:-
@vijayk3327 vijayk3327 added documentation Improvements or additions to documentation question Further information is requested labels Jul 15, 2023
@vijayk3327 vijayk3327 self-assigned this Jul 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@vijayk3327 vijayk3327

Labels
documentation Improvements or additions to documentation question Further information is requested
Projects
LWC
Status: No status
Milestone
No milestone
Development

No branches or pull requests
1 participant
@vijayk3327