//define data
// var tabledata = [
//     {id:1, name:"Billy Bob", age:12, gender:"male", height:95, col:"red", dob:"14/05/2010"},
//     {id:2, name:"Jenny Jane", age:42, gender:"female", height:142, col:"blue", dob:"30/07/1954"},
//     {id:3, name:"Steve McAlistaire", age:35, gender:"male", height:176, col:"green", dob:"04/11/1982"},
//     {id:4, name:"Billy Bob", age:12, gender:"male", height:95, col:"red", dob:"14/05/2010"},
//     {id:5, name:"Jenny Jane", age:42, gender:"female", height:142, col:"blue", dob:"30/07/1954"},
//     {id:6, name:"Steve McAlistaire", age:35, gender:"male", height:176, col:"green", dob:"04/11/1982"},
//     {id:7, name:"Billy Bob", age:12, gender:"male", height:95, col:"red", dob:"14/05/2010"},
//     {id:8, name:"Jenny Jane", age:42, gender:"female", height:142, col:"blue", dob:"30/07/1954"},
//     {id:9, name:"Steve McAlistaire", age:35, gender:"male", height:176, col:"green", dob:"04/11/1982"},
// ];


// var table = new Tabulator("#example-table", {
//     height:"311px",
//     movableRows:true,
//     rowHeader:{
//         headerSort:false, 
//         resizable: false, 
//         minWidth:30, width:30, 
//         rowHandle:true, 
//         formatter:"handle"
//     },
//     data: tabledata,
//     columns:[
//         {title:"Name", field:"name", width:150},
//         {title:"Progress", field:"progress", formatter:"progress", sorter:"number"},
//         {title:"Gender", field:"gender"},
//         {title:"Rating", field:"rating", formatter:"star", formatterParams:{stars:6}, hozAlign:"center", width:120},
//         {title:"Favourite Color", field:"col"},
//         {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date"},
//         {title:"Driver", field:"car", hozAlign:"center", formatter:"tickCross"},
//     ],
// });


// var table = new Tabulator("#example-table", {
//     height:"311px",
//     layout:"fitColumns",
//     groupUpdateOnCellEdit:true,
//     movableRows:true,
//     groupBy:"gender",
//     data: tabledata,
//     columns:[
//         {title:"Name", field:"name", width:200},
//         {title:"Progress", field:"progress", formatter:"progress", sorter:"number"},
//         {title:"Gender", field:"gender"},
//         {title:"Rating", field:"rating", formatter:"star", hozAlign:"center", width:100},
//         {title:"Favourite Color", field:"col"},
//         {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date"},
//         {title:"Driver", field:"car", hozAlign:"center", formatter:"tickCross"},
//     ],
// });


var tableDataNested = [
    {name:"Oli Bob", location:"United Kingdom", gender:"male", col:"red", dob:"14/04/1984", _children:[
        {name:"Mary May", location:"Germany", gender:"female", col:"blue", dob:"14/05/1982"},
        {name:"Christine Lobowski", location:"France", gender:"female", col:"green", dob:"22/05/1982"},
        {name:"Brendon Philips", location:"USA", gender:"male", col:"orange", dob:"01/08/1980", _children:[
            {name:"Margret Marmajuke", location:"Canada", gender:"female", col:"yellow", dob:"31/01/1999"},
            {name:"Frank Harbours", location:"Russia", gender:"male", col:"red", dob:"12/05/1966"},
        ]},
    ]},
    {name:"Jamie Newhart", location:"India", gender:"male", col:"green", dob:"14/05/1985"},
    {name:"Gemma Jane", location:"China", gender:"female", col:"red", dob:"22/05/1982", _children:[
        {name:"Emily Sykes", location:"South Korea", gender:"female", col:"maroon", dob:"11/11/1970"},
    ]},
    {name:"James Newman", location:"Japan", gender:"male", col:"red", dob:"22/03/1998"},
];

var table = new Tabulator("#example-table", {
    height:"311px",
    data: tableDataNested,
    dataTree:true,
    dataTreeStartExpanded:true,
    columns:[
        {title:"Name", field:"name", width:200, responsive:0}, //never hide this column
        {title:"Location", field:"location", width:150},
        {title:"Gender", field:"gender", width:150, responsive:2}, //hide this column first
        {title:"Favourite Color", field:"col", width:150},
        {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date", width:150},
    ],
});

// //listen for row move
// table.on("rowMoved", function(row){
//     console.log("Row: " + row.getData().name + " has been moved");
// });





// var tabledata = [
//     {id:1, name:"Billy Bob", age:12},
//     {id:2, name:"Jenny Jane", age:42},
//     {id:3, name:"Steve McAlistaire", age:35}
// ];


// var table = new Tabulator("#example-table", {
//     height:"311px",
//     movableRows:true,
//     layout:"fitDataFill",
//     rowHeader:{
//         headerSort:false, 
//         resizable: false, 
//         // minWidth:30, width:30, 
//         rowHandle:false, 
//         formatter:"handle"
//     },
//     data: tabledata,
//     columns:[
//         {title:"ID", field:"id", headerSort:false},
//         {title:"Name", field:"name", headerSort:false},
//         {title:"Progress", field:"age", headerSort:false}
//     ],
// });





// setTimeout(() => {  
// table.redraw(true);
// },1000);