feat(docs): add the new QTable props (table-row-style-fn & table-row-class-fn) to one of the styling examples #8311

Author: rstoenescu

docs/src/examples/QTable/CustomColor.vue

@@ -2,9 +2,11 @@
   <div class="q-pa-md">
     <q-table
       color="primary"
-      card-class="bg-amber-5 text-brown"
-      table-class="text-grey-8"
+      card-class="bg-orange text-grey-10"
+      table-class="text-grey-1"
       table-header-class="text-brown"
+      :table-row-class-fn="rowClassFn"
+      :table-row-style-fn="rowStyleFn"
       flat
       bordered
       title="Treats"
@@ -142,7 +144,15 @@ export default {
   setup () {
     return {
       columns,
-      rows
+      rows,
+
+      rowClassFn (row) {
+        return row.calories % 2 === 0 ? 'bg-brown' : 'bg-primary'
+      },
+
+      rowStyleFn (row) {
+        return row.calories % 2 === 0 ? 'color:#ccc' : 'color:#fff'
+      }
     }
   }
 }

docs/src/pages/vue-components/table.md

@@ -157,6 +157,10 @@ Pay attention to the code in the "style" section in the following examples, espe
 
 <DocExample title="Custom column" file="CustomColumn" />
 
+::: tip
+For all the styling component properties, please check the API card at the top of the page.
+:::
+
 <DocExample title="Custom coloring" file="CustomColor" />
 
 <DocExample title="No header/footer" file="NoHeaderFooter" />

ui/src/components/table/QTable.json

@@ -565,7 +565,7 @@
 
     "table-row-style-fn": {
       "type": "Function",
-      "desc": "CSS style to apply to the table rows (which are TR elements)",
+      "desc": "CSS style to apply to the table rows (which are TR elements); For best performance, reference it from your scope and do not define it inline",
       "params": {
         "row": {
           "type": "Object",
@@ -587,7 +587,7 @@
 
     "table-row-class-fn": {
       "type": "Function",
-      "desc": "CSS class(es) to apply the table rows (which are TR elements)",
+      "desc": "CSS class(es) to apply the table rows (which are TR elements); For best performance, reference it from your scope and do not define it inline",
       "params": {
         "row": {
           "type": "Object",
@@ -654,7 +654,7 @@
 
     "card-style-fn": {
       "type": "Function",
-      "desc": "(Grid mode only) CSS style to apply to the row/record card; Has no effect when the 'item' slot is used",
+      "desc": "(Grid mode only) CSS style to apply to the row/record card; Has no effect when the 'item' slot is used; For best performance, reference it from your scope and do not define it inline",
       "params": {
         "row": {
           "type": "Object",
@@ -676,7 +676,7 @@
 
     "card-class-fn": {
       "type": "Function",
-      "desc": "(Grid mode only) CSS class(es) to apply the row/record card; Has no effect when the 'item' slot is used",
+      "desc": "(Grid mode only) CSS class(es) to apply the row/record card; Has no effect when the 'item' slot is used; For best performance, reference it from your scope and do not define it inline",
       "params": {
         "row": {
           "type": "Object",