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!

1 Answer 1


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


public with sharing class GetTaskController {

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';

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

public class TaskWrapper{
    public string TaskId;
    public string Subject;
    public string Priority;
    public string Status;
    public string ButtomIcon;



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

export default class StackExchangeTableExemple extends LightningElement {


  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);

      // do something


<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">
      <tr class="slds-line-height_reset">
        <th class="" scope="col">
          <div class="slds-truncate" title="Subject">Subject</div>
        <th class="" scope="col">
          <div class="slds-truncate" title="Priority">Priority</div>
        <th class="" scope="col">
          <div class="slds-truncate" title="Status">Status</div>
      <template for:each={tasks} for:item="tw">
        <tr  key={tw.TaskId} class="slds-hint-parent">
            <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>

Result: enter image description here


You must log in to answer this question.

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