upated

src/Components/DataTable/NormalTable.jsx

@@ -9,27 +9,52 @@ import {
   Tr,
   Skeleton,
   TableCaption,
-  Tfoot,
+  Checkbox,
 } from "@chakra-ui/react";
 import EmptySearchList from "../EmptySearchList";
 import { TABLE_PAGINATION } from "../../Constants/Paginations";
 
-const DataTable = ({
+const NormalTable = ({
   data,
   isLoading,
   tableHeadRow,
   emptyMessage,
   centered,
   total,
+  showRadioButton, // Prop for showing the checkboxes
+  selectedRadio,
+  setSelectedRadio, // State for managing selected checkboxes
 }) => {
-  console.log(data);
-
   const columnWidth =
     data && data[0]
       ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%`
       : "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];
+      }
+    });
+  };
+
+  // Handle "Check All" checkbox
+  const handleCheckAllChange = () => {
+    if (selectedRadio.length === data.length) {
+      setSelectedRadio([]); // Deselect all if already selected
+    } else {
+      const allIds = data.map((item) => item.id);
+      setSelectedRadio(allIds); // Select all
+    }
+  };
+
   return (
-    <TableContainer overflowX={"auto"} className="h-auto mb-3 w-100 table-scroll">
+    <TableContainer overflowX={"auto"} className="h-auto w-100 table-scroll">
       {data?.length === 0 ? (
         <EmptySearchList message={emptyMessage} />
       ) : (
@@ -37,26 +62,42 @@ const DataTable = ({
           <TableCaption p={total ? 0 : null}>
             {total ? total : "Tanami v1.0.0"}
           </TableCaption>
-          <Thead backgroundColor="forestGreen.100">
+          <Thead bg="forestGreen.100">
             <Tr>
+              {showRadioButton && (
+                <Th
+                  color={"purple.900"}
+                  textAlign={"center"}
+                  p={4}
+                  whiteSpace="normal"
+                  wordBreak="normal"
+                  overflowWrap="normal"
+                  textTransform={"none"}
+                >
+                  <Checkbox
+                    isChecked={selectedRadio.length === data.length}
+                    onChange={handleCheckAllChange}
+                    colorScheme="forestGreen"
+
+                  />
+                </Th>
+              )}
               {tableHeadRow.map((heading, index) => (
-                <Th 
+                <Th
+                  color={"purple.900"}
                   textAlign={
                     tableHeadRow.length - 1 === index || centered
                       ? "center"
                       : "left"
                   }
                   key={index}
-                  p={3}
-                  width="20px" // Adjust width as needed
-                  color={"#004118"}
-                  whiteSpace="normal" // Allow text to wrap
-                  wordBreak="normal" // Ensure long words break properly
-                  overflowWrap="normal" // Break long words if necessary
+                  p={4}
+                  whiteSpace="normal"
+                  wordBreak="normal"
+                  overflowWrap="normal"
                   textTransform={"none"}
                 >
                   {isLoading ? <Skeleton height="20px" /> : heading}
-                  {/* {heading} */}
                 </Th>
               ))}
             </Tr>
@@ -65,17 +106,18 @@ const DataTable = ({
             {isLoading
               ? Array.from({ length: TABLE_PAGINATION?.size }).map(
                   (_, index) => (
-                    <Tr bg={index % 2 === 0 ? "" : "forestGreen.50"} key={index}>
+                    <Tr
+                      bg={index % 2 === 0 ? "white" : "forestGreen.50"}
+                      key={index}
+                    >
                       {tableHeadRow.map((_, i) => (
                         <Td
-                          width={"fit-content"}
                           key={i}
                           style={{
                             whiteSpace: "nowrap",
                             textOverflow: "ellipsis",
                           }}
                           className="web-text-small"
-                          w={columnWidth}
                         >
                           <Skeleton height="20px" mb={1} mt={1} />
                         </Td>
@@ -84,9 +126,26 @@ const DataTable = ({
                   )
                 )
               : data?.map((item, index) => (
-                  <Tr bg={index % 2 === 0 ? "" : "forestGreen.50"} key={index}>
+                  <Tr
+                    cursor={"pointer"}
+                    transition={"0.2s all"}
+                    maxH={8}
+                    bg={index % 2 === 0 ? "" : "forestGreen.50"}
+                    key={index}
+                  >
+                    {showRadioButton && (
+                      <Td textAlign={"center"}>
+                        <Checkbox
+                          bg={"#fff"}
+                          colorScheme="forestGreen"
+                          value={item.id}
+                          isChecked={selectedRadio.includes(item.id)}
+                          onChange={() => handleCheckboxChange(item.id)}
+                        />
+                      </Td>
+                    )}
                     {tableHeadRow.map((heading, i) => (
-                      <Td 
+                      <Td
                         textAlign={
                           tableHeadRow?.length - 1 === i || centered
                             ? "center"
@@ -94,6 +153,7 @@ const DataTable = ({
                         }
                         color={"gray.600"}
                         key={i}
+                        fontWeight={500}
                         style={{
                           whiteSpace: "nowrap",
                           textOverflow: "ellipsis",
@@ -112,4 +172,4 @@ const DataTable = ({
   );
 };
 
-export default DataTable;
+export default NormalTable;