Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server"

[panieldark]

With Next13, when trying to follow https://ui.shadcn.com/docs/components/data-table#cell-formatting, the developer gets this error.

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
  {accessorKey: "amount", header: function, cell: ...}

It seems shad-cn may not play nicely with NextJS13.

[panieldark]

• I tried making columns.txt (from the tutorial) a server component, passing down header and cell as async functions, forcing page.tsx to become a client component, results in a spin-off error

  error TypeError: columnDefs.map is not a function
  at DataTable (./src/components/ui/table.tsx:116:37)

• I tried making an API GET route that serves columns as data, but the header/cell functions are lost due to serialization. Sad panda.

[danieljcksn]

Ensure that you include the directive "use client" at the top of your columns file. I encountered the same error, but it was resolved after adding it.

[McKayMower]

Ensure that you include the directive "use client" at the top of your columns file. I encountered the same error, but it was resolved after adding it.

this worked for me!

[astrooom]

This is very limiting. Is there no way to modify the cell on server-side?

[lpkobamn]

i got same error, i don't understand how to fix it.. in the column, table, dropdown files contain "use client" at top.

 ⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
  {id: "actions", enableHiding: false, header: ..., cell: function}
                                                          ^^^^^^^^
    at stringify (<anonymous>)
 ⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
  {id: "actions", enableHiding: false, header: ..., cell: function}
                                                          ^^^^^^^^
    at stringify (<anonymous>)

import { getCustomers } from "@/app/actions";
import { DataTable } from "./data-table";
import DropdownAction from "./dropdown-action";

export default async function Page() {
  const data = await getCustomers();
  console.log(data);
  const columns = [
    {
      accessorKey: "first_name",
      header: "first_name",
    },
    {
      accessorKey: "last_name",
      header: "last_name",
    },
    {
      accessorKey: "phone",
      header: "phone",
    },
    {
      accessorKey: "email",
      header: "email",
    },
    {
      id: "actions",
      enableHiding: false,
      header: "actions",
      cell: ({ row }: any) => {
        const payment = row.original;

        return <DropdownAction />;
      },
    },
  ];

  return <DataTable columns={columns} data={data} />;
}

"use client";

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

// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
export type Payment = {
  id: string;
  amount: number;
  status: "pending" | "processing" | "success" | "failed";
  email: string;
};

export const columns: ColumnDef<Payment>[] = [
...
];

"use client";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { MoreHorizontal } from "lucide-react";

export default function DropdownAction() {
  return (
    <DropdownMenu>
...
    </DropdownMenu>
  );
}

"use client";
import { ScrollArea } from "@/components/ui/scroll-area";

import {
  ColumnDef,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[];
  data: TData[];
}

export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <div className="rounded-md border bg-background">
      <ScrollArea className="h-[calc(100vh_-_theme(spacing.40))] rounded-md border p-4">
        <Table>
        ...
        </Table>
      </ScrollArea>
    </div>
  );
}

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.