Showing the Popups Data inFeatureTable

[JeyaSurya]

How do I make it so that when a user clicks on a popup on the map, they can see the corresponding details in the FeatureTable?

import { Box } from '@mui/material'
import React, { useEffect } from 'react'
import { loadModules } from 'esri-loader'

 

export default function Home() {
  useEffect(() => {
    loadModules(['esri/WebMap', 'esri/views/MapView','esri/layers/FeatureLayer',
    'esri/widgets/FeatureTable',], { css: true })
      .then(([WebMap, MapView,FeatureLayer, FeatureTable,]) => {
        let webmap = new WebMap({
          portalItem: {
            id: '' //webmap id
          }
        })

 

        let view = new MapView({
          container: 'viewDiv',
          map: webmap
        })

 

        view.when(() => {
          const featureLayer = new FeatureLayer({
            portalItem: {
              id: '' //feature layer id
            },
            outFields: ['*'],
            title: 'Customer'
          })

 

          webmap.add(featureLayer)

 

          const featureTable = new FeatureTable({
            view: view,
            layer: featureLayer,
            multiSortEnabled: true,
            editingEnabled: true,
            tableTemplate: {
              columnTemplates: [
                // Column template configurations
              ]
            },
            container: 'tableDiv'
          })

 

          view.ui.add(featureTable, 'bottom')
        })
      })
      .catch(error => {
        console.error('Error loading modules:', error)
      })
  }, [])

 

  return (
<Box>
<Box id='viewDiv' sx={{ flex: '1', width: '100%' }}></Box>
<Box id='tableDiv' sx={{ flex: '1', width: '100%' }}></Box>
</Box>
  )
}