Kirby Editor table block - delete row

Kirby 3 Questions 🤔
1

Hi! I am trying to extend example Table block for Kirby Editor and I got stuck at the very beginning. I wanted to add a button to delete a row. Because it should be similar to deleting columns (which is the functionality built in the block), I did two things in index.js file:

  1. added deleteRow() method (basically just edited deleteColumn() method):

     deleteRow(index) {
   this.rows.splice(index, 1);
   this.columns.forEach(column => {
     this.$delete(column, index);
   });
 }

  2. created a button in each table row

    <k-button icon="trash" @click="deleteRow(rowIndex)" />

Now, no matter in which row I click the button, the last row is removed. Only after I save the page, the removed row returns and the right row is deleted.

Maybe I missed some important part to add or edit?

2

Did you ever find a solution for this? :thinking:

3

Unfortunately not

4

I couldn’t get a solution for a dropdown method but if it helps anyone, here is what I did for add/remove rows at the bottom of the table.

@enter="pushRow(rowIndex, rows.length-1, columnIndex)"
@back="popRow(rowIndex, rows.length-1, columnIndex)"

then

    pushRow(rowIndex, rowLength, columnIndex) {
      if( rowIndex == rowLength ) {
        this.rows.push([]);
        this.$nextTick(() => {
          this.focusOnCell(rowIndex + 1, columnIndex);
        });
      }else{
        this.$nextTick(() => {
          this.focusOnCell(rowIndex + 1, columnIndex);
        });
      }
    },
    popRow(rowIndex, rowLength, columnIndex) {
      if( rowIndex == rowLength && columnIndex == 0 ) {
        this.rows.pop();
        this.focusOnCell(rowIndex - 1, columnIndex);
      }else{
        this.focusOnCell(rowIndex - 1, columnIndex);
      }
    },

Still a little obtuse but its doing the job