A TreeTable allows convenient data storage. Different JavaScript copy-paste modes ensure easy information copying and pasting in a TreeTable. The coding sample below shows how to let users copy and paste rows, cells, and columns with data. Feel free to use programming examples by Webix.
var columns = [ { id:"id", header:"", css:{"text-align":"right"}, width:50}, { id:"value", header:"Film title", fillspace:true, template:"{common.treetable()} #value#" }, { id:"chapter", header:"Mode"} ]; var data = [ { "id":"1", "value":"The Shawshank Redemption", "open":true, "data":[ { "id":"1.1", "value":"Part 1", "chapter":"alpha"}, { "id":"1.2", "value":"Part 2", "chapter":"beta", "open":true, "data":[ { "id":"1.2.1", "value":"Part 1", "chapter":"beta-twin"}, { "id":"1.2.2", "value":"Part 1", "chapter":"beta-twin"} ]}, { "id":"1.3", "value":"Part 3", "chapter":"gamma" } ]}, { "id":"2", "value":"The Godfather", "data":[ { "id":"2.1", "value":"Part 1", "chapter":"alpha" }, { "id":"2.2", "value":"Part 2", "chapter":"beta" } ]} ]; webix.ui({ view: "scrollview", scroll: "y", body: { rows:[ {cols:[ {rows:[ {template:"<br><b>Insert</b> mode. Items are pasted as children.", height:54}, { view:"treetable", columns:webix.copy(columns), scroll: "y", select:"row", multiselect:true, clipboard:"insert", data: webix.copy(data) } ]}, {width:13}, { rows:[ {template:"<br><b>Block</b> mode. Copied values fill cells fill all the cells available.", height: 54}, { view:"treetable", columns:webix.copy(columns), scroll: "y", minHeight: 300, select:"row", multiselect:true, clipboard:"selection", data: webix.copy(data) } ] } ]}, {height:13}, {cols:[ { rows:[ { template:"<br><b>Selection</b> mode. Copied values fill the cells only in the paste area.", height:54 }, { view:"treetable", columns:webix.copy(columns), minHeight: 300, scroll: "y", select:"cell", multiselect:true, clipboard:"block", data: webix.copy(data) } ] }, {width:13}, { rows:[ { template:"<br><b>Repeat</b> mode. Copied values are repeatedly copied into the cells.", height:54 }, { view:"treetable", columns:webix.copy(columns), scroll: "y", select:"column", multiselect:true, clipboard:"repeat", data: webix.copy(data) } ] } ]} ] } });