Siddhesh.More/tanami-admin-panel
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 2 Wiki Activity

updated siddhesh

Browse Source
This commit is contained in:
Siddhesh More
2024-06-28 15:11:57 +05:30
parent 58e799def0
commit 5265aed4f8
13 changed files with 868 additions and 521 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/Components/DataTable/DataTable.jsx
View File

@@ -9,10 +9,8 @@ import {
Tr,
Skeleton,
TableCaption,
Tfoot,
} from "@chakra-ui/react";
import EmptySearchList from "../EmptySearchList";
import Pagination from "../Pagination";
import { useNavigate } from "react-router-dom";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
@@ -22,86 +20,83 @@ const DataTable = ({
isLoading,
tableHeadRow,
emptyMessage,
totalPages,
setMouseEntered,
setMouseEnteredId,
}) => {
const navigate = useNavigate();
const { slideFromRight } = useContext(GlobalStateContext);
const columnWidth =
data && data[0]
? `${(100 / Object.keys(data[0]).length).toFixed(2)}%`
: "auto";
return (
<TableContainer overflowX={"hidden"} className="h-auto mb-3 w-100">
{data?.length === 0 ? (
<EmptySearchList message={emptyMessage} />
) : (
<Table size="sm">
{/* <TableCaption><Pagination totalItems={totalPages} /></TableCaption> */}
<TableCaption>Tanami v1.0</TableCaption>
<Thead backgroundColor="gray.50">
<Tr>
{tableHeadRow.map((heading, index) => (
<Th
textAlign={slideFromRight ? "right" : "left"}
textAlign={tableHeadRow.length - 1 === index ? "center" : "left"}
key={index}
p={3}
w={"auto"}
color={"#004118"}
>
<Skeleton isLoaded={!isLoading}
fadeDuration={0.4} height="20px" >{heading}</Skeleton>
<Skeleton isLoaded={!isLoading} fadeDuration={0.4} height="20px">
{heading}
</Skeleton>
</Th>
))}
</Tr>
</Thead>
<Tbody className="web-text-small">
{ data?.map((item, index) => (
<Tr
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = "transparent"; // Change the background color on hover
e.currentTarget.style.transition = "0.1s";
e.currentTarget.style.boxShadow =
"rgba(0, 0, 0, 0.24) 0px 1px 8px";
setMouseEntered(true);
setMouseEnteredId(item.id);
{data?.map((item, index) => (
<Tr
// onMouseEnter={(e) => {
// e.currentTarget.style.backgroundColor = "transparent"; // Change the background color on hover
// e.currentTarget.style.transition = "0.1s";
// e.currentTarget.style.boxShadow =
// "rgba(0, 0, 0, 0.24) 0px 1px 8px";
// setMouseEntered(true);
// setMouseEnteredId(item.id);
// }}
// onMouseLeave={(e) => {
// e.currentTarget.style.backgroundColor = "transparent"; // Revert to default background color on hover out
// e.currentTarget.style.transition = "0.3s";
// e.currentTarget.style.boxShadow = "none";
// setMouseEntered(false);
// }}
transition={"0.5s all"}
_hover={{
bg: "green.50",
cursor: "pointer",
}}
key={index}
>
{tableHeadRow.map((heading, i) => (
<Td
textAlign={tableHeadRow.length - 1 === i ? "center" : "left"}
color={"gray.600"}
key={i}
style={{
whiteSpace: "nowrap",
textOverflow: "ellipsis",
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor = "transparent"; // Revert to default background color on hover out
e.currentTarget.style.transition = "0.3s";
e.currentTarget.style.boxShadow = "none";
setMouseEntered(false);
}}
transition={"0.5s all"}
_hover={{
bg: "green.50",
cursor: "pointer",
}}
key={index}
className="web-text-small"
// onClick={
// i === tableHeadRow.length - 1 || i === 0
// ? null
// : () => navigate(`edit-sponser/${item.id}`) // Define the onClick handler for other cells
// }
>
{tableHeadRow.map((heading, i) => (
<Td
textAlign={slideFromRight ? "right" : "left"}
color={"gray.600"}
key={i}
style={{
whiteSpace: "nowrap",
textOverflow: "ellipsis",
}}
className="web-text-small"
// onClick={
// i === tableHeadRow.length - 1 || i === 0
// ? null
// : () => navigate(`edit-sponser/${item.id}`) // Define the onClick handler for other cells
// }
>
<Skeleton fadeDuration={index / 12} isLoaded={!isLoading} >{item[heading]}</Skeleton>
</Td>
))}
</Tr>
<Skeleton fadeDuration={index / 12} isLoaded={!isLoading}>
{item[heading]}
</Skeleton>
</Td>
))}
</Tr>
))}
</Tbody>
</Table>
)}