176 lines
5.3 KiB
JavaScript
176 lines
5.3 KiB
JavaScript
import React from "react";
|
|
import {
|
|
Table,
|
|
TableContainer,
|
|
Tbody,
|
|
Td,
|
|
Th,
|
|
Thead,
|
|
Tr,
|
|
Skeleton,
|
|
TableCaption,
|
|
Checkbox,
|
|
} from "@chakra-ui/react";
|
|
import EmptySearchList from "../EmptySearchList";
|
|
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
|
|
}) => {
|
|
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 w-100 table-scroll">
|
|
{data?.length === 0 ? (
|
|
<EmptySearchList message={emptyMessage} />
|
|
) : (
|
|
<Table size="sm">
|
|
<TableCaption p={total ? 0 : null}>
|
|
{total ? total : "Tanami v1.0.0"}
|
|
</TableCaption>
|
|
<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
|
|
color={"purple.900"}
|
|
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"}>
|
|
<Checkbox
|
|
bg={"#fff"}
|
|
colorScheme="forestGreen"
|
|
value={item.id}
|
|
isChecked={selectedRadio.includes(item.id)}
|
|
onChange={() => handleCheckboxChange(item.id)}
|
|
/>
|
|
</Td>
|
|
)}
|
|
{tableHeadRow.map((heading, i) => (
|
|
<Td
|
|
textAlign={
|
|
tableHeadRow?.length - 1 === i || centered
|
|
? "center"
|
|
: "left"
|
|
}
|
|
color={"gray.600"}
|
|
key={i}
|
|
fontWeight={500}
|
|
style={{
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
}}
|
|
className="web-text-small"
|
|
>
|
|
{item[heading]}
|
|
</Td>
|
|
))}
|
|
</Tr>
|
|
))}
|
|
</Tbody>
|
|
</Table>
|
|
)}
|
|
</TableContainer>
|
|
);
|
|
};
|
|
|
|
export default NormalTable;
|