tanami-admin-panel/src/Components/DataTable/NormalTable.jsx

import React from "react";
import {
  Table,
  TableContainer,
  Tbody,
  Td,
  Th,
  Thead,
  Tr,
  Skeleton,
  TableCaption,
  Tfoot,
} from "@chakra-ui/react";
import EmptySearchList from "../EmptySearchList";
import { TABLE_PAGINATION } from "../../Constants/Paginations";

const DataTable = ({
  data,
  isLoading,
  tableHeadRow,
  emptyMessage,
  centered,
  total
}) => {

  console.log(data);
  
  const columnWidth =
    data && data[0]
      ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%`
      : "auto";
  return (
    <TableContainer overflowX={"auto"} className="h-auto mb-3 w-100">
      {data?.length === 0 ? (
        <EmptySearchList message={emptyMessage} />
      ) : (
        <Table size="sm">
          <TableCaption p={total?0:null}>{total? total :"Tanami v1.0.0"}</TableCaption>
          <Thead backgroundColor="gray.100">
            <Tr>
              {tableHeadRow.map((heading, index) => (
                <Th
                  textAlign={
                    tableHeadRow.length - 1 === index || centered
                      ? "center"
                      : "left"
                  }
                  key={index}
                  p={3}
                  width="20px" // 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
                  textTransform={'none'}
                  
                >
                  {isLoading ? <Skeleton height="20px" /> : heading}
                  {/* {heading} */}
                </Th>
              ))}
            </Tr>
          </Thead>
          <Tbody className="web-text-small">
            {isLoading
              ? Array.from({ length: TABLE_PAGINATION?.size }).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 bg={index % 2 === 0 ? "" : "gray.50"} 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;