feat(QTable) - Add tableRowClass and tableRowStyle props #8311

[vojvodics]

What kind of change does this PR introduce?

• [ ] Bugfix
• [x] Feature
• [ ] Documentation
• [ ] Code style update
• [ ] Refactor
• [ ] Build-related changes
• [ ] Other, please describe:

Does this PR introduce a breaking change?

• [ ] Yes
• [x] No

The PR fulfills these requirements:

• [x] It's submitted to the dev branch (or v[X] branch)
• [x] When resolving a specific issue, it's referenced in the PR's title (e.g. fix: #xxx[,#xxx], where "xxx" is the issue number)
• [ ] It's been tested on a Cordova (iOS, Android) app
• [ ] It's been tested on an Electron app
• [x] Any necessary documentation has been added or updated in the docs or explained in the PR's description.

If adding a new feature, the PR's description includes:

• [x] A convincing reason for adding this feature (to avoid wasting your time, it's best to start a new feature discussion first and wait for approval before working on it)

Other information:

[vojvodics]

@rstoenescu @pdanpdan This is a fix for #8311. Let me know if I should update anything in the code. I assume I should be adding new tests (not sure where) and I should update the docs too

[MilosPaunovic]

You definitely should update documentation, and regarding tests, QTable itself is not covered yet, but if you're willing to and have time to spare it would be great to start with something.

[vojvodics]

@MilosPaunovic Thanks for the fast reply. I added the docs. ~~Do you have any tips on how and where to start adding tests? Any examples of components so far?~~ Nevermind, I figured it out :)

[vojvodics]

Looks like the failing error is due to a timeout, and should have nothing with the feature I added

[vojvodics]

Any updates?

[Daemach]

I could use this too...

[djapal]

i want this feature too

[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 (with some additional hacks for selection columns), but it doesn't work if you have a selection column. Hoping this will get merged soon :)

[Daemach]

FWIW, I think Razvan added this functionality to the main build already. https://quasar.dev/vue-components/table#defining-the-columns

// body td:
style: 'width: 500px',
// or as Function --> style: row => ... (return String/Array/Object)
classes: 'my-special-class',
// or as Function --> classes: row => ... (return String)

On Wed, Oct 5, 2022 at 7:59 AM Stefan Vojvodic @.***> wrote:

@orzinc https://github.com/orzinc Thanks for the suggestion! I use this for styling as a fix currently (with some additional hacks for selection columns), but it doesn't work if you have a selection column. Hoping this will get merged soon :)

— Reply to this email directly, view it on GitHub https://github.com/quasarframework/quasar/pull/13742#issuecomment-1268561145, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC7Y5YKG27UWCEVFDUJBWDLWBWJUXANCNFSM5ZI6W2AA . You are receiving this because you commented.Message ID: @.***>

[vojvodics]

@Daemach That is for styling a specific cell, what I added is for styling the entire row. Sure, you can apply classes for each column (it is redundant). However, as I mentioned in my previous comment, this will not work for the "selection" column.

[cohlar]

+1, hoping this gets merged soon

[vojvodics]

@MilosPaunovic Any updates?

[MilosPaunovic]

@vojvodics Gonna happen in the next week or so.

[IlCallo]

Seems like a good addition! The code looks good at a first glance, but I'll only be able to test it out after next week Wednesday Meanwhile, thanks for contributing and sorry for the delay :)

[vojvodics]

@IlCallo Any updates?

[github-actions[bot]]

Build Results

JSON API

📜 Changes detected:

diff --git a/./current-build/api/QTable.json b/./pr-build/api/QTable.json
index e40051e..2d3a13b 100644
--- a/./current-build/api/QTable.json
+++ b/./pr-build/api/QTable.json
@@ -688,6 +688,84 @@
       ],
       "category": "style"
     },
