Pass props to react-table ColumnDef in shadcn data table

Question

I am using shadcn's Data Table which builds ontop of tanstack's react-table.

I struggle to pass a prop (specifically a URL searchParam) to my ColumnDef file (i.e., columns.tsx).

Visually that means:

I've set-up a codesandbox here.

The code sandbox has three parts:

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

see codesandbox

Answer 1

Pass your variable as table meta

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

You can access meta from cell's table props

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