130 lines
5.0 KiB
JavaScript
130 lines
5.0 KiB
JavaScript
//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);
|
|
|