+    "table-row-style": {
+      "type": [
+        "String",
+        "Array",
+        "Object",
+        "Function"
+      ],
+      "tsType": "QTableRowStyleProp",
+      "desc": "CSS style to apply to native HTML <tr> element",
+      "params": {
+        "row": {
+          "type": "Object",
+          "desc": "The current row being processed",
+          "examples": [
+            "{ name: 'Lorem Ipsum', price: 19 }"
+          ]
+        }
+      },
+      "returns": {
+        "type": [
+          "String",
+          "Array",
+          "Object"
+        ],
+        "tsType": "VueStyleProp",
+        "desc": "CSS style to apply to native HTML <tr> element",
+        "examples": [
+          "'width: 10px'",
+          "{ backgroundColor: '#ff0000' }",
+          "['width: 10px', 'font-size: 2em']"
+        ]
+      },
+      "examples": [
+        "background-color: #ff0000",
+        ":table-row-style=\"{ backgroundColor: '#ff0000' }\"",
+        "row => (row.calories % 2 === 0 ? 'width: 10px' : 'font-size: 2em; font-weight: bold')"
+      ],
+      "category": "style"
+    },
+    "table-row-class": {
+      "type": [
+        "String",
+        "Array",
+        "Object",
+        "Function"
+      ],
+      "tsType": "QTableRowClassProp",
+      "desc": "CSS class to apply to native HTML <tr> element",
+      "params": {
+        "row": {
+          "type": "Object",
+          "desc": "The current row being processed",
+          "examples": [
+            "{ name: 'Lorem Ipsum', price: 19 }"
+          ]
+        }
+      },
+      "returns": {
+        "type": [
+          "String",
+          "Array",
+          "Object"
+        ],
+        "tsType": "VueClassProp",
+        "desc": "CSS classes to apply to native HTML <tr> element",
+        "examples": [
+          "'bg-green'",
+          "{ 'text-white': [Boolean condition] }",
+          "['bg-green', 'text-white']"
+        ]
+      },
+      "examples": [
+        "my-special-class",
+        ":table--row-class=\"{ 'my-special-class': [Boolean condition] }\"",
+        "row => (row.calories % 2 === 0 ? 'bg-green text-white' : 'bg-yellow')"
+      ],
+      "category": "style"
+    },
     "card-container-style": {
       "type": [
         "String",

Types

📜 Changes detected:

diff --git a/./current-build/types/api/qtable.d.ts b/./pr-build/types/api/qtable.d.ts
index aed06e1..4592ab7 100644
--- a/./current-build/types/api/qtable.d.ts
+++ b/./pr-build/types/api/qtable.d.ts
@@ -1,4 +1,6 @@
-import { QTableProps } from "quasar";
+// Error on "quasar" import shown in IDE is normal, as we only have Components/Directives/Plugins types after the build step
+// The import will work correctly at runtime
+import { QTableProps, VueClassProp, VueStyleProp } from "quasar";
 
 export type QTableColumn<
   Row extends Record<string, any> = any,
@@ -8,3 +10,6 @@ export type QTableColumn<
   field: Field;
   format?: (val: any, row: Row) => string;
 };
+
+export type QTableRowStyleProp = VueStyleProp | ((row: any) => VueStyleProp);
+export type QTableRowClassProp = VueClassProp | ((row: any) => VueClassProp);
diff --git a/./current-build/types/index.d.ts b/./pr-build/types/index.d.ts
index 52cbf42..37f71de 100644
--- a/./current-build/types/index.d.ts
+++ b/./pr-build/types/index.d.ts
@@ -10218,6 +10218,18 @@ export interface QTableProps {
    * CSS classes to apply to header of native HTML <table> (which is a TR)
    */
   tableHeaderClass?: VueClassProp | undefined;
+  /**
+   * CSS style to apply to native HTML <tr> element
+   * @param row The current row being processed
+   * @returns CSS style to apply to native HTML <tr> element
+   */
+  tableRowStyle?: QTableRowStyleProp | undefined;
+  /**
+   * CSS class to apply to native HTML <tr> element
+   * @param row The current row being processed
+   * @returns CSS classes to apply to native HTML <tr> element
+   */
+  tableRowClass?: QTableRowClassProp | undefined;
   /**
    * CSS style to apply to the cards container (when in grid mode)
    */
@@ -13723,6 +13735,8 @@ import { SliderMarkerLabels } from "./api";
 import { SliderMarkerLabelConfig } from "./api";
 import { SliderMarkerLabelArrayConfig } from "./api";
 import { SliderMarkerLabelObjectConfig } from "./api";
+import { QTableRowStyleProp } from "./api";
+import { QTableRowClassProp } from "./api";
 import { QTreeNode } from "./api";
 import { QUploaderFactoryFn } from "./api";
 import { QVueGlobals, QSingletonGlobals } from "./globals";

[github-actions[bot]]

Build Results

JSON API

📜 Changes detected:

diff --git a/./current-build/api/QTable.json b/./pr-build/api/QTable.json
index e40051e..2d3a13b 100644
--- a/./current-build/api/QTable.json
+++ b/./pr-build/api/QTable.json
@@ -688,6 +688,84 @@
       ],
       "category": "style"
     },
