1

I'm using Lightning-tree-grid to display my data and I want to make the first column displayed as a link to the record page, So I tried to make it a button :

 type: 'button',
        typeAttributes: {
          label: { fieldName: 'name' }, 
          name: { fieldName: 'name' }, 
          title: { fieldName: 'name' }, 
          variant: 'base'
        }

but I couldn't found a way to add an action to this button, the second solution was to use the onrowaction attribute like this :

 <lightning-tree-grid
          data={gridData}
          columns={gridColumns}
          key-field="name"
          hide-checkbox-column="true"
          onrowaction={handleRowAction}
        >
</lightning-tree-grid>

but no action is sent so I can't handle the action I think that this attribute is not supported by LWC tree-grid but only for aura tree-grid. So if any one has an idea on how to make the first column of a tree-grid a button with action I'll be gratful because I don't want to use a standard link(using the URL) but the objectif is to use lighting standard navigation.

import { NavigationMixin } from 'lightning/navigation';

1 Answer 1

3

To use onrowaction, you need to define the actions correctly. I created two playgrounds to demonstrate this.

.html

<template>
 <lightning-tree-grid
          data={data}
          columns={columns}
          key-field="id"
          hide-checkbox-column="true"
          onrowaction={handleRowAction}
        >
</lightning-tree-grid>

</template>

As a Dropdown Menu:

import { LightningElement } from "lwc";

export default class App extends LightningElement {
  data = [
    { name: "Demo 1", id: "1" },
    { name: "Demo 2", id: "2" },
  ];
  columns = [
    { label: "Name", fieldName: "name" },
    {
      type: "action",
      typeAttributes: { rowActions: [{ name: "demo", label: "Demo" }] }
    },
  ];
  handleRowAction(event) {
      console.log(event.detail.row);
  }
}

As a Button:

import { LightningElement } from "lwc";

export default class App extends LightningElement {
  data = [
    { name: "Demo 1", id: "1" },
    { name: "Demo 2", id: "2" },
  ];
  columns = [
    { label: "Name", fieldName: "name" },
    {
      type: "button",
      typeAttributes: { label: 'View', name: 'view' }
    },
  ];
  handleRowAction(event) {
      console.log(event.detail.action.name);
      console.log(event.detail.row.id);
  }
}

Note: Lightning really strongly encourages your action/dropdown to be on the last column, not the first. If you expect this to work, you should place them to the right, not the left.

3
  • Thank you for you response , is there any way to put the action or the button on the first column ?
    – collin
    Commented May 11, 2020 at 8:05
  • @collin I couldn't get it to work; you can try, but again, SLDS expects the buttons/menu on the right. If you want it to look like Salesforce, you should follow their guidelines anyways.
    – sfdcfox
    Commented May 11, 2020 at 11:40
  • actually I coudn't make work neither on the firt column but It work on the other columns , In the documentation it say that it supports buttons on the first colum but apparentlly there is a bug github.com/salesforce/lwc/issues/1571 , thank you for your response
    – collin
    Commented May 11, 2020 at 15:23

You must log in to answer this question.

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