Develop Reference

Tabulator: how to modify local array when deleting rows?

I'm trying to build an interactive table that could be modified by the user. In my case, the original dataset is a local array of objects.
Tabulator has the buttonCross option to delete rows, but it only affects the table visuals. How can I make it find the matching object the row presents and delete it from the tabledata array?
Here's the code I'm working with:
let tabledata = [{
animal: "hippo",
color: "grey"
},
{
animal: "puma",
color: "black"
},
{
animal: "flamingo",
color: "pink"
}
];
let table = new Tabulator("#example-table", {
data: tabledata,
layout: "fitDataFill",
addRowPos: "bottom",
reactiveData: true,
headerSort: false,
columns: [ //define the table columns
{
title: "animal",
field: "animal",
editor: "input"
},
{
title: "color",
field: "color",
editor: "input"
},
{
formatter: "buttonCross",
width: 40,
align: "center",
cellClick: function (e, cell) {
cell.getRow().delete();
}
},
],
});
Codepen here.
Would really appreciate some tips on how to make this work!

Working example for tabulator
the filter function is used to remove the current item for the collection
filter Filter API.
First filter the object you don't need and then assign it to tabledata.
cellClick: function (e, cell) {
debugger;
var animalToDelete={ animal:cell.getRow().getData().animal,
color:cell.getRow().getData().color
};
var filtered=tabledata.filter(function(x){
debugger;
return x.animal!=animalToDelete.animal
&& x.color!=animalToDelete.color;
});
tabledata=filtered;
cell.getRow().delete();
}

You could also look to use tabulator in Reactive Data Mode
In this mode it will update the table in real time to match the provided data array as it is changed, and vice versa it will update the array to match the table.
To do this set the reactiveData property to true in the tables constructor object.
//create table and assign data
var table = new Tabulator("#example-table", {
reactiveData:true, //enable reactive data
data:tableData, //assign data array
columns:[
{title:"Name", field:"name"},
{title:"Age", field:"age", align:"left", formatter:"progress"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
]
});
It will then maintain a link with the initial data source

Highcharts, build a "Text" graph

I'm using highcharts to build my charts that shows the values that comes from a sensor placed into my garage: all of these values are numeric values, so, i have no problem to build a graph like the following one JSFIDDLE
As i've said, all of the values that comes from the sensor are numeric, except one: the "status", this value is a string value type and it's not a fixed string, it can be:
Transmitting
Standby
Active
Alarm
Or any free string
So, my intention is - and i don't know if that can be feasible - to draw a graph with a fixed serie value (e.g.: 1...maybe i have to use a javascript function that maps the "status" to a given value?) and show that string as fixed datalabels as shown in the fiddle that i've posted.
Final Remarks:
The data that comes from the sensor is a time-series value, like the following:
{"datetime": 1566730095, "status": "transmitting"}
{"datetime": 1566730162, "status": "hello! i'm here"}
This chart will be a separate chart instead the numeric charts, in order to simplify the build and management.
The final goal can be something like that (the following graph is a pure graphical example):

To achieve it you can map data like that:
series: [{
dataLabels: {
enabled: true,
format: '{point.name}',
rotation: -45,
align: 'left',
y: -8
},
data: data.map(item => {
return {
x: item.datetime,
y: 1,
name: item.status
};
})
}]
Demo:
https://jsfiddle.net/BlackLabel/840tv6mz/
To change the way data is exported to CSV you can use this wrapper (edit it as needed):
(function(H) {
H.wrap(H.Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
var rows = proceed.call(this, multiLevelHeaders);
rows[0][0] = 'Time';
rows[0][1] = 'Status';
rows = rows.map(row => {
if (row.x) {
row[0] = H.dateFormat('%H:%M:%S.%L', row.x);
row[1] = row.name;
}
return row;
});
return rows;
});
}(Highcharts));
Demo:
https://jsfiddle.net/BlackLabel/to92mbu0/

Highcharts data module and HTML table change distribution column

