primereact 8.7.3 → 9.0.0-rc.1

package/treetable/treetable.esm.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import PrimeReact, { ariaLabel, localeOption, FilterMatchMode, FilterService } from 'primereact/api';
+import PrimeReact, { FilterMatchMode, ariaLabel, localeOption, FilterService } from 'primereact/api';
+import { ObjectUtils, DomHandler, classNames } from 'primereact/utils';
 import { useEventListener, useUnmountEffect, useMountEffect } from 'primereact/hooks';
 import { Paginator } from 'primereact/paginator';
-import { DomHandler, ObjectUtils, classNames } from 'primereact/utils';
 import { Ripple } from 'primereact/ripple';
 import { OverlayService } from 'primereact/overlayservice';
 import { InputText } from 'primereact/inputtext';
@@ -66,9 +66,7 @@ function _defineProperty(obj, key, value) {
 
 function _arrayLikeToArray$4(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i];
-  }
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
   return arr2;
 }
 
@@ -115,9 +113,7 @@ function _iterableToArrayLimit(arr, i) {
       if (_x = (_i = _i.call(arr)).next, 0 === i) {
         if (Object(_i) !== _i) return;
         _n = !1;
-      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) {
-        ;
-      }
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
     } catch (err) {
       _d = !0, _e = err;
     } finally {
@@ -139,6 +135,187 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$4(arr, i) || _nonIterableRest();
 }
 
