107 lines
3.1 KiB
JavaScript
107 lines
3.1 KiB
JavaScript
import React from "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,
|
|
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>Tanami v1.0.0</TableCaption>
|
|
<Thead backgroundColor="gray.50">
|
|
<Tr>
|
|
{tableHeadRow.map((heading, index) => (
|
|
<Th
|
|
textAlign={
|
|
tableHeadRow.length - 1 === index || centered
|
|
? "center"
|
|
: "left"
|
|
}
|
|
key={index}
|
|
p={3}
|
|
width="120px" // 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
|
|
>
|
|
{isLoading ? <Skeleton height="20px" /> : heading}
|
|
{/* {heading} */}
|
|
</Th>
|
|
))}
|
|
</Tr>
|
|
</Thead>
|
|
<Tbody className="web-text-small">
|
|
{isLoading
|
|
? Array.from({ length: 12 }).map((_, index) => (
|
|
<Tr 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>
|
|
))}
|
|
</Tr>
|
|
))
|
|
: data?.map((item, index) => (
|
|
<Tr key={index}>
|
|
{tableHeadRow.map((heading, i) => (
|
|
<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>
|
|
))}
|
|
</Tr>
|
|
))}
|
|
</Tbody>
|
|
</Table>
|
|
)}
|
|
</TableContainer>
|
|
);
|
|
};
|
|
|
|
export default DataTable;
|