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

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: