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

Can someone help me find an example or or how to make a lazy loader like this but with a for:each loop ?

I'm getting data from an apex class

public without sharing class Controller {

    @AuraEnabled (cacheable = true)
    public static List<Case> getCaselist() {

        try {
            return [
            SELECT Id, CaseNumber, Status, Description, CreatedDate
            FROM Case 
            ];
        } 
        catch(Exception e) {
            throw new AuraHandledException('Something went wrong:'+ e.getMessage());
        }
    }

HTML:

<template for:each={recordList} for:item="c" for:index="index">
    <div class="table-row" key={c.Id}>
        <div class="table-col">
            {c.Status}
            {c.Description}
            {c.CreatedDate}
        </div>
    </div>
</template>

http://amitsalesforce.blogspot.com/2020/07/lazy-loading-in-lightning-web-component.html

Hi I'm looking to find the number of items in a lighting web components for each loop from an apex class?

// html
<template for:each={caselist.data} for:item="c" for:index="index">
<div class="ca-table-row cc_table_row" key={c.Id}>
    {c.name}
    </div>
</template>

// JS
</div>
import { LightningElement, api, wire, track } from 'lwc';
import retrieveCases from '@salesforce/apex/Controller.getCaselist';
export default class lightningComp extends LightningElement {
    @wire(retrieveCases)
    caselist; 
    // find how many items are in caselist for each loop
}


 

Can someone help me find an example or or how to make a lazy loader like this but with a for:each loop ?

I'm getting data from an apex class

public without sharing class Controller {

    @AuraEnabled (cacheable = true)
    public static List<Case> getCaselist() {

        try {
            return [
            SELECT Id, CaseNumber, Status, Description, CreatedDate
            FROM Case 
            ];
        } 
        catch(Exception e) {
            throw new AuraHandledException('Something went wrong:'+ e.getMessage());
        }
    }

HTML:

<template for:each={recordList} for:item="c" for:index="index">
    <div class="table-row" key={c.Id}>
        <div class="table-col">
            {c.Status}
            {c.Description}
            {c.CreatedDate}
        </div>
    </div>
</template>

http://amitsalesforce.blogspot.com/2020/07/lazy-loading-in-lightning-web-component.html

Hi I'm looking to find the number of items in a lighting web components for each loop from an apex class?

// html
<template for:each={caselist.data} for:item="c" for:index="index">
<div class="ca-table-row cc_table_row" key={c.Id}>
    {c.name}
    </div>
</template>

// JS
</div>
import { LightningElement, api, wire, track } from 'lwc';
import retrieveCases from '@salesforce/apex/Controller.getCaselist';
export default class lightningComp extends LightningElement {
    @wire(retrieveCases)
    caselist; 
    // find how many items are in caselist for each loop
}