update

src/Components/DataTable/NormalTable.jsx

@@ -10,6 +10,7 @@ import {
   Skeleton,
   TableCaption,
   Checkbox,
+  Radio,
 } from "@chakra-ui/react";
 import EmptySearchList from "../EmptySearchList";
 import { TABLE_PAGINATION } from "../../Constants/Paginations";
@@ -24,6 +25,11 @@ const NormalTable = ({
   showRadioButton, // Prop for showing the checkboxes
   selectedRadio,
   setSelectedRadio, // State for managing selected checkboxes
+
+  handleCheckboxChange: radioChange,
+
+
+  radio
 }) => {
   const columnWidth =
     data && data[0]
@@ -31,17 +37,17 @@ const NormalTable = ({
       : "auto";
 
   // Toggle checkbox selection for individual rows
-  const handleCheckboxChange = (value) => {
-    setSelectedRadio((prev) => {
-      if (prev.includes(value)) {
-        // Remove if already selected
-        return prev.filter((id) => id !== value);
-      } else {
-        // Add to selected
-        return [...prev, value];
-      }
-    });
-  };
+  // const handleCheckboxChange = (value) => {
+  //   setSelectedRadio((prev) => {
+  //     if (prev.includes(value)) {
+  //       // Remove if already selected
+  //       return prev.filter((id) => id !== value);
+  //     } else {
+  //       // Add to selected
+  //       return [...prev, value];
+  //     }
+  //   });
+  // };
 
   // Handle "Check All" checkbox
   const handleCheckAllChange = () => {
@@ -53,6 +59,26 @@ const NormalTable = ({
     }
   };
 
+
+
+  const handleCheckboxChange = (value) => {
+    if (radio) {
+      // If radio is true, select only one option
+      setSelectedRadio([value]); // Set the selected radio to this value only
+    } else {
+      // Handle multiple selection for checkboxes
+      setSelectedRadio((prev) => {
+        if (prev.includes(value)) {
+          // Remove if already selected
+          return prev.filter((id) => id !== value);
+        } else {
+          // Add to selected
+          return [...prev, value];
+        }
+      });
+    }
+  };
+
   return (
     <TableContainer overflowX={"auto"} className="h-auto w-100 table-scroll">
       {data?.length === 0 ? (
@@ -64,7 +90,7 @@ const NormalTable = ({
           </TableCaption>
           <Thead bg="forestGreen.100">
             <Tr>
-              {showRadioButton && (
+              {showRadioButton &&(
                 <Th
                   color={"purple.900"}
                   textAlign={"center"}
@@ -74,12 +100,12 @@ const NormalTable = ({
                   overflowWrap="normal"
                   textTransform={"none"}
                 >
-                  <Checkbox
-                    isChecked={selectedRadio?.length === data?.length}
-                    onChange={handleCheckAllChange}
-                    colorScheme="forestGreen"
+                 {radio? "Select":<Checkbox
+                  isChecked={selectedRadio?.length === data?.length}
+                  onChange={handleCheckAllChange}
+                  colorScheme="forestGreen"
 
-                  />
+                />}
                 </Th>
               )}
               {tableHeadRow.map((heading, index) => (
@@ -135,13 +161,19 @@ const NormalTable = ({
                   >
                     {showRadioButton && (
                       <Td textAlign={"center"}>
-                        <Checkbox
+                        {radio ? <Radio
+                          bg={"#fff"}
+                          colorScheme="forestGreen"
+                          value={item.id}
+                          isChecked={selectedRadio.includes(item.id)}
+                          onChange={() => radioChange(item.id, item)}
+                        />:<Checkbox
                           bg={"#fff"}
                           colorScheme="forestGreen"
                           value={item.id}
                           isChecked={selectedRadio.includes(item.id)}
                           onChange={() => handleCheckboxChange(item.id)}
-                        />
+                        />}
                       </Td>
                     )}
                     {tableHeadRow.map((heading, i) => (