T
TanStack•15mo ago
probable-pink

Can I pass a callback prop to columns if they are defined in their own file?

I am using an example mostly from the shadcn/examples/tasks file. I want to have a dialog that pops up for a couple actions. I don't want to render the dialog on every row, so I have been adding the <Dialog/> component to my Table, and then passing a setOpen callback to the prop. How can I pass a prop like this if my columns are defined in a separate file, that doesn't use hooks? GPT gave me this, is this correct? 
export const DataTable = () => {
  const [open, setOpen] = useState(false);

  // Map over columns to inject the setOpen prop
  const columns = baseColumns.map(column => {
    if (column.id === 'actions') {
      return {
        ...column,
        cell: ({ row }) => <DataTableRowActions row={row} setOpen={setOpen} />,
      };
    }
    return column;
  });

  // your table data
  const data = []; // replace with your data

  const tableInstance = useTable({ columns, data });

  return <Table instance={tableInstance} />;
};
export const DataTable = () => {
  const [open, setOpen] = useState(false);

  // Map over columns to inject the setOpen prop
  const columns = baseColumns.map(column => {
    if (column.id === 'actions') {
      return {
        ...column,
        cell: ({ row }) => <DataTableRowActions row={row} setOpen={setOpen} />,
      };
    }
    return column;
  });

  // your table data
  const data = []; // replace with your data

  const tableInstance = useTable({ columns, data });

  return <Table instance={tableInstance} />;
};
1 Reply
probable-pink
probable-pinkOP•15mo ago
Reading, I can use meta it appears...

Did you find this page helpful?