primereact 9.2.3 → 9.3.1

package/datatable/datatable.esm.js

@@ -1,17 +1,33 @@
 import * as React from 'react';
 import PrimeReact, { FilterMatchMode, ariaLabel, localeOption, FilterOperator, FilterService } from 'primereact/api';
-import { ObjectUtils, classNames, DomHandler, ZIndexUtils, UniqueComponentId } from 'primereact/utils';
+import { ObjectUtils, classNames, IconUtils, DomHandler, ZIndexUtils, UniqueComponentId } from 'primereact/utils';
 import { useEventListener, useUpdateEffect, useUnmountEffect, useOverlayListener, usePrevious, useMountEffect } from 'primereact/hooks';
+import { ArrowDownIcon } from 'primereact/icons/arrowdown';
+import { ArrowUpIcon } from 'primereact/icons/arrowup';
+import { SpinnerIcon } from 'primereact/icons/spinner';
 import { Paginator } from 'primereact/paginator';
 import { VirtualScroller } from 'primereact/virtualscroller';
 import { OverlayService } from 'primereact/overlayservice';
 import { Ripple } from 'primereact/ripple';
+import { CheckIcon } from 'primereact/icons/check';
+import { TimesIcon } from 'primereact/icons/times';
+import { PencilIcon } from 'primereact/icons/pencil';
+import { ChevronDownIcon } from 'primereact/icons/chevrondown';
+import { ChevronRightIcon } from 'primereact/icons/chevronright';
+import { BarsIcon } from 'primereact/icons/bars';
 import { Button } from 'primereact/button';
 import { CSSTransition } from 'primereact/csstransition';
 import { Dropdown } from 'primereact/dropdown';
 import { InputText } from 'primereact/inputtext';
 import { Portal } from 'primereact/portal';
+import { FilterIcon } from 'primereact/icons/filter';
+import { FilterSlashIcon } from 'primereact/icons/filterslash';
+import { TrashIcon } from 'primereact/icons/trash';
+import { PlusIcon } from 'primereact/icons/plus';
 import { Tooltip } from 'primereact/tooltip';
+import { SortAltIcon } from 'primereact/icons/sortalt';
+import { SortAmountDownIcon } from 'primereact/icons/sortamountdown';
+import { SortAmountUpAltIcon } from 'primereact/icons/sortamountupalt';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -204,7 +220,7 @@ var ColumnBase = {
     resizeable: true,
     rowEditor: false,
     rowReorder: false,
-    rowReorderIcon: 'pi pi-bars',
+    rowReorderIcon: null,
     rowSpan: null,
     selectionMode: null,
     showAddButton: true,
@@ -237,10 +253,11 @@ var DataTableBase = {
     __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,
@@ -251,11 +268,11 @@ var DataTableBase = {
     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,
@@ -278,7 +295,7 @@ var DataTableBase = {
     isDataSelectable: null,
     lazy: false,
     loading: false,
-    loadingIcon: 'pi pi-spinner',
+    loadingIcon: null,
     metaKeySelection: true,
     multiSortMeta: null,
     onAllRowsSelect: null,
@@ -326,10 +343,15 @@ var DataTableBase = {
     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,
@@ -352,6 +374,7 @@ var DataTableBase = {
     showSelectionElement: null,
     size: 'normal',
     sortField: null,
+    sortIcon: null,
     sortMode: 'single',
     sortOrder: null,
     stateKey: null,
@@ -435,8 +458,14 @@ var RowCheckbox = /*#__PURE__*/React.memo(function (props) {
     'p-disabled': props.disabled,
     'p-focus': focusedState
   });
-  var iconClassName = classNames('p-checkbox-icon', {
-    'pi pi-check': props.checked
+  var iconClassName = 'p-checkbox-icon';
+  var icon = props.checked ? props.checkIcon || /*#__PURE__*/React.createElement(CheckIcon, {
+    className: iconClassName
+  }) : null;
+  var checkIcon = IconUtils.getJSXIcon(icon, {
+    className: iconClassName
+  }, {
+    props: props
   });
   var tabIndex = props.disabled ? null : '0';
   return /*#__PURE__*/React.createElement("div", {
@@ -451,9 +480,7 @@ var RowCheckbox = /*#__PURE__*/React.memo(function (props) {
     onFocus: onFocus,
     onBlur: onBlur,
     "aria-label": props.ariaLabel
-  }, /*#__PURE__*/React.createElement("span", {
-    className: iconClassName
-  })));
+  }, checkIcon));
 });
 RowCheckbox.displayName = 'RowCheckbox';
 
@@ -519,8 +546,8 @@ var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
 });
 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.memo(function (props) {
   var _React$useState = React.useState(props.editing),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -598,7 +625,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   };
   var getCellCallbackParams = function getCellCallbackParams(event) {
     var params = getCellParams();
-    return _objectSpread$7({
+    return _objectSpread$8({
       originalEvent: event
     }, params);
   };
@@ -636,7 +663,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     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
     });
@@ -702,7 +729,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   };
   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;
@@ -724,7 +751,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     }
   };
   var editorCallback = function editorCallback(val) {
-    var editingRowData = _objectSpread$7({}, editingRowDataState);
+    var editingRowData = _objectSpread$8({}, editingRowDataState);
     editingRowData[field] = val;
     setEditingRowDataState(editingRowData);
 
@@ -921,9 +948,9 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     }
   }, [props.editingMeta]);
   React.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
       });
