将props传递给shadcn数据表中的react-table ColumnDef

Question

我正在使用 shadcn 的数据表，它构建在 tanstack 的反应表之上。

我很难将 prop（特别是 URL searchParam）传递到我的 ColumnDef 文件（即 columns.tsx）。

从视觉上看这意味着：

我已经在这里设置了一个代码和框。

代码沙箱由三部分组成：

page.tsx

import { Payment, columns } from "./columns";
import { DataTable } from "./data-table";

async function getData(): Promise<Payment[]> {
  return [
    {
      id: "728ed52f",
      amount: 100,
      status: "pending",
      email: "[email protected]",
    },
    {
      id: "1234ffff",
      amount: 125,
      status: "done",
      email: "[email protected]",
    },
  ];
}

type Props = {
  searchParams: {
    owner: string | undefined;
  };
};

export default async function DemoPage({ searchParams }: Props) {
  // Extract the owner from the search params here
  const owner = searchParams.owner;
  console.log(owner);
  const data = await getData();

  return (
    <div className="container mx-auto py-10">
      <DataTable columns={columns} data={data} />
      {/* Redfining columns as a functions fails ... */}
      {/* <DataTable columns={columns(owner)} data={data} /> */}
    </div>
  );
}

columns.tsx

"use client";

import { ColumnDef } from "@tanstack/react-table";
import Link from "next/link";

export type Payment = {
  id: string;
  amount: number;
  status: "pending" | "processing" | "success" | "failed";
  email: string;
};

// redefining columns as functions fails
// export const columns = (owner: string): ColumnDef<Payment>[] => [
export const columns: ColumnDef<Payment>[] = [
  {
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => (
      <Link href="http://example.com/owner">{row.getValue("status")}</Link> // I wanto to use {/owner} here
    ),
  },
  {
    accessorKey: "email",
    header: "Email",
  },
  {
    accessorKey: "amount",
    header: "Amount",
  },
];

page.tsx

参见代码和框

Answer 1

将变量作为表元传递

const table = useReactTable({
    ...
    meta: {
      owner: owner,
    },
  });

您可以从单元格的表格道具访问元

(table.options.meta as any)?.owner