Version 6.3 Released!

Click to checkout the new features
Old Documentation
You are browsing documentation for an old version of Tabulator. Consider upgrading your project to Tabulator 6.3

Interaction History

Overview

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

History Controls
Name
Progress
Gender
Rating
Favourite Color
Date Of Birth
Driver
Oli Bob
12
male
1
red
14/04/1984
1
Mary May
1
female
2
blue
14/05/1982
true
Christine Lobowski
42
female
0
green
22/05/1982
true
Brendon Philips
100
male
1
orange
01/08/1980
 
Margret Marmajuke
16
female
5
yellow
31/01/1999
 
Frank Harbours
38
male
4
red
12/05/1966
1
Jamie Newhart
23
male
3
green
14/05/1985
true
Gemma Jane
60
female
0
red
22/05/1982
true
Emily Sykes
42
female
1
maroon
11/11/1970
 
James Newman
73
male
5
red
22/03/1998
 
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();
});

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

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();

Management

Clear History

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

table.clearHistory();

Callbacks

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

Donate