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

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:10
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
Bosphoramuscommented, May 12, 2022

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

1reaction
vojvodicscommented, Oct 5, 2022

@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 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Table | Quasar Framework
QTable is a component that allows you to display data in a tabular manner. It's generally called a datatable. It packs the following...
Read more >
Quasar table change style of whole row based on value in one ...
For this I used template styling, however it only allows me to change the style of one cell. <q-table :data="rows" row-key="name" > ...
Read more >
mlreportgen.dom.TableRow class - MathWorks
TableRow class to create a table row. ... For information on class attributes, see Class Attributes. ... Style — Formats that define table...
Read more >
Tables - Bootstrap
All table styles are inherited in Bootstrap 4, meaning any nested tables ... Similar to tables and dark tables, use the modifier classes...
Read more >
Quasar's QTable: The ULTIMATE Component (5/6) - Styling ...
separator and wrap-cells. By default, every QTable row is divided with a horizontal line. Of course, we can change this to either a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found