UHD_Media_Tool/apps/web/app/components/console/data-table.tsx

import type { LucideIcon } from "lucide-react";
import type { ReactNode } from "react";
import { Button } from "~/components/ui/button.tsx";
import { cn } from "~/lib/utils.ts";
import { EmptyState, ErrorState, LoadingState } from "./empty-state.tsx";

export type DataColumn<T> = {
  /** 列 key(React key 用) */
  key: string;
  header: ReactNode;
  cell: (row: T) => ReactNode;
  /** 窄屏隐藏该列,避免横向溢出 */
  hideBelow?: "sm" | "md" | "lg";
  align?: "left" | "right";
  className?: string;
};

const HIDE: Record<NonNullable<DataColumn<unknown>["hideBelow"]>, string> = {
  sm: "hidden sm:table-cell",
  md: "hidden md:table-cell",
  lg: "hidden lg:table-cell",
};

/**
 * 数据表:内置 loading / error / empty 三态与"加载更多"游标翻页。
 * 外层自带 pg-slab 卡片(plain 时不带);表格在卡片内横向滚动,页面本身不溢出。
 *
 *   <DataTable columns={cols} rows={q.data?.items} rowKey={(r) => r.id}
 *     loading={q.isPending} error={q.error} onRetry={q.refetch}
 *     empty={{ title: "还没有记录" }} onRowClick={(r) => open(r.id)}
 *     hasMore={!!next} onLoadMore={...} loadingMore={...} />
 */
export function DataTable<T>({
  columns,
  rows,
  rowKey,
  loading = false,
  error,
  onRetry,
  empty,
  onRowClick,
  selectedKey,
  hasMore = false,
  onLoadMore,
  loadingMore = false,
  plain = false,
  className,
}: {
  columns: DataColumn<T>[];
  rows: T[] | undefined;
  rowKey: (row: T) => string;
  loading?: boolean;
  error?: unknown;
  onRetry?: () => void;
  empty?: { title: string; description?: ReactNode; icon?: LucideIcon; action?: ReactNode };
  onRowClick?: (row: T) => void;
  selectedKey?: string | null;
  hasMore?: boolean;
  onLoadMore?: () => void;
  loadingMore?: boolean;
  plain?: boolean;
  className?: string;
}) {
  let body: ReactNode;
  if (loading && !rows) {
    body = <LoadingState rows={5} className="p-4" />;
  } else if (error && !rows) {
    body = <ErrorState plain error={error} onRetry={onRetry} />;
  } else if (!rows || rows.length === 0) {
    body = (
      <EmptyState
        plain
        icon={empty?.icon}
        title={empty?.title ?? "暂无数据"}
        description={empty?.description}
        action={empty?.action}
        className="py-12"
      />
    );
  } else {
    body = (
      <div className="overflow-x-auto">
        <table className="w-full text-left text-sm">
          <thead>
            <tr className="border-b border-border">
              {columns.map((c) => (
                <th
                  key={c.key}
                  scope="col"
                  className={cn(
                    "px-4 py-2.5 text-meta font-medium whitespace-nowrap text-muted-foreground",
                    c.align === "right" && "text-right",
                    c.hideBelow && HIDE[c.hideBelow],
                    c.className,
                  )}
                >
                  {c.header}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((row) => {
              const key = rowKey(row);
              return (
                <tr
                  key={key}
                  onClick={onRowClick ? () => onRowClick(row) : undefined}
                  onKeyDown={
                    onRowClick
                      ? (e) => {
                          if (e.key === "Enter" || e.key === " ") {
                            e.preventDefault();
                            onRowClick(row);
                          }
                        }
                      : undefined
                  }
                  tabIndex={onRowClick ? 0 : undefined}
                  aria-selected={selectedKey != null ? selectedKey === key : undefined}
                  className={cn(
                    "border-b border-border/60 transition-colors duration-micro last:border-b-0",
                    onRowClick &&
                      "cursor-pointer outline-none hover:bg-foreground/[0.04] focus-visible:bg-foreground/[0.06]",
                    selectedKey === key && "bg-foreground/[0.05]",
                  )}
                >
                  {columns.map((c) => (
                    <td
                      key={c.key}
                      className={cn(
                        "px-4 py-2.5 align-middle",
                        c.align === "right" && "text-right",
                        c.hideBelow && HIDE[c.hideBelow],
                        c.className,
                      )}
                    >
                      {c.cell(row)}
                    </td>
                  ))}
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );
  }

  return (
    <div className={cn("min-w-0 overflow-hidden rounded-xl", !plain && "pg-slab", className)}>
      {body}
      {rows && rows.length > 0 && (hasMore || error) ? (
        <div className="flex items-center justify-center gap-3 border-t border-border/60 px-4 py-3">
          {error ? (
            <span className="text-meta text-destructive">{String((error as Error).message ?? error)}</span>
          ) : null}
          {hasMore && onLoadMore ? (
            <Button variant="outline" size="sm" onClick={onLoadMore} disabled={loadingMore}>
              {loadingMore ? "加载中…" : "加载更多"}
            </Button>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}