首页页面

src/components/data-table.tsx

@@ -0,0 +1,123 @@
+import {
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { Loader } from "lucide-react"
+import { Pagination, type PaginationProps } from "@/components/ui/pagination"
+import {
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  Table as TableRoot,
+  TableRow,
+} from "@/components/ui/table"
+import { cn } from "@/lib/utils"
+
+export type DataTableProps<T> = {
+  data: T[]
+  status: "load" | "done" | "fail"
+  columns: ColumnDef<T>[]
+  pagination?: PaginationProps
+  classNames?: {
+    headRow?: string
+    dataRow?: string
+  }
+}
+
+export default function DataTable<T extends Record<string, unknown>>(
+  props: DataTableProps<T>,
+) {
+  const table = useReactTable({
+    data: props.data,
+    columns: props.columns,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    rowCount: props.pagination?.total ?? props.data.length,
+    state: {
+      pagination: {
+        pageIndex: props.pagination?.page ?? 0,
+        pageSize: props.pagination?.size ?? props.data.length,
+      },
+      columnFilters: [],
+    },
+    autoResetPageIndex: false,
+  })
+  console.log("data length:", props.data.length)
+  console.log("pageSize:", props.pagination?.size ?? props.data.length)
+  console.log("rows:", table.getRowModel().rows.length)
+  return (
+    <>
+      {/* 数据表 */}
+      <div className="rounded-md relative bg-card">
+        <TableRoot>
+          <TableHeader>
+            {table.getHeaderGroups().map(group => (
+              <TableRow key={group.id}>
+                {group.headers.map(header => (
+                  <TableHead key={header.id} colSpan={header.colSpan}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {props.status === "fail" ? (
+              <TableRow>
+                <TableCell
+                  colSpan={props.columns.length}
+                  className="text-center text-fail"
+                >
+                  加载失败
+                </TableCell>
+              </TableRow>
+            ) : !props.data?.length ? (
+              <TableRow>
+                <TableCell
+                  colSpan={props.columns.length}
+                  className="text-center"
+                >
+                  暂无数据
+                </TableCell>
+              </TableRow>
+            ) : (
+              table.getRowModel().rows.map(row => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                  className={cn("h-14", props.classNames?.dataRow)}
+                >
+                  {row.getVisibleCells().map(cell => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </TableRoot>
+        {props.status === "load" && (
+          <div className="absolute inset-0 bg-white/10 backdrop-blur-xs flex items-center justify-center gap-2 transition">
+            <Loader className="animate-spin" />
+            <span>加载中</span>
+          </div>
+        )}
+      </div>
+
+      {/* 分页器 */}
+      {props.pagination && <Pagination {...props.pagination} />}
+    </>
+  )
+}