Table and toast changes

src/components/table/index.jsx

@@ -63,32 +63,32 @@ function Table({headers, data,loading, handleSorting }) {
       <table className="w-full text-sm text-left rtl:text-right  bg-transparent justify-center ">
         <thead className="  uppercase bg-white font-extrabold">
           <tr className="mb-2 border-2 border-black-200">
-            {headers?.map((item,index) => (
-              <th key={index} scope="col" className={`px-6 py-4 w-[${item.width}]`} > 
-                { item.renderHeader ? item.renderHeader(item.title) : item.isSorting ? 
+          {headers?.map((item,index) => (
+              !item?.hide && (<th key={index} scope="col" className={`px-6 py-4 w-[${item.width}]`} > 
+                {item.isSorting ? 
                 <span className="flex items-center">
                   <span className="mr-4">{item.title}</span> 
                   <SortButton selected={item.id === sortKey ? sortOrder : ''} handleClick={() =>handleSort(item.id)}/>
                 </span> :
                  <span>{item.title}</span>
                 }
-              </th>
+              </th>)
             ))}
           </tr>
         </thead>
        { 
-       (data?.length)?<tbody >
+       (data?.length && !loading)?<tbody >
          {
            data?.map((item, index) => (
-               <tr key={item.id} className="bg-[#eef5ff] font-medium hover:bg-white " >
-                   {
-                     headers?.map(({render, id}) => (
-                       <td className="px-6 py-2 capitalize"  >
-                        {render ? render(item[id]) : item[id] === "" ? "NA" : item[id] }
-                        </td>
-                     ))
-                   }
-               </tr>
+            <tr key={item.id} className="bg-[#eef5ff] font-medium hover:bg-white " >
+            {
+              headers?.map(({render, id, hide}) => (
+               !hide && (<td className="px-6 py-2 capitalize"  >
+                 {render ? render(item[id], item) : item[id] === "" ? "NA" : item[id]}
+                 </td>)
+              ))
+            }
+            </tr>
            ))
          }
          </tbody>:null

src/pages/layout/index.jsx

@@ -2,8 +2,10 @@ import React, { useState } from 'react';
 import { useLocation  } from "react-router-dom";
 import Header from '../../components/header';
 import Sidebar from '../../components/sidebar';
+import { ToastContainer } from 'react-toastify';
 import LeftSidebar from '../../components/leftSidebar';
 import SetWindowSize from '../../utils/SetWindowSize';
+import 'react-toastify/dist/ReactToastify.css';
 
 function Layout({children}) {
     const location = useLocation();
@@ -24,6 +26,18 @@ function Layout({children}) {
                 </div>
                 {url.includes('/viewreportee') && <LeftSidebar/>}
             </div>
+            <ToastContainer 
+                position="bottom-center"
+                autoClose={4000}
+                hideProgressBar={true}
+                newestOnTop={false}
+                closeOnClick
+                rtl={false}
+                pauseOnFocusLoss
+                draggable
+                pauseOnHover
+                theme="light"
+            />
         </div>
     )
 }