primereact 9.2.3 → 9.3.1

package/datatable/datatable.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks, paginator, virtualscroller, overlayservice, ripple, button, csstransition, dropdown, inputtext, portal, tooltip) {
+this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks, arrowdown, arrowup, spinner, paginator, virtualscroller, overlayservice, ripple, check, times, pencil, chevrondown, chevronright, bars, button, csstransition, dropdown, inputtext, portal, filter, filterslash, trash, plus, tooltip, sortalt, sortamountdown, sortamountupalt) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -216,7 +216,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       resizeable: true,
       rowEditor: false,
       rowReorder: false,
-      rowReorderIcon: 'pi pi-bars',
+      rowReorderIcon: null,
       rowSpan: null,
       selectionMode: null,
       showAddButton: true,
@@ -249,10 +249,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       __TYPE: 'DataTable',
       alwaysShowPaginator: true,
       breakpoint: '960px',
+      checkIcon: null,
       cellClassName: null,
       cellSelection: false,
       className: null,
-      collapsedRowIcon: 'pi pi-chevron-right',
+      collapsedRowIcon: null,
       columnResizeMode: 'fit',
       compareSelectionBy: 'deepEquals',
       contextMenuSelection: null,
@@ -263,11 +264,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       dataKey: null,
       defaultSortOrder: 1,
       dragSelection: false,
-      editMode: 'cell',
+      editMode: null,
       editingRows: null,
       emptyMessage: null,
       expandableRowGroups: false,
-      expandedRowIcon: 'pi pi-chevron-down',
+      expandedRowIcon: null,
       expandedRows: null,
       exportFilename: 'download',
       exportFunction: null,
@@ -290,7 +291,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       isDataSelectable: null,
       lazy: false,
       loading: false,
-      loadingIcon: 'pi pi-spinner',
+      loadingIcon: null,
       metaKeySelection: true,
       multiSortMeta: null,
       onAllRowsSelect: null,
@@ -338,10 +339,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       removableSort: false,
       reorderableColumns: false,
       reorderableRows: false,
+      reorderIndicatorDownIcon: null,
+      reorderIndicatorUpIcon: null,
       resizableColumns: false,
       responsiveLayout: 'scroll',
       rowClassName: null,
       rowEditValidator: null,
+      rowEditorCancelIcon: null,
+      rowEditorInitIcon: null,
+      rowEditorSaveIcon: null,
       rowExpansionTemplate: null,
       rowGroupFooterTemplate: null,
       rowGroupHeaderTemplate: null,
@@ -364,6 +370,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       showSelectionElement: null,
       size: 'normal',
       sortField: null,
+      sortIcon: null,
       sortMode: 'single',
       sortOrder: null,
       stateKey: null,
@@ -447,8 +454,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       'p-disabled': props.disabled,
       'p-focus': focusedState
     });
-    var iconClassName = utils.classNames('p-checkbox-icon', {
-      'pi pi-check': props.checked
+    var iconClassName = 'p-checkbox-icon';
+    var icon = props.checked ? props.checkIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, {
+      className: iconClassName
+    }) : null;
+    var checkIcon = utils.IconUtils.getJSXIcon(icon, {
+      className: iconClassName
+    }, {
+      props: props
     });
     var tabIndex = props.disabled ? null : '0';
     return /*#__PURE__*/React__namespace.createElement("div", {
@@ -463,9 +476,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       onFocus: onFocus,
       onBlur: onBlur,
       "aria-label": props.ariaLabel
-    }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: iconClassName
-    })));
+    }, checkIcon));
   });
   RowCheckbox.displayName = 'RowCheckbox';
 
@@ -531,8 +542,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
   });
   RowRadioButton.displayName = 'RowRadioButton';
 
