v1-qtable colorized data - How?

[kp]

What would be the best approach to colorize specific table data. The table itself and its structure is generated.
E.g. I do have some table data, containing only color information; also for positive negative numbers this would be great.
Valid solutions would be to colorize the td background - but than again, the information is only in the data and varies from field to field.
I also can imagine to put some kind of badge into it, but as far as I know, the information in the table can’t be components. This also makes absolute sense!
So which options are left?

I don’t want to colorize the structure itself, even if this would be great. But I don’t wand to color every second column, row or alike. I really need this specific for the field.

[kp]

As not that appreciated workaround I tried without success:
<q-td slot=“body-cell-color1” slot-scope=“props” :props=“props” :color=“props.value”>

also

<q-badge color=“props.value”>{{ props.value }}</q-badge>

did not led to the desired result. What colorinformation is needed, if not something like #46ff3c?

[metalsadman]

@kp you can add a style to your QTd or wrap the row/col value in a div with your styling. btw, that’s not how v1 QTable are defined anymore you have to make use of the body slot and define your QTr’s and QTd’s inside it. like so.

...
<template v-slot:body="props">
  <q-tr :props="props">
    <q-td :style="`color:${props.row.myDataContainingOnlyColorInformation};`" :key="props.row.name" :props="props">
      {{props.row.yourDisplayData}}
    </q-td>
    ...
  </q-tr>
</template>
...

Codepen example: https://codepen.io/metalsadman/pen/pBmzJw. updated with q-badge usage, if you use floating you need to wrap your display data in a div with a class relative-position so that the badge will be placed correctly above your displayed data.

I suggest you read thru their QTable API https://v1.quasar-framework.org/vue-components/table#QTable-API and also look into their examples.

[kp]

Thanks for your example! Helped me a lot, also the codepen was very helpful.