Reactivity

• Overview
• Reactive Data
• Framework Compatibility

Overview

Tabulator v4.2 introduces the concept of data reactivity to JavaScript tables. The reactivity systems allow Tabulator to watch arrays and objects passed into the table for changes and then automatically update the table without any need for additional function calls.

This approach means you no longer need to worry about calling a number of different functions on the table to make changes, you simply update the array or object you originally passed into the table and Tabulator will take care of the rest.

<div>
    <button id="reactivity-add">Add New Row</button>
    <button id="reactivity-delete">Remove Row</button>
    <button id="reactivity-update">Update First Row Name</button>
</div>

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

//define data
var tabledata = [
    {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red" },
    {id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue" },
    {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green" },
    {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange" },
    {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow"},
];

//Build Tabulator
var table = new Tabulator("#example-table", {
    height:"311px",
    layout:"fitColumns",
    reactiveData:true, //turn on data reactivity
    data:tabledata, //load data into table
    columns:[
        {title:"Name", field:"name", sorter:"string", width:200},
        {title:"Progress", field:"progress", sorter:"number", formatter:"progress"},
        {title:"Gender", field:"gender", sorter:"string"},
        {title:"Rating", field:"rating", formatter:"star", hozAlign:"center", width:100},
        {title:"Favourite Color", field:"col", sorter:"string"},
    ],
});

//add row to bottom of table on button click
document.getElementById("reactivity-add").addEventListener("click", function(){
    tabledata.push({name:"IM A NEW ROW", progress:100, gender:"male"});
});

//remove bottom row from table on button click
document.getElementById("reactivity-delete").addEventListener("click", function(){
    tabledata.pop();
});

//update name on first row in table on button click
document.getElementById("reactivity-update").addEventListener("click", function(){
    tabledata[0].name = "IVE BEEN UPDATED";
});

Reactive Data Demo

You can enable reactive data by setting the reactiveData option to true in the table constructor, and then passing your data array to the data option.

Once the table is built any changes to the array will automatically be replicated to the table without needing to call any functions on the table itself

//define array of table data
var tableData = [
    {id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
    {id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
    {id:3, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
    {id:4, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
]

//create table and assign data
var table = new Tabulator("#example-table", {
    reactiveData:true, //enable reactive data
    data:tableData, //assign data array
    columns:[
          {title:"Name", field:"name"},
          {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
          {title:"Favourite Color", field:"col"},
          {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
    ]
});

Local Data Only
Reactive data functionality is only available with local data arrays set on the data property or the setData function. It is not available on ajax data sources.

Array Manipulation

Once a data array has been added to the data property it will be watched for changes using any of the standard row manipulation functions, push, pop, shift, unshift, and splice. Using any of these functions on the array will automatically trigger an update on the table

Add Row To Top Of Table

To add a row to the top of the table you can use the standard JavaScript unshift function:

tableData.unshift({name:"Jessica Jane", age:32});

Add Row To Bottom Of Table

To add a row to the bottom of the table you can use the standard JavaScript push function:

tableData.push({name:"Jessica Jane", age:32});

Remove Row From Top Of Table

To remove a row to the top of the table you can use the standard JavaScript shift function:

tableData.shift();

Remove Row From Bottom Of Table

To remove a row to the bottom of the table you can use the standard JavaScript pop function:

tableData.pop();

Insert Row

To insert a row in the middle of the table you can use the standard JavaScript splice function:

//insert a row at the second row of the table
tableData.splice(1, 0, {name:"Jessica Jane", age:32});

Replace Row

To replace a row in the table you can use the standard JavaScript splice function:

//replace the third row in the table
tableData.splice(2, 1, {name:"Jessica Jane", age:32});

Replacing Entire Data Array

If you need to replace the data array being watched at any point, you can pass a new array into the setData function. Tabulator will then watch the new array instead of the old one.

table.setData(newTableData);

Row Data Object Updates

To update the value of a cell on a row you simply need to update the property of the row data object, Tabulator will then update the table to match.

//create row data object
var row = {name:"Jessica Jane", age:32};

//add to top of watched data array
tabledata.push(row);

//update age value in row
row.age = 14;

//update age of second row in table
tableData[1].age = 14;

Nested Objects
At the moment Tabulator will only watch for changes to the properties directly on the row data object, changes on nested data cannot be tracked. This will be coming in a future release.

Framework Compatibility

The data reactivity module has been built to be compatible with all other reactive front end frameworks like vue, react and angular. This means that when you include Tabulator in your framework project you only need to pass the data array to it when you instantiate the table. you can then manipulate the array and data objects through the framework and Tabulator will automatically update