Se crea el componente y sus estilos para visualizar la lista de puntos de...

import DataTable, { TableColumn } from 'react-data-table-component';

import { usePlace } from '../../../hooks/usePlace';

import './assets/css/styles.css';

import { LoadingSpinner } from '../../loading_spinner/loading_spinner';

import { faEdit } from '@fortawesome/free-solid-svg-icons';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { Dispatch, SetStateAction, useEffect, useState } from 'react';

import { usePointOfInterest } from '../../../hooks/usePointOfInterest';

import { PointOfInterest } from '../../../infraestructure/entities/poi';

interface props{

  idTown: number;

  isWindowActive: boolean;

  setWindowVisibility: (visibility: boolean) => void;

  setActualPoint: Dispatch<SetStateAction<PointOfInterest | undefined>>;

  setIsRegisterPane: Dispatch<SetStateAction<boolean>>;

}

export const AdminPanelPoiList = ({idTown, isWindowActive}: props) => {

  const [isLoading, setIsLoading] = useState(false);

  const {

    placeList,

    updatePlacesByTown

  } = usePlace();

  const {

    pending, 

    updatePOIByPlace,

    poiList

  } = usePointOfInterest();

  const columns : TableColumn<PointOfInterest>[] = [

    {

      name: "Identificador",

      selector: row => row.idPoint || -1,

      sortable: true

    },

    {

      name: "Nombre", 

      selector: row => row.name,

      sortable: true

    }, 

    {

      name: "Descripción", 

      selector: row => row.contentES,

      sortable: true

    },

    {

      name: "Acciones",

      cell: (row) => {

        return (

          <FontAwesomeIcon style={{cursor: 'pointer'}} icon={faEdit} 

          />

        );

      }

    }

  ];

  useEffect(() => {

    setIsLoading(true);

    updatePlacesByTown(idTown);

    setIsLoading(false);

  },[]);

  const refreshList = (idPlace: number) => {

    updatePOIByPlace(idPlace)

  };

  if(isLoading) return <LoadingSpinner/>

  return (

    <div className="poi_list_cnt">

      <div className="poi_list_header">

      Lugar

      <select

        disabled={isWindowActive}

        name="place_select" 

        onChange={(event) => {

          const index = Number(event.target.value);

          const place = placeList[index];

          refreshList(place.idPlace || 0);

          }}

        >

          {placeList === null || placeList.length===0 ? 

          <option disabled defaultValue="" value="">No hay lugares</option>

          : 

          <>

            <option disabled selected value={0}>Selecciona el lugar</option>

            {placeList.map((place, index) => {

            return (

              <option key={place.idPlace} value={index}>{place.name}</option>

            );

            })}

          </>

          }

        </select>

      </div>

      <div className="poi_list_body">

        <DataTable noDataComponent="No hay puntos de interés que mostrar" progressPending={pending}

        disabled={isWindowActive}

          progressComponent={

            <LoadingSpinner style={{display: 'flex'}}/>

          }

          columns={columns} data={poiList} selectableRows className="data_table"

        />

      </div>

    </div> 

  );

}

 No newline at end of file

.poi_list_cnt{

  display: flex;

  height: 100%;

  width: 100%;

  flex-direction: column;

}

.poi_list_header{

  display: flex;

  width: 100%;

  height: 8%;

  justify-content: center;

  align-items: center;

}

.poi_list_body{

  display: flex;

  width: 100%;

  flex-grow: 1;

}

.data_table{

  height: 100%;

}

.bhFeAR{

  display: flex !important;

  height: 100%;

} 

.rdt_TableBody{

  max-height: 100%;

  overflow-y: auto;

}

 No newline at end of file