Formatting date for Tabulator cell to dd/mm/yy - tabulator

I am using Tabulator for an external JSON source.
The source gives the DOB in this format: 2020-04-16T00:00:00.000+0000
which I want to convert to dd/mm/yy
I have included the moment library.
I am using this code:
{title:"Date of Birth", field:"birthDate", sorter:"date", width:200, sorterParams:{format:"DD/MM/YY"}},
But no change is displayed - i just get the original format.
I have also tried this, but it also did not work.
{title:"Date of Birth", field:"birthDate", sorter:"date", width:200, formatter:dateFormatter},
//custom date formatter
var dateFormatter = function(cell, formatterParams){
var value = cell.getValue();
if(value){
value = moment(value , "YYYY/MM/DD").format("MM/DD/YYYY");
}
return value;
}
Thanks for your suggestions.

You need the datetime formatter:
http://tabulator.info/docs/4.7/format#format-builtin
For your custom formatter you are missing the onRendered argument.

The following 2 formats landed up working for me. Kudos to #adrian-klaver for the pointer to option #2
Option 1:
{title:"Date of Birth", field:"dob", width:150, formatter:function(cell, formatterParams, onRendered){
var value = cell.getValue();
value = moment(value).format("DD/MM/YYYY");
return value;
}},
Option 2:
{title:"Date of Birth", field:"dob", width:150, formatter:"datetime", formatterParams:{
inputFormat:"YYYY-MM-DD HH:ii",
outputFormat:"DD/MM/YY",
invalidPlaceholder:"(invalid date)",
timezone:"America/Los_Angeles",
}
},

Related

Tabulator sorting data by default

I am working on the exercise in the documentation. I would like the date to be sorted (asc) by default when data is first loaded into the table.
In other words : when the user load the table, I would like him/her to see the youngest on top of the table (sorting by Date of Birth).
I have read all the documentation but didn't find the clue. I tried initialSort as well but wasn't able to fix it.
Any help ? Thanks you for your time
initialSort should work. Have you included the moment.js library, as documentation says?
In this example from my code, it works:
const dateFormatter = {
inputFormat:"YYYY-MM-DD HH:mm:ss",
outputFormat:"DD/MM/YYYY HH:mm:ss",
invalidPlaceholder:"(invalid date)",
}
var myTable = new Tabulator("#table", {
columns:[
{title:"Date", field: DATE_KEY, formatter:"datetime", formatterParams: dateFormatter },
{title:"Total cases", field: CASES_KEY},
],
initialSort:[
{column:DATE_KEY, dir:"desc"}, //sort by this first
]
});

Tabulator calculating a total price

