QTable - functions for setting row style / classes (table-row-style / table-row-class)

[aleksander237]

Sometimes base on some criterias we want to set the TR style / class. The most common example would be coloring the whole row if a record has property set to certain value - let's say reddish background for erros in log viewer.

The functions could take props as a parameter. For instance:

<q-table :table-row-style-fn="tableRowStyleFn" :table-row-class-fn="tableRowClassFn">
</q-table>

and methods

methods: {
    tableRowStyleFn(props) {
        return props.row.level === 'ERROR' ? ' text-color: white' : '';
    },
    tableRowClassFn(props) {
        return props.row.level === 'ERROR' ? ' bg-red-1' : '';
    }
}

Currently I'm using the body slot, but it could be problematic espacially with dynamic column setup "wide" (multi columns) tables.

[mesqueeb]

Related #7723

[matthiasmoier]

I think having a possibility to do this would be a great addition to the QTable.

Stumbled upon this issue while searching for a way to highlight a full row in a table based on some criteria. In our case, we’d like to highlight a task list based on the due date and / or status.

Since we have quite some custom <template v-slot:body-cell-name="props">, this would help a lot.

[Bosphoramus]

@rstoenescu 👀 this is needed to apply styles conditionally, based on the row data

[orzinc]

To highlight a row, can add function in cell classes props / style props:

const tableRowClassFn = row=> row.level === 'ERROR' ? ' text-red' : ''
const tableRowStyleFn = row=> row.level === 'ERROR' ? ' text-color: red' : ''

// Add in table columns obj:
const columns = [{
      name: 'A', label: 'A', classes: tableRowClassFn 
  },{
      name: 'B', label: 'B', style: tableRowStyleFn 
  }
}

[vojvodics]

@orzinc Thanks for the suggestion! I use this for styling as a fix currently, but it doesn't work if you have a selection column. And a feature for this is already implemented, hoping it'll get merged soon :)

[vvy6791]

It seems that card-class property must do the requied capability. This property has the description in current docs: CSS classes to apply to the card (when in grid mode) or container card (when not in grid mode) And one of examples: card-class="{ 'my-special-class': [Boolean condition] }"

But I don't understand what the [Boolean condition] can be. And how to use it, and can it be row-dependent.

[vvy6791]

@orzinc Your solution is good. But works only when all colums described in body-cell-[name] slots. For those colums, that not described in individual slot, the class specified in classes column property is not applyed to TD element.