We Keep Coding

Tabulator: autoColumnsDefinitions using custom cell formatter and dynamically defined fields?

I have an ajax Tabulator in which I'd like to use a custom cell formatter on columns which are dynamically (but similarly) defined.
Let's say I have a dataset of People with "Event" columns, where the ajax response can contain up to 50 Event fields, named Event1,Event2...Event50.
I could manually repeat the definitions using the Column Definition Array or Field Name Lookup Object approaches, like:
autoColumnsDefinitions:{
PersonID: { title:"ID #", align:"right"},
Event1: {formatter: eventFormatter},
Event2: {formatter: eventFormatter},
...[variable # of Event cols here]...
},
...
function eventFormatter(cell){
// format event here
}
However, using a callback seems more appropriate. When I try something like this, my eventFormatter is never invoked, and no errors or warnings are raised.
autoColumnsDefinitions:function(definitions){
definitions.forEach((column) => {
if(column.field.match(/Event/)) {
column = {
formatter:eventFormatter
}
}
Is it possible to apply a custom cell formatter to fields that are not explicitly named prior to data loading?

Your must update 'column' with formatter as
autoColumnsDefinitions: function (definitions) {
return definitions.map((column) => {
if (column.field.match(/(name|title)/)) {
column.formatter = titleFormatter;
}
return column;
});
}
See JSFiddle

AG-Grid agNumberColumnFilter is not working with calculated values in valueFormatter

I have an ag-grid in angular project. I have set the column def as:
this.columnDef.push(
headerName: col,
field: col,
valueFormatter: setMyValue,
filter: 'agNumberColumnFilter',
filterParams: { valueFormatter: setMyValue }
)
function setMyValue (params) {
return params.value.toFixed(2); // OPTION #1 WORKS
//let temp = params.value * 100;
//return temp.toFixed(2); // OPTION #2 DOES NOT WORKS
}
OPTION #1: this logic works in the ag-grid and i am able to correcly filter using equal, great then etc.
OPTION #2: this logic does not work, when i enter any number in filter, it returns empty rows.
What I have tried:
I have tried to bind the function to component:
valueFormatter: setMyValue.bind(this)
and I also tried to force the return value to number as :
return parsInt(temp.toFixed(2));

How do I force re-rendering of a row in ag-grid?

I am using ag-grid in raw javascript (ie- no angular, no jquery). The grid shows streaming data and dynamically updates with new rows as they come in. My goal is to highlight rows that are less than 20s old in a different color.
I can easily apply css classes on a row-by-row basis when they are initially rendered, but I can't figure out how to remove the css classes when they become older than 20 seconds. Here is what I am doing:
class TickerController {
constructor() {
...
this.gridOptions = {
rowClass: 'ticker--row',
rowClassRules: {
'-new-row': params =>
(Date.now() - params.data.accepted_time) < NEW_ROW_THRESHOLD
}
};
let tickerGrid = this._getElementById('ticker-grid');
new agGrid.Grid(tickerGrid, this.gridOptions);
}
...
}
You can see here that I am applying a ticker--row class to all rows and a -new-row class to rows that are new. This does highlight new rows, but I don't know how to re-apply the rowClassRules on a periodic basis.
Can someone explain the proper way to achieve my goal of removing the -new-row class when the row is no longer new?

plunker for demonstration
Here is one way that it could be done:
have a data value in the row to hold the information of whether or not to highlight the row
define the rowClassRules to look at that data value
when a new row is added, create a timeout to trigger in 20 seconds to update this value.
var gridOptions = {
...
rowClassRules: {
'highlight': 'data.lessThan2'
}
...
};
function onInsertRowAt2() {
var newItem = createNewRowData();
var res = gridOptions.api.updateRowData({add: [newItem], addIndex: 2});
printResult(res);
setTimeout(updateItems,2000,res)
}
function updateItems(rows) {
var updatedRows = rows.add.map(row => row.data)
updatedRows.map(e=>e.lessThan2 = false)
gridOptions.api.updateRowData({update: updatedRows})
}

Handsontable: Update column setting, but exclude the first row

We have an operation in our Hands on table app that assigns a format to columns via a drop down as demonstrated here:
http://docs.handsontable.com/0.16.1/demo-custom-renderers.html#page-dropdown
When a new format is picked, we apply the formatting to the column.
columns[i].type = type;
instance.updateSettings({columns: columns});
What I need to do is exclude the first row from this type of column update as it is a static text field which should not be changed. Is there an example of this available?

According to the documentation, the cells option takes precedence over columns. So what you could do is set cells to the following:
cells: function(row, col, prop) {
var cellProperties;
if (row === 0) {
cellProperties = {
type: 'text' // force text type for first row
};
return cellProperties;
}
}
What this will do is set a type to the first row. Now when you update columns, it won't apply to the first row because cells is taking precedence.

Getting a row from a data attribute in datatables.js

I am struggling trying to find the right method to do this. Basically, I have an array of id values that correspond to which rows have been selected in my table. To construct this list, I use the following code. this.options.ajaxId is the key that accesses my Id value in the data object passed to the table.
this.getRowData(target)[this.options.ajaxId]
where my getRowData function is:
getRowData: function (HTMLrow) {
return this.dataTable.row(HTMLrow).data();
},
This works great, but then I am stumped on my next step which is re-selecting the correct rows when the table is re-drawn via paging, sorting, or searching. My plan was to cycle through the ID's and find which table row corresponded to that ID value, but I cannot find a function to input a key value search pair and return the html row. Something like the following is what I was thinking,
this.dataTable.findRow( key, value );
// then my usage would be the following:
var that = this;
_.each(this.selectedList, function (id) {
var row = that.dataTable.findRow( that.options.ajaxId, id );
// code to select the row
});
I haven't written it yet, but I know I can cycle through each of the rows, get the data for that row, and check it against what I am looking for, but in cases where the user is viewing 100 rows and has only one selection I would like to avoid that.
Any insight?
Thanks

SOLUTION #1
You can use the following code to locate and highlight rows based on row IDs if row ID is stored in one of the fields.
// Index of column containing IDs
var colIdIndex = 0;
// List of row IDs
var rowIds = ['2', '4', '6'];
// Find indexes of rows which have IDs in the desired column
var rowIndexes = table.rows().eq(0).filter( function (rowIdx) {
return ($.inArray(table.cell( rowIdx, colIdIndex ).data(), rowIds) !== -1)
? true
: false;
});
// Select rows based on array of found row indexes
table.rows(rowIndexes)
.nodes()
.to$()
.addClass('selected');
See filter() API method for more details.
Please note that this method will work for client-side processing mode only.
DEMO
See this jsFiddle for code and demonstration.
SOLUTION #2
Alternative approach that would work both in client-side and server-side processing modes would be to use createdRow callback.
For example:
// Index of column containing IDs
var colIdIndex = 0;
// List of row IDs
var rowIds = ['2', '4', '6'];
var table = $('#example').DataTable({
createdRow: function( row, data, dataIndex ) {
if ( $.inArray(data[colIdIndex], rowIds) !== -1) {
$(row).addClass('selected');
}
}
});
DEMO
See this jsFiddle for code and demonstration.