+    "table-row-style": {
+      "type": [
+        "String",
+        "Array",
+        "Object",
+        "Function"
+      ],
+      "tsType": "QTableRowStyleProp",
+      "desc": "CSS style to apply to native HTML <tr> element",
+      "params": {
+        "row": {
+          "type": "Object",
+          "desc": "The current row being processed",
+          "examples": [
+            "{ name: 'Lorem Ipsum', price: 19 }"
+          ]
+        }
+      },
+      "returns": {
+        "type": [
+          "String",
+          "Array",
+          "Object"
+        ],
+        "tsType": "VueStyleProp",
+        "desc": "CSS style to apply to native HTML <tr> element",
+        "examples": [
+          "'width: 10px'",
+          "{ backgroundColor: '#ff0000' }",
+          "['width: 10px', 'font-size: 2em']"
+        ]
+      },
+      "examples": [
+        "background-color: #ff0000",
+        ":table-row-style=\"{ backgroundColor: '#ff0000' }\"",
+        "row => (row.calories % 2 === 0 ? 'width: 10px' : 'font-size: 2em; font-weight: bold')"
+      ],
+      "category": "style"
+    },
+    "table-row-class": {
+      "type": [
+        "String",
+        "Array",
+        "Object",
+        "Function"
+      ],
+      "tsType": "QTableRowClassProp",
+      "desc": "CSS class to apply to native HTML <tr> element",
+      "params": {
+        "row": {
+          "type": "Object",
+          "desc": "The current row being processed",
+          "examples": [
+            "{ name: 'Lorem Ipsum', price: 19 }"
+          ]
+        }
+      },
+      "returns": {
+        "type": [
+          "String",
+          "Array",
+          "Object"
+        ],
+        "tsType": "VueClassProp",
+        "desc": "CSS classes to apply to native HTML <tr> element",
+        "examples": [
+          "'bg-green'",
+          "{ 'text-white': [Boolean condition] }",
+          "['bg-green', 'text-white']"
+        ]
+      },
+      "examples": [
+        "my-special-class",
+        ":table--row-class=\"{ 'my-special-class': [Boolean condition] }\"",
+        "row => (row.calories % 2 === 0 ? 'bg-green text-white' : 'bg-yellow')"
+      ],
+      "category": "style"
+    },
     "card-container-style": {
       "type": [
         "String",

Types

📜 Changes detected:

diff --git a/./current-build/types/api/qtable.d.ts b/./pr-build/types/api/qtable.d.ts
index aed06e1..6112f33 100644
--- a/./current-build/types/api/qtable.d.ts
+++ b/./pr-build/types/api/qtable.d.ts
@@ -1,4 +1,4 @@
-import { QTableProps } from "quasar";
+import { QTableProps, VueClassProp, VueStyleProp } from "quasar";
 
 export type QTableColumn<
   Row extends Record<string, any> = any,
@@ -8,3 +8,6 @@ export type QTableColumn<
   field: Field;
   format?: (val: any, row: Row) => string;
 };
+
+export type QTableRowStyleProp = VueStyleProp | ((row: any) => VueStyleProp);
+export type QTableRowClassProp = VueClassProp | ((row: any) => VueClassProp);
diff --git a/./current-build/types/index.d.ts b/./pr-build/types/index.d.ts
index 52cbf42..37f71de 100644
--- a/./current-build/types/index.d.ts
+++ b/./pr-build/types/index.d.ts
@@ -10218,6 +10218,18 @@ export interface QTableProps {
    * CSS classes to apply to header of native HTML <table> (which is a TR)
    */
   tableHeaderClass?: VueClassProp | undefined;
+  /**
+   * CSS style to apply to native HTML <tr> element
+   * @param row The current row being processed
+   * @returns CSS style to apply to native HTML <tr> element
+   */
+  tableRowStyle?: QTableRowStyleProp | undefined;
+  /**
+   * CSS class to apply to native HTML <tr> element
+   * @param row The current row being processed
+   * @returns CSS classes to apply to native HTML <tr> element
+   */
+  tableRowClass?: QTableRowClassProp | undefined;
   /**
    * CSS style to apply to the cards container (when in grid mode)
    */
@@ -13723,6 +13735,8 @@ import { SliderMarkerLabels } from "./api";
 import { SliderMarkerLabelConfig } from "./api";
 import { SliderMarkerLabelArrayConfig } from "./api";
 import { SliderMarkerLabelObjectConfig } from "./api";
+import { QTableRowStyleProp } from "./api";
+import { QTableRowClassProp } from "./api";
 import { QTreeNode } from "./api";
 import { QUploaderFactoryFn } from "./api";
 import { QVueGlobals, QSingletonGlobals } from "./globals";

[nontelodiromai]

Hi, this would be extremely useful, is there any news? Thanks!