Se crea el componente y los estilos de la lista de administradores de un pueblo

.admin_list_cnt{

  display: flex;

  height: 100%;

  width: 100%;

  flex-direction: column;

}

.admin_list_header{

  display: flex;

  background: white;

  width: 100%;

  height: 8%;

  justify-content: center;

  align-items: center;

}

.admin_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

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

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

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

import { useState } from 'react';

import { Admin } from '../../../infraestructure/entities/admin_form_values';

import { State } from '../../../infraestructure/entities/state';

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

import axios, { AxiosError } from 'axios';

import { showErrorAxios } from '../../../utils/Messages';

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

interface props{

  isWindowActive: boolean;

  statesList: State[];

}

export const SuperAdminPanelAdminList = ({isWindowActive, statesList}: props) => {

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

  const {

    townsList,

    getTownsByState

  } = useTown();

  const {

    adminList,

    getAdminListByTown

  } = useAdmin();

  const columns : TableColumn<Admin>[] = [

    {

      name: "Email",

      selector: row => row.email,

      sortable: true

    },

    {

      name: "Nombre", 

      selector: row => row.name.substring(0,40),

      sortable: true

    },

    {

      name: "Apellido", 

      selector: row => row.lastName.substring(0,40),

      sortable: true

    },

    {

      name: "Estatus", 

      selector: row => row.status?.substring(0,40) ?? "",

      sortable: true

    }

  ];

  const refreshListTown = (stateId: number, name: string) => {

    setIsLoading(true);

    const getTownsList = async () => {

      try {

        getTownsByState(stateId, name);

      } catch (error: any) {

        if (axios.isAxiosError(error)) {

          error as AxiosError;

          showErrorAxios(error);

        }

      }

    }

    getTownsList();

    setIsLoading(false);

  };

  const refreshListAdmins = (idTown: number) => {

    setIsLoading(true);

    const getAdminsList = async () => {

      try {

        getAdminListByTown(idTown);

      } catch (error: any) {

        if (axios.isAxiosError(error)) {

          error as AxiosError;

          showErrorAxios(error);

        }

      }

    }

    getAdminsList();

    setIsLoading(false);

  };

  if(isLoading) return <LoadingSpinner/>

  return (

    <div className="admin_list_cnt">

      <div className="admin_list_header">

        Estado

        <select

          disabled={isWindowActive}

          name="state_select" 

          onChange={(event) => {

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

            const state = statesList[index];

            refreshListTown(state.stateId, state.name);

            }}

        >

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

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

          : 

          <>

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

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

            return (

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

            );

            })}

          </>

          }

        </select>

        Estado

        <select

          disabled={isWindowActive}

          name="town_select" 

          onChange={(event) => {

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

            const town = townsList[index];

            refreshListAdmins(town.idTown);

            }}

        >

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

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

          : 

          <>

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

            {townsList.map((town, index) => {

            return (

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

            );

            })}

          </>

          }

        </select>

      </div>

      <div className="admin_list_body">

        <DataTable noDataComponent="No hay administradores que mostrar" progressPending={isLoading}

          disabled={isWindowActive}

          progressComponent={

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

          }

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

        />

      </div>

    </div> 

  );

}

 No newline at end of file