@@ -1012,39 +1039,47 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         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.createElement("i", {
-        className: classNames('p-datatable-reorderablerow-handle', getColumnProp('rowReorderIcon'))
+      var rowReorderIconClassName = 'p-datatable-reorderablerow-handle';
+      var rowReorderIcon = getColumnProp('rowReorderIcon') || /*#__PURE__*/React.createElement(BarsIcon, {
+        className: rowReorderIconClassName
+      });
+      content = showReorder && IconUtils.getJSXIcon(rowReorderIcon, {
+        className: rowReorderIconClassName
+      }, {
+        props: props
       });
     } else if (expander) {
-      var iconClassName = 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.createElement(ChevronDownIcon, iconProps) : props.collapsedRowIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, iconProps);
+      var togglerIcon = 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 = ObjectUtils.resolveFieldData(props.rowData, _ariaLabelField);
       var _label = "".concat(props.expanded ? ariaLabel('collapseLabel') : 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.createElement("button", {
-        className: expanderProps.className,
-        onClick: expanderProps.onClick,
+      content = /*#__PURE__*/React.createElement("button", _extends({}, expanderProps, {
         type: "button",
         "aria-expanded": props.expanded,
         "aria-controls": ariaControls,
         tabIndex: props.tabIndex,
         "aria-label": _label
-      }, /*#__PURE__*/React.createElement("span", {
-        className: expanderProps.iconClassName,
-        "aria-hidden": "true"
-      }), /*#__PURE__*/React.createElement(Ripple, null));
+      }), togglerIcon, /*#__PURE__*/React.createElement(Ripple, null));
       if (body) {
         expanderProps['element'] = content;
         content = ObjectUtils.getJSXElement(body, props.rowData, {
@@ -1058,15 +1093,37 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       }
     } 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 = IconUtils.getJSXIcon(props.rowEditorSaveIcon || /*#__PURE__*/React.createElement(CheckIcon, {
+        className: rowEditorSaveIconClassName
+      }), {
+        className: rowEditorSaveIconClassName
+      }, {
+        props: props
+      });
+      var rowEditorCancelIcon = IconUtils.getJSXIcon(props.rowEditorCancelIcon || /*#__PURE__*/React.createElement(TimesIcon, {
+        className: rowEditorCancelIconClassName
+      }), {
+        className: rowEditorCancelIconClassName
+      }, {
+        props: props
+      });
+      var rowEditorInitIcon = IconUtils.getJSXIcon(props.rowEditorInitIcon || /*#__PURE__*/React.createElement(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
           type: "button",
@@ -1074,23 +1131,18 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
           onClick: rowEditorProps.onSaveClick,
           className: rowEditorProps.saveClassName,
           tabIndex: props.tabIndex
-        }, /*#__PURE__*/React.createElement("span", {
-          className: rowEditorProps.saveIconClassName
-        }), /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("button", {
+        }, rowEditorSaveIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("button", {
           type: "button",
           name: "row-cancel",
           onClick: rowEditorProps.onCancelClick,
           className: rowEditorProps.cancelClassName,
           tabIndex: props.tabIndex
-        }, /*#__PURE__*/React.createElement("span", {
-          className: rowEditorProps.cancelIconClassName
-        }), /*#__PURE__*/React.createElement(Ripple, null)));
+        }, rowEditorCancelIcon, /*#__PURE__*/React.createElement(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.createElement("button", {
           type: "button",
@@ -1098,9 +1150,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
           onClick: rowEditorProps.onInitClick,
           className: rowEditorProps.initClassName,
           tabIndex: props.tabIndex
-        }, /*#__PURE__*/React.createElement("span", {
-          className: rowEditorProps.initIconClassName
-        }), /*#__PURE__*/React.createElement(Ripple, null));
+        }, rowEditorInitIcon, /*#__PURE__*/React.createElement(Ripple, null));
       }
       if (body) {
         rowEditorProps['element'] = content;
@@ -1165,8 +1215,8 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
 });
 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.memo(function (props) {
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -1384,7 +1434,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
         newData = e.newData;
       if (dataKey) {
         var dataKeyValue = String(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
@@ -1458,7 +1508,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
   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.createElement(BodyCell, {
           key: key,
@@ -1500,6 +1550,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
           expanded: props.expanded,
           expandedRowIcon: props.expandedRowIcon,
           collapsedRowIcon: props.collapsedRowIcon,
+          checkIcon: props.checkIcon,
           virtualScrollerOptions: props.virtualScrollerOptions
         });
       }
@@ -1546,6 +1597,8 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
 });
 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.memo(function (props) {
   var onClick = function onClick(event) {
     props.onClick({
@@ -1553,7 +1606,14 @@ var RowTogglerButton = /*#__PURE__*/React.memo(function (props) {
       data: props.rowData
     });
   };
-  var iconClassName = 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.createElement(ChevronDownIcon, iconProps) : props.collapsedRowIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, iconProps);
+  var togglerIcon = IconUtils.getJSXIcon(icon, _objectSpread$6({}, iconProps), {
+    props: props
+  });
   var label = props.expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
@@ -1561,10 +1621,7 @@ var RowTogglerButton = /*#__PURE__*/React.memo(function (props) {
     className: "p-row-toggler p-link",
     tabIndex: props.tabIndex,
     "aria-label": label
-  }, /*#__PURE__*/React.createElement("span", {
-    className: iconClassName,
-    "aria-hidden": "true"
-  }), /*#__PURE__*/React.createElement(Ripple, null));
+  }, togglerIcon, /*#__PURE__*/React.createElement(Ripple, null));
 });
 RowTogglerButton.displayName = 'RowTogglerButton';
 
