Minimal client-side CRUD example (add, edit, delet buttons)

[ariel]

Does anyone know of a minimal example including buttons to

1. Add empty row
2. Edit row
3. Delete row
   ??

I’m not using any back end. Want to do stuff in the table and then export to Excel.

The goal would be something like

based on this shiny app: https://tychobra.shinyapps.io/crud_traditional/

Or even the simpler

Based on https://github.com/DavidPatShuiFong/DTedit/blob/master/inst/examples/example.R

I would even pay a small amount of $$ if someone would create that minimal example for me.

[adrian.szymanski]

Hi @ariel

Can you please send me your license ID at support@handsontable.com so I can check your current support plan?

[ariel]

Hi Adrian. I’m using the non-commercial license.

[adrian.szymanski]

Hi @ariel

Ok, I see. So, for now I can offer a minimal example with adding/removing rows: https://jsfiddle.net/aszymanski/j3vamftq/17/

The edit button would require more information about what it should do.

[ariel]

Thanks for putting that together! The functionality I’m after is more like those other examples. Your recommendation about using hooks on my other forum post pointed me in the right direction. The only tricky part was how to initialize the startRow and endRow attributes to not get an error which clicking the add or remove buttons before a row is actually selected.

Since this is part of basic CRUD, which many users need, feel free to use this as an example on the website.

I’m reading up on putting buttons in cells so I can make something more like the first example. That one uses the datatables editor, which is completely proprietary, no non-commercial license. However that editor has the option of using automatically generated modals for edition. Not sure if I have the energy to implement that.

[aleksandra_budnik]

Hi @ariel

My colleague’s having a day off so I decided to jump in and share some tips. If you plan to add buttons in cells you might find this demo helpful http://jsfiddle.net/j5y60xwn/. Although, in some cases, it would be better to switch from the onClick method to sharing logic via afterOnCellMouseDown hook.

[ariel]

This works pretty well. However, the actions don’t work on the first row. I have raised a separate issue about that.

https://codepen.io/abalter/pen/poaeQJB

Can't delete first row, or add new row below it

Here is an example with two tables: one has 1 initial row, and one has 2 initial rows. https://codepen.io/abalter/pen/NWypOYy The behavior I want is for the “+” button to add a row below or after the one clicked. To do this, my code is hot.alter("insert_row", endRow+1). This works for any row other than the first row. And the behavior is the same whether there is only a single row or more. The “delete” button also does not work on the first row. I’m guessing the issue is the same.

[aleksandra_budnik]

I guess that we can close this thread as the one linked is already solved. Please feel free to open a new ticket when needed.