Refactor #4306

components/lib/basecomponent/BaseComponent.vue

@@ -470,7 +470,7 @@ export default {
                 self,
                 globalPT,
                 key !== 'transition' && {
-                    ...(key === 'root' && this.$.type.name === this.$options.hostName && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(this.$.type.name) }),
+                    ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(this.$.type.name) }),
                     [`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key)
                 }
             );

components/lib/datatable/DataTable.d.ts

@@ -603,6 +603,10 @@ export interface DataTablePassThroughOptions {
      * Used to pass attributes to the rowgroup header's DOM element.
      */
     rowGroupHeader?: DataTablePassThroughOptionType;
+    /**
+     * Used to pass attributes to the rowgroup header cell's DOM element.
+     */
+    rowGroupHeaderCell?: DataTablePassThroughOptionType;
     /**
      * Used to pass attributes to the body row's DOM element.
      */
@@ -611,14 +615,26 @@ export interface DataTablePassThroughOptions {
      * Used to pass attributes to the row expansion's DOM element.
      */
     rowExpansion?: DataTablePassThroughOptionType;
+    /**
+     * Used to pass attributes to the row expansion cell's DOM element.
+     */
+    rowExpansionCell?: DataTablePassThroughOptionType;
     /**
      * Used to pass attributes to the rowgroup footer's DOM element.
      */
     rowGroupFooter?: DataTablePassThroughOptionType;
+    /**
+     * Used to pass attributes to the rowgroup footer cell's DOM element.
+     */
+    rowGroupFooterCell?: DataTablePassThroughOptionType;
     /**
      * Used to pass attributes to the empty message's DOM element.
      */
     emptyMessage?: DataTablePassThroughOptionType;
+    /**
+     * Used to pass attributes to the empty message cell's DOM element.
+     */
+    emptyMessageCell?: DataTablePassThroughOptionType;
     /**
      * Used to pass attributes to the tfoot's DOM element.
      */

components/lib/datatable/TableBody.vue

@@ -10,7 +10,7 @@
                     role="row"
                     v-bind="ptm('rowGroupHeader')"
                 >
-                    <td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }" data-pc-section="bodycell">
+                    <td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowGroupHeaderCell') }">
                         <button v-if="expandableRowGroups" :class="cx('rowGroupToggler')" @click="onRowGroupToggle($event, rowData)" type="button" v-bind="ptm('rowGroupToggler')">
                             <component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded(rowData)" />
                             <template v-else>
@@ -91,7 +91,7 @@
                     role="row"
                     v-bind="ptm('rowExpansion')"
                 >
-                    <td :colspan="columnsLength" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }">
+                    <td :colspan="columnsLength" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowExpansionCell') }">
                         <component :is="templates['expansion']" :data="rowData" :index="getRowIndex(index)" />
                     </td>
                 </tr>
@@ -102,14 +102,14 @@
                     role="row"
                     v-bind="ptm('rowGroupFooter')"
                 >
-                    <td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('root'), ...getColumnPT('footerCell') }" data-pc-section="footercell">
+                    <td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowGroupFooterCell') }">
                         <component :is="templates['groupfooter']" :data="rowData" :index="getRowIndex(index)" />
                     </td>
                 </tr>
             </template>
         </template>
         <tr v-else :class="cx('emptyMessage')" role="row" v-bind="ptm('emptyMessage')">
-            <td :colspan="columnsLength" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }">
+            <td :colspan="columnsLength" v-bind="{ ...getColumnPT('bodycell'), ...ptm('emptyMessageCell') }">
                 <component v-if="templates.empty" :is="templates.empty" />
             </td>
         </tr>