sorry another typo:

onCallBack (payLoad) {
  let fieldToUpdate = this
  for (let subfield of payload.fieldName.split('.')) {
    fieldToUpdate = this[subfield]
  }
  fieldToUpdate = payLoad.retValue
}

typo in my answer, it’s:
for (let subfield of payload.fieldName.split(’.’))

i think if fieldName is a nested structure, it’s a little bit complicated.

onCallBack (payLoad) {
  let fieldToUpdate = this
  for (let subfield in payload.fieldName.split('.')) {
    fieldToUpdate = this.subfield
  }
  this[fieldToUpdate] = payLoad.retValue
}

You can use the format option of the column definition. (cf http://quasar-framework.org/components/datatable.html#Display-a-nested-property-or-format-a-column)
Another way: use the cell scoped slot (cf http://quasar-framework.org/components/datatable.html#Custom-column-cell)

the class ‘fixed-bottom’ is the solution. See an example: https://jsfiddle.net/0q7jysr1/7/
Read about positioning classes here: http://quasar-framework.org/components/positioning.html

I read in the source code and I think now it’s not possible easily.
in the quasar-framework/src/css/core.variables.styl there’s a variable $headings with the style for each (display-4, display-3, …, caption)
But there’s no stylus variable for the size.

Maybe in the future we can have stylus variables like that : $display-1-size, etc…
@rstoenescu : What do you think about adding these stylus variables ?

this.$emit(‘callBack’, { fieldName: this.fieldName, retValue: this.retValue }) in onShlpPickup ()

and

this[payLoad.fieldName] = payLoad.retValue in onCallBack (payLoad)

Flex with the col responsive classes will do the job.
Add row class to toolbar and add col responsive classes to your components (col-12-xs col-10-sm col-8-md col-6-lg col-4-xl for example)

something like that: https://jsfiddle.net/0q7jysr1/

But I think you really must learn about flex.