با درود #4822
Description
var nestedData = [
{id:1, make:"Ford", model:"focus", reg:"P232 NJP", color:"white", serviceHistory:[
{date:"01/02/2016", engineer:"Steve Boberson", actions:"Changed oli filter"},
{date:"07/02/2017", engineer:"Martin Stevenson", actions:"Break light broken"},
]},
{id:1, make:"BMW", model:"m3", reg:"W342 SEF", color:"red", serviceHistory:[
{date:"22/05/2017", engineer:"Jimmy Brown", actions:"Aligned wheels"},
{date:"11/02/2018", engineer:"Lotty Ferberson", actions:"Changed Oil"},
{date:"04/04/2018", engineer:"Franco Martinez", actions:"Fixed Tracking"},
]},
]
var printIcon_details = function(cell, formatterParams, onRendered){
Cu++;
return "
<i class='fas fa-plus-square' '>
<i class='fas fa-minus-square' '>
";};
var table = new Tabulator("#example-table", {
height:"311px",
layout:"fitColumns",
columnDefaults:{
resizable:true,
},
data:nestedData,
columns:[
{title:"اقدام ها",
columns:[
{title:"کالا(ها)",formatter:printIcon_details, width:50, align:"center", headerSort:false, cellClick:function(e, cell, row, formatterParams){
var I = cell.getRow().getPosition();
$(".subTable"+I).toggle();
$("#fa-plus"+I).toggle();
$("#fa-minus"+I).toggle();
}},
]
},
{title:"Make", field:"make"},
{title:"Model", field:"model"},
{title:"Registration", field:"reg"},
{title:"Color", field:"color"},
],
rowFormatter:function(row){
//create and style holder elements
var holderEl = document.createElement("div");
var tableEl = document.createElement("div");
holderEl.style.boxSizing = "border-box";
holderEl.style.padding = "10px 30px 10px 10px";
holderEl.style.borderTop = "1px solid #333";
holderEl.style.borderBotom = "1px solid #333";
tableEl.style.border = "1px solid #333";
holderEl.appendChild(tableEl);
row.getElement().appendChild(holderEl);
var subTable = new Tabulator(tableEl, {
layout:"fitColumns",
data:row.getData().serviceHistory,
columns:[
{title:"Date", field:"date", sorter:"date"},
{title:"Engineer", field:"engineer"},
{title:"Action", field:"actions"},
]
})
},
});