feat(b-table, b-table-lite): new `tbody-tr-attr` prop for arbitrary r…

…ow attributes (closes #1864) (#4481) * feat(b-table): add custom row attributes Adds a trAttr attribute to b-table, which can either be an object or a function An object is added straight to the attributes of each row A function gets passed each item and is expected to return an object * Change attribute order so ARIA attributes don't get overwritten * Add implementation version to package declaration * Add implementation version to package declaration Missed second one... * Update mixin-tbody-row.js * Update mixin-busy.js * Update mixin-bottom-row.js * Update mixin-empty.js * Update mixin-top-row.js * Update package.json * Update index.d.ts * Update README.md * lint * Update index.d.ts * Update mixin-tbody-row.js
bootstrap-vue · Dec 10, 2019 · 4acf6ed863dd5edd85897a01b099c42322097d1b · 4acf6ed
1 parent 4abe675
commit 4acf6ed863dd5edd85897a01b099c42322097d1b
diff --git a/src/components/table/README.md b/src/components/table/README.md
@@ -446,15 +446,18 @@ headers, sticky columns, and the table sorting feature, all require BootstrapVue
 <!-- b-table-bordered.vue -->
 ```
 
-### Row styling
+### Row styling and attributes
 
-You can also style every row using the `tbody-tr-class` prop
+You can also style every row using the `tbody-tr-class` prop, and optionally supply additional
+attributes via the `tbody-tr-attr` prop:
 
-| Property       | Type                      | Description                                                                                                                                                                    |
-| -------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `tbodyTrClass` | String, Array or Function | Classes to be applied to every row on the table. If a function is given, it will be called as `tbodyTrClass( item, type )` and it may return an `Array`, `Object` or `String`. |
+| Property       | Type                      | Description                                                                                                                                                                      |
+| ---------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `tbody-tr-class` | String, Array or Function | Classes to be applied to every row on the table. If a function is given, it will be called as `tbodyTrClass( item, type )` and it may return an `Array`, `Object` or `String`. |
+| `tbody-tr-attr`  | Object or Function        | Attributes to be applied to every row on the table. If a function is given, it will be called as `tbodyTrAttr( item, type )` and it must return an `Object`.                   |
 
-When passing a function reference to `tbody-tr-class`, the function's arguments will be as follows:
+When passing a function reference to `tbody-tr-class` or `tbody-tr-attr`, the function's arguments
+will be as follows:
 
 - `item` - The item record data associated with the row. For rows that are not associated with an
   item record, this value will be `null` or `undefined`
@@ -485,7 +488,7 @@ When passing a function reference to `tbody-tr-class`, the function's arguments
     },
     methods: {
       rowClass(item, type) {
-        if (!item) return
+        if (!item || type !== 'row') return
         if (item.status === 'awesome') return 'table-success'
       }
     }

diff --git a/src/components/table/helpers/mixin-bottom-row.js b/src/components/table/helpers/mixin-bottom-row.js
@@ -25,7 +25,10 @@ export default {
             isFunction(this.tbodyTrClass)
               ? this.tbodyTrClass(null, 'row-bottom')
               : this.tbodyTrClass
-          ]
+          ],
+          attrs: isFunction(this.tbodyTrAttr)
+            ? this.tbodyTrAttr(null, 'row-bottom')
+            : this.tbodyTrAttr
         },
         this.normalizeSlot(slotName, { columns: fields.length, fields: fields })
       )

diff --git a/src/components/table/helpers/mixin-busy.js b/src/components/table/helpers/mixin-busy.js
@@ -55,7 +55,10 @@ export default {
               isFunction(this.tbodyTrClass)
                 ? this.tbodyTrClass(null, busySlotName)
                 : this.tbodyTrClass
-            ]
+            ],
+            attrs: isFunction(this.tbodyTrAttr)
+              ? this.tbodyTrAttr(null, busySlotName)
+              : this.tbodyTrAttr
           },
           [
             h(BTd, { props: { colspan: this.computedFields.length || null } }, [

diff --git a/src/components/table/helpers/mixin-empty.js b/src/components/table/helpers/mixin-empty.js
@@ -64,7 +64,10 @@ export default {
               isFunction(this.tbodyTrClass)
                 ? this.tbodyTrClass(null, 'row-empty')
                 : this.tbodyTrClass
-            ]
+            ],
+            attrs: isFunction(this.tbodyTrAttr)
+              ? this.tbodyTrAttr(null, 'row-empty')
+              : this.tbodyTrAttr
           },
           [$empty]
         )

diff --git a/src/components/table/helpers/mixin-tbody-row.js b/src/components/table/helpers/mixin-tbody-row.js
@@ -13,6 +13,10 @@ export default {
       type: [String, Array, Object, Function],
       default: null
     },
+    tbodyTrAttr: {
+      type: [Object, Function],
+      default: null
+    },
     detailsTdClass: {
       type: [String, Array, Object],
       default: null
@@ -216,6 +220,14 @@ export default {
       const selectableClasses = this.selectableRowClasses ? this.selectableRowClasses(rowIndex) : {}
       const selectableAttrs = this.selectableRowAttrs ? this.selectableRowAttrs(rowIndex) : {}
 
+      // Additional classes and attributes
+      const userTrClasses = isFunction(this.tbodyTrClass)
+        ? this.tbodyTrClass(item, 'row')
+        : this.tbodyTrClass
+      const userTrAttrs = isFunction(this.tbodyTrAttr)
+        ? this.tbodyTrAttr(item, 'row')
+        : this.tbodyTrAttr
+
       // Add the item row
       $rows.push(
         h(
@@ -224,14 +236,12 @@ export default {
             key: `__b-table-row-${rowKey}__`,
             ref: 'itemRows',
             refInFor: true,
-            class: [
-              isFunction(this.tbodyTrClass) ? this.tbodyTrClass(item, 'row') : this.tbodyTrClass,
-              selectableClasses,
-              rowShowDetails ? 'b-table-has-details' : ''
-            ],
+            class: [userTrClasses, selectableClasses, rowShowDetails ? 'b-table-has-details' : ''],
             props: { variant: item._rowVariant || null },
             attrs: {
               id: rowId,
+              ...userTrAttrs,
+              // Users cannot override the following attributes
               tabindex: hasRowClickHandler ? '0' : null,
               'data-pk': primaryKeyValue || null,
               'aria-details': detailsId,
@@ -284,19 +294,26 @@ export default {
         }
 
         // Add the actual details row
+        const userDetailsTrClasses = isFunction(this.tbodyTrClass)
+          ? this.tbodyTrClass(item, detailsSlotName)
+          : this.tbodyTrClass
+        const userDetailsTrAttrs = isFunction(this.tbodyTrAttr)
+          ? this.tbodyTrAttr(item, detailsSlotName)
+          : this.tbodyTrAttr
         $rows.push(
           h(
             BTr,
             {
               key: `__b-table-details__${rowKey}`,
               staticClass: 'b-table-details',
-              class: [
-                isFunction(this.tbodyTrClass)
-                  ? this.tbodyTrClass(item, detailsSlotName)
-                  : this.tbodyTrClass
-              ],
+              class: [userDetailsTrClasses],
               props: { variant: item._rowVariant || null },
-              attrs: { id: detailsId, tabindex: '-1' }
+              attrs: {
+                ...userDetailsTrAttrs,
+                // Users cannot override the following attributes
+                id: detailsId,
+                tabindex: '-1'
+              }
             },
             [$details]
           )

diff --git a/src/components/table/helpers/mixin-top-row.js b/src/components/table/helpers/mixin-top-row.js
@@ -23,7 +23,8 @@ export default {
           staticClass: 'b-table-top-row',
           class: [
             isFunction(this.tbodyTrClass) ? this.tbodyTrClass(null, 'row-top') : this.tbodyTrClass
-          ]
+          ],
+          attrs: isFunction(this.tbodyTrAttr) ? this.tbodyTrAttr(null, 'row-top') : this.tbodyTrAttr
         },
         [this.normalizeSlot(slotName, { columns: fields.length, fields: fields })]
       )

diff --git a/src/components/table/index.d.ts b/src/components/table/index.d.ts
@@ -37,6 +37,7 @@ export declare class BTable extends BvComponent {
   filterIncludedFields?: Array<string>
   busy?: boolean
   tbodyTrClass?: string | Array<any> | object | BvTableTbodyTrClassCallback
+  tbodyTrAttr?: object | BvTableTbodyTrAttrCallback
   tabelVariant?: BvTableVariant | string
   headVariant?: BvTableHeadFootVariant | string
   footVariant?: BvTableHeadFootVariant | string
@@ -55,6 +56,7 @@ export declare class BTableLite extends BvComponent {
   fields?: BvTableFieldArray
   primaryKey?: string
   tbodyTrClass?: string | Array<any> | object | BvTableTbodyTrClassCallback
+  tbodyTrAttr?: object | BvTableTbodyTrAttrCallback
   tableClass?: string
   tableVariant?: BvTableVariant | string
   headVariant?: BvTableHeadFootVariant | string
@@ -133,6 +135,8 @@ export type BvTableSortDirection = 'asc' | 'desc' | 'last'
 
 export type BvTableFormatterCallback = ((value: any, key: string, item: any) => any)
 
+export type BvTableTbodyTrAttrCallback = ((item: any, type: string) => object)
+
 export type BvTableTbodyTrClassCallback = ((item: any, type: string) => any)
 
 export type BvTableFilterCallback = ((item: any, filter: any) => boolean)

diff --git a/src/components/table/package.json b/src/components/table/package.json
@@ -135,6 +135,11 @@
             "prop": "tbodyTrClass",
             "description": "CSS class (or classes) to apply to the tr element in the tbody. Can be a function that returns a class (see docs for details)"
           },
+          {
+            "prop": "tbodyTrAttr",
+            "version": "2.2.0",
+            "description": "Attributes to be added to each tr in the tbody, or a function returning such attributes (see docs for details)"
+          },
           {
             "prop": "detailsTdClass",
             "version": "2.1.0",
@@ -1117,6 +1122,11 @@
             "prop": "tbodyTrClass",
             "description": "CSS class (or classes) to apply to the tr element in the tbody. Can be a function that returns a class (see docs for details)"
           },
+          {
+            "prop": "tbodyTrAttr",
+            "version": "2.2.0",
+            "description": "Attributes to be added to each tr in the tbody, or a function returning such attributes (see docs for details)"
+          },
           {
             "prop": "detailsTdClass",
             "version": "2.1.0",