Siddhesh.More/rubix-explore
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update table

Browse Source
This commit is contained in:
YasinShaikh123
2024-10-18 20:11:34 +05:30
parent 925012adf5
commit 4f57198d56
10 changed files with 616 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
src/components/DataTable/NormalTable.jsx Normal file
View File

@@ -0,0 +1,196 @@
import React from "react";
import {
Table,
TableContainer,
Tbody,
Td,
Th,
Thead,
Tr,
Skeleton,
TableCaption,
Checkbox,
Radio,
useColorMode,
} from "@chakra-ui/react";
import { TABLE_PAGINATION } from "../../Constants/Paginations";
const NormalTable = ({
data,
isLoading,
tableHeadRow,
emptyMessage,
centered,
total,
showRadioButton, // Prop for showing the checkboxes
selectedRadio,
setSelectedRadio, // State for managing selected checkboxes
handleCheckboxChange: radioChange,
radio
}) => {
const columnWidth =
data && data[0]
? `${(100 / Object.keys(data[0]).length).toFixed(2)}%`
: "auto";
const { colorMode} = useColorMode();
// 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
}
};
const handleCheckboxChange = (value) => {
if (radio) {
setSelectedRadio([value]);
} else {
setSelectedRadio((prev) => {
if (prev.includes(value)) {
return prev.filter((id) => id !== value);
} else {
return [...prev, value];
}
});
}
};
return (
<TableContainer rounded={5} overflowX={"auto"} className="h-auto w-100 table-scroll" bg={colorMode === "light" ? "#F2EFFF" : "#312F35"}>
<Table size="sm" variant="striped" colorScheme={colorMode === "light" ? "lightWhite" : "darkPurple"}>
<Thead bg="forestGreen.100">
<Tr bg={colorMode === "light"? "#230A79" : "#232127"}>
{showRadioButton &&(
<Th
textAlign={"center"}
p={4}
whiteSpace="normal"
wordBreak="normal"
overflowWrap="normal"
textTransform={"none"}
>
{radio? "Select":<Checkbox
isChecked={selectedRadio?.length === data?.length}
onChange={handleCheckAllChange}
colorScheme="forestGreen"
/>}
</Th>
)}
{tableHeadRow.map((heading, index) => (
<Th
color={"#fff"}
fontWeight={500}
textAlign={
tableHeadRow.length - 1 === index || centered
? "center"
: "left"
}
key={index}
p={4}
whiteSpace="normal"
wordBreak="normal"
overflowWrap="normal"
textTransform={"none"}
>
{isLoading ? <Skeleton height="20px" /> : heading}
</Th>
))}
</Tr>
</Thead>
<Tbody className="web-text-small">
{isLoading
? Array.from({ length: TABLE_PAGINATION?.size }).map(
(_, index) => (
<Tr
bg={index % 2 === 0 ? "white" : "forestGreen.50"}
key={index}
>
{tableHeadRow.map((_, i) => (
<Td
key={i}
style={{
whiteSpace: "nowrap",
textOverflow: "ellipsis",
}}
className="web-text-small"
>
<Skeleton height="20px" mb={1} mt={1} />
</Td>
))}
</Tr>
)
)
: data?.map((item, index) => (
<Tr
cursor={"pointer"}
transition={"0.2s all"}
maxH={8}
bg={index % 2 === 0 ? "" : "forestGreen.50"}
key={index}
>
{showRadioButton && (
<Td textAlign={"center"} >
{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) => (
<Td p={3}
color={colorMode === "light"? "#000000" : "#FFFFFF"}
textAlign={
tableHeadRow?.length - 1 === i || centered
? "center"
: "left"
}
key={i}
fontWeight={colorMode === "light"? 500 : 400}
style={{
whiteSpace: "nowrap",
textOverflow: "ellipsis",
}}
className="web-text-small"
>
{item[heading]}
</Td>
))}
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
);
};
export default NormalTable;