[BUG] - Moving between tables does not work for binding data.

[aalopatin]

Hello!

I've made movable tables.

Here is part of my template:

<b-row>
            <b-col cols="6">
              <vue-tabulator ref="allPeriods" v-model="allPeriods" :options="optionsAllPeriods"></vue-tabulator>
            </b-col>
            <b-col cols="6">
              <vue-tabulator id="selectedPeriods" ref="selectedPeriods"  v-model="selectedPeriods" :options="optionsSelectedPeriods"></vue-tabulator>
            </b-col>
          </b-row>

Here are options dor these tables:

allPeriods: [],
        selectedPeriods: [],
        optionsAllPeriods: {
            layout:"fitColumns",
            height: 400,
            movableRows: true,
            movableRowsConnectedTables: "#selectedPeriods",
            columns: [
              {rowHandle:true, formatter:"handle", headerSort:false, frozen:true, width:30, minWidth:30},
              {title:"Период", field:"id", headerSort: false},
              {title:"Начало", field:"startPeriod", sorter:"date", headerSortStartingDir:"desc", visible: false},
              {title:"Окончание", field:"endPeriod", sorter:"date",  headerSortStartingDir:"desc", visible: false},
              {title:"Тип периода", field:"type", sorter:"string", visible: false}
            ],
        },
        optionsSelectedPeriods: {
          layout:"fitColumns",
          height: 400,
          movableRows: true,
          movableRowsReceiver: "add",
          columns: [
            {rowHandle:true, formatter:"handle", headerSort:false, frozen:true, width:30, minWidth:30},
            {title:"Период", field:"id", validator:"unique"},
            {title:"Начало", field:"startPeriod", sorter:"date", visible: false},
            {title:"Окончание", field:"endPeriod", sorter:"date", visible: false},
            {title:"Тип периода", field:"type", sorter:"string", visible: false}
          ],
        },

When I move rows between tables they are shown in the receiver. But they aren't shown in data of Vue

[angeliski]

Hey @aalopatin That makes sense. The current implementation of the vue-tabulator only handles the v-model to creating the Tabulator instance. As a workaround, you can use the movableRowsReceived callback to handle that data transition.

I will see how to fix that, let me know if you have any suggestions.

Thank for your issue report

See you Rogerio

[aalopatin]

Hey @angeliski I install Tabulator Manually. I've found next: Reactivity doesn't work:

1. When a row moves between tables;
2. When a row moves inside a table, even when I turned on reactivityData in tabulator options.

But if I look at tabulator instance:

this.tabulator.getData()

or when using your component:

this.$refs.tabulator.getInstance().getData()

All changes are present in the Data.

So I have solved these problems as follows:

1. Moving between tables - I use movableRowsReceiver

   movableRowsReceiver:(fromRow, toRow, fromTable)=>{
    this.receiverData.push(fromRow.getData())
   },

2. Moving inside table - I use rowMoved:

   rowMoved:(row) => {
    this.receiverData = this.tabulatorReceiver.getData()
   },

   tabulatorReceiver is a holder of Tabulator (or instance in your component).

Maybe it will help you.

[aalopatin]

I reworked the second example, right:

rowMoved:(row) => {
          let count = this.receiverData.length
          let newData = this.tabulatorReceiver.getData()
          this.receiverData.splice(0, count)
          newData.forEach((newRow)=>{
            this.receiverData.push(newRow)
          })
        },