How to pass an event from a button in columns file into data-table file?

[alexdev888]

I have a file columns.tsx where I define an action button like this:

{
  accessorKey: "Menu", 
  header: "Actions", 
  cell: ({ row, table, cell }) => { 
    return (<Trash2 onClick={() => {}} />) 
  }
}

How can I pass an event to be able to observe it in the data-table.tsx file where I have my useReactTable initialised? I thought I can use state and extend it somehow, but I didn't found any documentation how to do that. I can use onRowSelectionChange but I would prefer to create a custom delete event.

[alexdev888]

The solution was to use meta of the table to pass an event:

{
  accessorKey: "Menu", 
  header: "Actions", 
  cell: ({ row, table, cell }) => { 
    return (<Trash2 onClick={() => {
      table.options.meta.onCustomEvent("delete", row)
    }} />) 
  }
}

also we need to extend our meta model

declare module "@tanstack/react-table" {
  interface TableMeta<TData extends RowData> {
    onCustomEvent: (eventName: string, rowData: Row<TData>) => void
  }
}

And in our useReactTable initialisation:

const table = useReactTable({
    data,
    columns,
    meta: {
      onCustomEvent: (eventName, rowData) => {
        if (eventName === "delete") {
          console.log("Edit row:", rowData.original)
        }
      },
    },
  })