-  function ownKeys$7(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$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  function ownKeys$8(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$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     var _React$useState = React__namespace.useState(props.editing),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -610,7 +621,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     };
     var getCellCallbackParams = function getCellCallbackParams(event) {
       var params = getCellParams();
-      return _objectSpread$7({
+      return _objectSpread$8({
         originalEvent: event
       }, params);
     };
@@ -648,7 +659,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       var callbackParams = getCellCallbackParams(event);
       var newRowData = editingRowDataState;
       var newValue = resolveFieldData(newRowData);
-      var params = _objectSpread$7(_objectSpread$7({}, callbackParams), {}, {
+      var params = _objectSpread$8(_objectSpread$8({}, callbackParams), {}, {
         newRowData: newRowData,
         newValue: newValue
       });
@@ -714,7 +725,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     };
     var updateStickyPosition = function updateStickyPosition() {
       if (getColumnProp('frozen')) {
-        var styleObject = _objectSpread$7({}, styleObjectState);
+        var styleObject = _objectSpread$8({}, styleObjectState);
         var align = getColumnProp('alignFrozen');
         if (align === 'right') {
           var right = 0;
@@ -736,7 +747,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       }
     };
     var editorCallback = function editorCallback(val) {
-      var editingRowData = _objectSpread$7({}, editingRowDataState);
+      var editingRowData = _objectSpread$8({}, editingRowDataState);
       editingRowData[field] = val;
       setEditingRowDataState(editingRowData);
 
@@ -933,9 +944,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       }
     }, [props.editingMeta]);
     React__namespace.useEffect(function () {
-      if (props.editMode === 'cell' || props.editMode === 'row') {
+      if (props.editMode === 'row') {
         var callbackParams = getCellCallbackParams();
-        var params = _objectSpread$7(_objectSpread$7({}, callbackParams), {}, {
+        var params = _objectSpread$8(_objectSpread$8({}, callbackParams), {}, {
           editing: editingState,
           editingKey: editingKey
         });
@@ -1024,39 +1035,47 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           checked: props.selected,
           onChange: onCheckboxChange,
           tabIndex: props.tabIndex,
-          ariaLabel: label
+          ariaLabel: label,
+          checkIcon: props.checkIcon
         }));
       } else if (rowReorder) {
         var showReorder = props.showRowReorderElement ? props.showRowReorderElement(props.rowData, {
           rowIndex: props.rowIndex,
           props: props.tableProps
         }) : true;
-        content = showReorder && /*#__PURE__*/React__namespace.createElement("i", {
-          className: utils.classNames('p-datatable-reorderablerow-handle', getColumnProp('rowReorderIcon'))
+        var rowReorderIconClassName = 'p-datatable-reorderablerow-handle';
+        var rowReorderIcon = getColumnProp('rowReorderIcon') || /*#__PURE__*/React__namespace.createElement(bars.BarsIcon, {
+          className: rowReorderIconClassName
+        });
+        content = showReorder && utils.IconUtils.getJSXIcon(rowReorderIcon, {
+          className: rowReorderIconClassName
+        }, {
+          props: props
         });
       } else if (expander) {
-        var iconClassName = utils.classNames('p-row-toggler-icon', props.expanded ? props.expandedRowIcon : props.collapsedRowIcon);
+        var iconProps = {
+          className: 'p-row-toggler-icon',
+          'aria-hidden': true
+        };
+        var icon = props.expanded ? props.expandedRowIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, iconProps) : props.collapsedRowIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, iconProps);
+        var togglerIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$8({}, iconProps), {
+          props: props
+        });
         var ariaControls = "".concat(props.tableSelector, "_content_").concat(props.rowIndex, "_expanded");
         var _ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
         var _ariaLabelText = utils.ObjectUtils.resolveFieldData(props.rowData, _ariaLabelField);
         var _label = "".concat(props.expanded ? PrimeReact.ariaLabel('collapseLabel') : PrimeReact.ariaLabel('expandLabel'), " ").concat(_ariaLabelText);
         var expanderProps = {
           onClick: onRowToggle,
-          className: 'p-row-toggler p-link',
-          iconClassName: iconClassName
+          className: 'p-row-toggler p-link'
         };
-        content = /*#__PURE__*/React__namespace.createElement("button", {
-          className: expanderProps.className,
-          onClick: expanderProps.onClick,
+        content = /*#__PURE__*/React__namespace.createElement("button", _extends({}, expanderProps, {
           type: "button",
           "aria-expanded": props.expanded,
           "aria-controls": ariaControls,
           tabIndex: props.tabIndex,
           "aria-label": _label
-        }, /*#__PURE__*/React__namespace.createElement("span", {
-          className: expanderProps.iconClassName,
-          "aria-hidden": "true"
-        }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+        }), togglerIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
         if (body) {
           expanderProps['element'] = content;
           content = utils.ObjectUtils.getJSXElement(body, props.rowData, {
@@ -1070,15 +1089,37 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         }
       } else if (isRowEditor && rowEditor) {
         var rowEditorProps = {};
+        var rowEditorSaveIconClassName = 'p-row-editor-save-icon',
+          rowEditorCancelIconClassName = 'p-row-editor-cancel-icon',
+          rowEditorInitIconClassName = 'p-row-editor-init-icon';
+        var rowEditorSaveIcon = utils.IconUtils.getJSXIcon(props.rowEditorSaveIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, {
+          className: rowEditorSaveIconClassName
+        }), {
+          className: rowEditorSaveIconClassName
+        }, {
+          props: props
+        });
+        var rowEditorCancelIcon = utils.IconUtils.getJSXIcon(props.rowEditorCancelIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, {
+          className: rowEditorCancelIconClassName
+        }), {
+          className: rowEditorCancelIconClassName
+        }, {
+          props: props
+        });
+        var rowEditorInitIcon = utils.IconUtils.getJSXIcon(props.rowEditorInitIcon || /*#__PURE__*/React__namespace.createElement(pencil.PencilIcon, {
+          className: rowEditorInitIconClassName
+        }), {
+          className: rowEditorInitIconClassName
+        }, {
+          props: props
+        });
         if (editingState) {
           rowEditorProps = {
             editing: true,
             onSaveClick: onRowEditSave,
             saveClassName: 'p-row-editor-save p-link',
-            saveIconClassName: 'p-row-editor-save-icon pi pi-fw pi-check',
             onCancelClick: onRowEditCancel,
-            cancelClassName: 'p-row-editor-cancel p-link',
-            cancelIconClassName: 'p-row-editor-cancel-icon pi pi-fw pi-times'
+            cancelClassName: 'p-row-editor-cancel p-link'
           };
           content = /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("button", {
             type: "button",
@@ -1086,23 +1127,18 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
             onClick: rowEditorProps.onSaveClick,
             className: rowEditorProps.saveClassName,
             tabIndex: props.tabIndex
-          }, /*#__PURE__*/React__namespace.createElement("span", {
-            className: rowEditorProps.saveIconClassName
-          }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("button", {
+          }, rowEditorSaveIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("button", {
             type: "button",
             name: "row-cancel",
             onClick: rowEditorProps.onCancelClick,
             className: rowEditorProps.cancelClassName,
             tabIndex: props.tabIndex
-          }, /*#__PURE__*/React__namespace.createElement("span", {
-            className: rowEditorProps.cancelIconClassName
-          }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
+          }, rowEditorCancelIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
         } else {
           rowEditorProps = {
             editing: false,
             onInitClick: onRowEditInit,
-            initClassName: 'p-row-editor-init p-link',
-            initIconClassName: 'p-row-editor-init-icon pi pi-fw pi-pencil'
+            initClassName: 'p-row-editor-init p-link'
           };
           content = /*#__PURE__*/React__namespace.createElement("button", {
             type: "button",
@@ -1110,9 +1146,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
             onClick: rowEditorProps.onInitClick,
             className: rowEditorProps.initClassName,
             tabIndex: props.tabIndex
-          }, /*#__PURE__*/React__namespace.createElement("span", {
-            className: rowEditorProps.initIconClassName
-          }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+          }, rowEditorInitIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
         }
         if (body) {
           rowEditorProps['element'] = content;
@@ -1177,8 +1211,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
   });
   BodyCell.displayName = 'BodyCell';
 
-  function ownKeys$6(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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  function ownKeys$7(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$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
     var _React$useState = React__namespace.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -1396,7 +1430,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           newData = e.newData;
         if (dataKey) {
           var dataKeyValue = String(utils.ObjectUtils.resolveFieldData(data, dataKey));
-          editingRows = props.editingRows ? _objectSpread$6({}, props.editingRows) : {};
+          editingRows = props.editingRows ? _objectSpread$7({}, props.editingRows) : {};
           if (!isEditing) {
             delete editingRows[dataKeyValue];
             // if the key value was changed, stop editing for the new key value too
@@ -1470,7 +1504,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     var createContent = function createContent() {
       return props.columns.map(function (col, i) {
         if (shouldRenderBodyCell(props.value, col, props.index)) {
-          var key = "".concat(getColumnProp(col, 'columnKey') || getColumnProp(col, 'field'), "_").concat(i);
+          var key = "".concat(props.rowIndex, "_").concat(getColumnProp(col, 'columnKey') || getColumnProp(col, 'field'), "_").concat(i);
           var rowSpan = props.rowGroupMode === 'rowspan' ? calculateRowGroupSize(props.value, col, props.index) : null;
           return /*#__PURE__*/React__namespace.createElement(BodyCell, {
             key: key,
@@ -1512,6 +1546,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
             expanded: props.expanded,
             expandedRowIcon: props.expandedRowIcon,
             collapsedRowIcon: props.collapsedRowIcon,
+            checkIcon: props.checkIcon,
             virtualScrollerOptions: props.virtualScrollerOptions
           });
         }
@@ -1558,6 +1593,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
   });
   BodyRow.displayName = 'BodyRow';
 
+  function ownKeys$6(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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var RowTogglerButton = /*#__PURE__*/React__namespace.memo(function (props) {
     var onClick = function onClick(event) {
       props.onClick({
@@ -1565,7 +1602,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         data: props.rowData
       });
     };
-    var iconClassName = utils.classNames('p-row-toggler-icon', props.expanded ? props.expandedRowIcon : props.collapsedRowIcon);
+    var iconProps = {
+      className: 'p-row-toggler-icon',
+      'aria-hidden': true
+    };
+    var icon = props.expanded ? props.expandedRowIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, iconProps) : props.collapsedRowIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, iconProps);
+    var togglerIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$6({}, iconProps), {
+      props: props
+    });
     var label = props.expanded ? PrimeReact.ariaLabel('collapseLabel') : PrimeReact.ariaLabel('expandLabel');
     return /*#__PURE__*/React__namespace.createElement("button", {
       type: "button",
@@ -1573,10 +1617,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       className: "p-row-toggler p-link",
       tabIndex: props.tabIndex,
       "aria-label": label
-    }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: iconClassName,
-      "aria-hidden": "true"
-    }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+    }, togglerIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
   });
   RowTogglerButton.displayName = 'RowTogglerButton';
 
@@ -2432,6 +2473,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           expanded: expanded,
           expandedRowIcon: props.expandedRowIcon,
           collapsedRowIcon: props.collapsedRowIcon,
+          checkIcon: props.checkIcon,
           rowClassName: props.rowClassName,
           virtualScrollerOptions: props.virtualScrollerOptions
         });
@@ -3070,6 +3112,13 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       return props.display === 'menu' ? createFilterElement(fieldConstraint, index) : null;
     };
     var createMenuButton = function createMenuButton() {
+      var iconProps = {
+        'aria-hidden': true
+      };
+      var icon = props.columnFilterIcon || /*#__PURE__*/React__namespace.createElement(filter.FilterIcon, iconProps);
+      var columnFilterIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$3({}, iconProps), {
+        props: props
+      });
       if (showMenuButton()) {
         var _className = utils.classNames('p-column-filter-menu-button p-link', {
           'p-column-filter-menu-button-open': overlayVisibleState,
@@ -3085,14 +3134,18 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           onClick: toggleMenu,
           onKeyDown: onToggleButtonKeyDown,
           "aria-label": label
-        }, /*#__PURE__*/React__namespace.createElement("span", {
-          className: "pi pi-filter-icon pi-filter",
-          "aria-hidden": "true"
-        }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+        }, columnFilterIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       }
       return null;
     };
     var createClearButton = function createClearButton() {
+      var iconProps = {
+        'aria-hidden': true
+      };
+      var icon = props.filterClearIcon || /*#__PURE__*/React__namespace.createElement(filterslash.FilterSlashIcon, iconProps);
+      var filterClearIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$3({}, iconProps), {
+        props: props
+      });
       if (getColumnProp('showClearButton') && props.display === 'row') {
         var _className2 = utils.classNames('p-column-filter-clear-button p-link', {
           'p-hidden-space': !hasRowFilter()
@@ -3103,10 +3156,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           type: "button",
           onClick: clearFilter,
           "aria-label": clearLabel
-        }, /*#__PURE__*/React__namespace.createElement("span", {
-          className: "pi pi-filter-slash",
-          "aria-hidden": "true"
-        }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+        }, filterClearIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       }
       return null;
     };
@@ -3180,7 +3230,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         var removeRuleLabel = removeRuleButtonLabel();
         return /*#__PURE__*/React__namespace.createElement(button.Button, {
           type: "button",
-          icon: "pi pi-trash",
+          icon: props.filterRemoveIcon || /*#__PURE__*/React__namespace.createElement(trash.TrashIcon, null),
           className: "p-column-filter-remove-button p-button-text p-button-danger p-button-sm",
           onClick: function onClick() {
             return removeConstraint(index);
@@ -3212,7 +3262,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         }, /*#__PURE__*/React__namespace.createElement(button.Button, {
           type: "button",
           label: addRuleLabel,
-          icon: "pi pi-plus",
+          icon: props.filterAddIcon || /*#__PURE__*/React__namespace.createElement(plus.PlusIcon, null),
           className: "p-column-filter-add-button p-button-text p-button-sm",
           onClick: addConstraint
         }));
@@ -3357,8 +3407,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       'p-disabled': props.disabled,
       'p-focus': focusedState
     });
-    var iconClassName = utils.classNames('p-checkbox-icon', {
-      'pi pi-check': props.checked
+    var iconClassName = 'p-checkbox-icon';
+    var icon = props.checked ? props.checkIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, {
+      className: iconClassName
+    }) : null;
+    var checkIcon = utils.IconUtils.getJSXIcon(icon, {
+      className: iconClassName
+    }, {
+      props: props
     });
     var tabIndex = props.disabled ? null : 0;
     return /*#__PURE__*/React__namespace.createElement("div", {
@@ -3372,9 +3428,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyDown: onKeyDown
-    }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: iconClassName
-    })));
+    }, checkIcon));
   });
   HeaderCheckbox.displayName = 'HeaderCheckbox';
 
@@ -3430,8 +3484,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       var sorted = _ref.sorted,
         sortOrder = _ref.sortOrder;
       if (getColumnProp('sortable')) {
-        var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt' : 'pi-sort-alt';
-        if (sortIcon === 'pi-sort-amount-down') return 'descending';else if (sortIcon === 'pi-sort-amount-up-alt') return 'ascending';else return 'none';
+        if (sorted && sortOrder < 0) return 'descending';else if (sorted && sortOrder > 0) return 'ascending';else return 'none';
       }
       return null;
     };
@@ -3573,11 +3626,22 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       var sorted = _ref2.sorted,
         sortOrder = _ref2.sortOrder;
       if (getColumnProp('sortable')) {
-        var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt' : 'pi-sort-alt';
-        var className = utils.classNames('p-sortable-column-icon pi pi-fw', sortIcon);
-        return /*#__PURE__*/React__namespace.createElement("span", {
-          className: className
+        var iconClassName = 'p-sortable-column-icon';
+        var icon = sorted ? sortOrder < 0 ? /*#__PURE__*/React__namespace.createElement(sortamountdown.SortAmountDownIcon, {
+          className: iconClassName
+        }) : /*#__PURE__*/React__namespace.createElement(sortamountupalt.SortAmountUpAltIcon, {
+          className: iconClassName
+        }) : /*#__PURE__*/React__namespace.createElement(sortalt.SortAltIcon, {
+          className: iconClassName
         });
+        var sortIcon = utils.IconUtils.getJSXIcon(props.sortIcon || icon, {
+          className: iconClassName
+        }, {
+          props: props,
+          sorted: sorted,
+          sortOrder: sortOrder
+        });
+        return sortIcon;
       }
       return null;
     };
@@ -3739,6 +3803,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           groupRowsBy: props.groupRowsBy,
           groupRowSortField: props.groupRowSortField,
           sortMode: props.sortMode,
+          sortIcon: props.sortIcon,
           sortField: props.sortField,
           sortOrder: props.sortOrder,
           multiSortMeta: props.multiSortMeta,
@@ -4233,7 +4298,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         var _data = props.selectionPageOnly ? dataToRender(processedData) : processedData;
         var val = utils.ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(props.frozenValue), _toConsumableArray(_data)) : _data;
         var selectableVal = getSelectableData(val);
-        return selectableVal && props.selection && selectableVal.every(function (sv) {
+        return utils.ObjectUtils.isNotEmpty(selectableVal) && props.selection && selectableVal.every(function (sv) {
           return props.selection.some(function (s) {
             return isEquals(s, sv);
           });
@@ -4693,6 +4758,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       return value;
     };
     var multisortField = function multisortField(data1, data2, multiSortMeta, index) {
+      if (!multiSortMeta || !multiSortMeta[index]) {
+        return;
+      }
       var value1 = utils.ObjectUtils.resolveFieldData(data1, multiSortMeta[index].field);
       var value2 = utils.ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field);
 
@@ -5004,7 +5072,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     };
     hooks.useMountEffect(function () {
       !attributeSelectorState && setAttributeSelectorState(utils.UniqueComponentId());
-      setFiltersState(cloneFilters(props.filters));
+
+      //setFiltersState(cloneFilters(props.filters)); // Github #4248
       setD_filtersState(cloneFilters(props.filters));
       if (isStateful()) {
         restoreState();
@@ -5085,12 +5154,19 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     });
     var createLoader = function createLoader() {
       if (props.loading) {
-        var iconClassName = utils.classNames('p-datatable-loading-icon pi-spin', props.loadingIcon);
+        var iconClassName = 'p-datatable-loading-icon';
+        var icon = props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, {
+          className: iconClassName,
+          spin: true
+        });
+        var loadingIcon = utils.IconUtils.getJSXIcon(icon, {
+          className: iconClassName
+        }, {
+          props: props
+        });
         return /*#__PURE__*/React__namespace.createElement("div", {
           className: "p-datatable-loading-overlay p-component-overlay"
-        }, /*#__PURE__*/React__namespace.createElement("i", {
-          className: iconClassName
-        }));
+        }, loadingIcon);
       }
       return null;
     };
@@ -5129,6 +5205,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         onColumnResizerDoubleClick: props.onColumnResizerDoubleClick,
         sortMode: props.sortMode,
         sortField: sortField,
+        sortIcon: props.sortIcon,
         sortOrder: sortOrder,
         multiSortMeta: multiSortMeta,
         groupRowsBy: props.groupRowsBy,
@@ -5227,6 +5304,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         showRowReorderElement: props.showRowReorderElement,
         expandedRowIcon: props.expandedRowIcon,
         collapsedRowIcon: props.collapsedRowIcon,
+        checkIcon: props.checkIcon,
         rowClassName: props.rowClassName,
         virtualScrollerOptions: options,
         isVirtualScrollerDisabled: true
@@ -5300,6 +5378,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         showRowReorderElement: props.showRowReorderElement,
         expandedRowIcon: props.expandedRowIcon,
         collapsedRowIcon: props.collapsedRowIcon,
+        checkIcon: props.checkIcon,
         rowClassName: props.rowClassName,
         virtualScrollerContentRef: contentRef,
         virtualScrollerOptions: options,
@@ -5426,15 +5505,25 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           position: 'absolute',
           display: 'none'
         };
-        return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("span", {
-          ref: reorderIndicatorUpRef,
-          className: "pi pi-arrow-down p-datatable-reorder-indicator-up",
-          style: style
-        }), /*#__PURE__*/React__namespace.createElement("span", {
-          ref: reorderIndicatorDownRef,
-          className: "pi pi-arrow-up p-datatable-reorder-indicator-down",
-          style: style
-        }));
+        var reorderIndicatorUpProps = {
+          className: 'p-datatable-reorder-indicator-up',
+          style: _objectSpread({}, style)
+        };
+        var reorderIndicatorUpIcon = utils.IconUtils.getJSXIcon(props.reorderIndicatorUpIcon || /*#__PURE__*/React__namespace.createElement(arrowdown.ArrowDownIcon, null), undefined, {
+          props: props
+        });
+        var reorderIndicatorDownProps = {
+          className: 'p-datatable-reorder-indicator-down',
+          style: _objectSpread({}, style)
+        };
+        var reorderIndicatorDownIcon = utils.IconUtils.getJSXIcon(props.reorderIndicatorDownIcon || /*#__PURE__*/React__namespace.createElement(arrowup.ArrowUpIcon, null), undefined, {
+          props: props
+        });
+        return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("span", _extends({
+          ref: reorderIndicatorUpRef
+        }, reorderIndicatorUpProps), reorderIndicatorUpIcon), /*#__PURE__*/React__namespace.createElement("span", _extends({
+          ref: reorderIndicatorDownRef
+        }, reorderIndicatorDownProps), reorderIndicatorDownIcon));
       }
       return null;
     };
@@ -5487,4 +5576,4 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
 
   return exports;
 
-})({}, React, primereact.api, primereact.utils, primereact.hooks, primereact.paginator, primereact.virtualscroller, primereact.overlayservice, primereact.ripple, primereact.button, primereact.csstransition, primereact.dropdown, primereact.inputtext, primereact.portal, primereact.tooltip);
+})({}, React, primereact.api, primereact.utils, primereact.hooks, primereact.icons.arrowdown, primereact.icons.arrowup, primereact.icons.spinner, primereact.paginator, primereact.virtualscroller, primereact.overlayservice, primereact.ripple, primereact.icons.check, primereact.icons.times, primereact.icons.pencil, primereact.icons.chevrondown, primereact.icons.chevronright, primereact.icons.bars, primereact.button, primereact.csstransition, primereact.dropdown, primereact.inputtext, primereact.portal, primereact.icons.filter, primereact.icons.filterslash, primereact.icons.trash, primereact.icons.plus, primereact.tooltip, primereact.icons.sortalt, primereact.icons.sortamountdown, primereact.icons.sortamountupalt);