1

I have added an array of employees into the Datatable, while clicking on each row the selected row is highlighted in the table And the selected rows marker is visible on the map, But now i want to highlight the table row whenever click on any marker from the map, but it's not getting highlight

Below is my code

const [selectedEmployee, setSelectedEmployee] = useState([]);

const setEmployeeDataId = (e) => {
for (let i = 0; i < e.length; i++) {
onTableRowClick(e[i].id); // This method is use to show marker on map
}
}

<DataTable ref={dt} value={rows} selection={selectedEmployee} onSelectionChange={(e) => {setEmployeeDataId(e.value); setSelectedEmployee(e.value);}}
dataKey="id" globalFilter={globalFilter} responsiveLayout="scroll">
<Column selectionMode="multiple" headerStyle={{ width: '2rem' }} exportable={false}></Column>
<Column header="Action" body={actionBodyTemplate} exportable={false} style={{ minWidth: '2rem' }}></Column>
<Column field="name" header="Name" sortable style={{ minWidth: '2rem' }}></Column>
<Column field="workingTime" header="Working Time" sortable style={{ minWidth: '2rem' }}></Column>
</DataTable>
</div>

While clicking on the map marker all selected marker ids are stored in props.employeeMarkerUIConfig, but I am not able to highlight these ids on the map

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
ravi
  • 11
  • 2

1 Answers1

0

When you click on the map you need to update your Selected array here...

const [selectedEmployee, setSelectedEmployee] = useState([]);

When you properly put the selection there the table will render correctly. So you need to handle when you click on the map how to find the right employee and add them to the selected array.

Melloware
  • 10,435
  • 2
  • 32
  • 62