I'm suing ag-grid-vue
to work with a dataset and would like to get the rows to be grouped by a certain value of field status
that I provide using an array with the order I want. So, following the docs, inside the created()
hook I'm using:
created() {
this.postSortRows = (params) => {
var rowNodes = params.nodes;
const order = ['Atrasado', 'Pendente', 'Pronto', 'Entregue'];
rowNodes = _.sortBy(rowNodes, function(obj) {
return _.indexOf(order, obj.data.status);
});
//prints an empty array AND the the desired sorted array.
console.log(rowNodes);
}
But the problem with this is that the _.sortBy
function is behaving asynchronously and if I try to console.log the value of rowNodes
after the assignment, it prints two times:
But the rows keep unsorted.
From the docs, this piece of code works:
let nextInsertPos = 0;
for (let i = 0; i < rowNodes.length; i++) {
const status = rowNodes[i].data.status;
if (status === 'Atrasado') {
rowNodes.splice(nextInsertPos, 0, rowNodes.splice(i, 1)[0]);
nextInsertPos++;
}
}
I checked the lodash docs and it doesn't say that the return value of the _.sortBy
function is asynchronous, but it also does not say the opposite. I already tried to wrap the contents of the created hook inside another function and using a second argument as callback function, but it doesn't work either. Is there anything special to get this working? Any help appreciated.
Found out that the problems was in the assignment I was making to the ag-grid variable holding rowNodes. Solved by, instead of directly assigning the value of sortBy, using Object.assign
:
const sorted = _.sortBy(rowNodes, function(obj) {
const val = _.indexOf(order, obj.data.status);
return _.indexOf(order, obj.data.status);
});
Object.assign(rowNodes, sorted);