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

pagination updat

Browse Source
This commit is contained in:
Siddhesh More
2024-08-02 13:00:11 +05:30
parent 6cebe90d0d
commit 5077bdbdd0
11 changed files with 257 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/Components/DataTable/NormalTable.jsx
View File

@@ -1,20 +1,50 @@
import React from "react";
import { Table, TableContainer, Tbody, Td, Th, Thead, Tr, Skeleton, TableCaption, Tfoot } from "@chakra-ui/react";
import {
Table,
TableContainer,
Tbody,
Td,
Th,
Thead,
Tr,
Skeleton,
TableCaption,
Tfoot,
} from "@chakra-ui/react";
import EmptySearchList from "../EmptySearchList";
const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage }) => {
const columnWidth = data && data[0] ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%` : "auto";
const DataTable = ({
data,
isLoading,
tableHeadRow,
emptyMessage,
centered,
}) => {
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>Rubix v1.0.0</TableCaption>
<Thead backgroundColor="purple.50">
<Table size="sm">
<TableCaption>Tanami v1.0.0</TableCaption>
<Thead backgroundColor="gray.50">
<Tr>
{tableHeadRow.map((heading, index) => (
<Th key={index} p={3} w={columnWidth}>
<Th
width={'fit-content'}
textAlign={
tableHeadRow.length - 1 === index || centered
? "center"
: "left"
}
key={index}
p={3}
w={columnWidth}
>
{isLoading ? <Skeleton height="20px" /> : heading}
{/* {heading} */}
</Th>
@@ -26,7 +56,16 @@ const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage }) => {
? Array.from({ length: 12 }).map((_, index) => (
<Tr key={index}>
{tableHeadRow.map((_, i) => (
<Td key={i} style={{ whiteSpace: "nowrap", textOverflow: "ellipsis" }} className="web-text-small" w={columnWidth}>
<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>
))}
@@ -35,7 +74,20 @@ const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage }) => {
: data?.map((item, index) => (
<Tr key={index}>
{tableHeadRow.map((heading, i) => (
<Td color={"gray.600"} key={i} style={{ whiteSpace: "nowrap", textOverflow: "ellipsis" }} className="web-text-small" >
<Td
textAlign={
tableHeadRow?.length - 1 === i || centered
? "center"
: "left"
}
color={"gray.600"}
key={i}
style={{
whiteSpace: "nowrap",
textOverflow: "ellipsis",
}}
className="web-text-small"
>
{item[heading]}
</Td>
))}