@@ -2420,6 +2477,7 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         expanded: expanded,
         expandedRowIcon: props.expandedRowIcon,
         collapsedRowIcon: props.collapsedRowIcon,
+        checkIcon: props.checkIcon,
         rowClassName: props.rowClassName,
         virtualScrollerOptions: props.virtualScrollerOptions
       });
@@ -3058,6 +3116,13 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     return props.display === 'menu' ? createFilterElement(fieldConstraint, index) : null;
   };
   var createMenuButton = function createMenuButton() {
+    var iconProps = {
+      'aria-hidden': true
+    };
+    var icon = props.columnFilterIcon || /*#__PURE__*/React.createElement(FilterIcon, iconProps);
+    var columnFilterIcon = IconUtils.getJSXIcon(icon, _objectSpread$3({}, iconProps), {
+      props: props
+    });
     if (showMenuButton()) {
       var _className = classNames('p-column-filter-menu-button p-link', {
         'p-column-filter-menu-button-open': overlayVisibleState,
@@ -3073,14 +3138,18 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         onClick: toggleMenu,
         onKeyDown: onToggleButtonKeyDown,
         "aria-label": label
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "pi pi-filter-icon pi-filter",
-        "aria-hidden": "true"
-      }), /*#__PURE__*/React.createElement(Ripple, null));
+      }, columnFilterIcon, /*#__PURE__*/React.createElement(Ripple, null));
     }
     return null;
   };
   var createClearButton = function createClearButton() {
+    var iconProps = {
+      'aria-hidden': true
+    };
+    var icon = props.filterClearIcon || /*#__PURE__*/React.createElement(FilterSlashIcon, iconProps);
+    var filterClearIcon = IconUtils.getJSXIcon(icon, _objectSpread$3({}, iconProps), {
+      props: props
+    });
     if (getColumnProp('showClearButton') && props.display === 'row') {
       var _className2 = classNames('p-column-filter-clear-button p-link', {
         'p-hidden-space': !hasRowFilter()
@@ -3091,10 +3160,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         type: "button",
         onClick: clearFilter,
         "aria-label": clearLabel
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "pi pi-filter-slash",
-        "aria-hidden": "true"
-      }), /*#__PURE__*/React.createElement(Ripple, null));
+      }, filterClearIcon, /*#__PURE__*/React.createElement(Ripple, null));
     }
     return null;
   };
