How to dynamically set text and background color for q-card-section in a masonry-like table

[happybeginning1]

Question

I have a piece of code that works well overall:

with ui.element('div').classes('w-full text-sm'):
    with ui.row().classes('w-full'):
        
        columns = [
            {'name': 'category', 'label': 'Category', 'field': 'category'},
            {'name': 'content', 'label': 'Content', 'field': 'content'},
        ]
        rows = [
            {'category': 'Summary', 'content': 'fdskjfdskfdfdsffdsf', 'value': '22'},
            {'category': 'Ele01', 'content': 'fdskjfdskfdfdsffdsf', 'value': '22'},
            {'category': 'Ele02', 'content': 'fdskjfdskfdfdsffdsf', 'value': '22'},
            {'category': 'Ele03', 'content': 'fdskjfdskfdfdsffdsf', 'value': '22'},
            {'category': 'Ele04', 'content': 'fdskjfdskfdfdsffdsf', 'value': '22'},
            {'category': 'Ele05', 'content': 'fdskjfdskfdfdsffdsf', 'value': '22'}
        ]
        table = ui.table(columns=columns, rows=rows, row_key='category').props('grid')
        table.add_slot('item', r'''
        <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition">
            <q-card flat bordered :props="props">
                <q-card-section class="text-center bg-gray-700">
                    <strong>{{ props.row.category }}</strong>
                </q-card-section>
                <q-separator />
                <q-list>
                    <q-item>
                      <q-item-section>
                        <q-item-label>{{ props.row.content }}</q-item-label>
                      </q-item-section>
                      <q-item-section side>
                        <q-item-label caption>{{ props.row.value }}</q-item-label>
                      </q-item-section>
                    </q-item>
            </q-card>
        </div>
        ''')

But I am currently struggling with two issues.

1. How can I dynamically set the background and text color of the q-card-section based on the value of category? For example, if the category is in ['Summary', 'Ele01'], use the text color text-red-500 and background color bg-gray-700. If it is in ['Ele02', 'Ele05'], use text-red-800 and bg-pink-500. Otherwise, use text-pink-300 and bg-blue-300.
2. Additionally, if the same category has multiple sets of data for content and value, something like:

{'category': 'Summary', 'content': 'fdskjfdskfdfdsffdsf', 'value': '22'},
{'category': 'Summary', 'content': 'aaa', 'value': '23'},
{'category': 'Summary', 'content': 'bbb', 'value': '22'},
{'category': 'Ele01', 'content': 'fdskjfdskfdfdsffdsf', 'value': '22'},
{'category': 'Ele02', 'content': 'fdskjfdskfdfdsffdsf', 'value': '22'},
{'category': 'Ele03', 'content': 'fdskjfdskfdfdsffdsf', 'value': '22'},
{'category': 'Ele04', 'content': 'fdskjfdskfdfdsffdsf', 'value': '22'},
{'category': 'Ele05', 'content': 'fdskjfdskfdfdsffdsf', 'value': '22'}

How can I display the rows belonging to the same category (like Summary) in a single table card (with each row of data on a separate line, corresponding to a set of <q-item>xxx</q-item>)?

Thank you for your help!

[falkoschindler]

Hi @happybeginning1,

1. For dynamic colors you can write a JavaScript expression like this:

   <q-card-section class="text-center" :class="['Summary', 'Ele01'].includes(props.row.category) ? 'text-red-500 bg-gray-700' : ['Ele02', 'Ele05'].includes(props.row.category) ? 'text-red-800 bg-pink-500' : 'text-pink-300 bg-blue-300'">
       <strong>{{ props.row.category }}</strong>
   </q-card-section>

   But it would certainly easier to simply add colors to the row dictionaries and refer to them directly:

   <q-card-section class="text-center" :class="props.row.bg_color">
       <strong>{{ props.row.category }}</strong>
   </q-card-section>

2. This doesn't sound like a use case for ui.table. You may be better off building the UI with elements like ui.grid and ui.card.

[happybeginning1]

Thank you, @falkoschindler. Following your suggestion, I have decided to use ui.card to achieve this functionality. Thanks again!