+var ColumnBase = {
+  defaultProps: {
+    __TYPE: 'Column',
+    align: null,
+    alignFrozen: 'left',
+    alignHeader: null,
+    body: null,
+    bodyClassName: null,
+    bodyStyle: null,
+    cellEditValidator: null,
+    cellEditValidatorEvent: 'click',
+    className: null,
+    colSpan: null,
+    columnKey: null,
+    dataType: 'text',
+    editor: null,
+    excludeGlobalFilter: false,
+    expander: false,
+    exportField: null,
+    exportable: true,
+    field: null,
+    filter: false,
+    filterApply: null,
+    filterClear: null,
+    filterElement: null,
+    filterField: null,
+    filterFooter: null,
+    filterFunction: null,
+    filterHeader: null,
+    filterHeaderClassName: null,
+    filterHeaderStyle: null,
+    filterMatchMode: null,
+    filterMatchModeOptions: null,
+    filterMaxLength: null,
+    filterMenuClassName: null,
+    filterMenuStyle: null,
+    filterPlaceholder: null,
+    filterType: 'text',
+    footer: null,
+    footerClassName: null,
+    footerStyle: null,
+    frozen: false,
+    header: null,
+    headerClassName: null,
+    headerStyle: null,
+    headerTooltip: null,
+    headerTooltipOptions: null,
+    hidden: false,
+    maxConstraints: 2,
+    onBeforeCellEditHide: null,
+    onBeforeCellEditShow: null,
+    onCellEditCancel: null,
+    onCellEditComplete: null,
+    onCellEditInit: null,
+    onFilterApplyClick: null,
+    onFilterClear: null,
+    onFilterConstraintAdd: null,
+    onFilterConstraintRemove: null,
+    onFilterMatchModeChange: null,
+    onFilterOperatorChange: null,
+    reorderable: true,
+    resizeable: true,
+    rowEditor: false,
+    rowReorder: false,
+    rowReorderIcon: 'pi pi-bars',
+    rowSpan: null,
+    selectionMode: null,
+    showAddButton: true,
+    showApplyButton: true,
+    showClearButton: true,
+    showFilterMatchModes: true,
+    showFilterMenu: true,
+    showFilterMenuOptions: true,
+    showFilterOperator: true,
+    sortField: null,
+    sortFunction: null,
+    sortable: false,
+    sortableDisabled: false,
+    style: null,
+    children: undefined
+  },
+  getCProp: function getCProp(column, name) {
+    return ObjectUtils.getComponentProp(column, name, ColumnBase.defaultProps);
+  },
+  getCProps: function getCProps(column) {
+    return ObjectUtils.getComponentProps(column, ColumnBase.defaultProps);
+  },
+  getCOtherProps: function getCOtherProps(column) {
+    return ObjectUtils.getComponentDiffProps(column, ColumnBase.defaultProps);
+  }
+};
+
+var TreeTableBase = {
+  defaultProps: {
+    __TYPE: 'TreeTable',
+    alwaysShowPaginator: true,
+    autoLayout: false,
+    className: null,
+    columnResizeMode: 'fit',
+    contextMenuSelectionKey: null,
+    currentPageReportTemplate: '({currentPage} of {totalPages})',
+    defaultSortOrder: 1,
+    emptyMessage: null,
+    expandedKeys: null,
+    filterDelay: 300,
+    filterLocale: undefined,
+    filterMode: 'lenient',
+    filters: null,
+    first: null,
+    footer: null,
+    footerColumnGroup: null,
+    frozenFooterColumnGroup: null,
+    frozenHeaderColumnGroup: null,
+    frozenWidth: null,
+    globalFilter: null,
+    globalFilterMatchMode: FilterMatchMode.CONTAINS,
+    header: null,
+    headerColumnGroup: null,
+    id: null,
+    lazy: false,
+    loading: false,
+    loadingIcon: 'pi pi-spinner',
+    metaKeySelection: true,
+    multiSortMeta: null,
+    onColReorder: null,
+    onCollapse: null,
+    onColumnResizeEnd: null,
+    onContextMenu: null,
+    onContextMenuSelectionChange: null,
+    onExpand: null,
+    onFilter: null,
+    onPage: null,
+    onRowClick: null,
+    onSelect: null,
+    onSelectionChange: null,
+    onSort: null,
+    onToggle: null,
+    onUnselect: null,
+    pageLinkSize: 5,
+    paginator: false,
+    paginatorClassName: null,
+    paginatorDropdownAppendTo: null,
+    paginatorLeft: null,
+    paginatorPosition: 'bottom',
+    paginatorRight: null,
+    paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
+    propagateSelectionDown: true,
+    propagateSelectionUp: true,
+    removableSort: false,
+    reorderableColumns: false,
+    resizableColumns: false,
+    rowClassName: null,
+    rowHover: false,
+    rows: null,
+    rowsPerPageOptions: null,
+    scrollHeight: null,
+    scrollable: false,
+    selectOnEdit: true,
+    selectionKeys: null,
+    selectionMode: null,
+    showGridlines: false,
+    sortField: null,
+    sortMode: 'single',
+    sortOrder: null,
+    stripedRows: false,
+    style: null,
+    tabIndex: 0,
+    tableClassName: null,
+    tableStyle: null,
+    totalRecords: null,
+    value: null,
+    children: undefined
+  },
+  getProps: function getProps(props) {
+    return ObjectUtils.getMergedProps(props, TreeTableBase.defaultProps);
+  },
+  getOtherProps: function getOtherProps(props) {
+    return ObjectUtils.getDiffProps(props, TreeTableBase.defaultProps);
+  }
+};
+
 var TreeTableBodyCell = function TreeTableBodyCell(props) {
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -281,7 +458,7 @@ TreeTableBodyCell.displayName = 'TreeTableBodyCell';
 
 function _createForOfIteratorHelper$3(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$3(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray$3(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$3(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$3(o, minLen); }
-function _arrayLikeToArray$3(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _arrayLikeToArray$3(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
@@ -290,6 +467,9 @@ var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
   var checkboxBoxRef = React.useRef(null);
   var nodeTouched = React.useRef(false);
   var expanded = props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false;
+  var getColumnProp = function getColumnProp(column, name) {
+    return ColumnBase.getCProp(column, name);
+  };
   var onTogglerClick = function onTogglerClick(event) {
     expanded ? collapse(event) : expand(event);
     event.preventDefault();
@@ -568,13 +748,13 @@ var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
   };
   var createCell = function createCell(column) {
     var toggler, checkbox;
-    if (column.props.expander) {
+    if (getColumnProp(column, 'expander')) {
       toggler = createToggler();
       checkbox = createCheckbox();
     }
     return /*#__PURE__*/React.createElement(TreeTableBodyCell, _extends({
-      key: column.props.columnKey || column.props.field
-    }, column.props, {
+      key: getColumnProp(column, 'columnKey') || getColumnProp(column, 'field')
+    }, ColumnBase.getCProps(column), {
       column: column,
       selectOnEdit: props.selectOnEdit,
       selected: isSelected(),
@@ -644,7 +824,7 @@ function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createForOfIteratorHelper$2(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$2(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray$2(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$2(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$2(o, minLen); }
-function _arrayLikeToArray$2(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _arrayLikeToArray$2(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var TreeTableBody = /*#__PURE__*/React.memo(function (props) {
   var isSingleSelectionMode = props.selectionMode === 'single';
   var isMultipleSelectionMode = props.selectionMode === 'multiple';
@@ -850,25 +1030,59 @@ var TreeTableBody = /*#__PURE__*/React.memo(function (props) {
 });
 TreeTableBody.displayName = 'TreeTableBody';
 
+var ColumnGroupBase = {
+  defaultProps: {
+    __TYPE: 'ColumnGroup',
+    children: undefined
+  },
+  getCProp: function getCProp(group, name) {
+    return ObjectUtils.getComponentProp(group, name, ColumnGroupBase.defaultProps);
+  },
+  getCProps: function getCProps(group) {
+    return ObjectUtils.getComponentProps(group, ColumnGroupBase.defaultProps);
+  }
+};
+
+var RowBase = {
+  defaultProps: {
+    __TYPE: 'Row',
+    style: null,
+    className: null,
+    children: undefined
+  },
+  getProps: function getProps(props) {
+    return ObjectUtils.getMergedProps(props, RowBase.defaultProps);
+  },
+  getOtherProps: function getOtherProps(props) {
+    return ObjectUtils.getDiffProps(props, RowBase.defaultProps);
+  },
+  getCProp: function getCProp(row, name) {
+    return ObjectUtils.getComponentProp(row, name, RowBase.defaultProps);
+  }
+};
+
 var TreeTableFooter = /*#__PURE__*/React.memo(function (props) {
+  var getColumnProp = function getColumnProp(column, name) {
+    return ColumnBase.getCProp(column, name);
+  };
   var createFooterCell = function createFooterCell(column, index) {
     return /*#__PURE__*/React.createElement("td", {
       key: column.field || index,
-      className: column.props.footerClassName || column.props.className,
-      style: column.props.footerStyle || column.props.style,
-      rowSpan: column.props.rowSpan,
-      colSpan: column.props.colSpan
-    }, column.props.footer);
+      className: getColumnProp(column, 'footerClassName') || getColumnProp(column, 'className'),
+      style: getColumnProp(column, 'footerStyle') || getColumnProp(column, 'style'),
+      rowSpan: getColumnProp(column, 'rowSpan'),
+      colSpan: getColumnProp(column, 'colSpan')
+    }, getColumnProp(column, 'footer'));
   };
   var createFooterRow = function createFooterRow(row, index) {
-    var rowColumns = React.Children.toArray(row.props.children);
+    var rowColumns = React.Children.toArray(RowBase.getCProp(row, 'children'));
     var rowFooterCells = rowColumns.map(createFooterCell);
     return /*#__PURE__*/React.createElement("tr", {
       key: index
     }, rowFooterCells);
   };
   var createColumnGroup = function createColumnGroup() {
-    var rows = React.Children.toArray(props.columnGroup.props.children);
+    var rows = React.Children.toArray(ColumnGroupBase.getCProp(props.columnGroup, 'children'));
     return rows.map(createFooterRow);
   };
   var createColumns = function createColumns(columns) {
@@ -884,7 +1098,7 @@ var TreeTableFooter = /*#__PURE__*/React.memo(function (props) {
       return true;
     } else {
       for (var i = 0; i < props.columns.length; i++) {
-        if (props.columns[i].props.footer) {
+        if (getColumnProp(props.columns[i], 'footer')) {
           return true;
         }
       }
@@ -904,25 +1118,25 @@ TreeTableFooter.displayName = 'TreeTableFooter';
 
 function _createForOfIteratorHelper$1(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); }
-function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
   var filterTimeout = React.useRef(null);
   var onHeaderClick = function onHeaderClick(event, column) {
-    if (column.props.sortable) {
+    if (getColumnProp(column, 'sortable')) {
       var targetNode = event.target;
       if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title') || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
         props.onSort({
           originalEvent: event,
-          sortField: column.props.sortField || column.props.field,
-          sortFunction: column.props.sortFunction,
-          sortable: column.props.sortable
+          sortField: getColumnProp(column, 'sortField') || getColumnProp(column, 'field'),
+          sortFunction: getColumnProp(column, 'sortFunction'),
+          sortable: getColumnProp(column, 'sortable')
         });
         DomHandler.clearSelection();
       }
     }
   };
   var onHeaderMouseDown = function onHeaderMouseDown(event, column) {
-    if (props.reorderableColumns && column.props.reorderable) {
+    if (props.reorderableColumns && getColumnProp(column, 'reorderable')) {
       if (event.target.nodeName !== 'INPUT') event.currentTarget.draggable = true;else if (event.target.nodeName === 'INPUT') event.currentTarget.draggable = false;
     }
   };
@@ -935,7 +1149,7 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
   var getMultiSortMetaDataIndex = function getMultiSortMetaDataIndex(column) {
     if (props.multiSortMeta) {
       for (var i = 0; i < props.multiSortMeta.length; i++) {
-        if (props.multiSortMeta[i].field === column.props.field) {
+        if (props.multiSortMeta[i].field === getColumnProp(column, 'field')) {
           return i;
         }
       }
@@ -984,7 +1198,7 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
     }
   };
   var onFilterInput = function onFilterInput(e, column) {
-    if (column.props.filter && props.onFilter) {
+    if (getColumnProp(column, 'filter') && props.onFilter) {
       if (filterTimeout.current) {
         clearTimeout(filterTimeout.current);
       }
@@ -992,8 +1206,8 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
       filterTimeout.current = setTimeout(function () {
         props.onFilter({
           value: filterValue,
-          field: column.props.field,
-          matchMode: column.props.filterMatchMode || 'startsWith'
+          field: getColumnProp(column, 'field'),
+          matchMode: getColumnProp(column, 'filterMatchMode') || 'startsWith'
         });
         filterTimeout.current = null;
       }, props.filterDelay);
@@ -1006,7 +1220,7 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var col = _step.value;
-          if (col.props.filter) {
+          if (getColumnProp(col, 'filter')) {
             return true;
           }
         }
@@ -1019,7 +1233,7 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
     return false;
   };
   var getAriaSort = function getAriaSort(column, sorted, sortOrder) {
-    if (column.props.sortable) {
+    if (getColumnProp(column, 'sortable')) {
       var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-down' : 'pi-sort-up' : 'pi-sort';
       if (sortIcon === 'pi-sort-down') return 'descending';else if (sortIcon === 'pi-sort-up') return 'ascending';else return 'none';
     } else {
@@ -1027,13 +1241,10 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
     }
   };
   var getColumnProp = function getColumnProp(column) {
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
-    return column ? typeof args[0] === 'string' ? column.props[args[0]] : (args[0] || column).props[args[1]] : null;
+    return column ? typeof (arguments.length <= 1 ? undefined : arguments[1]) === 'string' ? ColumnBase.getCProp(column, arguments.length <= 1 ? undefined : arguments[1]) : ColumnBase.getCProp((arguments.length <= 1 ? undefined : arguments[1]) || column, arguments.length <= 2 ? undefined : arguments[2]) : null;
   };
   var createSortIcon = function createSortIcon(column, sorted, sortOrder) {
-    if (column.props.sortable) {
+    if (getColumnProp(column, 'sortable')) {
       var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt' : 'pi-sort-alt';
       var sortIconClassName = classNames('p-sortable-column-icon', 'pi pi-fw', sortIcon);
       return /*#__PURE__*/React.createElement("span", {
@@ -1065,44 +1276,44 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
   };
   var createHeaderCell = function createHeaderCell(column, options) {
     var filterElement;
-    if (column.props.filter && options.renderFilter) {
-      filterElement = column.props.filterElement || /*#__PURE__*/React.createElement(InputText, {
+    if (getColumnProp(column, 'filter') && options.renderFilter) {
+      filterElement = getColumnProp(column, 'filterElement') || /*#__PURE__*/React.createElement(InputText, {
         onInput: function onInput(e) {
           return onFilterInput(e, column);
         },
         type: props.filterType,
-        defaultValue: props.filters && props.filters[column.props.field] ? props.filters[column.props.field].value : null,
+        defaultValue: props.filters && props.filters[getColumnProp(column, 'field')] ? props.filters[getColumnProp(column, 'field')].value : null,
         className: "p-column-filter",
-        placeholder: column.props.filterPlaceholder,
-        maxLength: column.props.filterMaxLength
+        placeholder: getColumnProp(column, 'filterPlaceholder'),
+        maxLength: getColumnProp(column, 'filterMaxLength')
       });
     }
     if (options.filterOnly) {
       return /*#__PURE__*/React.createElement("th", {
-        key: column.props.columnKey || column.props.field || options.index,
-        className: classNames('p-filter-column', column.props.filterHeaderClassName),
-        style: column.props.filterHeaderStyle || column.props.style,
-        rowSpan: column.props.rowSpan,
-        colSpan: column.props.colSpan
+        key: getColumnProp(column, 'columnKey') || getColumnProp(column, 'field') || options.index,
+        className: classNames('p-filter-column', getColumnProp(column, 'filterHeaderClassName')),
+        style: getColumnProp(column, 'filterHeaderStyle') || getColumnProp(column, 'style'),
+        rowSpan: getColumnProp(column, 'rowSpan'),
+        colSpan: getColumnProp(column, 'colSpan')
       }, filterElement);
     } else {
       var headerCellRef = /*#__PURE__*/React.createRef(null);
       var sortMetaDataIndex = getMultiSortMetaDataIndex(column);
       var multiSortMetaData = sortMetaDataIndex !== -1 ? props.multiSortMeta[sortMetaDataIndex] : null;
-      var singleSorted = column.props.field === props.sortField;
+      var singleSorted = getColumnProp(column, 'field') === props.sortField;
       var multipleSorted = multiSortMetaData !== null;
-      var sorted = column.props.sortable && (singleSorted || multipleSorted);
+      var sorted = getColumnProp(column, 'sortable') && (singleSorted || multipleSorted);
       var sortOrder = 0;
       if (singleSorted) sortOrder = props.sortOrder;else if (multipleSorted) sortOrder = multiSortMetaData.order;
       var sortIconElement = createSortIcon(column, sorted, sortOrder);
       var ariaSortData = getAriaSort(column, sorted, sortOrder);
       var sortBadge = createSortBadge(sortMetaDataIndex);
-      var className = classNames(column.props.headerClassName || column.props.className, {
-        'p-sortable-column': column.props.sortable,
+      var className = classNames(getColumnProp(column, 'headerClassName') || getColumnProp(column, 'className'), {
+        'p-sortable-column': getColumnProp(column, 'sortable'),
         'p-highlight': sorted,
         'p-resizable-column': props.resizableColumns && getColumnProp(column, 'resizeable')
       });
-      var headerTooltip = column.props.headerTooltip;
+      var headerTooltip = getColumnProp(column, 'headerTooltip');
       var hasTooltip = ObjectUtils.isNotEmpty(headerTooltip);
       var resizer = createResizer(column);
       return /*#__PURE__*/React.createElement(React.Fragment, {
@@ -1110,8 +1321,8 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
       }, /*#__PURE__*/React.createElement("th", {
         ref: headerCellRef,
         className: className,
-        style: column.props.headerStyle || column.props.style,
-        tabIndex: column.props.sortable ? props.tabIndex : null,
+        style: getColumnProp(column, 'headerStyle') || getColumnProp(column, 'style'),
+        tabIndex: getColumnProp(column, 'sortable') ? props.tabIndex : null,
         onClick: function onClick(e) {
           return onHeaderClick(e, column);
         },
@@ -1121,8 +1332,8 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
         onKeyDown: function onKeyDown(e) {
           return onHeaderKeyDown(e, column);
         },
-        rowSpan: column.props.rowSpan,
-        colSpan: column.props.colSpan,
+        rowSpan: getColumnProp(column, 'rowSpan'),
+        colSpan: getColumnProp(column, 'colSpan'),
         "aria-sort": ariaSortData,
         onDragStart: function onDragStart(e) {
           return _onDragStart(e, column);
@@ -1138,14 +1349,14 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
         }
       }, resizer, /*#__PURE__*/React.createElement("span", {
         className: "p-column-title"
-      }, column.props.header), sortIconElement, sortBadge, filterElement), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+      }, getColumnProp(column, 'header')), sortIconElement, sortBadge, filterElement), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
         target: headerCellRef,
         content: headerTooltip
-      }, column.props.headerTooltipOptions)));
+      }, getColumnProp(column, 'headerTooltipOptions'))));
     }
   };
   var createHeaderRow = function createHeaderRow(row, index) {
-    var rowColumns = React.Children.toArray(row.props.children);
+    var rowColumns = React.Children.toArray(RowBase.getCProp(row, 'children'));
     var rowHeaderCells = rowColumns.map(function (col, i) {
       return createHeaderCell(col, {
         index: i,
@@ -1158,7 +1369,7 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
     }, rowHeaderCells);
   };
   var createColumnGroup = function createColumnGroup() {
-    var rows = React.Children.toArray(props.columnGroup.props.children);
+    var rows = React.Children.toArray(ColumnGroupBase.getCProp(props.columnGroup, 'children'));
     return rows.map(createHeaderRow);
   };
   var createColumns = function createColumns(columns) {
@@ -1330,10 +1541,11 @@ TreeTableScrollableView.displayName = 'TreeTableScrollableView';
 
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var TreeTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
+  var props = TreeTableBase.getProps(inProps);
   var _React$useState = React.useState(props.expandedKeys),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     expandedKeysState = _React$useState2[0],
@@ -1367,6 +1579,7 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     columnOrderState = _React$useState16[0],
     setColumnOrderState = _React$useState16[1];
   var elementRef = React.useRef(null);
+  var tableRef = React.useRef(null);
   var resizerHelperRef = React.useRef(null);
   var reorderIndicatorUpRef = React.useRef(null);
   var reorderIndicatorDownRef = React.useRef(null);
@@ -1639,7 +1852,7 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
           resizeColGroup(_scrollableBodyTable, _resizeColumnIndex, newColumnWidth, null);
           resizeColGroup(_scrollableFooterTable, _resizeColumnIndex, newColumnWidth, null);
         } else {
-          table.style.width = table.offsetWidth + delta + 'px';
+          tableRef.current.style.width = tableRef.current.offsetWidth + delta + 'px';
           resizeColumn.current.style.width = newColumnWidth + 'px';
         }
       }
@@ -1754,7 +1967,7 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       if (allowDrop) {
         var columns = columnOrderState ? getColumns() : React.Children.toArray(props.children);
         var isSameColumn = function isSameColumn(col1, col2) {
-          return col1.props.columnKey || col2.props.columnKey ? ObjectUtils.equals(col1, col2, 'props.columnKey') : ObjectUtils.equals(col1, col2, 'props.field');
+          return getColumnProp(col1, 'columnKey') || getColumnProp(col2, 'columnKey') ? ObjectUtils.equals(col1, col2, 'props.columnKey') : ObjectUtils.equals(col1, col2, 'props.field');
         };
         var dragColIndex = columns.findIndex(function (child) {
           return isSameColumn(child, draggedColumn.current);
@@ -1775,7 +1988,7 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         try {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
             var _column = _step.value;
-            columnOrder.push(_column.props.columnKey || _column.props.field);
+            columnOrder.push(getColumnProp(_column, 'columnKey') || getColumnProp(_column, 'field'));
           }
         } catch (err) {
           _iterator.e(err);
@@ -1810,6 +2023,9 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return parent;
     }
   };
+  var getColumnProp = function getColumnProp(column, name) {
+    return ColumnBase.getCProp(column, name);
+  };
   var getExpandedKeys = function getExpandedKeys() {
     return props.onToggle ? props.expandedKeys : expandedKeysState;
   };
@@ -1835,7 +2051,7 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (columns && columns.length) {
       for (var i = 0; i < columns.length; i++) {
         var child = columns[i];
-        if (child.props.columnKey === key || child.props.field === key) {
+        if (getColumnProp(child, 'columnKey') === key || getColumnProp(child, 'field') === key) {
           return child;
         }
       }
@@ -1890,7 +2106,7 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     try {
       for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
         var col = _step3.value;
-        if (col.props.frozen) {
+        if (getColumnProp(col, 'frozen')) {
           frozenColumns = frozenColumns || [];
           frozenColumns.push(col);
         }
@@ -1909,7 +2125,7 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     try {
       for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
         var col = _step4.value;
-        if (!col.props.frozen) {
+        if (!getColumnProp(col, 'frozen')) {
           scrollableColumns = scrollableColumns || [];
           scrollableColumns.push(col);
         }
@@ -1936,8 +2152,8 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         var globalMatch = false;
         for (var j = 0; j < columns.length; j++) {
           var col = columns[j];
-          var filterMeta = filters ? filters[col.props.field] : null;
-          var filterField = col.props.field;
+          var filterMeta = filters ? filters[getColumnProp(col, 'field')] : null;
+          var filterField = getColumnProp(col, 'field');
           var filterValue = void 0,
             filterConstraint = void 0,
             paramsWithoutNode = void 0,
@@ -1945,9 +2161,9 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
           //local
           if (filterMeta) {
-            var filterMatchMode = filterMeta.matchMode || col.props.filterMatchMode || 'startsWith';
+            var filterMatchMode = filterMeta.matchMode || getColumnProp(col, 'filterMatchMode') || 'startsWith';
             filterValue = filterMeta.value;
-            filterConstraint = filterMatchMode === 'custom' ? col.props.filterFunction : FilterService.filters[filterMatchMode];
+            filterConstraint = filterMatchMode === 'custom' ? getColumnProp(col, 'filterFunction') : FilterService.filters[filterMatchMode];
             options = {
               rowData: node,
               filters: filters,
@@ -1955,7 +2171,7 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
               column: {
                 filterMeta: filterMeta,
                 filterField: filterField,
-                props: col.props
+                props: ColumnBase.getCProps(col)
               }
             };
             paramsWithoutNode = {
@@ -2197,6 +2413,7 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return /*#__PURE__*/React.createElement("div", {
       className: "p-treetable-wrapper"
     }, /*#__PURE__*/React.createElement("table", {
+      ref: tableRef,
       style: props.tableStyle,
       className: props.tableClassName
     }, header, footer, body));
@@ -2271,84 +2488,5 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, otherProps), loader, headerFacet, paginatorTop, table, paginatorBottom, footerFacet, resizeHelper, reorderIndicatorUp, reorderIndicatorDown);
 });
 TreeTable.displayName = 'TreeTable';
-TreeTable.defaultProps = {
-  __TYPE: 'TreeTable',
-  alwaysShowPaginator: true,
-  autoLayout: false,
-  className: null,
-  columnResizeMode: 'fit',
-  contextMenuSelectionKey: null,
-  currentPageReportTemplate: '({currentPage} of {totalPages})',
-  defaultSortOrder: 1,
-  emptyMessage: null,
-  expandedKeys: null,
-  filterDelay: 300,
-  filterLocale: undefined,
-  filterMode: 'lenient',
-  filters: null,
-  first: null,
-  footer: null,
-  footerColumnGroup: null,
-  frozenFooterColumnGroup: null,
-  frozenHeaderColumnGroup: null,
-  frozenWidth: null,
-  globalFilter: null,
-  globalFilterMatchMode: FilterMatchMode.CONTAINS,
-  header: null,
-  headerColumnGroup: null,
-  id: null,
-  lazy: false,
-  loading: false,
-  loadingIcon: 'pi pi-spinner',
-  metaKeySelection: true,
-  multiSortMeta: null,
-  onColReorder: null,
-  onCollapse: null,
-  onColumnResizeEnd: null,
-  onContextMenu: null,
-  onContextMenuSelectionChange: null,
-  onExpand: null,
-  onFilter: null,
-  onPage: null,
-  onRowClick: null,
-  onSelect: null,
-  onSelectionChange: null,
-  onSort: null,
-  onToggle: null,
-  onUnselect: null,
-  pageLinkSize: 5,
-  paginator: false,
-  paginatorClassName: null,
-  paginatorDropdownAppendTo: null,
-  paginatorLeft: null,
-  paginatorPosition: 'bottom',
-  paginatorRight: null,
-  paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
-  propagateSelectionDown: true,
-  propagateSelectionUp: true,
-  removableSort: false,
-  reorderableColumns: false,
-  resizableColumns: false,
-  rowClassName: null,
-  rowHover: false,
-  rows: null,
-  rowsPerPageOptions: null,
-  scrollHeight: null,
-  scrollable: false,
-  selectOnEdit: true,
-  selectionKeys: null,
-  selectionMode: null,
-  showGridlines: false,
-  sortField: null,
-  sortMode: 'single',
-  sortOrder: null,
-  stripedRows: false,
-  style: null,
-  tabIndex: 0,
-  tableClassName: null,
-  tableStyle: null,
-  totalRecords: null,
-  value: null
-};
 
 export { TreeTable };