You need to sign in to do that
Don't have an account?
Eric-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 } }; }