@@ -3168,7 +3234,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       var removeRuleLabel = removeRuleButtonLabel();
       return /*#__PURE__*/React.createElement(Button, {
         type: "button",
-        icon: "pi pi-trash",
+        icon: props.filterRemoveIcon || /*#__PURE__*/React.createElement(TrashIcon, null),
         className: "p-column-filter-remove-button p-button-text p-button-danger p-button-sm",
         onClick: function onClick() {
           return removeConstraint(index);
@@ -3200,7 +3266,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       }, /*#__PURE__*/React.createElement(Button, {
         type: "button",
         label: addRuleLabel,
-        icon: "pi pi-plus",
+        icon: props.filterAddIcon || /*#__PURE__*/React.createElement(PlusIcon, null),
         className: "p-column-filter-add-button p-button-text p-button-sm",
         onClick: addConstraint
       }));
@@ -3345,8 +3411,14 @@ var HeaderCheckbox = /*#__PURE__*/React.memo(function (props) {
     'p-disabled': props.disabled,
     'p-focus': focusedState
   });
-  var iconClassName = classNames('p-checkbox-icon', {
-    'pi pi-check': props.checked
+  var iconClassName = 'p-checkbox-icon';
+  var icon = props.checked ? props.checkIcon || /*#__PURE__*/React.createElement(CheckIcon, {
+    className: iconClassName
+  }) : null;
+  var checkIcon = IconUtils.getJSXIcon(icon, {
+    className: iconClassName
+  }, {
+    props: props
   });
   var tabIndex = props.disabled ? null : 0;
   return /*#__PURE__*/React.createElement("div", {
@@ -3360,9 +3432,7 @@ var HeaderCheckbox = /*#__PURE__*/React.memo(function (props) {
     onFocus: onFocus,
     onBlur: onBlur,
     onKeyDown: onKeyDown
-  }, /*#__PURE__*/React.createElement("span", {
-    className: iconClassName
-  })));
+  }, checkIcon));
 });
 HeaderCheckbox.displayName = 'HeaderCheckbox';
 
@@ -3418,8 +3488,7 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
     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;
   };
@@ -3561,11 +3630,22 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
     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 = classNames('p-sortable-column-icon pi pi-fw', sortIcon);
-      return /*#__PURE__*/React.createElement("span", {
-        className: className
+      var iconClassName = 'p-sortable-column-icon';
+      var icon = sorted ? sortOrder < 0 ? /*#__PURE__*/React.createElement(SortAmountDownIcon, {
+        className: iconClassName
+      }) : /*#__PURE__*/React.createElement(SortAmountUpAltIcon, {
+        className: iconClassName
+      }) : /*#__PURE__*/React.createElement(SortAltIcon, {
+        className: iconClassName
       });
+      var sortIcon = IconUtils.getJSXIcon(props.sortIcon || icon, {
+        className: iconClassName
+      }, {
+        props: props,
+        sorted: sorted,
+        sortOrder: sortOrder
+      });
+      return sortIcon;
     }
     return null;
   };
@@ -3727,6 +3807,7 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
         groupRowsBy: props.groupRowsBy,
         groupRowSortField: props.groupRowSortField,
         sortMode: props.sortMode,
+        sortIcon: props.sortIcon,
         sortField: props.sortField,
         sortOrder: props.sortOrder,
         multiSortMeta: props.multiSortMeta,
