Using the 4.2 version of tabulator, I can get the xls doc to download but the contents (data) is missing. using table.download.
var table;
function populateReport(url) {
console.log("report generated. URL = " + url);
table = new Tabulator("#ReportResults", {
height: 500,
pagination: "local",
paginationSize: 25,
index: "id",
ajaxURL: url,
columns:[
{title:"ID", field:"id", visible:"false",download:"false"},
{title:"Name", field:"UserFirstLastName", align:"left", formatter:"html"},
{title:"Email", field:"UserEmailAddress", align:"left", formatter:"html"},
{title:"Title", field:"UserTitle", align:"left", formatter:"html"},
{title:"Start Date", field:"UserStartDate", align:"left", formatter:"html"},
{title:"Last Activity", field:"UserLastActivity", align:"left", formatter:"html"},
{title:"Total Training", field:"UserTrainingTime", align:"left", formatter:"html"},
{title:"Manager", field:"ManagerFirstLastName", align:"left", formatter:"html"},
{title:"Series", field:"CourseSeriesName", align:"left", formatter:"html"},
{title:"Course", field:"CourseLibraryName", align:"left", formatter:"html"},
{title:"Assigned", field:"DateAssigned", align:"left", formatter:"html"},
{title:"Deadline", field:"AssignmentDeadline", align:"left", formatter:"html"},
{title:"Completed", field:"AssignmentCompletedDate", align:"left", formatter:"html"},
{title:"Score", field:"CourseScore", align:"center", formatter:"html"},
{title:"Group", field:"GroupName", align:"left", formatter:"html"},
{title:"Team", field:"TeamName", align:"left", formatter:"html"},
{title:"Catalog", field:"CatalogName", align:"left", formatter:"html"},
],
});
hideWrapper();
$("#ReportPanel").slideDown();
$('#DateLabel').show();
console.log("report data displayed");
$("#download-xlsx").click(function () {
table.download("xlsx", "data.xlsx", { sheetName: "MyData" });
//$("#ReportResults").tabulator("download", "xlsx", "data.xlsx", { sheetName: "My Data" });
});
$('#ReportPanel').slideUp();
$('#ReportResults').tabulator();
$('#ReportResults').tabulator("destroy");
Any advice help would be appreciated..Using the 4.2 version of tabulator, I can get the xls doc to download but the contents (data) is missing. using table.download.
Working Fine copy my example or edit your question and put real tabledata instead of Ajax URL
const tabledata1 = [{
id: 1,
name: "Oli ",
money: "0",
col: "red",
dob: ""
},
{
id: 2,
name: "Mary ",
money: "0",
col: "blue",
dob: "14/05/1982"
},
{
id: 3,
name: "Christine ",
money: "0",
col: "green",
dob: "22/05/1982"
},
{
id: 4,
name: "Brendon ",
money: "0",
col: "orange",
dob: "01/08/1980"
},
{
id: 5,
name: "Margret ",
money: "0",
col: "yellow",
dob: "31/01/1999"
},
];
const table = new Tabulator("#example-table", {
height: 500,
pagination: "local",
paginationSize: 25,
index: "id",
data: tabledata1, //assign data to table
layout: "fitColumns", //fit columns to width of table (optional)
autoColumns: true
});
function myFunction() {
table.download("xlsx", "data.xlsx", {sheetName:"MyData"}); //download a Xlsx file that has a sheet name of "MyData"
}
<!DOCTYPE html>
<html lang="en">
<link href="https://unpkg.com/tabulator-tables#4.2.7/dist/css/tabulator.min.css" rel="stylesheet" />
<script src="https://unpkg.com/tabulator-tables#4.2.7/dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
<body>
<button onclick="myFunction()">Download Excel</button>
<div id="example-table"></div>
</body>
</html>
Related
title pretty much says it, I have users that have different roles they can choose from and I need to toggle the row selection functionality on/off depending on the role they choose, is this possible or do you have to recreate the tabulator to change this value?
This option is not toggleable once the table has been instantiated, but you could use a Selection Eligibility function to determine if the row should currently be selectable:
var table = new Tabulator("#example-table", {
selectableCheck:function(row){
//row - row component
return row.getData().age > 18; //allow selection of rows where the age is greater than 18
},
});
You could tweak the above example to look at a global boolean that you toggle to determine if the table is selectable
In this I can select rows with name Oli Bob only See Documentation
Use as per your convinience
selectableCheck:function(row){
//row - row component
return row.getData().age > 18; //allow selection of rows where the age is greater than 18
},
const tabledata = [{
name: "Oli Bob",
location: "United Kingdom",
gender: "male",
col: "red",
dob: "14/04/1984"
},
{
name: "Oli Bob",
location: "United Kingdom",
gender: "male",
col: "red",
dob: "14/04/1984"
},
{
name: "Jamie Newhart",
location: "India",
gender: "male",
col: "green",
dob: "14/05/1985"
}
];
let selectable = false;
const table = new Tabulator("#example-table", {
data: tabledata,
selectable: true,
selectableCheck: function(row) {
const name = row.getData().name;
return name === "Oli Bob";
},
columns: [{
title: "Row Num",
formatter: "rownum"
},
{
title: "Name",
field: "name",
width: 200
},
],
});
<script src="https://unpkg.com/tabulator-tables#4.4.3/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.4.3/dist/css/tabulator.min.css" rel="stylesheet" />
<div id="example-table"></div>
If you take a look at the first example at http://tabulator.info/examples/4.4#column-groups, how do I get a reference to the column "Personal Info", so I can toggle/show/hide it?
I tried it with var col = table.getColumn("Personal Info") but that did not work (as expected).
I would prefer a vanilla JS solution which uses the built-in tabulator API. But jQuery is also ok as an alternative.
Here is a jsfiddle https://jsfiddle.net/jmartsch/g7xewtf6/17/
I found out, that I can use console.log(table.getColumn('gender').getParentColumn());
This does work, but it is not very elegant. It would be nice to have a solution that directly selects the column group header.
const tabledatasimple=[{id:1,name:"Oli Bob",location:"United Kingdom",gender:"male",rating:1,col:"red",dob:"14/04/1984"},{id:2,name:"Mary May",location:"Germany",gender:"female",rating:2,col:"blue",dob:"14/05/1982"},{id:3,name:"Christine Lobowski",location:"France",gender:"female",rating:0,col:"green",dob:"22/05/1982"},{id:4,name:"Brendon Philips",location:"USA",gender:"male",rating:1,col:"orange",dob:"01/08/1980"},{id:5,name:"Margret Marmajuke",location:"Canada",gender:"female",rating:5,col:"yellow",dob:"31/01/1999"},{id:6,name:"Frank Harbours",location:"Russia",gender:"male",rating:4,col:"red",dob:"12/05/1966"},{id:7,name:"Jamie Newhart",location:"India",gender:"male",rating:3,col:"green",dob:"14/05/1985"},{id:8,name:"Gemma Jane",location:"China",gender:"female",rating:0,col:"red",dob:"22/05/1982"},{id:9,name:"Emily Sykes",location:"South Korea",gender:"female",rating:1,col:"maroon",dob:"11/11/1970"},{id:10,name:"James Newman",location:"Japan",gender:"male",rating:5,col:"red",dob:"22/03/1998"}];
const table = new Tabulator("#example-table", {
height: "311px",
data: tabledatasimple,
columnVertAlign: "bottom", //align header contents to bottom of cell
columns: [{
title: "Name",
field: "name",
width: 160
},
{ //create column group
title: "Work Info",
columns: [{
title: "Progress",
field: "progress",
align: "right",
sorter: "number",
width: 100
},
{
title: "Rating",
field: "rating",
align: "center",
width: 80
},
{
title: "Driver",
field: "car",
align: "center",
width: 80
},
],
},
{ //create column group
title: "Personal Info",
field: "pInfo",
columns: [{
title: "Gender",
field: "gender",
width: 90
},
{
title: "Favourite Color",
field: "col",
width: 140
},
{
title: "Date Of Birth",
field: "dob",
align: "center",
sorter: "date",
width: 130
},
],
},
],
});
const columns = table.getColumns(true);
doSomething = (colName) => {
columns.forEach((col) => {
if (col.getDefinition().field === colName) {
col.hide();
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.4.3/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.4.1/dist/css/tabulator.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.4.3/css/tabulator_modern.css" rel="stylesheet" />
<div id="example-table"></div>
<button id="hidePInfo" onclick="doSomething('pInfo')">Hide Personal Info</button>
I'm trying to bind a custom keys combination to perform a custom action like below but the key binding is not working. I even tried adding keybindings: true in the init settings but no change. There are no errors, warnings or notices in the console whatsoever.
I'm really not sure whether I'm using the .extendModule() correctly, though I have checked the docs already.
var rowContextMenu = function(e, row) {
// do something here
console.log("RIGHT CLICK: Context menu triggered");
}
var deleteRow = function(row) {
let rData = row.getData();
if(rData.hasOwnProperty('_children')) {
let cRows = row.getTreeChildren();
$.each(cRows, function() {
let r = this;
setTimeout(function() {
deleteRow(r);
}, 0);
});
}
row.delete();
};
Tabulator.prototype.extendModule("keybindings", "actions", {
"deleteSelectedRows":function(){ //delete selected rows
let selectedRows = this.table.getSelectedRows();
selectedRows.forEach(function(row){
deleteRow(row);
});
console.log('ROWS DELETED: Triggered with button keyboard');
},
});
Tabulator.prototype.extendModule("keybindings", "bindings", {
deleteSelectedRows:"shift + 9",
});
let nestedData = [
{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"},
];
let table = new Tabulator('#my-tabulator', {
height:"400px",
layout:"fitColumns",
data: nestedData,
/**
* // Actual ajax configuration that won't work with test data (works perfectly with live data)
*
* ajaxLoaderLoading:'<div class="text-center" style="display:inline-block;"><img style="width:100px;" src="/path/to/my/spinner.svg"></div>',
* ajaxURL:"/path/to/my/data.json", //ajax URL
* ajaxConfig:"get", //ajax HTTP request type
*/
sortable: false,
selectable:true, //make rows selectable
dataTree:true,
dataTreeChildIndent:24,
dataTreeStartExpanded:[true, false], //start with first level expanded, second level collapsed
dataTreeCollapseElement:"<span class='expand-collpase-btn'>-</span>",
dataTreeExpandElement:"<span class='expand-collpase-btn'>+</span>",
rowFormatter:function(row){
if(row.getData().parent_id === null){
row.getElement().classList.add("root-node");
}
},
keybindings: {
deleteSelectedRows:"shift + 9"
},
rowContext:rowContextMenu,
columnMinWidth : 24,
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", align:"center", sorter:"date", width:150},
],
/**
* // Actual column configuration that won't work with test data (works perfectly with live data)
*
* columns:[
* {title:"Col 1", field:"field_1", headerSort:false, titleFormatter:headerFilter, titleFormatterParams:filters, responsive:0,
* formatter:function(cell, formatterParams){
* //cell - the cell component
* //formatterParams - parameters set for the column
*
* let rowData = cell.getRow().getData();
*
* if(rowData['test'] == 'String 1' || rowData['test'] === false) {
* let cellUrl = $('<a></a>', {href: '/path/to/cell/item/itemid:'+rowData['id'], target: "_blank"}).html(cell.getValue());
* return cellUrl[0];
* }
* return cell.getValue(); //return the contents of the cell;
* },
* },
* {title:"Col 2", field:"field_2", headerSort:false, width:150,
* formatter:function(cell, formatterParams){
* //cell - the cell component
* //formatterParams - parameters set for the column
*
* let rowData = cell.getRow().getData();
*
* if(rowData['test']) {
* return '<span class="text-muted text-bold text-italic">String 1</span>';
* }
* return '<span class="text-italic">String 2</span>';
* },
* },
* {title:"Col 3", headerSort:false, field:"field_3", width:200, align:"right", titleFormatter:headerFilter, titleFormatterParams:filters, responsive:2}, //hide this column first
* {title:"Col 4", headerSort:false, field:"field_4", width:200, align:"right", titleFormatter:headerFilter, titleFormatterParams:filters},
* {
* title:"",
* headerSort:false,
* resizable: false,
* columns: [
* {title:"", width:24, headerSort:false, resizable: false, formatter:editButton, cssClass:'table-actions'},
* {title:"", width:24, headerSort:false, resizable: false, formatter:deleteButton, cssClass:'table-actions'},
* ]
* },
* ]
*/
});
$('#delete-rows-btn').on('click', function(e){
let selectedRows = table.getSelectedRows();
selectedRows.forEach(function(row){
deleteRow(row);
});
console.log('ROWS DELETED: Triggered with button click');
});
$('#reload-table-btn').on('click', function(e){
console.log('Table reloaded');
table.replaceData(nestedData);
});
/**
* I'm using custom CSS
* but let's ignore it for the sake of this demo
*/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/tabulator-tables#4.2.7/dist/css/tabulator.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/tabulator-tables#4.2.7/dist/css/bootstrap/tabulator_bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/tabulator-tables#4.2.7/dist/js/tabulator.min.js"></script>
<a id="delete-rows-btn" href="javascript:void(0);" class="btn btn-sm btn-danger">Delete Selected</a>
<a id="reload-table-btn" href="javascript:void(0);" class="btn btn-sm btn-primary">Reload Table</a>
<div id="my-tabulator" class="table-bordered"></div>
you need to use shift + keyCodeand disable rowSelectable. My code works if you
focus on table
press Shift + 9 Key
var rowContextMenu = function (e, row) {
// do something here
console.log("RIGHT CLICK: Context menu triggered");
}
var deleteRow = function (row) {
let rData = row.getData();
if (rData.hasOwnProperty('_children')) {
let cRows = row.getTreeChildren();
$.each(cRows, function () {
let r = this;
setTimeout(function () {
deleteRow(r);
}, 0);
});
}
row.delete();
};
Tabulator.prototype.extendModule("keybindings", "actions", {
"deleteSelectedRows": function () { //delete selected rows
let selectedRows = this.table.getSelectedRows();
selectedRows.forEach(function (row) {
deleteRow(row);
});
console.log('ROWS DELETED: Triggered with button keyboard');
},
});
Tabulator.prototype.extendModule("keybindings", "bindings", {
deleteSelectedRows: "shift + 9",
});
let nestedData = [
{
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"},
];
let table = new Tabulator('#my-tabulator', {
height: "400px",
layout: "fitColumns",
data: nestedData,
sortable: false,
// selectable: true, //make rows selectable
dataTree: true,
dataTreeChildIndent: 24,
dataTreeStartExpanded: [true, false], //start with first level expanded, second level collapsed
dataTreeCollapseElement: "<span class='expand-collpase-btn'>-</span>",
dataTreeExpandElement: "<span class='expand-collpase-btn'>+</span>",
rowFormatter: function (row) {
if (row.getData().parent_id === null) {
row.getElement().classList.add("root-node");
}
},
keybindings: {
deleteSelectedRows: "shift + 57"
},
rowContext: rowContextMenu,
columnMinWidth: 24,
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", align: "center", sorter: "date", width: 150},
],
});
$('#delete-rows-btn').on('click', function (e) {
let selectedRows = table.getSelectedRows();
selectedRows.forEach(function (row) {
deleteRow(row);
});
console.log('ROWS DELETED: Triggered with button click');
});
$('#reload-table-btn').on('click', function (e) {
console.log('Table reloaded');
table.replaceData(nestedData);
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/tabulator-tables#4.2.7/dist/css/tabulator.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/tabulator-tables#4.2.7/dist/css/bootstrap/tabulator_bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/tabulator-tables#4.2.7/dist/js/tabulator.min.js"></script>
<a id="delete-rows-btn" href="javascript:void(0);" class="btn btn-sm btn-danger">Delete Selected</a>
<a id="reload-table-btn" href="javascript:void(0);" class="btn btn-sm btn-primary">Reload Table</a>
<div id="my-tabulator" class="table-bordered"></div>
I have a column which is formatted using the built in money formatter. I would like to change the text of the cell to red if the numeric value of the cell is negative. I can't create a custom formatter because the column formatter option is already set to money.
You have to use a custom formatter, Mimic the money formatter in this code. I can't think of anything else
let tabledata = [{
id: 1,
name: "Oli ",
money: 1,
col: "red",
dob: ""
},
{
id: 2,
name: "Mary ",
money: -1,
col: "blue",
dob: "14/05/1982"
},
{
id: 3,
name: "Christine ",
money: 0,
col: "green",
dob: "22/05/1982"
},
{
id: 4,
name: "Brendon ",
money: 10,
col: "orange",
dob: "01/08/1980"
},
{
id: 5,
name: "Margret ",
money: -10,
col: "yellow",
dob: "31/01/1999"
},
];
for (let i = 0; i < tabledata.length; i++) {
if (tabledata[i].money < 0) {
tabledata[i].money = "<span class='red'>$" +
tabledata[i].money +
"</span>"
} else {
tabledata[i].money = '$' + tabledata[i].money;
}
}
const table = new Tabulator("#example-table", {
data: tabledata,
layout: "fitColumns",
columns: [{
title: "id",
field: "id"
},
{
title: "name",
field: "name"
},
{
title: "money",
field: "money",
formatter: "html"
},
{
title: "col",
field: "col"
},
{
title: "dob",
field: "dob"
},
]
});
.red {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<script src="https://unpkg.com/tabulator-tables#4.2.4/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.2.4/dist/css/tabulator.min.css" rel="stylesheet" />
<body>
<div id="example-table"></div>
</body>
</html>
I think I found a solution for this problem:
formatter:function(cell,params,callback) {
let money = cell.getTable().modules.format.getFormatter("money");
cell.getElement().style...
return money(cell,params,callback);
}
https://jsfiddle.net/baumrock/vxpbhLsg/14/
Even in the example given # the Tabulator site:
http://tabulator.info/basic/4.2
the date column does not sort, unlike the others. Is there a fix for that?
Date sorting for Tabulator is dependent on MomentJS.
Import Moment Js to your code
{title: "Date Of Birth", field: "dob", sorter:"date", sorterParams:{format:"DD/MM/YY"}},
Please check this Snippet
const tabledata1 = [
{id: 1, name: "Oli ", money: "0", col: "red", dob: "14/05/1982"},
{id: 2, name: "Mary ", money: "0", col: "blue", dob: "14/05/1982"},
{id: 3, name: "Christine ", money: "0", col: "green", dob: "22/05/1982"},
{id: 4, name: "Brendon ", money: "0", col: "orange", dob: "01/08/1980"},
{id: 5, name: "Margret ", money: "0", col: "yellow", dob: "31/01/1999"},
];
const table = new Tabulator("#example-table", {
height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data: tabledata1, //assign data to table
layout: "fitColumns", //fit columns to width of table (optional)
columns: [ //Define Table Columns
{title: "Name", field: "name", width: 150},
{
title: "money",
field: "money",
align: "left",
formatter: "money"
},
{title: "Favourite Color", field: "col"},
{title: "Date Of Birth", field: "dob", sorter:"date", sorterParams:{format:"DD/MM/YY"}},
]
});
function removeData() {
table.clearData();
}
function update() {
table.updateOrAddData(tabledata2);
// table.addData(tabledata2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://unpkg.com/tabulator-tables#4.2.4/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.2.4/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<div id="example-table"></div>