primereact 7.0.0-rc.2 → 7.0.0

package/datatable/datatable.d.ts

@@ -171,6 +171,8 @@ interface DataTableUnselectParams extends DataTableSelectParams { }
 interface DataTableExportFunctionParams {
     data: any;
     field: string;
+    rowData: any;
+    column: Column
 }
 
 interface DataTableColReorderParams {
@@ -201,12 +203,12 @@ interface DataTableCellClassNameOptions {
 }
 
 interface DataTableShowSelectionElementOptions {
-    index: number;
+    rowIndex: number;
     props: DataTableProps;
 }
 
 interface DataTableShowRowReorderElementOptions {
-    index: number;
+    rowIndex: number;
     props: DataTableProps;
 }
 
@@ -339,7 +341,7 @@ export interface DataTableProps {
 
 export declare class DataTable extends React.Component<DataTableProps, any> {
     public reset(): void;
-    public exportCSV(options: { selectionOnly: boolean }): void;
+    public exportCSV(options?: { selectionOnly: boolean }): void;
     public filter<T>(value: T, field: string, mode: DataTableFilterMatchModeType, index?: number): void;
     public resetColumnOrder(): void;
     public closeEditingCell(): void;

package/datatable/datatable.esm.js

@@ -1,7 +1,11 @@
 import React, { Component } from 'react';
 import { Paginator } from 'primereact/paginator';
-import { classNames, ObjectUtils, OverlayService, DomHandler, Ripple, ZIndexUtils, ConnectedOverlayScrollHandler, Portal, CSSTransition, UniqueComponentId } from 'primereact/core';
+import { classNames, ObjectUtils, DomHandler, ZIndexUtils, ConnectedOverlayScrollHandler, UniqueComponentId } from 'primereact/utils';
 import PrimeReact, { localeOption, FilterOperator, FilterMatchMode as FilterMatchMode$1, FilterService } from 'primereact/api';
+import { OverlayService } from 'primereact/overlayservice';
+import { Ripple } from 'primereact/ripple';
+import { CSSTransition } from 'primereact/csstransition';
+import { Portal } from 'primereact/portal';
 import { InputText } from 'primereact/inputtext';
 import { Dropdown } from 'primereact/dropdown';
 import { Button } from 'primereact/button';
@@ -612,6 +616,8 @@ var BodyCell = /*#__PURE__*/function (_Component) {
         }
 
         this.closeCell(event);
+      } else {
+        event.preventDefault();
       }
     }
   }, {
@@ -848,13 +854,16 @@ var BodyCell = /*#__PURE__*/function (_Component) {
 
           case 13:
             // @deprecated
-            this.onClick(event);
-            event.preventDefault();
+            if (!DomHandler.isClickable(target)) {
+              this.onClick(event);
+              event.preventDefault();
+            }
+
             break;
           //space
 
           case 32:
-            if (target.nodeName !== 'INPUT' && target.nodeName !== 'TEXTAREA' && !target.readOnly) {
+            if (!DomHandler.isClickable(target) && !target.readOnly) {
               this.onClick(event);
               event.preventDefault();
             }
@@ -1062,7 +1071,7 @@ var BodyCell = /*#__PURE__*/function (_Component) {
         });
       } else if (selectionMode) {
         var showSelection = this.props.showSelectionElement ? this.props.showSelectionElement(this.props.rowData, {
-          index: this.props.rowIndex,
+          rowIndex: this.props.rowIndex,
           props: this.props.tableProps
         }) : true;
         content = showSelection && /*#__PURE__*/React.createElement(React.Fragment, null, selectionMode === 'single' && /*#__PURE__*/React.createElement(RowRadioButton, {
@@ -1079,7 +1088,7 @@ var BodyCell = /*#__PURE__*/function (_Component) {
         }));
       } else if (rowReorder) {
         var showReorder = this.props.showRowReorderElement ? this.props.showRowReorderElement(this.props.rowData, {
-          index: this.props.rowIndex,
+          rowIndex: this.props.rowIndex,
           props: this.props.tableProps
         }) : true;
         content = showReorder && /*#__PURE__*/React.createElement("i", {
@@ -1109,8 +1118,9 @@ var BodyCell = /*#__PURE__*/function (_Component) {
           content = ObjectUtils.getJSXElement(body, this.props.rowData, {
             column: this.props.column,
             field: this.field,
-            index: this.props.rowIndex,
+            rowIndex: this.props.rowIndex,
             frozenRow: this.props.frozenRow,
+            props: this.props.tableProps,
             expander: expanderProps
           });
         }
@@ -1164,8 +1174,9 @@ var BodyCell = /*#__PURE__*/function (_Component) {
           content = ObjectUtils.getJSXElement(body, this.props.rowData, {
             column: this.props.column,
             field: this.field,
-            index: this.props.rowIndex,
+            rowIndex: this.props.rowIndex,
             frozenRow: this.props.frozenRow,
+            props: this.props.tableProps,
             rowEditor: rowEditorProps
           });
         }
@@ -1437,13 +1448,16 @@ var BodyRow = /*#__PURE__*/function (_Component) {
 
           case 13:
             // @deprecated
-            this.onClick(event);
-            event.preventDefault();
+            if (!DomHandler.isClickable(target)) {
+              this.onClick(event);
+              event.preventDefault();
+            }
+
             break;
           //space
 
           case 32:
-            if (target.nodeName !== 'INPUT' && target.nodeName !== 'TEXTAREA' && !target.readOnly) {
+            if (!DomHandler.isClickable(target) && !target.readOnly) {
               this.onClick(event);
               event.preventDefault();
             }
@@ -2039,6 +2053,12 @@ var TableBody = /*#__PURE__*/function (_Component) {
         });
       }
     }
+  }, {
+    key: "updateVirtualScrollerPosition",
+    value: function updateVirtualScrollerPosition() {
+      var tableHeaderHeight = DomHandler.getOuterHeight(this.el.previousElementSibling);
+      this.el.style.top = (this.el.style.top || 0) + tableHeaderHeight + 'px';
+    }
   }, {
     key: "onSingleSelection",
     value: function onSingleSelection(_ref) {
@@ -2668,8 +2688,7 @@ var TableBody = /*#__PURE__*/function (_Component) {
       }
 
       if (!this.props.isVirtualScrollerDisabled && this.getVirtualScrollerOption('vertical')) {
-        var style = getComputedStyle(this.el);
-        this.el.style.top = parseFloat(style.top) + parseFloat(this.props.virtualScrollerOptions.itemSize) + 'px';
+        this.updateVirtualScrollerPosition();
       }
     }
   }, {
@@ -2684,8 +2703,7 @@ var TableBody = /*#__PURE__*/function (_Component) {
       }
 
       if (!this.props.isVirtualScrollerDisabled && this.getVirtualScrollerOption('vertical') && this.getVirtualScrollerOption('itemSize', prevProps.virtualScrollerOptions) !== this.getVirtualScrollerOption('itemSize')) {
-        var style = getComputedStyle(this.el);
-        this.el.style.top = parseFloat(style.top) + parseFloat(this.getVirtualScrollerOption('itemSize')) - parseFloat(this.getVirtualScrollerOption('itemSize', prevProps.virtualScrollerOptions)) + 'px';
+        this.updateVirtualScrollerPosition();
       }
     }
   }, {
@@ -2703,7 +2721,7 @@ var TableBody = /*#__PURE__*/function (_Component) {
         var content = ObjectUtils.getJSXElement(this.props.emptyMessage, {
           props: this.props,
           frozen: this.props.frozenRow
-        });
+        }) || localeOption('emptyMessage');
         return /*#__PURE__*/React.createElement("tr", {
           className: "p-datatable-emptymessage",
           role: "row"
@@ -3216,9 +3234,7 @@ var ColumnFilter = /*#__PURE__*/function (_Component) {
 
     _this = _super.call(this, props);
     _this.state = {
-      overlayVisible: false,
-      defaultMatchMode: null,
-      defaultOperator: null
+      overlayVisible: false
     };
     _this.overlayRef = /*#__PURE__*/React.createRef();
     _this.filterCallback = _this.filterCallback.bind(_assertThisInitialized(_this));
@@ -3253,6 +3269,11 @@ var ColumnFilter = /*#__PURE__*/function (_Component) {
     get: function get() {
       return this.props.filters[this.field];
     }
+  }, {
+    key: "filterStoreModel",
+    get: function get() {
+      return this.props.filtersStore[this.field];
+    }
   }, {
     key: "hasFilter",
     value: function hasFilter() {
@@ -3328,6 +3349,22 @@ var ColumnFilter = /*#__PURE__*/function (_Component) {
     value: function getColumnProp(prop) {
       return this.props.column.props[prop];
     }
+  }, {
+    key: "getDefaultConstraint",
+    value: function getDefaultConstraint() {
+      if (this.props.filtersStore && this.filterStoreModel) {
+        if (this.filterStoreModel.operator) {
+          return {
+            matchMode: this.filterStoreModel.constraints[0].matchMode,
+            operator: this.filterStoreModel.operator
+          };
+        } else {
+          return {
+            matchMode: this.filterStoreModel.matchMode
+          };
+        }
+      }
+    }
   }, {
     key: "findDataType",
     value: function findDataType() {
@@ -3356,19 +3393,20 @@ var ColumnFilter = /*#__PURE__*/function (_Component) {
     value: function clearFilter() {
       var field = this.field;
       var filterClearCallback = this.getColumnProp('onFilterClear');
+      var defaultConstraint = this.getDefaultConstraint();
 
       var filters = _objectSpread$3({}, this.props.filters);
 
       if (filters[field].operator) {
         filters[field].constraints.splice(1);
-        filters[field].operator = this.state.defaultOperator;
+        filters[field].operator = defaultConstraint.operator;
         filters[field].constraints[0] = {
           value: null,
-          matchMode: this.state.defaultMatchMode
+          matchMode: defaultConstraint.matchMode
         };
       } else {
         filters[field].value = null;
-        filters[field].matchMode = this.state.defaultMatchMode;
+        filters[field].matchMode = defaultConstraint.matchMode;
       }
 
       filterClearCallback && filterClearCallback();
@@ -3541,12 +3579,13 @@ var ColumnFilter = /*#__PURE__*/function (_Component) {
     key: "addConstraint",
     value: function addConstraint() {
       var filterConstraintAddCallback = this.getColumnProp('onFilterConstraintAdd');
+      var defaultConstraint = this.getDefaultConstraint();
 
       var filters = _objectSpread$3({}, this.props.filters);
 
       var newConstraint = {
         value: null,
-        matchMode: this.state.defaultMatchMode
+        matchMode: defaultConstraint.matchMode
       };
       filters[this.field].constraints.push(newConstraint);
       filterConstraintAddCallback && filterConstraintAddCallback({
@@ -3615,7 +3654,7 @@ var ColumnFilter = /*#__PURE__*/function (_Component) {
     value: function onOverlayEnter() {
       var _this2 = this;
 
-      ZIndexUtils.set('overlay', this.overlay);
+      ZIndexUtils.set('overlay', this.overlay, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
       DomHandler.alignOverlay(this.overlay, this.icon, PrimeReact.appendTo, false);
       this.bindOutsideClickListener();
       this.bindScrollListener();
@@ -3786,24 +3825,6 @@ var ColumnFilter = /*#__PURE__*/function (_Component) {
       args && this.filterCallback(args[0], args[1]);
       this.props.onFilterApply();
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.props.filters && this.filterModel) {
-        var filterModel = this.filterModel;
-
-        if (filterModel.operator) {
-          this.setState({
-            defaultMatchMode: filterModel.constraints[0].matchMode,
-            defaultOperator: filterModel.operator
-          });
-        } else {
-          this.setState({
-            defaultMatchMode: this.filterModel.matchMode
-          });
-        }
-      }
-    }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
@@ -5241,9 +5262,17 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "allRowsSelected",
     value: function allRowsSelected(processedData) {
+      var _this5 = this;
+
       var val = this.props.frozenValue ? [].concat(_toConsumableArray(this.props.frozenValue), _toConsumableArray(processedData)) : processedData;
-      var length = this.props.lazy ? this.props.totalRecords : val ? val.length : 0;
-      return val && length > 0 && this.props.selection && this.props.selection.length > 0 && this.props.selection.length === length;
+      var selectableVal = this.props.showSelectionElement ? val.filter(function (data, index) {
+        return _this5.props.showSelectionElement(data, {
+          rowIndex: index,
+          props: _this5.props
+        });
+      }) : val;
+      var length = this.props.lazy ? this.props.totalRecords : selectableVal ? selectableVal.length : 0;
+      return selectableVal && length > 0 && this.props.selection && this.props.selection.length > 0 && this.props.selection.length === length;
     }
   }, {
     key: "getSelectionModeInColumn",
@@ -5374,7 +5403,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "resizeTableCells",
     value: function resizeTableCells(newColumnWidth, nextColumnWidth) {
-      var _this5 = this;
+      var _this6 = this;
 
       var widths = [];
       var colIndex = DomHandler.index(this.resizeColumnElement);
@@ -5387,30 +5416,30 @@ var DataTable = /*#__PURE__*/function (_Component) {
       var innerHTML = '';
       widths.forEach(function (width, index) {
         var colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
-        var style = _this5.props.scrollable ? "flex: 0 0 ".concat(colWidth, "px !important") : "width: ".concat(colWidth, "px !important");
-        innerHTML += "\n                .p-datatable[".concat(_this5.attributeSelector, "] .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n                .p-datatable[").concat(_this5.attributeSelector, "] .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n                .p-datatable[").concat(_this5.attributeSelector, "] .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
+        var style = _this6.props.scrollable ? "flex: 0 0 ".concat(colWidth, "px !important") : "width: ".concat(colWidth, "px !important");
+        innerHTML += "\n                .p-datatable[".concat(_this6.attributeSelector, "] .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n                .p-datatable[").concat(_this6.attributeSelector, "] .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n                .p-datatable[").concat(_this6.attributeSelector, "] .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
       });
       this.styleElement.innerHTML = innerHTML;
     }
   }, {
     key: "bindColumnResizeEvents",
     value: function bindColumnResizeEvents() {
-      var _this6 = this;
+      var _this7 = this;
 
       if (!this.documentColumnResizeListener) {
         this.documentColumnResizeListener = document.addEventListener('mousemove', function (event) {
-          if (_this6.columnResizing) {
-            _this6.onColumnResize(event);
+          if (_this7.columnResizing) {
+            _this7.onColumnResize(event);
           }
         });
       }
 
       if (!this.documentColumnResizeEndListener) {
         this.documentColumnResizeEndListener = document.addEventListener('mouseup', function () {
-          if (_this6.columnResizing) {
-            _this6.columnResizing = false;
+          if (_this7.columnResizing) {
+            _this7.columnResizing = false;
 
-            _this6.onColumnResizeEnd();
+            _this7.onColumnResizeEnd();
           }
         });
       }
@@ -5442,12 +5471,20 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "onColumnHeaderCheckboxChange",
     value: function onColumnHeaderCheckboxChange(e, processedData) {
+      var _this8 = this;
+
       var originalEvent = e.originalEvent,
           checked = e.checked;
       var selection;
 
       if (!checked) {
         selection = this.props.frozenValue ? [].concat(_toConsumableArray(this.props.frozenValue), _toConsumableArray(processedData)) : processedData;
+        selection = this.props.showSelectionElement ? selection.filter(function (data, index) {
+          return _this8.props.showSelectionElement(data, {
+            rowIndex: index,
+            props: _this8.props
+          });
+        }) : selection;
         this.props.onAllRowsSelect && this.props.onAllRowsSelect({
           originalEvent: originalEvent,
           data: selection,
@@ -5532,7 +5569,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "onColumnHeaderDrop",
     value: function onColumnHeaderDrop(e) {
-      var _this7 = this;
+      var _this9 = this;
 
       var event = e.originalEvent,
           column = e.column;
@@ -5555,7 +5592,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
           };
 
           var dragColIndex = columns.findIndex(function (child) {
-            return isSameColumn(child, _this7.draggedColumn);
+            return isSameColumn(child, _this9.draggedColumn);
           });
           var dropColIndex = columns.findIndex(function (child) {
             return isSameColumn(child, column);
@@ -5775,7 +5812,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "sortMultiple",
     value: function sortMultiple(data) {
-      var _this8 = this;
+      var _this10 = this;
 
       var multiSortMeta = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
 
@@ -5792,7 +5829,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
 
       if (this.columnSortable && this.columnSortFunction) {
         var meta = multiSortMeta.find(function (meta) {
-          return meta.field === _this8.columnField;
+          return meta.field === _this10.columnField;
         });
         var field = this.columnField;
         var order = meta ? meta.order : this.defaultSortOrder;
@@ -5802,7 +5839,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
         });
       } else {
         value.sort(function (data1, data2) {
-          return _this8.multisortField(data1, data2, multiSortMeta, 0);
+          return _this10.multisortField(data1, data2, multiSortMeta, 0);
         });
       }
 
@@ -5842,25 +5879,25 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "onFilterApply",
     value: function onFilterApply() {
-      var _this9 = this;
+      var _this11 = this;
 
       clearTimeout(this.filterTimeout);
       this.filterTimeout = setTimeout(function () {
-        var filters = _this9.cloneFilters(_this9.state.d_filters);
+        var filters = _this11.cloneFilters(_this11.state.d_filters);
 
-        if (_this9.props.onFilter) {
-          _this9.props.onFilter({
+        if (_this11.props.onFilter) {
+          _this11.props.onFilter({
             filters: filters
           });
         } else {
-          _this9.setState({
+          _this11.setState({
             first: 0,
             filters: filters
           });
         }
 
-        if (_this9.props.onValueChange) {
-          _this9.props.onValueChange(_this9.processedData({
+        if (_this11.props.onValueChange) {
+          _this11.props.onValueChange(_this11.processedData({
             filters: filters
           }));
         }
@@ -5958,7 +5995,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "cloneFilters",
     value: function cloneFilters(filters) {
-      var _this10 = this;
+      var _this12 = this;
 
       filters = filters || this.props.filters;
       var cloned = {};
@@ -6001,7 +6038,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
               });
             }
 
-            _filters[field] = _this10.props.filterDisplay === 'menu' ? {
+            _filters[field] = _this12.props.filterDisplay === 'menu' ? {
               operator: FilterOperator.AND,
               constraints: [constraint]
             } : constraint;
@@ -6082,7 +6119,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "exportCSV",
     value: function exportCSV(options) {
-      var _this11 = this;
+      var _this13 = this;
 
       var data;
       var csv = "\uFEFF";
@@ -6105,7 +6142,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
           csv += '"' + (header || field) + '"';
 
           if (i < columns.length - 1) {
-            csv += _this11.props.csvSeparator;
+            csv += _this13.props.csvSeparator;
           }
         }
       }); //body
@@ -6121,16 +6158,18 @@ var DataTable = /*#__PURE__*/function (_Component) {
             var cellData = ObjectUtils.resolveFieldData(record, field);
 
             if (cellData != null) {
-              cellData = _this11.props.exportFunction ? _this11.props.exportFunction({
+              cellData = _this13.props.exportFunction ? _this13.props.exportFunction({
                 data: cellData,
-                field: field
+                field: field,
+                rowData: record,
+                column: column
               }) : String(cellData).replace(/"/g, '""');
             } else cellData = '';
 
             csv += '"' + cellData + '"';
 
             if (i < columns.length - 1) {
-              csv += _this11.props.csvSeparator;
+              csv += _this13.props.csvSeparator;
             }
           }
         });
@@ -6455,7 +6494,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderContent",
     value: function renderContent(processedData, columns, selectionModeInColumn, empty) {
-      var _this12 = this;
+      var _this14 = this;
 
       if (!columns) return;
       var isVirtualScrollerDisabled = this.isVirtualScrollerDisabled();
@@ -6476,21 +6515,21 @@ var DataTable = /*#__PURE__*/function (_Component) {
         showSpacer: false,
         contentTemplate: function contentTemplate(options) {
           var ref = function ref(el) {
-            _this12.table = el;
+            _this14.table = el;
             options.spacerRef && options.spacerRef(el);
           };
 
-          var tableClassName = classNames('p-datatable-table', _this12.props.tableClassName);
+          var tableClassName = classNames('p-datatable-table', _this14.props.tableClassName);
 
-          var tableHeader = _this12.renderTableHeader(options, empty);
+          var tableHeader = _this14.renderTableHeader(options, empty);
 
-          var tableBody = _this12.renderTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled);
+          var tableBody = _this14.renderTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled);
 
-          var tableFooter = _this12.renderTableFooter(options);
+          var tableFooter = _this14.renderTableFooter(options);
 
           return /*#__PURE__*/React.createElement("table", {
             ref: ref,
-            style: _this12.props.tableStyle,
+            style: _this14.props.tableStyle,
             className: tableClassName,
             role: "table"
           }, tableHeader, tableBody, tableFooter);
@@ -6552,12 +6591,12 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderResizeHelper",
     value: function renderResizeHelper() {
-      var _this13 = this;
+      var _this15 = this;
 
       if (this.props.resizableColumns) {
         return /*#__PURE__*/React.createElement("div", {
           ref: function ref(el) {
-            return _this13.resizeHelper = el;
+            return _this15.resizeHelper = el;
           },
           className: "p-column-resizer-helper",
           style: {
@@ -6571,7 +6610,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderReorderIndicators",
     value: function renderReorderIndicators() {
-      var _this14 = this;
+      var _this16 = this;
 
       if (this.props.reorderableColumns) {
         var style = {
@@ -6580,13 +6619,13 @@ var DataTable = /*#__PURE__*/function (_Component) {
         };
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
           ref: function ref(el) {
-            return _this14.reorderIndicatorUp = el;
+            return _this16.reorderIndicatorUp = el;
           },
           className: "pi pi-arrow-down p-datatable-reorder-indicator-up",
           style: style
         }), /*#__PURE__*/React.createElement("span", {
           ref: function ref(el) {
-            return _this14.reorderIndicatorDown = el;
+            return _this16.reorderIndicatorDown = el;
           },
           className: "pi pi-arrow-up p-datatable-reorder-indicator-down",
           style: style
@@ -6598,7 +6637,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this15 = this;
+      var _this17 = this;
 
       var processedData = this.processedData();
       var columns = this.getColumns();
@@ -6634,7 +6673,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
       var reorderIndicators = this.renderReorderIndicators();
       return /*#__PURE__*/React.createElement("div", {
         ref: function ref(el) {
-          return _this15.el = el;
+          return _this17.el = el;
         },
         id: this.props.id,
         className: className,
@@ -6689,7 +6728,7 @@ _defineProperty(DataTable, "defaultProps", {
   sortMode: 'single',
   defaultSortOrder: 1,
   removableSort: false,
-  emptyMessage: 'No records found',
+  emptyMessage: null,
   selectionMode: null,
   dragSelection: false,
   cellSelection: false,