To display the first name of a member in the first column of my <lightning-tree-grid>, I am using type url to make it clickable, navigating to its record.
{ label: 'First Name', fieldName: 'MemberRecord', type: 'url', typeAttributes: { label: { fieldName: 'MemberFirstName' } } },
This works as expected as depicted below.
However, when displaying groups in the first column, they are shown as URLs as well. Below I am grouping by age group, which would show Adult (10) (contains 10 items) but instead has https:// added and is clickable like a link as well.
I would like to see First name (the original column) displayed as link, like it is now, but when grouping by another column I would like the group to be displayed as plain text.
How do I achieve this?
Update (added suggested info & code)
- In the
<lightning-tree-grid>HTML component I am setting the columns property with relevant column data directly - When the page loads, an Apex call is being done, loading the grid data
- Then some functions are called to (re-)group the data and set the
gridDatavariable, which is assigned to the<lightning-tree-grid>HTML component and was empty initially when columns were already assigned to the component - This process is triggered again when columns are re-grouped through the user interface (UI) and the
gridDatavariable is re-assigned
The key here is that on first load of the page the issue already occurs, even when the data is already grouped initially.
Even if I assign dummy data to the gridData variable directly and skip the Apex call and (re-)grouping of data, the issue already occurs
Minimum Example (input data - tested)
columns = [
{
label: 'First Name',
fieldName: 'MemberRecord',
type: 'url',
typeAttributes: {
label: { fieldName: 'MemberFirstName' }
}
},
{ label: 'Last Name', fieldName: 'MemberLastName', type: 'text' }
];
gridData = [
{
MemberRecord: 'Johnson (1)',
_uniqueRowid: 'group_1',
_children: [
{
MemberRecord: 'https://example.com/member/1',
MemberFirstName: 'Thomas',
MemberLastName: 'Johnson',
_uniqueRowid: 'student_1'
}
]
},
{
MemberRecord: 'Williams (2)',
_uniqueRowid: 'group_2',
_children: [
{
MemberRecord: 'https://example.com/member/2',
MemberFirstName: 'John',
MemberLastName: 'Williams',
_uniqueRowid: 'student_2'
},
{
MemberRecord: 'https://example.com/member/3',
MemberFirstName: 'James',
MemberLastName: 'Williams',
_uniqueRowid: 'student_3'
}
]
}
];
HTML:
<lightning-tree-grid
key-field="_uniqueRowid"
columns={columns}
data={gridData}
>
</lightning-tree-grid>
MemberRecord), which will be filled with the Group name + member count.