Is It Possible To Replace The Data In A Table That Has A Data Tree Without Automatically Collapsing/expanding The Tree?
I'm trying to create a table that can be edited by the user in a web application. The table has several data trees in it. Every time the user edits something in the table, table.re
Solution 1:
Use reactivity
// Original table for the datalet someTableData = [{
name: 'Quiz #1',
date: '2019-07-06',
_children: [{
name: 'What is your name?',
answer: 'Sir Lancelot of Camelot',
}, {
name: 'What is your quest?',
answer: 'To seek the Holy Grail',
}, {
name: 'What is your favorite color?',
answer: 'Red',
}, ],
}, {
name: 'Quiz #2',
date: '2019-08-01',
_children: [{
name: 'What is the air speed velocity of an unladen swallow?',
answer: '24 mph',
}, {
name: 'African or European?',
answer: 'I don\'t know that!',
}, ],
}, ];
// The Tabulator table itselfconst myTable = newTabulator('#table', {
dataTree: true,
//dataTreeStartExpanded: true, //Uncomment this line to see the trees expand themselves when the button is presseddata: someTableData,
layout: 'fitColumns',
reactiveData: true,
columns: [{
title: 'Quiz',
field: 'name',
},
{
title: 'Answer Key',
field: 'answer',
},
{
title: 'Due date',
field: 'date',
},
],
});
// Toggle between the two data sets when the button is clickedlet replaced = false;
constreplaceData = () => {
someTableData[1]._children[0].answer = '200 mph';
if (replaced === false) {
// myTable.replaceData(someOtherData);
replaced = true;
} else {
// myTable.replaceData(someTableData);
replaced = false;
}
}
document.querySelector('button').onclick = replaceData;<!DOCTYPE html><html><head><!-- Tabulator CDN --><linkhref="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" ><scripttype="text/javascript"src="https://unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script><title>Tabulator Tree Demo</title></head><body><h3>Table 1</h3><buttontype='button'>Click me to replace 24 mph to 200mph silently</button><divid='table'></div></body></html>
Post a Comment for "Is It Possible To Replace The Data In A Table That Has A Data Tree Without Automatically Collapsing/expanding The Tree?"