Help in how to add new entry to datatable or edit data of a selected row

[BearCooder]

Hello guys,
I am building the Datatable from shadcn documentation that uses Tanstack Table.

I replicated this table step by step like in the instruction and it works perfectly. Now I want to add an ADD button to add a new entry to the table. And and EDIT button that enables to edit a selected row in the table,

However when I look at the documentation in Tanstack page I cannot find information about this.

When I go to the documentation there is only an editable example but I cannot run it.
I get Unable to run Embedded Project and a blank page.

Does anyone know how can I achieve my goal? Any help is appreciated please. Thank you!

[BearCooder]

Dear @KevinVandy can you maybe help please? Sorry for the ping but I am kind of stuck

[KevinVandy]

It's a hard problem for sure. In my MRT projects, I accomplished it. Here's an example when using my library.
https://www.material-react-table.com/docs/examples/editing-crud-inline-row

Feel free to browse the source code, or continue the conversation here to ask more about my implementation. The short of it is, I create an extra row with the createRow function exported from TanStack Table, and then render it along-side the other rows coming from the row models. I even have logic to spice in the new row at whatever row render index is needed, like in this tree editing example.

[BearCooder]

Thank you very much for your answer. The next days I will go through your example in your library and if I have questions I will come back to you here :)