I've been going through Tabulator and so far think it's great in functionality and what it can achieve. However, I have been stuck for half a day trying to get some seemingly basic functionality working. It is to allow the user to input numerical values in a quantity field, and then it will calculate a total in a new column based on quantity * price.
I have looked and tried everything I can find online but it still does not work as intended. I feel it's mostly to my understanding of how mutators work. I did get one to work in a different page which statically calculated the values based on a stock value * price.
Here is what I have so far:
var totalEditor = function(cell, onRendered, success, cancel){
//cell - the cell component for the editable cell
//onRendered - function to call when the editor has been rendered
//success - function to call to pass the successfuly updated value to Tabulator
//cancel - function to call to abort the edit and return to a normal cell
var price = cell.getData().price;
var cellValue = cell.getValue(),
input = document.createElement("input");
input.setAttribute("type", "number");
input.value = cellValue;
onRendered(function()
{
input.focus();
input.style.height = "100%";
});
function onChange()
{
if(input.value >= 0)
{
success(cell.getRow().getData().quantity = input.value);
success(cell.getRow().getData().total = input.value * price);//Thought this would work
}
else
{
cancel();
}
}
//submit new value on blur or change
input.addEventListener("blur", onChange);
//submit new value on enter
input.addEventListener("keydown", function(e){
if(e.keyCode == 13){
onChange();
}
if(e.keyCode == 27){
cancel();
}
});
return input;
};
//custom mutator for static total calculation
var totalMutator = function(value, data, type, params, mutatorParams){
var qty = data.quantity;
var price = data.price;
return (Math.abs(qty) * Math.abs(price));
}
var table = new Tabulator("#example-table", {
//data:array2,
layout:"fitColumns",
placeholder:"No Data Set",
reactiveData: true,
columnCalcs:"both",
initialSort:[
{column:"name", dir:"asc"}, //sort by this first
],
columns:[
{title:"SKU", field:"sku", sorter:"string", width:100},
{title:"Name", field:"name", sorter:"string",headerFilter:"input"},
{title:"Price", field:"price", formatter: "money", formatterParams: { decimal: ".", thousand: ",", symbol: "$", precision: false,}, sorter:"number", width:100, align:"center"},
{title:"Quantity", width:100, field:"quantity", align:"center", editor:totalEditor, editorParams:{min:0,max:1000,step:1,}},
{title: "Total", width:100, field:"total", sorter:"number", align: "center", formatter: "money",formatterParams: { decimal: ".", thousand: ",", symbol: "$"}},
],
});
I also note that the input then does not not allow you to increment via the up and down arrows of the input box being number type.
Managed to get it working via updating the cell value through a cell edited function on the quantity cell. I also think that due to the total cell not being part of the data (a new cell created for the table) I needed to access it via getCell("total) rather than getData().total
var table = new Tabulator("#example-table", {
layout:"fitColumns",
placeholder:"No Data Set",
reactiveData: true,
columnCalcs:"both",
dataEdited:function(data){
},
initialSort:[{column:"name", dir:"asc"},],
columns:[
{title:"SKU", field:"sku", sorter:"string", width:100},
{title:"Name", field:"name", sorter:"string",headerFilter:"input"},
{title:"Price", field:"price", formatter: "money", formatterParams: { decimal: ".", thousand: ",", symbol: "$", precision: false,}, sorter:"number", width:100, align:"center"},
{title:"Quantity", width:100, field:"quantity", align:"center", editor: true,
cellEdited: function(cell) {
cell.getRow().getCell("total").setValue(cell.getRow().getData().price * cell.getValue());
}},
{title: "Total", width:100, field:"total", sorter:"number", align: "center", formatter: "money",formatterParams: { decimal: ".", thousand: ",", symbol: "$"}},
],
});

Tabulator - get title of selected value from select editor

I'm using the tabulator's select editor to update my database on value change, once this is updated I need to update my cell value to the title of the selected value and not the value itself. currently it is updating the value and not the title.
is there a function or a method call to get the selected title from the select editor when the value changes?
Thanks
this is built in function in the tabulator ,use the formatter ,make it "lookup" and send it the array of values in "formatterParams" as below
{ title: "Hi", field: "status", editor: select2Editort, editorParams: { values: StatusSelect }, formatter: "lookup", formatterParams: StatusSelect, minWidth: 120},
the extra code is
formatter: "lookup", formatterParams: StatusSelect

Use search field value for JSON parameters

I'm trying to use the value of my search box 'address' as the 'tags' parameter from this code:
var args = {tags: document.getElementById('address').value, tagmode: "any", format: "json"};
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", args,
function flikr(data ) {
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#test");
if ( i == 3 ) return false;
});
});
however, flikr returns photos regardless of tags.
in the console,
args
returns:
Object {tags: "", tagmode: "any", format: "json"}
and,
args = { tags: document.getElementById('address').value, tagmode: "any", format: "json"}
returns:
Object {tags: "london", tagmode: "any", format: "json"}
var search = document.getElementById('#address').value;
The "pound" sign is for selecting id's using jQuery. Remove it to win.
If your question is "why is it not working", it's probably because you've got the JavaScript wrong. Line 3 should be
var search = document.getElementById('address').value;
If you really want to use the pound:
var search = document.querySelector('#address').value;

Autocomplete using values from AJAX

I have a table using tabulator.
Everything works great, but I am trying to get autocomplete working with Ajax
What I am trying is:
var customerNumbers = [];
var table = new Tabulator("#edi-table",
ajaxURL: baseUrl + '/PaginatedEndPoint',
pagination: "remote",
paginationSize: 30,
paginationSizeSelector: [30, 60, 100, 200],
ajaxSorting: true,
ajaxFiltering: true,
selectable: true,
cellEdited: function (cell) {
cell.getElement().style.backgroundColor = "#32CD32";
},
dataLoading: function () {
customerNumbers = ["11", "12", "13"];
},
columns: [
{
title: "CustomerNumber", field: "CustomerNumber", headerFilter: "input", editor: "autocomplete", editorParams: {
searchFunc: function (term, values) {
var matches = [];
values.forEach(function (item) {
if (item.value === term) {
matches.push(item);
}
});
console.log(matches);
return matches;
},
listItemFormatter: function (value, title) {
return "Mr " + title;
},
values: customerNumbers
}
}
]
However, this does not show any predictions value predictions for me, it seems that autocomplete is built before "dataLoading" or any other Callback (I have tried many) is called.
I have tried to make an auxilary array in the style of values like {Title: "Mr + title", value: "title"} and then assign it in the searchFunc, and it didn't work despite being returned in matches.
Is it even possible to dynamically create autofill?
It seems like the current autocomplete functionality does not allow for the editorParams to take a function as an argument to set the dropdown values. You can set it with an object of key/values if you can send that via AJAX, but as far as dynamically setting, altering, or searching the data, it seems like that's impossible to do at the moment.
The other option would be use the editor:"select", which can take a function to set its editorParams. It's not the best solution, but it's the one I had to go with at the moment.
There is an open issue on the Tabulator docs, but so far no response from the developers.
I wish I had a better answer for you!

Resources