How do I customize the Table extension?

[netrolite]

I need to wrap the table element in a div to add some buttons around the table for adding new rows/columns.

I've drawn the basic layout I'm trying to achieve:

Here's the layout in JSX:

<div>
  <button>+</button>
  <button>+</button>
  <TiptapTable />
</div>

I tried extending the Table extension, but with no luck. How can I do that?

[netrolite]

I could've probably made a custom extension based on the source code for the original Table extension and rendered it as a react component like this:

export const CustomTable = Node.create<TCustomTableOptions>({
  ...
  addNodeView() {
    return ReactNodeViewRenderer(CustomTableReactComponent);
  },
  ...
}

but that's too much of a hassle honestly so I'm closing this

[HoaX7]

how did you solve this? I have this exact problem

[netrolite]

how did you solve this? I have this exact problem

This was really long ago so I don't remember what I did but I was able to find the code I used for Tiptap tables in my project. I don't believe I wrote it by myself, what I probably did is I copied the source code of the Tiptap Table extension and modified it slightly to suit my needs. Thought I'd let you know in case that helps.

https://github.com/netrolite/nextjs-notes-app/tree/main/client/src/utils/TiptapExtensions/Table