I am using Highcharts (http://www.highcharts.com/) with its data module (http://code.highcharts.com/modules/data.js) to create a data visualization and chart using HTML table.
My table consists of mixed columns with string - for distribution and numbers for values. The table is something as follows
Now, with the given HTML table, I want the user to be able to select the distribution column based on which the series in the charts are plotted. In the sense when the Product column is selected, the graph would appear something like
And if the Category column is selected it would be something like
Essentially in this example, the labels in the X-Axis are changed. Although, there are cases when the graph itself would change when the distribution changed.
Progress So Far: -
I have managed to find out that there is a start column and end column which can be defined based on which the distribution column and the values can be identified. Although, this does not traverse the whole table to get the exact results.
I used the following code (Available on http://jsfiddle.net/3Ezjj/) for making the distribution column as Category and the next column as the value: -
$(function () {
$('#container').highcharts({
data: {
table: document.getElementById('datatable'),
startColumn: 0,
endColumn: 1
},
chart: {
type: 'column'
},
title: {
text: 'Data extracted from a HTML table in the page'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Units'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.point.y +' '+ this.point.name.toLowerCase();
}
}
});
});
I would really appreciate any help.
Thanks in advance!

Does ng-grid supports cell filter (angular filter) by row

ng-gird colDefs (column Definition) allows you to define a filter (angular filter) for each column.
In my use case, I need to use filter per row. This means, data in some rows will have number format and other might have percentage.
Does ng-grid supports filter per row? Please note, this is not filtering rows, this is applying same display format to the cells of a row.

This is now (as of 2014) possible natively with the current ngGrid:
columnDefs: [
{
field: 'name',
cellFilter: 'lowercase'
}
]
Or even with the filter arguments:
columnDefs: [
{
field: 'name',
cellFilter: 'currency:"GPB"'
}
]

You can do this by using a cellTemplate and a filter.
The gridOptions with custom cellTemplate:
var statusTpl = '<div style="padding-top: 10px;padding-left: 5px" ng-bind="row.getProperty(col.field) | percentage:200"></div>';
$scope.gridOptions = {
data: 'myData',
columnDefs: [{
field: 'name'
}, {
field: 'status',
cellTemplate: statusTpl
}]
};
And a very simple Filter (which, in this example, calculates floored percentage from 100%=200):
app.filter('percentage', function() {
return function(input, max) {
if (isNaN(input)) {
return input;
}
return Math.floor((input * 100) / max) + '%';
};
});
You can set the 100% value in the second parameter of the filter in the custom cellTemplate.
If you need a more precise with adjustable decimals just look around you will surely find some.
Doh! Nearly forgot the Plunker to this

DataTables add object data that is not a column to row?

I can't figure this one out, their API is very confusing.
I have a table that displays tabular data of geometric features, so I want to have the coordinates saved in the row data.
And I need a way to retrieve this coordinates, for example, when a user clicks on the row.
Example of what I'm trying to achieve :
const dt = $('table').DataTable({
columns : [
{data : "NAME"},
{data : "COLOR"}
]
})
dt.row.add({
COLOR : "Red",
NAME : "Point1",
//Invalid parameter error
geometry : {
type : "point",
coordinates : [1,1]
}
})
I think it wouldn't be ideal storing in a hidden column, because the coordinates can get quite large for polygon types.
I'm very new to DataTables and am very confused with the API, any suggestion on how to better organize/execute my concept is more than welcome.

Seems like what you have should work. I put together a little example for you:
http://live.datatables.net/rikofefu/1/edit
It adds a row with the extra geometry object. Select the row then click the Show selected data button. The console will display the full row and just the geometry object.
I'm using the Select extension to get the selected row.

HTML
<table>
<thead>
<tr>NAME</tr>
<tr>COLOR</tr>
<tr></tr>
</thead>
</table>
JS
const dt = $('table').DataTable({
columns: [
{data: null},
{data: null},
{data: null}
],
// This makes the row clickable, where you can get data later
"createdRow": function (row, data, dataIndex) {
var tds = $(row).find("td");
$.each(tds, function (key, value) {
$(value).attr("onclick", "see_the_data(this)");
}
},
// this hides the coordinate column from view
"columnDefs": [
{
"targets": 2,
"visible": false
}
]
});
dt.row.add({
COLOR: "Red",
NAME: "Point1",
//Invalid parameter error
geometry: {
type: "point",
coordinates: [1, 1]
}
});
function see_the_data(e) {
console.log("the data is ", e); // you can then go further as you need
}