Hey all, not directly a nextjs question but using next and running into an error that I’m lost on how to figure out.

I’m in nextjs 14

I’m using agGrid Community for a grid in my app. I’m trying to create a reusable component that accepts column definitions and data in the parent which is passed to the grid (child). No issue there. But one of the properties of the column def object is the ability to run a format function over data and display it. Think formatting a phone number.

I’m getting stuck trying to pass the function to the client. Below is the code. The error stipulates that I can’t pass a function from server to client unless I mark the parent a server component. Having done that, can confirm it doesn’t work. The formatter functions I use are Util functions that I created to be reusable. The error messages mentioned they need to be async and server too but that feels wrong and doesn’t work when I attempted.

What would be the best way to perform the formatting in the parent and pass that data to the grid?

Parent Component

import formatPhoneNumber from "@/utils/formatPhoneNumber";
import formatTitleCase from "@/utils/formatTitleCase";

const columns = [
{
field: "name",
headerName: "NAME",
filter: true,
sortable: true,
valueFormatter: formatTitleCase,
},
{
field: "phone",
headerName: "PHONE",
valueFormatter: formatPhoneNumber,
},


/// grid component

<AGGridTable columns={columns} rows={data} />