You need to sign in to do that
Don't have an account?

Add checkbox to nested array in lwc
Here is my js code for the component
import { LightningElement,api } from 'lwc';
export default class testPaginationNestedArray extends LightningElement {
data = [];
globalActions = [];
columns = [];
keyField;
showPaginationTable = false;
connectedCallback() {
const actions = [
{ label: 'Show details', name: 'show_details' },
{ label: 'Delete', name: 'delete' },
];
this.columns = ["Name", "Website", "Phone", "Amount", "Close At"];
this.data = [
["Test Name 1", {"value": "testname1.com", "type": "url"}, {"value": "09898989801", "type": "phone"}, 230.45, "2021-02-28" ],
["Test Name 2", {"value": "testname2.com", "type": "url"}, {"value": "09898989802", "type": "phone"}, 240.5, "2021-01-28" ],
["Test Name 3", {"value": "testname3.com", "type": "url"}, {"value": "09898989803", "type": "phone"}, 250.65, "2021-03-28" ],
["Test Name 4", {"value": "testname4.com", "type": "url"}, {"value": "09898989804", "type": "phone"}, 260.4, "2021-02-28" ],
["Test Name 5", {"value": "testname5.com", "type": "url"}, {"value": "09898989805", "type": "phone"}, 270, "2021-01-28" ],
["Test Name 6", {"value": "testname6.com", "type": "url"}, {"value": "09898989806", "type": "phone"}, 280.45, "2021-03-28" ],
["Test Name 7", {"value": "testname7.com", "type": "url"}, {"value": "09898989807", "type": "phone"}, 290.5, "2021-02-28" ],
["Test Name 8", {"value": "testname8.com", "type": "url"}, {"value": "09898989808", "type": "phone"}, 130.65, "2021-01-28" ],
["Test Name 9", {"value": "testname9.com", "type": "url"}, {"value": "09898989809", "type": "phone"}, 330.4, "2021-03-28" ],
["Test Name 10", {"value": "testname10.com", "type": "url"}, {"value": "09898989810", "type": "phone"}, 430, "2021-02-28" ]
];
this.globalActions = [
{label: "Delete", type: "delete"},
{label: "Hide", type: "hide"},
{label: "Edit", type: "edit"}
];
this.keyField=true;
this.showPaginationTable = true;
}
handleRowAction(event) {
alert("Row Action Fired!\nAction Name: " + event.detail.actionName + "\nRow: " + JSON.stringify(event.detail.row));
}
handleGlobalAction(event) {
alert("Global Action Fired!\nAction Type: " + event.detail.actionType + "\nSelected Rows: " + JSON.stringify(event.detail.selectedRows));
}
handleSave(event) {
alert("Inline Edit Save Action Fired!\Draft Values: " + JSON.stringify(event.detail.draftValues));
}
}
Here is my html code for the component
<template>
<div class="demoContainer">
<h2 class="slds-text-heading_medium slds-var-m-bottom_medium">Pagination Datatable - With data structure type of
nested array Enhanced</h2>
<template if:true={showPaginationTable}>
<c-pagination-datatable-full structure-type="2" table-columns={columns} table-data={data} key-field={keyField}
rows-per-page="10" insert-numbered-column="true" show-page-numbers="true" first-last-buttons="true"
previous-next-buttons="true" numbered-buttons="true" show-filters="true" max-number-of-index-buttons="5"
dynamic-rows-per-page="true" onrowaction={handleRowAction} show-checkbox-column="true"
global-actions={globalActions} onglobalaction={handleGlobalAction} onsave={handleSave} >
</c-pagination-datatable-full>
</template>
</div>
</template>
Recommend reviewing https://salesforce.stackexchange.com/questions/370721/lwc-checkbox-read-only-reset
https://salesforce.stackexchange.com/questions/257727/implement-three-state-checkbox-using-lwc