@@ -4221,7 +4302,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       var _data = props.selectionPageOnly ? dataToRender(processedData) : processedData;
       var val = ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(props.frozenValue), _toConsumableArray(_data)) : _data;
       var selectableVal = getSelectableData(val);
-      return selectableVal && props.selection && selectableVal.every(function (sv) {
+      return ObjectUtils.isNotEmpty(selectableVal) && props.selection && selectableVal.every(function (sv) {
         return props.selection.some(function (s) {
           return isEquals(s, sv);
         });
@@ -4681,6 +4762,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     return value;
   };
   var multisortField = function multisortField(data1, data2, multiSortMeta, index) {
+    if (!multiSortMeta || !multiSortMeta[index]) {
+      return;
+    }
     var value1 = ObjectUtils.resolveFieldData(data1, multiSortMeta[index].field);
     var value2 = ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field);
 
@@ -4992,7 +5076,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   };
   useMountEffect(function () {
     !attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
-    setFiltersState(cloneFilters(props.filters));
+
+    //setFiltersState(cloneFilters(props.filters)); // Github #4248
     setD_filtersState(cloneFilters(props.filters));
     if (isStateful()) {
       restoreState();
@@ -5073,12 +5158,19 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   });
   var createLoader = function createLoader() {
     if (props.loading) {
-      var iconClassName = classNames('p-datatable-loading-icon pi-spin', props.loadingIcon);
+      var iconClassName = 'p-datatable-loading-icon';
+      var icon = props.loadingIcon || /*#__PURE__*/React.createElement(SpinnerIcon, {
+        className: iconClassName,
+        spin: true
+      });
+      var loadingIcon = IconUtils.getJSXIcon(icon, {
+        className: iconClassName
+      }, {
+        props: props
+      });
       return /*#__PURE__*/React.createElement("div", {
         className: "p-datatable-loading-overlay p-component-overlay"
-      }, /*#__PURE__*/React.createElement("i", {
-        className: iconClassName
-      }));
+      }, loadingIcon);
     }
     return null;
   };
@@ -5117,6 +5209,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       onColumnResizerDoubleClick: props.onColumnResizerDoubleClick,
       sortMode: props.sortMode,
       sortField: sortField,
+      sortIcon: props.sortIcon,
       sortOrder: sortOrder,
       multiSortMeta: multiSortMeta,
       groupRowsBy: props.groupRowsBy,
@@ -5215,6 +5308,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       showRowReorderElement: props.showRowReorderElement,
       expandedRowIcon: props.expandedRowIcon,
       collapsedRowIcon: props.collapsedRowIcon,
+      checkIcon: props.checkIcon,
       rowClassName: props.rowClassName,
       virtualScrollerOptions: options,
       isVirtualScrollerDisabled: true
@@ -5288,6 +5382,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       showRowReorderElement: props.showRowReorderElement,
       expandedRowIcon: props.expandedRowIcon,
       collapsedRowIcon: props.collapsedRowIcon,
+      checkIcon: props.checkIcon,
       rowClassName: props.rowClassName,
       virtualScrollerContentRef: contentRef,
       virtualScrollerOptions: options,
@@ -5414,15 +5509,25 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
         position: 'absolute',
         display: 'none'
       };
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-        ref: reorderIndicatorUpRef,
-        className: "pi pi-arrow-down p-datatable-reorder-indicator-up",
-        style: style
-      }), /*#__PURE__*/React.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 = IconUtils.getJSXIcon(props.reorderIndicatorUpIcon || /*#__PURE__*/React.createElement(ArrowDownIcon, null), undefined, {
+        props: props
+      });
+      var reorderIndicatorDownProps = {
+        className: 'p-datatable-reorder-indicator-down',
+        style: _objectSpread({}, style)
+      };
+      var reorderIndicatorDownIcon = IconUtils.getJSXIcon(props.reorderIndicatorDownIcon || /*#__PURE__*/React.createElement(ArrowUpIcon, null), undefined, {
+        props: props
+      });
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", _extends({
+        ref: reorderIndicatorUpRef
+      }, reorderIndicatorUpProps), reorderIndicatorUpIcon), /*#__PURE__*/React.createElement("span", _extends({
+        ref: reorderIndicatorDownRef
+      }, reorderIndicatorDownProps), reorderIndicatorDownIcon));
     }
     return null;
   };