Se crea el componente y sus estilos para la tabla que muestra las categorías

.category_list_cnt{

  display: flex;

  height: 100%;

  width: 100%;

}

.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 { useCategory } from '../../../hooks/useCategory';

import { Category } from '../../../infraestructure/entities/category';

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

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

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

import { ConfirmationDialog } from '../../confirmation_dialog_box/confirmation_dialog';

import { toast } from 'react-toastify';

interface props {

  isWindowActive: boolean;

  setIsWindowActive: Dispatch<SetStateAction<boolean>>;

}

export const SuperAdminPanelCategoryList = ({isWindowActive, setIsWindowActive}:props) => {

  const {

    categoriesList,

    pending,

    deleteCategory,

  } = useCategory();

  const [isDialogOpen, setIsDialogOpen] = useState(false);

  const [dialogMessage, setDialogMessage] = useState('');

  const [categoryDeleted, setCategoryDeleted] = useState<Category | null>(null);

  const [deleteCategoryBool, setDeleteCategoryBool] = useState(false);

  const deleteSelectedCategory = (category: Category) => {

    toast.promise(

      deleteCategory(category),{

        pending: "Eliminando categoría...",

        success: "La categoría se ha eliminado correctamente",

        error: "No se pudo eliminar la categoría"

      }

    )

  }

  useEffect(() => {

    if(deleteCategoryBool && categoryDeleted){

      deleteSelectedCategory(categoryDeleted);

      setDeleteCategoryBool(false);

    }

  }, [deleteCategoryBool]);

  const handleDeleteSelectedCategory = (category: Category) => {

    setDialogMessage(`¿Desea eliminar la categoría ${category.nameES}?`)

    setCategoryDeleted(category);

    setIsDialogOpen(true);

    setIsWindowActive(true);

  }

  const handleToClose = () => {

    setIsWindowActive(false);

    setIsDialogOpen(false)

  }

  const columns : TableColumn<Category>[] = [

    {

      name: "Identificador", 

      selector: row => row.idCategory || 0,

      sortable: true

    },

    {

      name: "Nombre en español", 

      selector: row => row.nameES,

      sortable: true

    }, 

    {

      name: "Nombre en Inglés", 

      selector: row => row.nameEN,

      sortable: true

    },

    {

      name: "Acciones",

      cell: (row) => {

        return (

          <FontAwesomeIcon style={isWindowActive ? {color: 'gray'}: {cursor: 'pointer'}} icon={faTrash} 

            onClick={() => {

              if(!isWindowActive){

                handleDeleteSelectedCategory(row);

              }

            }}

          />

        );

      }

    }

  ];

  return (

    <div className="category_list_cnt">

      <DataTable noDataComponent="No hay categorías que mostrar" progressPending={pending}

        progressComponent={

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

        }

        disabled={isWindowActive}

        columns={columns} data={categoriesList} className="data_table"/> 

        {

          isDialogOpen && <ConfirmationDialog hangleToClose={handleToClose} setAnswer={setDeleteCategoryBool} message={dialogMessage}/>

        }

    </div>

  );

}

 No newline at end of file