Version 6.3 Released!

Click to checkout the new features

Interaction History

Overview

The history module allows Tabulator to track the activity of your user to allow you to trigger undo and redo actions on their interactions with the table.

History Controls
Loading Example...
Source Code

HTML

<div>
    <button id="history-undo">Undo Edit</button>
    <button id="history-redo">Redo Edit</button>
</div>

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

JavaScript

//Build Tabulator
var table = new Tabulator("#example-table", {
    height:"311px",
    layout:"fitColumns",
    history:true,
    columns:[
    {title:"Name", field:"name", width:200, editor:"input"},
    {title:"Progress", field:"progress", hozAlign:"right", editor:"input"},
    {title:"Gender", field:"gender", editor:"input"},
    {title:"Rating", field:"rating",  hozAlign:"center", width:100},
    {title:"Favourite Color", field:"col"},
    {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
    {title:"Driver", field:"car", hozAlign:"center", sorter:"boolean"},
    ],
});

//undo button
document.getElementById("history-undo").addEventListener("click", function(){
  table.undo();
});

//redo button
document.getElementById("history-redo").addEventListener("click", function(){
   table.redo();
});

Setup

To enable the history functionality, set the history option to true, in the table constructor object.

var table = new Tabulator("#example-table", {
	history:true, //record table history
});

The history module tracks the following actions:

  • Cell Edits
  • Row Added
  • Row Deleted
  • Row Moved

Management

Undo Action

With history enabled you can use the undo function to automatically undo a user action, the more times you call the function, the further up the history log you go.

table.undo();

If the keybindings module is installed, this action can also be triggered with the ctrl + z key combination.

Get Count of Available Undo Operations

You can use the getHistoryUndoSize function to get a count of the number of history undo actions available.

var undoCount = table.getHistoryUndoSize();

Redo Action

With history enabled you can use the redo function to automatically redo user action that has been undone, the more times you call the function, the further up the history log you go. once a user interacts with the table then can no longer redo any further actions until an undo is performed

table.redo();

If the keybindings module is installed, this action can also be triggered with the ctrl + y key combination.

Get Count of Available Redo Operations

You can use the getHistoryRedoSize function to get a count of the number of history redo actions available.

var redoCount = table.getHistoryRedoSize();

Clear History

The clearHistory function can be used to clear out the current table interaction history.

table.clearHistory();

Events

A range of events are available for tracking history actions. See the History Events section for more information.

Donate