react-table 7 custom cell says data undefined - react-table-v7

In version 6 this used to work, some of the rows doesn't have price, but original should be pointing to the row.
{
accessor : 'price',
Header: () => <b>Price</b>,
style: { 'whiteSpace': 'unset' },
Cell: ({original}) => original.price && <div className="full-center">{original.price}</div>,
},
But after upgraded to version 7, now I am getting LineMatchingPage.js:121 Uncaught TypeError: Cannot read property 'price' of undefined

It seems there is a subtle change in version 7, that accessor returns the value gets fed into Cell, so in this case, in version 7, original does not represent the row anymore, but the value of the accessor which is the value of the price
{
accessor : 'price',
Header: () => <b>Price</b>,
style: { 'whiteSpace': 'unset' },
Cell: ({price}) => price && <div className="full-center">{price}</div>,
},

Related

How to save values in column type range in postgres using Sequelize?

I have a model where I have a column name data_numbers and its type is DataTypes.RANGE(sequelize.INTEGER)
I am using the following line of code to create a new row in table
models.TABLE.create({
data_numbers: ?? //here is what I should write to save a range of numbers.
})
Here you go. While saving data in column type range you have to assign an array of Range type, like following
const TABLE = sequelize.define(
"table",
{
data_numbers: DataTypes.RANGE(sequelize.INTEGER),
},
{
underscored: true,
paranoid: true,
defaultScope: {
attributes: [
"id",
"data_numbers",
],
},
}
);
and while creating new object I added value like following
models.TABLE.create({
data_numbers: [1, 199]
})

Change 'String?' from DropdownFormField to 'String'

In my code, I have this DropdownFormField so the user can select their gender:
DropdownButtonFormField<String>(
decoration: InputDecoration(labelText: 'Select gender'),
validator: (val) => val!.isEmpty ? 'Fill the field' : null,
isExpanded: true,
value: _selectedValue,
items: items.map(buildMenuItem).toList(),
onChanged: (val) {
setState(() {
gender = val;
});
},
)
in onChanged: (val), val is expected to be a String?, but gender is a String. is a use val as String as gender = val as String, apparently it works. But, if I press the save button without selecting an option, I get an error:
Null check operator used on a null value
As if the item isn"t going through validator
The ! operator after a nullable value tells flutter to assume the value is not null and to throw an error if it is.
(val) => val!.isEmpty ? 'Fill the field' : null,
so when you call this with an empty option, it throws an error because val is null at this point in time. To fix this, simply change the validator to something like this:
(val) => (val==null || val.isEmpty) ? 'Fill the field' : null,
Also, something else is that there is no need to say val as String if your type is String?, that is literally the reason why ! exists, for situations in which you already know a nullable value is not null:
gender = val!;

Unable to fetch the specific element value using jsonpath node js library

I'm trying to fetch the value of element based on it's value in the complex JSON file.
Trying to fetch the value attribute (Which is 100) if the currency ='BRL' and the index will be subject to change so I just want to try with condition based.
I just tried below so far:
Script:
function test()
{
var result = jsonpath.query(payload,"$..client_balance[?(#.type == 'AVAILABLE')]");
console.log(result);
}
test();
Output:
[
{
amount: { currency: 'BRL', value: '100', skip: false },
type: 'AVAILABLE'
},
{
amount: { currency: 'USD', value: '10', skip: false },
type: 'AVAILABLE'
}
]
Now, I just wanna fetch the value attribute (Which is 100) if the currency code = 'BRL'. I tried to apply the [?(#.currency == 'BRL')]
in the tail of the path variable but it returned empty array.
can someone help me to solve this problem.
Updated:
Tried filter function to get the specific element value.
console.log(Object.values(payload).filter(element =>{
element.currency === 'BRL';
}));
Output:
[]
console.log(Object.values(payload).filter(element =>{
return element.amount.currency === 'BRL';
}));
I think this should work
This is a bit of a complex query, but it should get you what you're looking for.
Start with what you have, which returns the result set you posted:
$..client_balance[?(#.type == 'AVAILABLE')]
Add to this another filter which looks inside the amount field at the currency field for the comparison:
$..client_balance[?(#.type == 'AVAILABLE')][?(#.amount.currency === 'BRL')]
This should give just the one element:
[
{
amount: { currency: 'BRL', value: '100', skip: false },
type: 'AVAILABLE'
}
]
From here you want to get the value field, but to get there, you need the path to it, meaning you have to go through the amount and currency fields first.
$..client_balance[?(#.type == 'AVAILABLE')][?(#.amount.currency === 'BRL')].amount.currency.value
This should return
[
100
]
Please note that we are working on a specification for JSON Path. If this library chooses to adhere to it once published, the === will need to change to a == as this is what we've decided to support.

Source object access from ColumnSet

I try to split a sub-object in my recordset when importing data with initCB properties of a Column in ColumnSet.
But when I use two different init functions for two different destination names but one source I get same result.
const cs = new pgp.helpers.ColumnSet([
'id',
{ name: 'source_id', prop: 'source', init: function(obj) { return obj.value.id; } },
{ name: 'source_name', prop: 'source', init: function(obj) { return obj.value.name; } },
], { table: 'test_table' });
const data = [
{ id: 1, source: { id: 1, name: 'source1' } },
{ id: 2, source: { id: 1, name: 'source1' } },
{ id: 3, source: { id: 2, name: 'source2' } },
];
const insert = pgp.helpers.insert(data, cs);
The result is:
INSERT INTO "test_table"("id","source_id","source_name") VALUES
(1,'source1','source1'),
(2,'source1','source1'),
(3,'source2','source2')
instead of expected:
INSERT INTO "test_table"("id","source_id","source_name") VALUES
(1,1,'source1'),
(2,1,'source1'),
(3,2,'source2')
It seems like second invocation of callback function for THE SAME source field overriding result of previous invocation of ANOTHER callback function on THIS source field.
How I can avoid this?
Or there is another way of splitting a sub-object during import?
Option prop doesn't quite work that way. It is there to remap the value to a different property name, but it does not supply the direct object reference.
Instead, use property source of the column descriptor, to reference the source object. Ironically, you called the property in your data source as well, which means you will have to use source twice in your reference:
const cs = new pgp.helpers.ColumnSet([
'id',
{name: 'source_id', init: c => c.source.source.id},
{name: 'source_name', init: c => c.source.source.name}
], {table: 'test_table'});
The first source is what pg-promise API supports, while the second is your data column name :)
Also, as per documentation, the API sets source and this to the same, so if you prefer the ES5 function syntax (looks cleaner for your example), then you can do this instead:
const cs = new pgp.helpers.ColumnSet([
'id',
{ name: 'source_id', init: function() {return this.source.id;}},
{ name: 'source_name', init: function() {return this.source.name;}},
], { table: 'test_table' });
Above we have this point at the source data object.

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