[ Update UI Tamplate ]

2025-02-04 13:56:43 +05:30
parent ce05bb6a43
commit 335bd0bddf
35 changed files with 1279 additions and 331 deletions
--- a/src/components/DataTable.tsx
+++ b/src/components/DataTable.tsx
@@ -0,0 +1,130 @@
+import { 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);
+
+  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;