How to build a column from nested data in SlimGrid (SlickGrid for Vue)? - slickgrid

Question

I have a data structure like this:
{
year: 1999,
make: "ford",
model: {
name: "escort",
type: {
name: "wagon",
id: 2
}
}
And I want to show all the first-level attributes (year, make) as well as nested attributes (model.name, model.type.name).
In SlimGrid you have column definitions that look like this:
columnOptions: {
'year': {
name: 'Car Year',
order: 0,
formatter (row,cell,value){
return new Date(year);
}
}
}
model.name works fine with these options:
'model': {
name: 'Model Name',
order: 2,
formatter (row,cell,value){
return value.name;
}
}
Because model is a top-level attribute.
But when I try to build a new column, that has no direct top-level equivalent, the column does not appear:
'': {
name: 'Type of Car',
order: 3,
formatter (row,cell,value){
return this.tableData[row].model.type.name;
}
}
What I have:
Car Year | Make | Car Model
---------+-------+----------
1999 | ford | escort
What I want:
Car Year | Make | Car Model | Type of Car
---------+-------+-----------+------------
1999 | ford | escort | wagon
How can I create an extra column in SlimGrid/SlickGrid that has no connection to a top-level attribute?

Answer 1

Don't know about SlimGrid, but I can answer for SlickGrid, at least for the current repo at https://github.com/6pac/SlickGrid.
You're only using the first few parameters of the formatter call. The whole signature is:
formatter(rowIndex, cellIndex, value, columnObject, rowObject, grid)
The columnObject is your columnOptions from above. rowObject is the current row object - the one you are referencing with this.tableData[row].
It's using this.tableData[row] that would not work with SlickGrid (use rowObject instead), but again it depends on the repo you are using. You can see what the formatter call signature is by searching for result = getFormatter(row, m)(row, cell, value in the slick.grid.js file.