ui.table how to set the cell color

[akai-1024]

Question

Hi, there.

I want set the ui.table cell color with some condiitons.
I have asked ChatGPT, it give me the Quasar code. I know how to add slot, but how should i write this function "getCellClass(props)" and "<style scoped>".

Can you give me some help? I am looking forward to it.

<template>
  <div>
    <q-table
      :rows="data"
      :columns="columns"
    >
      <template v-slot:body-cell(index)="props">
        <q-td :props="props" :class="getCellClass(props)">
          {{ props.value }}
        </q-td>
      </template>
    </q-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { index: 1, value: 10 },
        { index: 2, value: 5 },
        { index: 3, value: 8 },
      ],
      columns: [
        { name: 'Index', field: 'index' },
        { name: 'Value', field: 'value' },
      ],
    };
  },
  methods: {
    getCellClass(props) {
      // 根据单元格的值设置不同的颜色样式
      if (props.value > 8) {
        return 'bg-green';
      } else if (props.value < 5) {
        return 'bg-red';
      } else {
        return 'bg-yellow';
      }
    },
  },
};
</script>

<style scoped>
.bg-green {
  background-color: green;
}

.bg-red {
  background-color: red;
}

.bg-yellow {
  background-color: yellow;
}
</style>

[falkoschindler]

Hi @akai-1024!

Too keep it simple, you can add the JavaScript function directly to the :class attribute:

columns = [
    {'name': 'name', 'label': 'Name', 'field': 'name'},
    {'name': 'age', 'label': 'Age', 'field': 'age'},
]
rows = [
    {'id': 0, 'name': 'Alice', 'age': 18},
    {'id': 1, 'name': 'Bob', 'age': 21},
    {'id': 2, 'name': 'Carol', 'age': 17},
]
table = ui.table(columns=columns, rows=rows, row_key='name')
table.add_slot('body-cell-age', r'''
    <q-td :props="props" :class="props.value < 18 ? 'bg-red' : 'bg-green'">
        {{ props.value }}
    </q-td>
''')

[akai-1024]

That's cool.

If there are multiple conditions, can write them like this:

(props.value < -0.05) ? 'bg-red-3' : (props.value < -0.01) ? 'bg-red-6' : (props.value < 0.01) ? 'bg-gray' : (props.value < 0.05) ? 'bg-lime' : 'bg-green'

And the color can be set on this page: https://quasar.dev/style/color-palette/

[zan73]

@falkoschindler I have a table with an on "rowClick" event but would also like to have a row-level background colour (or perhaps even a different style for the text in the cells). This code for row-level colour prevents the rowClick from working. Can you assist?

tblGuide.add_slot('body', r'''
    <q-tr :props="props">
        <q-td v-for="col in props.cols" :key="col.name" :props="props" :class="props.row.Filtered == True ? 'bg-red' : 'bg-green'">
            <div v-if="col.name === 'title'">
                <img :src="props.row.image_url">
                <q-tooltip>{{ props.row.tooltip }}</q-tooltip>
                {{ col.value }}
            </div>
            <div v-else>
                {{ col.value }}
            </div>
        </q-td>
    </q-tr>        
''')

[falkoschindler]

@zan73 This seems to be a limitation of Quasar's QTable component:

@row-click: Emitted when user clicks/taps on a row; Is not emitted when using body/row/item scoped slots

You can try using named cell slots instead like "body-cell-age" in the example above.

[Carsten-D]

Hey @falkoschindler ,
I would like to follow up on the formatting questions. I would like to color the cells based on a value that comes from - let's say - a class instance. I have a data object that is used to provide data for each row in my table. I would like to color a cell based on a variable value of that class. Hope you get my point.

In other words: Is there a way I can use a variable instead of the hard coded value 18 ( in props.value < 18 )

Thanks in advance :-)

[falkoschindler]

@Carsten-D You can use f-strings to insert a value from a variable:

age_limit = 18
table = ui.table(columns=columns, rows=rows, row_key='name')
table.add_slot('body-cell-age', rf'''
    <q-td :props="props" :class="props.value < {age_limit} ? 'bg-red' : 'bg-green'">
        {{{{ props.value }}}}
    </q-td>
''')

Does this answer your question?