Cloning the task list view datatable in custom LWC (Status value and clickable button in same column)

lightning-datatablelightning-web-componentsstyle

I'm trying to create a Lightning datatable in Salesforce that displays a status value and a clickable button icon in the same column similar to the task recent view table.
enter image description here
The button should be different depending on the value of the status field (i.e. "Open" or "Complete"). I've tried using the type: 'button-icon' column type with typeAttributes to dynamically set the button icon and label based on the status value, but it doesn't seem to be working correctly.

Is there a way to achieve this functionality with a single column in the Lightning datatable? Or do I need to create separate columns for the status value and the button icon? Any advice or suggestions would be greatly appreciated. Thank you!

Best Answer

You can use an htm table and an apex helper class...try the code below

Apex:

public with sharing class GetTaskController {

@AuraEnabled(cacheable=true)
public static List<TaskWrapper> getTasks(){
    try {
        
        List<Task> tasks = [
            SELECT Id, Subject, Priority, Status
            FROM Task
            WHERE Status IN ('Completed', 'Not Started')
            LIMIT 20
        ];

        List<TaskWrapper> task_wrapper_list = new List<TaskWrapper>();

        for(Task t : tasks){
            TaskWrapper tw = new TaskWrapper();
            tw.TaskId = t.Id;
            tw.Subject = t.Subject;
            tw.Priority = t.Priority;
            tw.Status = t.Status;
            switch on t.Status {
                when  'Completed'{
                    tw.ButtomIcon = 'standard:task';
                }
                when 'Not Started' {
                    tw.ButtomIcon = 'standard:drafts';
                }
            }
            task_wrapper_list.add(tw);
        }

        return task_wrapper_list;
    
    } catch (Exception e) {
        throw new AuraHandledException(e.getMessage());
    }
}

public class TaskWrapper{
    @AuraEnabled
    public string TaskId;
    @AuraEnabled
    public string Subject;
    @AuraEnabled
    public string Priority;
    @AuraEnabled
    public string Status;
    @AuraEnabled
    public string ButtomIcon;
}

}

JS:

import { LightningElement, wire } from 'lwc';
import wrapperData from "@salesforce/apex/GetTaskController.getTasks";


export default class StackExchangeTableExemple extends LightningElement {

  tasks;

  @wire(wrapperData)
  wiredRecord({ error, data }) {
      if (data) {
          this.tasks = data;
      }
      else if(error){
          if (Array.isArray(error.body)) {
              let errors = error.body.map(e => e.message).join(', ');
              console.log('ERRO: ' + errors);
          }
          else if (typeof error.body.message === 'string') {
              let errors = error.body.message;
              console.log('ERRO: ' + errors);
          }
      }
  }

  handleClick(event){
      // do something
  }
}

HTML:

<template>
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered" aria-labelledby="element-with-table-label other-element-with-table-label">
    <thead>
      <tr class="slds-line-height_reset">
        <th class="" scope="col">
          <div class="slds-truncate" title="Subject">Subject</div>
        </th>
        <th class="" scope="col">
          <div class="slds-truncate" title="Priority">Priority</div>
        </th>
        <th class="" scope="col">
          <div class="slds-truncate" title="Status">Status</div>
        </th>
      </tr>
    </thead>
    <tbody>  
      <template for:each={tasks} for:item="tw">
        <tr  key={tw.TaskId} class="slds-hint-parent">
          <td>{tw.Subject}</td>
          <td>{tw.Priority}</td>
          <td>
            <lightning-icon icon-name={tw.ButtomIcon} size="small"></lightning-icon>
            <lightning-button variant="base" label={tw.Status} onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
          </td>
        </tr> 
      </template>       
    </tbody>
</table>

Result: enter image description here

Related Topic