Reactivity
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.
Reactive Data
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;or if you want to directly update something in the array:
//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