Refactor #3924 - For DataTable & Column

components/lib/column/Column.d.ts

@@ -10,9 +10,22 @@
  */
 
 import { VNode } from 'vue';
+import { ButtonPassThroughOptionType } from '../button';
+import { DropdownPassThroughOptionType } from '../dropdown';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { VirtualScrollerLoaderOptions } from '../virtualscroller';
 
+export declare type ColumnPassThroughOptionType = ColumnPassThroughAttributes | ((options: ColumnPassThroughMethodOptions) => ColumnPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ColumnPassThroughMethodOptions {
+    props: ColumnProps;
+    state: ColumnState;
+    context: ColumnContext;
+}
+
 /**
  * Filter model metadata.
  */
@@ -68,6 +81,292 @@ export interface ColumnLoadingOptions extends VirtualScrollerLoaderOptions {
     field: string;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ColumnProps.pt}
+ */
+export interface ColumnPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header cell's DOM element.
+     */
+    headerCell?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the column resizer's DOM element.
+     */
+    columnResizer?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header content's DOM element.
+     */
+    headerContent?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header title's DOM element.
+     */
+    headerTitle?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the sort's DOM element.
+     */
+    sort?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the sort badge's DOM element.
+     */
+    sortBadge?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox wrapper's DOM element.
+     */
+    headerCheckboxWrapper?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header checkbox's DOM element.
+     */
+    headerCheckbox?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header checkbox icon's DOM element.
+     */
+    headerCheckboxIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the column filter's DOM element.
+     */
+    columnFilter?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter input's DOM element.
+     */
+    filterInput?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter menu button's DOM element.
+     */
+    filterMenuButton?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header filter clear button's DOM element.
+     */
+    headerFilterClearButton?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter clear icon's DOM element.
+     */
+    filterClearIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter overlay's DOM element.
+     */
+    filterOverlay?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter row items' DOM element.
+     */
+    filterRowItems?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter row item's DOM element.
+     */
+    filterRowItem?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter separator's DOM element.
+     */
+    filterSeparator?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter operator's DOM element.
+     */
+    filterOperator?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Dropdown component.
+     * @see {@link DropdownPassThroughOptionType}
+     */
+    filterOperatorDropdown?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter constraints' DOM element.
+     */
+    filterConstraints?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter constraint's DOM element.
+     */
+    filterConstraint?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Dropdown component.
+     * @see {@link DropdownPassThroughOptionType}
+     */
+    filterMatchModeDropdown?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter remove button container's DOM element.
+     */
+    filterRemove?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    filterRemoveButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter add rule's DOM element.
+     */
+    filterAddRule?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    filterAddRuleButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter buttonbar's DOM element.
+     */
+    filterButtonbar?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    filterClearButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    filterApplyButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the body cell's DOM element.
+     */
+    bodyCell?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rowgroup toggler's DOM element.
+     */
+    rowGroupToggler?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rowgroup toggler icon's DOM element.
+     */
+    rowGroupTogglerIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the column title's DOM element.
+     */
+    columnTitle?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the radiobutton wrapper's DOM element.
+     */
+    radiobuttonWrapper?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the radiobutton's DOM element.
+     */
+    radiobutton?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the radiobutton icon's DOM element.
+     */
+    radiobuttonIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox wrapper's DOM element.
+     */
+    checkboxWrapper?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox's DOM element.
+     */
+    checkbox?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox icon's DOM element.
+     */
+    checkboxIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rowtoggler's DOM element.
+     */
+    rowToggler?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rowtoggler icon's DOM element.
+     */
+    rowTogglerIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row editor init button's DOM element.
+     */
+    rowEditorInitButton?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row editor init icon's DOM element.
+     */
+    rowEditorInitIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row editor edit button's DOM element.
+     */
+    rowEditorEditButton?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row editor edit icon's DOM element.
+     */
+    rowEditorEditIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row editor cancel button's DOM element.
+     */
+    rowEditorCancelButton?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row editor cancel icon's DOM element.
+     */
+    rowEditorCancelIcon?: ColumnPassThroughOptionType;
+
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenHeaderInputWrapper?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input's DOM element.
+     */
+    hiddenHeaderInput?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenInputWrapper?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input's DOM element.
+     */
+    hiddenInput?: ColumnPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ColumnPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Column component.
+ */
+export interface ColumnState {
+    d_editing: boolean;
+    /**
+     * Current style of the body cell.
+     */
+    styleObject: object;
+    /**
+     * Current filter overlay visible as a boolean.
+     */
+    overlayVisible: boolean;
+    /**
+     * Current filter match mode.
+     */
+    defaultMatchMode: string;
+    /**
+     * Current filter operator.
+     */
+    defaultOperator: string;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current style of the rowgroup header.
+     */
+    rowGroupHeaderStyleObject: object;
+}
+
+/**
+ * Defines current options in Column component.
+ */
+export interface ColumnContext {
+    /**
+     * Current checked state of row as a boolean.
+     * @defaultValue false
+     */
+    checked: boolean;
+    /**
+     * Current focused state of row as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current disabled state of row as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
 /**
  * Defines valid properties in Column component.
  */
@@ -569,9 +868,9 @@ export interface ColumnEmits {}
 /**
  * **PrimeVue - Column**
  *
- * _Column is a helper component for DataTable and TreeTable._
+ * _Column is a helper component for Column and TreeTable._
  *
- * [Live Demo](https://www.primevue.org/datatable/)
+ * [Live Demo](https://www.primevue.org/Column/)
  * --- ---
  * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
  *

components/lib/column/Column.vue

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