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
jagadeep kjagadeep k 

Add check box to map array in lwc

Map Array
I want to display checkbox for map array the js code is as below
import { LightningElement, api  } from 'lwc';
export default class testPaginationMapArrayEnhanced extends LightningElement {
    @api structureType = 3;
    data = [];
    globalActions = [];
  //  columns = [];
   // keyField;
    showPaginationTable = false;
   
    connectedCallback() {
        const actions = [
            { label: 'Show details', name: 'show_details' },
            { label: 'Delete', name: 'delete' },
        ];
   
       
        /* {  type: 'action',
        typeAttributes: { rowActions: actions}
    }*/
        this.data = [
            { "name":"Test Name 1","website": {"value": "testname1.com", "type": "url"}, "phone": {"value": "09898989801", "type": "phone"}, "amount": 230.45, "closeAt": "2021-02-28"},
            { "name": "Test Name 2", "website": {"value": "testname2.com", "type": "url"}, "phone": {"value": "09898989802", "type": "phone"}, "amount": 240.5, "closeAt": "2021-01-28" },
            { "name": "Test Name 3", "website": {"value": "testname3.com", "type": "url"}, "phone": {"value": "09898989803", "type": "phone"}, "amount": 250.65, "closeAt": "2021-03-28" },
            { "name": "Test Name 4", "website": {"value": "testname4.com", "type": "url"}, "phone": {"value": "09898989804", "type": "phone"}, "amount": 260.4, "closeAt": "2021-02-28" },
            { "name":  "Test Name 5", "website": {"value": "testname5.com", "type": "url"}, "phone": {"value": "09898989805", "type": "phone"}, "amount": 270, "closeAt": "2021-01-28" },
            { "name":  "Test Name 6", "website": {"value": "testname6.com", "type": "url"}, "phone": {"value": "09898989806", "type": "phone"}, "amount": 280.45, "closeAt": "2021-03-28" },
            { "name":  "Test Name 7", "website": {"value": "testname7.com", "type": "url"}, "phone": {"value": "09898989807", "type": "phone"}, "amount": 290.5, "closeAt": "2021-02-28" },
            { "name":  "Test Name 8", "website": {"value": "testname8.com", "type": "url"}, "phone": {"value": "09898989808", "type": "phone"}, "amount": 130.65, "closeAt": "2021-01-28" },
            { "name":  "Test Name 9", "website": {"value": "testname9.com", "type": "url"}, "phone": {"value": "09898989809", "type": "phone"}, "amount": 330.4, "closeAt": "2021-03-28" },
            { "name":  "Test Name 10", "website": {"value": "testname10.com", "type": "url"}, "phone": {"value": "09898989810", "type": "phone"}, "amount": 430, "closeAt": "2021-02-28" },
           
        ];
        this.globalActions = [
            {label: "Delete", type: "delete"},
            {label: "Hide", type: "hide"},
            {label: "Edit", type: "edit"}
           
        ];
   
        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));
    }
    }
    html code is as follows
<template>
    <div class="demoContainer">
        <h2 class="slds-text-heading_medium slds-var-m-vertical_medium">Enhanced Pagination Datatable - With Array of Map</h2>
        <template if:true={showPaginationTable}>        
            <c-pagination-datatable-full structure-type="3" table-data={data}  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}
                global-actions={globalActions} onglobalaction={handleGlobalAction} onsave={handleSave}>
            </c-pagination-datatable-full>
           
        </template>
    </div>
</template>