How to set class on table rows or cells

[ed2050]

Question

How do you set a different class on each row or cell of a table? All I see in docs is this example of setting class for columns. However it doesn't seem to work for rows.

Including a classes item in each data row does nothing:

columns = [
    {'name': 'name', 'label': 'Name', 'field': 'name'},
    {'name': 'age', 'label': 'Age', 'field': 'age'},
]
rows = [
    {'name': 'Alice', 'age': 18, 'classes' : 'foo'},
    {'name': 'Bob', 'age': 21, 'classes' : 'bar'},
]
ui.table (columns=columns, rows=rows)

# html page has no class foo or bar on any items.  
# Expected to find it on <tr> element.

Other examples use headerClasses in a column_defaults dict. I don't want defaults. I want to assign different classes to each row or cell depending on contents.

[falkoschindler]

I don't think there is an easy way to define dynamic classes on QTable rows. But you can either overwrite the "body" slot to define the look of individual rows from ground up, or you use the "classes" field for column definitions to defined row-dependent column classes:

columns = [
    {'name': 'name', 'label': 'Name', 'field': 'name', ':classes': '(row) => row.classes'},
    {'name': 'age', 'label': 'Age', 'field': 'age', ':classes': '(row) => row.classes'},
]
rows = [
    {'name': 'Alice', 'age': 18, 'classes': 'text-blue'},
    {'name': 'Bob', 'age': 21, 'classes': 'text-red'},
]
ui.table(columns=columns, rows=rows)

[ed2050]

That's great! Simple, concise, elegant. I hope Zauberzeug knows how lucky they are to have you @falkoschindler.

[ed2050]

Here's an improvement for future reference -

Answer provides unique classes per row.
Ideally I want a different class for each cell.
With further development, I also wanted each column to have its own class, to select particular columns as well as rows. These things are doable, if a bit tricky. Sharing my solution here.

First attempt

Setting classes and :classes together on column doesn't work. :classes overrides and classes is lost. It's not obvious this would happen, because align classes are preserved: columns [0] ['align'] = 'left' works fine with :classes. This however does not:

columns = [
    {
        'name': 'name', 'label': 'Name', 'field': 'name', 
        ':classes': '(row) => row.classes', 
        'classes' : 'name'  # does nothing, value lost 
    },
    {
        'name': 'age', 'label': 'Age', 'field': 'age', 
        ':classes': '(row) => row.classes' , 
        'classes' : 'age'   # does nothing, value lost 
    },
]
rows = [
    {'name': 'Alice', 'age': 18, 'classes': 'woman'},
    {'name': 'Bob', 'age': 21, 'classes': 'man'},
]
ui.table(columns=columns, rows=rows)
# classes age and name not in table

Second attempt

You can move column class values into :classes and it all works swimmingly:

columns = [
    {'name': 'name', 'label': 'Name', 'field': 'name', 
        ':classes': '(row) =>  row.classes + " name"' },
    {'name': 'age', 'label': 'Age', 'field': 'age', 
        ':classes': '(row) => row.classes + " age"' },
]
rows = [
    {'name': 'Alice', 'age': 18, 'classes': 'woman'},
    {'name': 'Bob', 'age': 21, 'classes': 'man'},
]
ui.table(columns=columns, rows=rows)

which produces table like this:

<table>
<tr>
<td class=""> Name </td>
<td class=""> Age </td>
</tr>

<tr>
<td class="woman name"> Alice </td>
<td class="woman age"> 18 </td>
</tr>

<tr>
<td class="man name"> Bob </td>
<td class="man age"> 21 </td>
</tr>
</table>

Now I can write css rules for any row-column combination such as:

.woman.name  { color : pink; }
.man.name    { color : blue; }

And scripts can select:

agesmen = table.querySelectorAll ('.man.age')
nameswomen = table.querySelectorAll ('.woman.name')

Obviously selectors like man and woman won't be unique across a large table. If needed, you can add a unique string to each row, like say employee id : {'name': 'Alice', 'age': 18, 'empid' : 'e1234', 'classes': 'woman'} - as separate field, or just merge into classes value. Then addrow.empid to :classes in column defs (if separate field).

Final attempt

Now let's say you need a class only added to certain rows. Say you want age cells greater than 65 to have class "retire" on them.

• you can't set retire on row def (ie row= { 'classes': ... }), because then every cell for that person will have it : name.retire, email.retire, phone.retire, etc
• you can't set retire on column def either, because then everyone will have it regardless of their age

No problem! Just add a row field for each column to your row data. Let's call them extra:

columns = [
    {'name': 'name', 'label': 'Name', 'field': 'name', 
        ':classes': '(row) =>  row.classes + " name " + row.name_extra' },
    {'name': 'age', 'label': 'Age', 'field': 'age', 
        ':classes': '(row) => row.classes + " age " + row.age_extra' },
]
rows = [
    {'name': 'Alice', 'age': 18, 'classes': 'woman'},
    {'name': 'Bob', 'age': 21, 'classes': 'man'},
    {'name': 'Eve', 'age': 66, 'classes': 'man', 'age_extra' = 'retire'},
    {'name': 'Nebuchadnezzar', 'age': 32, 'classes': 'man', 'name_extra' = 'biblical'},
]
ui.table(columns=columns, rows=rows)

Now only Eve will have class "retire" on her age cell. Only Nebuchadnezzar will have class "biblical" on his name cell.

Rows without a defined name_extra will just have null in their classlist: <td class="name woman null"> Alice </td>. That's fine with me. To avoid, just add name_extra = '' to rows without an extra name class.

Hope this helps others.