Se crea el componente y los estilos para la tabla de visualización de lugares

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

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

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

import { Place } from '../../../infraestructure/entities/place';

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

export const AdminPanelPlaceList = () => {

  const {

    updateTownsList,

    statesList,

    townsList,

    placeList,

    updatePlacesByTown,

    pending

  } = usePlace();

  const columns : TableColumn<Place>[] = [

    {

      name: "Identificador", 

      selector: row => row.idPlace || 0

    },

    {

      name: "Nombre", 

      selector: row => row.name,

      sortable: true

    }, 

    {

      name: "Estado", 

      selector: row => row.available

    }

  ];

  return (

    <div className="place_list_cnt">

      <div className="place_list_header">

        <div>

          Estado

          <select

            name="state_select" 

            onChange={(event) => {

              updateTownsList(Number(event.target.value), 

                event.target.options[event.target.selectedIndex].text);

              }}

            >

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

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

              : 

              <>

                <option disabled selected value="">Selecciona el estado</option>

                {statesList.map((state, index) => {

                return (

                  <option key={state.stateId} value={state.stateId}>{state.name}</option>

                );

                })}

              </>

              }

          </select>

        </div>

        <div> 

          Pueblo mágico

          <select

            onChange={(event) => {

              updatePlacesByTown(Number(event.target.value));

            }}

          >

            {

              townsList === null || townsList.length===0 ? 

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

              : 

              <>

                <option disabled selected value="">Selecciona el estado</option>

                {townsList.map((town) => {

                return (

                  <option key={town.idTown} value={town.idTown}>{town.name}</option>

                );

                })}

              </>

            }

        </select>

        </div>

      </div>

      <div className="place_list_body">

        <DataTable style={{zIndex: 0}} noDataComponent="No hay lugares que mostrar" progressPending={pending}

          progressComponent={

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

          }

          columns={columns} data={placeList} selectableRows className="town_list_table"/> 

      </div>

    </div>

  );

}

 No newline at end of file

.place_list_cnt{

  display: flex;

  flex-direction: column;

  height: 100%;

  width: 100%;

}

.place_list_header{

  width: 100%;

  height: 10%;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: row;

}

.place_list_body{

  width: 100%;

  display: flex;

  flex-direction: column;

  height: 90%;

}