SSA-Admin-Panel/src/components/DataTable.tsx

import { useEffect, useState } from "react";
import { HStack, Stack, Table } from "@chakra-ui/react";
import { PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot } from "./ui/pagination";
// import {
//   PaginationItems,
//   PaginationNextTrigger,
//   PaginationPrevTrigger,
//   PaginationRoot,
// } from "./ui/pagination";

interface TableProps {
  tableHeadRow: string[];
  data: Record<string, any>[];
  sortableColumns?: string[]; // Specify which columns are sortable
}

const DataTable: React.FC<TableProps> = ({
  tableHeadRow,
  data,
  sortableColumns = [],
}) => {
  const [sortedData, setSortedData] = useState(data);
  const [sortConfig, setSortConfig] = useState<{
    key: string;
    direction: "asc" | "desc";
  } | null>(null);

  useEffect(() => {
    setSortedData(data);
  }, [data]);

  const handleSort = (column: string) => {
    if (!sortableColumns.includes(column)) return;

    let direction: "asc" | "desc" = "asc";
    if (
      sortConfig &&
      sortConfig.key === column &&
      sortConfig.direction === "asc"
    ) {
      direction = "desc";
    }

    const sortedArray = [...sortedData].sort((a, b) => {
      if (a[column] < b[column]) return direction === "asc" ? -1 : 1;
      if (a[column] > b[column]) return direction === "asc" ? 1 : -1;
      return 0;
    });

    setSortedData(sortedArray);
    setSortConfig({ key: column, direction });
  };

  return (
    <Stack mt={0} color={"#000000CC"}>
      <Table.ScrollArea mb={3}>
        <Table.Root size="sm" variant={"line"} stickyHeader>
          <Table.Header>
            <Table.Row bg={"#02A0A0"}>
              {tableHeadRow.map((item, index) => (
                <Table.ColumnHeader
                  color="white"
                  fontSize={"xs"}
                  fontWeight={600}
                  px={4}
                  p={3}
                  textAlign={
                    index === tableHeadRow.length - 1 ? "center" : "left"
                  }
                  key={index}
                  border={"none"}
                  onClick={() => handleSort(item)}
                  cursor={
                    sortableColumns.includes(item) ? "pointer" : "default"
                  }
                  _hover={
                    sortableColumns.includes(item)
                      ? { textDecoration: "underline" }
                      : {}
                  }
                >
                  {item}
                  {sortableColumns.includes(item) &&
                    sortConfig?.key === item && (
                      <span style={{ marginLeft: "4px" }}>
                        {sortConfig.direction === "asc" ? "\u25B2" : "\u25BC"}
                      </span>
                    )}
                </Table.ColumnHeader>
              ))}
            </Table.Row>
          </Table.Header>
          <Table.Body>
            {sortedData.map((item: any, index) => (
              <Table.Row
                key={index}
                bg={index % 2 === 0 ? "#fff" : "#007F3310"}
              >
                {tableHeadRow.map((heading, colIndex) => (
                  <Table.Cell
                    // className="oxygen"
                    px={4}
                    p={2}
                    key={`${index}-${colIndex}`}
                    fontSize={"xs"}
                    fontWeight={500}
                    border={"none"}
                  >
                    {item[heading]}
                  </Table.Cell>
                ))}
              </Table.Row>
            ))}
          </Table.Body>
        </Table.Root>
      </Table.ScrollArea>
      <PaginationRoot
        size={"xs"}
        count={20}
        pageSize={2}
        defaultPage={1}
        mb={4}
      >
        <HStack justifyContent="flex-end">
          <PaginationPrevTrigger />
          <PaginationItems />
          <PaginationNextTrigger />
        </HStack>
      </PaginationRoot>
    </Stack>
  );
};

export default DataTable;