Refactor #3924 - For ColumnGroup & Row

api-generator/components/columngroup.js

@@ -1,7 +1,23 @@
+const ColumnGroupProps = [
+    {
+        name: 'type',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the type of the group.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
+    }
+];
+
 module.exports = {
     columngroup: {
         name: 'ColumnGroup',
         description: 'Columns can be grouped at header and footer sections by defining a ColumnGroup with nested rows and columns',
-        'doc-url': 'datatable'
+        'doc-url': 'datatable',
+        props: ColumnGroupProps
     }
 };

api-generator/components/row.js

@@ -1,7 +1,23 @@
+const RowProps = [
+    {
+        name: 'type',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the type of the group.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
+    }
+];
+
 module.exports = {
     row: {
         name: 'Row',
         description: 'DataTable can be grouped by defining a Row component with nested columns',
-        'doc-url': 'datatable'
+        'doc-url': 'datatable',
+        props: RowProps
     }
 };

components/lib/columngroup/ColumnGroup.d.ts

@@ -5,8 +5,37 @@
  * [Live Demo](https://www.primevue.org/datatable/)
  * @module columngroup
  */
+import { DataTablePassThroughOptions } from '../datatable';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ColumnGroupPassThroughOptionType = ColumnGroupPassThroughAttributes | ((options: ColumnGroupPassThroughMethodOptions) => ColumnGroupPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ColumnGroupPassThroughMethodOptions {
+    props: ColumnGroupProps;
+    parent: DataTablePassThroughOptions;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ColumnGroupProps.pt}
+ */
+export interface ColumnGroupPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ColumnGroupPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ColumnGroupPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in ColumnGroup component.
  */
@@ -15,6 +44,11 @@ export interface ColumnGroupProps {
      * Type of column group
      */
     type?: 'header' | 'footer' | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ColumnGroupPassThroughOptions}
+     */
+    pt?: ColumnGroupPassThroughOptions;
 }
 
 /**

components/lib/columngroup/ColumnGroup.vue

@@ -1,6 +1,9 @@
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'ColumnGroup',
+    extends: BaseComponent,
     props: {
         type: {
             type: String,

components/lib/config/PrimeVue.d.ts

@@ -16,6 +16,7 @@ import { CheckboxPassThroughOptions } from '../checkbox';
 import { ChipPassThroughOptions } from '../chip';
 import { ChipsPassThroughOptions } from '../chips';
 import { ColorPickerPassThroughOptions } from '../colorpicker';
+import { ColumnGroupPassThroughOptions } from '../columngroup';
 import { ConfirmDialogPassThroughOptions } from '../confirmdialog';
 import { ConfirmPopupPassThroughOptions } from '../confirmpopup';
 import { ContextMenuPassThroughOptions } from '../contextmenu';
@@ -56,6 +57,7 @@ import { PickListPassThroughOptions } from '../picklist';
 import { ProgressBarPassThroughOptions } from '../progressbar';
 import { ProgressSpinnerPassThroughOptions } from '../progressspinner';
 import { RadioButtonPassThroughOptions } from '../radiobutton';
+import { RowPassThroughOptions } from '../row';
 import { ScrollPanelPassThroughOptions } from '../scrollpanel';
 import { ScrollTopPassThroughOptions } from '../scrolltop';
 import { SelectButtonPassThroughOptions } from '../selectbutton';
@@ -112,6 +114,7 @@ interface PrimeVuePTOptions {
     chip?: ChipPassThroughOptions;
     chips?: ChipsPassThroughOptions;
     colorpicker?: ColorPickerPassThroughOptions;
+    columngroup?: ColumnGroupPassThroughOptions;
     confirmdialog?: ConfirmDialogPassThroughOptions;
     confirmpopup?: ConfirmPopupPassThroughOptions;
     contextmenu?: ContextMenuPassThroughOptions;
@@ -153,6 +156,7 @@ interface PrimeVuePTOptions {
     progressbar?: ProgressBarPassThroughOptions;
     progressspinner?: ProgressSpinnerPassThroughOptions;
     radiobutton?: RadioButtonPassThroughOptions;
+    row?: RowPassThroughOptions;
     scrollpanel?: ScrollPanelPassThroughOptions;
     scrolltop?: ScrollTopPassThroughOptions;
     sidebar?: SidebarPassThroughOptions;

components/lib/datatable/TableFooter.vue

@@ -1,12 +1,12 @@
 <template>
-    <tfoot v-if="hasFooter" class="p-datatable-tfoot" role="rowgroup" v-bind="ptm('tfoot')">
+    <tfoot v-if="hasFooter" class="p-datatable-tfoot" role="rowgroup" v-bind="{ ...ptm('tfoot'), ...getColumnGroupPTOptions('root') }">
         <tr v-if="!columnGroup" role="row" v-bind="ptm('footerRow')">
             <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
                 <DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" :pt="pt" />
             </template>
         </tr>
         <template v-else>
-            <tr v-for="(row, i) of getFooterRows()" :key="i" role="row" v-bind="ptm('footerRow')">
+            <tr v-for="(row, i) of getFooterRows()" :key="i" role="row" v-bind="getRowPTOptions(row, 'root')">
                 <template v-for="(col, j) of getFooterColumns(row)" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || j">
                     <DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" :pt="pt" />
                 </template>
@@ -37,6 +37,30 @@ export default {
         columnProp(col, prop) {
             return ObjectUtils.getVNodeProp(col, prop);
         },
+        getColumnGroupPTOptions(key) {
+            return this.ptmo(this.getColumnGroupProps(), key, {
+                props: this.getColumnGroupProps(),
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
+        getColumnGroupProps() {
+            return this.columnGroup && this.columnGroup.props && this.columnGroup.props.pt ? this.columnGroup.props.pt : undefined; //@todo
+        },
+        getRowPTOptions(row, key) {
+            return this.ptmo(this.getRowProp(row), key, {
+                props: row.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
+        getRowProp(row) {
+            return row.props && row.props.pt ? row.props.pt : undefined; //@todo
+        },
         getFooterRows() {
             let rows = [];
 

components/lib/datatable/TableHeader.vue

@@ -1,5 +1,5 @@
 <template>
-    <thead class="p-datatable-thead" role="rowgroup" v-bind="ptm('thead')">
+    <thead class="p-datatable-thead" role="rowgroup" v-bind="{ ...ptm('thead'), ...getColumnGroupPTOptions('root') }">
         <template v-if="!columnGroup">
             <tr role="row" v-bind="ptm('headerRow')">
                 <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
@@ -91,7 +91,7 @@
             </tr>
         </template>
         <template v-else>
-            <tr v-for="(row, i) of getHeaderRows()" :key="i" role="row" v-bind="ptm('headerRow')">
+            <tr v-for="(row, i) of getHeaderRows()" :key="i" role="row" v-bind="getRowPTOptions(row, 'root')">
                 <template v-for="(col, j) of getHeaderColumns(row)" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || j">
                     <DTHeaderCell
                         v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field')) && typeof col.children !== 'string'"
@@ -232,6 +232,30 @@ export default {
         columnProp(col, prop) {
             return ObjectUtils.getVNodeProp(col, prop);
         },
+        getColumnGroupPTOptions(key) {
+            return this.ptmo(this.getColumnGroupProps(), key, {
+                props: this.getColumnGroupProps(),
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
+        getColumnGroupProps() {
+            return this.columnGroup && this.columnGroup.props && this.columnGroup.props.pt ? this.columnGroup.props.pt : undefined; //@todo
+        },
+        getRowPTOptions(row, key) {
+            return this.ptmo(this.getRowProp(row), key, {
+                props: row.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
+        getRowProp(row) {
+            return row.props && row.props.pt ? row.props.pt : undefined; //@todo
+        },
         getColumnPTOptions(column, key) {
             return this.ptmo(this.getColumnProp(column), key, {
                 props: column.props,

components/lib/row/Row.d.ts

@@ -5,8 +5,37 @@
  *
  * @module row
  */
+import { ColumnGroupPassThroughOptions } from '../columngroup';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type RowPassThroughOptionType = RowPassThroughAttributes | ((options: RowPassThroughMethodOptions) => RowPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface RowPassThroughMethodOptions {
+    props: RowProps;
+    parent: ColumnGroupPassThroughOptions;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link RowProps.pt}
+ */
+export interface RowPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: RowPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface RowPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in Row component.
  */

components/lib/row/Row.vue

@@ -1,6 +1,9 @@
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'Row',
+    extends: BaseComponent,
     render() {
         return null;
     }