function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Eric-aejeEric-aeje 

Help with typeAttributes for LWC custom datatable with checkbox lightning-input

Hi, can someone help or provide a example of using a checkbox lightning-input within a custom Lightning Web Component datatable? I'm having issue with the typeAttributes and being able to get the "checked" value to come through.

Below is an outline of the code:

custom datatable folder

custom datatable.html

<c-custom-data-table
    column-widths-mode="fixed"
    suppress-bottom-bar
    class="table"
    hide-default-actions="true"
    hide-checkbox-column
    resize-column-disabled="false"
    resize-step="200px"
    key-field="Id"
    data={data}
    columns={columns}
    draft-values={draftValues}>
</c-custom-data-table>


custom datatable.js
{
    label: 'value',
    fieldName: 'value__c',
    type: 'customCheckboxCell',
    cellAttributes: {class: 'value'},
    typeAttributes: {
        checked: true
    }
},

customcheckbox folder

customcheckbox.html

<template>
  <template if:true={checkBox}>
                <lightning-input 
                        type="checkbox" 
                        label="checkbox" 
                        variant="label-hidden" 
                        name="checkbox" 
                        onchange={handleCheckboxClick}
                        checked={checked}
                        class="checkbox"
                        >
                </lightning-input>
  </template>
</template>

customcheckbox.js

import { LightningElement, api } from 'lwc';

export default class CustomCheckbox extends LightningElement {

    @api checkBox;
    @api id;
    @api checked;

    handleCheckboxClick(e){
        e.preventDefault();
        if(this.checkBox){
            console.info('clicked checkbox on row with id: '+this.id)
        }
    }
}



customDataTable folder

customCheckboxCell.html
<template>
    <c-custom-checkbox id={value} check-box></c-custom-checkbox>
</template>

customDataTable.js
import LightningDatatable from "lightning/datatable";
import customCheckboxCell from "./customCheckboxCell.html";

export default class customDataTable extends LightningDatatable {
  static customTypes = {
    customCheckboxCell: {
      template: customCheckboxCell, // Which html will render
      typeAttributes: ['checked']  // attribute of custom type
    }
  };
  
}