Movable Rows and Columns

Movable Rows

To allow the user to move rows up and down the table, set the movableRows parameter in the options:

var table = new Tabulator("#example-table", {
    movableRows: true, //enable user movable rows
})

This will allow users to drag rows around by clicking and dragging on any part of the row.

Loading Example...
Source Code

HTML

<div id="example-table"></div>

JavaScript

var table = new Tabulator("#example-table", {
    height:"311px",
    movableRows:true,
    columns:[
        {rowHandle:true, formatter:"handle", headerSort:false, frozen:true, width:30, minWidth:30},
        {title:"Name", field:"name", width:150},
        {title:"Progress", field:"progress", formatter:"progress", sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", formatter:"star", formatterParams:{stars:6}, align:"center", width:120},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
        {title:"Driver", field:"car", align:"center", formatter:"tickCross"},
    ],
    rowMoved:function(row){
        alert("Row: " + row.getData().name + " has been moved");
    }
});

Callbacks

The rowMoved callback will be triggered when a row has been successfuly moved. You can use this function to trigger any ajax requests or other updates needed upon a successful row move.

var table = new Tabulator("#example-table", {
    rowMoved:function(row){
        //row - row component
    }
});

Row Handles

If you would prefer the user only be able to move a column around by one particular cell, the you can set the rowHandle property to true in the column definition object for that column to restrict the trigger for row movement to that cell only.

var table = new Tabulator("#example-table", {
    movableRows: true, //enable user movable rows
    columns:[
        {rowHandle:true, formatter:"handle", headerSort:false, frozen:true, width:30, minWidth:30},
        {title:"name", field:"name"} //normal column
    ]
})

Movable Rows and Grouping

If you move a row between groups, its values will be updated to match those of the new group.

If you move the last row in a group out of that group, that group will be removed.

Moving Rows Between Tables

Tabulator also allows you to move rows between tables. To enable this you should supply either a valid CSS selector string a DOM node for the table or the Tabuator object for the table to the movableRowsConnectedTables option. if you want to connect to multple tables then you can pass in an array of values to this option.

var table = new Tabulator("#example-table", {
    movableRows: true, //enable movable rows
    movableRowsConnectedTables: "#table2", //connect to this table
});
var table = new Tabulator("#example-table", {
    movableRows: true, //enable movable rows
    movableRowsConnectedTables: [firstTable, secondTable], //connect to these tables
});

Connections to receiving tables are established when a row starts being dragged, so the receving tables do not need to exists when the sending table is created

Note: When moving rows between tables is enabled, you will no longer be able to move rows around inside the sending table.

Row Movement Lifecycle

When you move a row between table, a series of events take place. In the lifecycle below the sending table is where the row is being moved from, and the receiving tables are any tables that the sending table is connected to.

Sending Connections Started

The tabulator-movingrow-sending class is applied to the sending table element and the movableRowsSendingStart callback is called

Receiving Connections Started

The tabulator-movingrow-receiving class is applied to all receiving table elements and the movableRowsReceivingStart callback is triggered

Row Received

When the moving row is dropped on the receving table the movableRowsReceiver function is triggered, if it returns true the movableRowsReceived callback is triggered, otherwise the movableRowsSentFailed is triggered

Row Sent

If the row is successfuly received then the movableRowsSender function is triggered and the movableRowsSent callback is triggered, if it failed then the movableRowsReceivedFailed callback is triggered

Close Sending Connection

The sending table closes its connections to other tables, removes the tabulator-movingrow-sending class from its table element and triggers the movableRowsSendingStop callback.

Close Receiving Connection

Each receving table then closes its connection, removes the tabulator-movingrow-receiving class from its table element and triggers the movableRowsReceivingStop callback

Receiver Function

The movableRowsReceiver option should be set on the receiving tables, and sets the action that should be taken when the row is dropped into the table.

There are several inbuilt receiver functions:

  • insert - inserts row next to the row it was dropped on, if not dropped on a row it is added to the table (default)
  • add - adds row to the table
  • update - updates the row it is dropped on with the sent rows data
  • replace - replaces the row it is dropped on with the sent row
var table = new Tabulator("#example-table", {
    movableRowsReceiver: "add", //add rows when dropped on the table
})

You can also pass a callback to the movableRowsReceiver option for custom receiver functionality. the callback must return a boolean to indicate whether the drop should be considered successful or not (eg. you may want to reject a drop if it was not on a row)

//custom receiver function - update only one value of the toRow and only if the fromRow is dropped on a row
var customReceiver = function(fromRow, toRow, fromTable){
    //fromRow - the row component from the sending table
    //toRow - the row component from the receiving table (if available)
    //fromTable - the Tabulator object for the sending table

    if(toRow){
        toRow.update({"name":fromRow.getData().name});
        return true;
    }

    return false;
}

//set custom receiver
var table = new Tabulator("#example-table", {
    movableRowsReceiver: customReceiver,
});

Sender Function

The movableRowsSender option should be set on the sending table, and sets the action that should be taken after the row has been successfuly dropped into the receiving table.

There are several inbuilt sender functions:

  • false - do nothing(default)
  • delete - deletes the row from the table
var table = new Tabulator("#example-table", {
    movableRowsSender: "delete", //remove the row from this table after it is successfuly received
})

You can also pass a callback to the movableRowsSender option for custom sender functionality.

//custom receiver function - increment a moved column on the sent row
var customSender = function(fromRow, toRow, toTable){
    //fromRow - the row component from the sending table
    //toRow - the row component from the receiving table (if available)
    //toTable - the Tabulator object for the receiving table

    fromRow.update({moved:fromRow.getData().moved + 1})
}

//set custom receiver
var table = new Tabulator("#example-table", {
    movableRowsSender: customSender,
});

Callbacks

A range of callbacks are available for row movement between tables. See the Row Movement Callbacks section for more information.

Movable Columns

To allow the user to move columns along the table, set the movableColumns parameter in the options:

var table = new Tabulator("#example-table", {
    movableColumns: true, //enable user movable columns
});

This will allow users to drag columns around using the column headers at the top of the table.

Callbacks

A range of callbacks are available for row and column movements. See the Row Callbacks and Column Callbacks sections for more information.