Tabulator 4.2: sorter:"date" not working? - tabulator

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>

Related

Is there a way to toggle the row selectable option on/off without recreating the tabulator

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>

Tabulator: How to get a column of a column group?

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>

Making custom Tool-tip for each cell

I want to make visible a row variable value ("company" to be specific) on hover as tool-tip.
I have tried declaring "tooltips" custom function in table declaration returning the value.
tooltips: function (cell) {
let data = cell.getRow();
return "Value of " + data.company;
}
Complete code is available at this fiddle
I want to display the value of company variable i.e Alpha, Beta, Gamma, etc on hover of the mouse.
Try this:
tooltips: function (cell) {
let data = cell.getRow();
return "Value of " + data._row.data.company;
}
const tableDataNested = [{
group: "Backend Engineer A",
name: "Sourced",
applied: 300,
screened: 40,
interviewed: 5,
company: "Alpha"
},
{
group: "Backend Engineer A",
name: "Referred",
applied: 3,
screened: 1,
interviewed: 0,
company: "Beta"
},
{
group: "Backend Engineer A",
name: "University",
applied: 4,
screened: 2,
interviewed: 1,
company: "Gamma"
},
{
group: "Backend Engineer B",
name: "Sourced",
applied: 1000,
screened: 140,
interviewed: 55,
company: "Delta"
},
{
group: "Backend Engineer B",
name: "Referred",
applied: 30,
screened: 11,
interviewed: 2,
company: "Epsilon"
},
{
group: "Backend Engineer B",
name: "University",
applied: 40,
screened: 22,
interviewed: 10,
company: "Phi"
},
];
const table = new Tabulator("#example-table", {
data: tableDataNested,
dataTree: true,
dataTreeStartExpanded: true,
groupBy: "group",
columnCalcs: "table",
tooltips: function(cell) {
const company = cell.getRow().getData().company
return "Value of " + (company) ? company : '' ;
},
columns: [{
title: "Name",
field: "name",
responsive: 0
},
{
title: "Applied",
field: "applied",
bottomCalc: "sum"
},
{
title: "Screened",
field: "screened",
bottomCalc: "sum"
},
{
title: "Interviewed",
field: "interviewed",
bottomCalc: "sum"
},
],
});
<head>
<link href="https://unpkg.com/tabulator-tables#4.3.0/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.3.0/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
</body>

Change colour of money formatted cell to red if negative

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/

Selecting Row After Render/Table Load

I'm attempting to select a row within a Tabulator table once the data or table has been rendered/loaded. I'm not particularly fussed which callback is used, but when a user navigates to this page the table should load a predetermined record (which I will parse as a parameter).
The callback itself works well, as I can display a JS alert, however I'm still unable to select a line within Tabulator.
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator(
"#example-table", {
height: (window.innerHeight), // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically
headerFilterPlaceholder: '', //default place holder text for filters
selectable: 1, //allows row within table to be selected and have selected state (not to be confused with row click function), can be set to have multiple selected (integer), true or false
data: [ **DATA1** ], //assign data to table
dataTree: true,
dataTreeStartExpanded: true,
dataTreeBranchElement: false, //adds or removes right angle leading from parent to child
dataTreeChildIndent: 25, //changes the indent padding
dataTreeCollapseElement: !1,
dataTreeStartExpanded: !0, //changes whether or not the entire table begins expanded
dataTreeCollapseElement: "<span>▼ </span>",
dataTreeExpandElement: "<span>► </span>",
layout: "fitColumns", //fit columns to width of table (optional)
columns: [ **COLUMN1** ],
rowClick:function(e, row) //triggered when the row is clicked
{
var scriptParam = **SCRIPTPARAM1**;
var rowId = row.getData().id;
var fieldName = **FIELDNAME1**;
var theList = [scriptParam, rowId, fieldName];
var doThis = "fmp://$/**FILE**?script=**SCRIPT1**&param=" + theList;
window.location.href = doThis;
},
rowDblClick:function(e, row) //triggered when the row is double clicked
{
table.selectRow(**ROWID**);
},
rowContext:function(e, row) //triggered when the row is right clicked
{
alert('right click');
e.preventDefault(); //overrides the browsers native right click function
},
cellEdited: function(cell)
{
var parameter = 1.1;
var distribute = cell.getColumn().getDefinition().distribute;
var id = cell.getData().id;
var table = cell.getColumn().getDefinition().fmTable;
var field = cell.getColumn().getDefinition().fmTable + "::" + cell.getColumn().getDefinition().fmField;
var table = cell.getColumn().getDefinition().fmTable;
var scriptBefore = cell.getColumn().getDefinition().script_before;
var scriptAfter = cell.getColumn().getDefinition().script_after;
var value = cell.getValue();
var theList = [parameter, distribute, id, table, field, value];
var doThis = "fmp://$/**FileName**?script=**ScriptName**&param=" + theList;
window.location.href = doThis;
},
rowFormatter: function(row) {
var rowColor = row.getData().color
row.getElement().style.backgroundColor = rowColor;
},
renderComplete:function()
{
table.selectRow(**ROWID**);
}
}
);
I'm expecting that once the page is loaded, the row I defined as **ROWID** (which for my testing is ID 1) is selected. FYI, the double click function (regardless of which row is clicked) performs as expected, selecting the correct row.
To further this, I'm looking to (at times) select a child row of the data tree, for example:
const tabledata1 = [{
id: "1",
name: "Oli Bob",
location: "United Kingdom",
gender: "male",
col: "red",
dob: "14/04/1984",
_children: [{
id: "2",
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"
},
];
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
selectable: true, //make rows selectable
layout: "fitColumns", //fit columns to width of table (optional)
autoColumns: true,
dataTree: true,
dataTreeStartExpanded: true,
renderComplete: function() {
console.log('done');
this.selectRow(2);
}
});
table.selectRow(ROWID); wont work until table is initialized you
have to do this.selectRow
Check this jsfiddle
renderComplete: function() {
const rows = this.getRows();
console.log('rows', rows);
for (let i = 0; i < rows.length; i++) {
const childRows = rows[i].getTreeChildren();
if (childRows.length > 0) {
// console.log('childRows', childRows);
// this.selectRow(childRows);
for (let j = 0; j < childRows.length; j++) {
const gender = childRows[j].getData().gender;
console.log('gender', gender);
if (gender === 'male') {
this.selectRow(childRows[j]);
const childRows2 = childRows[j].getTreeChildren();
}
}
}
}
}
});

Resources