Continued updating the code to work with entities better

2024-10-07 15:49:58 +01:00
parent b5200c88fc
commit 1ef4efcacf
36 changed files with 2489 additions and 3012 deletions
--- a/src/components/High/Table.tsx
+++ b/src/components/High/Table.tsx
@@ -0,0 +1,107 @@
+import { useListSearch } from "@/hooks/useListSearch"
+import { ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, PaginationState, useReactTable } from "@tanstack/react-table"
+import clsx from "clsx"
+import { useState } from "react"
+import { BsArrowDown, BsArrowUp } from "react-icons/bs"
+import Button from "../Low/Button"
+
+interface Props<T> {
+  data: T[]
+  columns: ColumnDef<any, any>[]
+  searchFields: string[][]
+  size?: number
+  onDownload?: (rows: T[]) => void
+}
+
+export default function Table<T>({ data, columns, searchFields, size = 16, onDownload }: Props<T>) {
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 16,
+  })
+
+  const { rows, renderSearch } = useListSearch<T>(searchFields, data);
+
+  const table = useReactTable({
+    data: rows,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    state: {
+      pagination
+    }
+  });
+
+  return (
+    <div className="w-full flex flex-col gap-2">
+      <div className="w-full flex gap-2 items-end">
+        {renderSearch()}
+        {onDownload && (
+          <Button className="w-full max-w-[200px] mb-1" variant="outline" onClick={() => onDownload(rows)}>
+            Download List
+          </Button>
+        )
+        }
+      </div>
+
+      <div className="w-full flex gap-2 justify-between items-center">
+        <div className="flex items-center gap-4 w-fit">
+          <Button className="w-[200px] h-fit" disabled={!table.getCanPreviousPage()} onClick={() => table.previousPage()}>
+            Previous Page
+          </Button>
+        </div>
+        <div className="flex items-center gap-4 w-fit">
+          <span className="flex items-center gap-1">
+            <div>Page</div>
+            <strong>
+              {table.getState().pagination.pageIndex + 1} of{' '}
+              {table.getPageCount().toLocaleString()}
+            </strong>
+            <div>| Total: {table.getRowCount().toLocaleString()}</div>
+          </span>
+          <Button className="w-[200px]" disabled={!table.getCanNextPage()} onClick={() => table.nextPage()}>
+            Next Page
+          </Button>
+        </div>
+      </div>
+
+      <table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th className="py-4 px-4 text-left" key={header.id} colSpan={header.colSpan}>
+                  <div
+                    className={clsx(header.column.getCanSort() && 'cursor-pointer select-none', 'flex items-center gap-2')}
+                    onClick={header.column.getToggleSortingHandler()}
+                  >
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                    {{
+                      asc: <BsArrowUp />,
+                      desc: <BsArrowDown />,
+                    }[header.column.getIsSorted() as string] ?? null}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody className="px-2 w-full">
+          {table.getRowModel().rows.map((row) => (
+            <tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                <td className="px-4 py-2 items-center w-fit" key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}