mui-table-2026 1.0.0 → 1.0.2

package/src/MUIDataTable.js

@@ -1,107 +1,102 @@
-import { Paper } from '@mui/material';
-import { Table as MuiTable } from '@mui/material';
-import { Tooltip as MuiTooltip } from '@mui/material';
-import { withStyles } from 'tss-react/mui';
-import clsx from 'clsx';
-import assignwith from 'lodash.assignwith';
-import cloneDeep from 'lodash.clonedeep';
-import find from 'lodash.find';
-import isEqual from 'lodash.isequal';
-import isUndefined from 'lodash.isundefined';
-import merge from 'lodash.merge';
-import PropTypes from 'prop-types';
-import React from 'react';
-import DefaultTableBody from './components/TableBody';
-import DefaultTableFilter from './components/TableFilter';
-import DefaultTableFilterList from './components/TableFilterList';
-import DefaultTableFooter from './components/TableFooter';
-import DefaultTableHead from './components/TableHead';
-import DefaultTableResize from './components/TableResize';
-import DefaultTableToolbar from './components/TableToolbar';
-import DefaultTableToolbarSelect from './components/TableToolbarSelect';
-import getTextLabels from './textLabels';
-import { buildMap, getCollatorComparator, getPageValue, sortCompare, warnDeprecated, warnInfo } from './utils';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import { load, save } from './localStorage';
+import { Paper } from "@mui/material";
+import { Table as MuiTable } from "@mui/material";
+import { Tooltip as MuiTooltip } from "@mui/material";
+import { withStyles } from "tss-react/mui";
+import clsx from "clsx";
+import { assignWith, cloneDeep, find, isEqual, isUndefined, merge } from "lodash-es";
+import PropTypes from "prop-types";
+import React from "react";
+import DefaultTableBody from "./components/TableBody";
+import DefaultTableFilter from "./components/TableFilter";
+import DefaultTableFilterList from "./components/TableFilterList";
+import DefaultTableFooter from "./components/TableFooter";
+import DefaultTableHead from "./components/TableHead";
+import DefaultTableResize from "./components/TableResize";
+import DefaultTableToolbar from "./components/TableToolbar";
+import DefaultTableToolbarSelect from "./components/TableToolbarSelect";
+import getTextLabels from "./textLabels";
+import { buildMap, getCollatorComparator, getPageValue, sortCompare, warnDeprecated, warnInfo } from "./utils";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { load, save } from "./localStorage";
 
 const defaultTableStyles = (theme) => ({
   root: {
-    '& .datatables-noprint': {
-      '@media print': {
-        display: 'none',
+    "& .datatables-noprint": {
+      "@media print": {
+        display: "none",
       },
     },
     // Modern table styling
-    borderRadius: '8px',
-    overflow: 'hidden',
-    boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+    borderRadius: "8px",
+    overflow: "hidden",
+    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
 
-    backgroundColor: '#ffffff',
+    backgroundColor: "#ffffff",
     // Z-index management
-    '& .MuiPopper-root': {
+    "& .MuiPopper-root": {
       zIndex: 9999,
     },
   },
   paper: {
-    isolation: 'auto',
+    isolation: "auto",
     // Modern paper styling
-    borderRadius: '8px',
-    boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-    border: '1px solid #e5e7eb',
-    overflow: 'hidden',
+    borderRadius: "8px",
+    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+    border: "1px solid #e5e7eb",
+    overflow: "hidden",
   },
   paperResponsiveScrollFullHeightFullWidth: {
-    position: 'absolute',
+    position: "absolute",
   },
   tableRoot: {
-    outline: 'none',
-    borderTop: '2px solid #e5e7eb',
+    outline: "none",
+    borderTop: "2px solid #e5e7eb",
   },
   responsiveBase: {
-    overflow: 'auto',
-    '@media print': {
-      height: 'auto !important',
+    overflow: "auto",
+    "@media print": {
+      height: "auto !important",
     },
   },
 
   // deprecated, but continuing support through v3.x
   responsiveScroll: {
-    overflow: 'auto',
-    height: '100%',
+    overflow: "auto",
+    height: "100%",
   },
   // deprecated, but continuing support through v3.x
   responsiveScrollMaxHeight: {
-    overflow: 'auto',
-    height: '100%',
+    overflow: "auto",
+    height: "100%",
   },
   // deprecated, but continuing support through v3.x
   responsiveScrollFullHeight: {
-    height: '100%',
+    height: "100%",
   },
   // deprecated, but continuing support through v3.x
   responsiveStacked: {
-    overflow: 'auto',
-    [theme.breakpoints.down('md')]: {
-      overflow: 'hidden',
+    overflow: "auto",
+    [theme.breakpoints.down("md")]: {
+      overflow: "hidden",
     },
   },
   // deprecated, but continuing support through v3.x
   responsiveStackedFullWidth: {},
   caption: {
-    position: 'absolute',
-    left: '-3000px',
+    position: "absolute",
+    left: "-3000px",
   },
 
   liveAnnounce: {
-    border: '0',
-    clip: 'rect(0 0 0 0)',
-    height: '1px',
-    margin: '-1px',
-    overflow: 'hidden',
-    padding: '0',
-    position: 'absolute',
-    width: '1px',
+    border: "0",
+    clip: "rect(0 0 0 0)",
+    height: "1px",
+    margin: "-1px",
+    overflow: "hidden",
+    padding: "0",
+    position: "absolute",
+    width: "1px",
   },
 });
 
@@ -111,7 +106,7 @@ const TABLE_LOAD = {
 };
 
 // Populate this list with anything that might render in the toolbar to determine if we hide the toolbar
-const TOOLBAR_ITEMS = ['title', 'filter', 'search', 'print', 'download', 'viewColumns', 'customToolbar'];
+const TOOLBAR_ITEMS = ["title", "filter", "search", "print", "download", "viewColumns", "customToolbar"];
 
 const hasToolbarItem = (options, title) => {
   options.title = title;
@@ -121,10 +116,10 @@ const hasToolbarItem = (options, title) => {
 
 // Select Toolbar Placement options
 const STP = {
-  REPLACE: 'replace',
-  ABOVE: 'above',
-  NONE: 'none',
-  ALWAYS: 'always',
+  REPLACE: "replace",
+  ABOVE: "above",
+  NONE: "none",
+  ALWAYS: "always",
 };
 
 class MUIDataTable extends React.Component {
@@ -141,7 +136,7 @@ class MUIDataTable extends React.Component {
           label: PropTypes.string,
           name: PropTypes.string.isRequired,
           options: PropTypes.shape({
-            display: PropTypes.oneOf(['true', 'false', 'excluded', 'always', true, false]),
+            display: PropTypes.oneOf(["true", "false", "excluded", "always", true, false]),
             empty: PropTypes.bool,
             filter: PropTypes.bool,
             sort: PropTypes.bool,
@@ -158,7 +153,7 @@ class MUIDataTable extends React.Component {
                 display: PropTypes.func,
               }),
             ]),
-            filterType: PropTypes.oneOf(['dropdown', 'checkbox', 'multiselect', 'textField', 'custom']),
+            filterType: PropTypes.oneOf(["dropdown", "checkbox", "multiselect", "textField", "custom"]),
             customHeadRender: PropTypes.func,
             customBodyRender: PropTypes.func,
             customBodyRenderLite: PropTypes.func,
@@ -199,7 +194,7 @@ class MUIDataTable extends React.Component {
       expandableRowsHeader: PropTypes.bool,
       expandableRowsOnClick: PropTypes.bool,
       disableToolbarSelect: PropTypes.bool,
-      download: PropTypes.oneOf([true, false, 'true', 'false', 'disabled']),
+      download: PropTypes.oneOf([true, false, "true", "false", "disabled"]),
       downloadOptions: PropTypes.shape({
         filename: PropTypes.string,
         separator: PropTypes.string,
@@ -208,9 +203,9 @@ class MUIDataTable extends React.Component {
           useDisplayedRowsOnly: PropTypes.bool,
         }),
       }),
-      filter: PropTypes.oneOf([true, false, 'true', 'false', 'disabled']),
+      filter: PropTypes.oneOf([true, false, "true", "false", "disabled"]),
       filterArrayFullMatch: PropTypes.bool,
-      filterType: PropTypes.oneOf(['dropdown', 'checkbox', 'multiselect', 'textField', 'custom']),
+      filterType: PropTypes.oneOf(["dropdown", "checkbox", "multiselect", "textField", "custom"]),
       fixedHeader: PropTypes.bool,
       fixedSelectColumn: PropTypes.bool,
       getTextLabels: PropTypes.func,
@@ -232,9 +227,9 @@ class MUIDataTable extends React.Component {
       onTableInit: PropTypes.func,
       page: PropTypes.number,
       pagination: PropTypes.bool,
-      print: PropTypes.oneOf([true, false, 'true', 'false', 'disabled']),
+      print: PropTypes.oneOf([true, false, "true", "false", "disabled"]),
       searchProps: PropTypes.object,
-      selectableRows: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['none', 'single', 'multiple'])]),
+      selectableRows: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(["none", "single", "multiple"])]),
       selectableRowsHeader: PropTypes.bool,
       selectableRowsHideCheckboxes: PropTypes.bool,
       selectableRowsOnClick: PropTypes.bool,
@@ -244,13 +239,13 @@ class MUIDataTable extends React.Component {
       tableBodyMaxHeight: PropTypes.string,
       renderExpandableRow: PropTypes.func,
       resizableColumns: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-      responsive: PropTypes.oneOf(['standard', 'vertical', 'verticalAlways', 'simple']),
+      responsive: PropTypes.oneOf(["standard", "vertical", "verticalAlways", "simple"]),
       rowHover: PropTypes.bool,
       rowsExpanded: PropTypes.array,
       rowsPerPage: PropTypes.number,
       rowsPerPageOptions: PropTypes.array,
       rowsSelected: PropTypes.array,
-      search: PropTypes.oneOf([true, false, 'true', 'false', 'disabled']),
+      search: PropTypes.oneOf([true, false, "true", "false", "disabled"]),
       searchOpen: PropTypes.bool,
       searchAlwaysOpen: PropTypes.bool,
       searchPlaceholder: PropTypes.string,
@@ -265,7 +260,7 @@ class MUIDataTable extends React.Component {
       sort: PropTypes.bool,
       sortOrder: PropTypes.object,
       storageKey: PropTypes.string,
-      viewColumns: PropTypes.oneOf([true, false, 'true', 'false', 'disabled']),
+      viewColumns: PropTypes.oneOf([true, false, "true", "false", "disabled"]),
     }),
     /** Pass and use className to style MUIDataTable as desired */
     className: PropTypes.string,
@@ -273,7 +268,7 @@ class MUIDataTable extends React.Component {
   };
 
   static defaultProps = {
-    title: '',
+    title: "",
     options: {},
     data: [],
     columns: [],
@@ -343,7 +338,7 @@ class MUIDataTable extends React.Component {
     // When we have a search, we must reset page to view it unless on serverSide since paging is handled by the user.
     if (this.props.options.searchText && !this.props.options.serverSide) this.setState({ page: 0 });
 
-    this.setTableInit('tableInitialized');
+    this.setTableInit("tableInitialized");
   }
 
   componentDidUpdate(prevProps) {
@@ -360,7 +355,7 @@ class MUIDataTable extends React.Component {
       }
 
       this.setTableData(this.props, TABLE_LOAD.INITIAL, didDataUpdate, () => {
-        this.setTableAction('propsUpdate');
+        this.setTableAction("propsUpdate");
       });
     }
 
@@ -387,12 +382,12 @@ class MUIDataTable extends React.Component {
 
     // provide default tableId when no tableId has been passed as prop
     if (!props.options.tableId) {
-      props.options.tableId = (Math.random() + '').replace(/\./, '');
+      props.options.tableId = (Math.random() + "").replace(/\./, "");
     }
 
-    this.options = assignwith(options, props.options, (objValue, srcValue, key) => {
+    this.options = assignWith(options, props.options, (objValue, srcValue, key) => {
       // Merge any default options that are objects, as they will be overwritten otherwise
-      if (key === 'textLabels' || key === 'downloadOptions') return merge(objValue, srcValue);
+      if (key === "textLabels" || key === "downloadOptions") return merge(objValue, srcValue);
       return;
     });
 
@@ -405,32 +400,32 @@ class MUIDataTable extends React.Component {
     disableToolbarSelect: false,
     download: true,
     downloadOptions: {
-      filename: 'tableDownload.csv',
-      separator: ',',
+      filename: "tableDownload.csv",
+      separator: ",",
     },
     draggableColumns: {
       enabled: false,
       transitionTime: 300,
     },
     elevation: 4,
-    enableNestedDataAccess: '',
+    enableNestedDataAccess: "",
     expandableRows: false,
     expandableRowsHeader: true,
     expandableRowsOnClick: false,
     filter: true,
     filterArrayFullMatch: true,
-    filterType: 'dropdown',
+    filterType: "dropdown",
     fixedHeader: true,
     fixedSelectColumn: true,
     pagination: true,
     print: true,
     resizableColumns: false,
-    responsive: 'vertical',
+    responsive: "vertical",
     rowHover: true,
     //rowsPerPage: 10,
     rowsPerPageOptions: [10, 15, 100],
     search: true,
-    selectableRows: 'multiple',
+    selectableRows: "multiple",
     selectableRowsHideCheckboxes: false,
     selectableRowsOnClick: false,
     selectableRowsHeader: true,
@@ -439,7 +434,7 @@ class MUIDataTable extends React.Component {
     setTableProps: () => ({}),
     sort: true,
     sortFilterList: true,
-    tableBodyHeight: 'auto',
+    tableBodyHeight: "auto",
     tableBodyMaxHeight: null, // if set, it will override tableBodyHeight
     sortOrder: {},
     textLabels: getTextLabels(),
@@ -456,71 +451,71 @@ class MUIDataTable extends React.Component {
   };
 
   handleOptionDeprecation = (props) => {
-    if (typeof this.options.selectableRows === 'boolean') {
+    if (typeof this.options.selectableRows === "boolean") {
       this.warnDep(
-        'Using a boolean for selectableRows has been deprecated. Please use string option: multiple | single | none',
+        "Using a boolean for selectableRows has been deprecated. Please use string option: multiple | single | none",
       );
-      this.options.selectableRows = this.options.selectableRows ? 'multiple' : 'none';
+      this.options.selectableRows = this.options.selectableRows ? "multiple" : "none";
     }
-    if (['standard', 'vertical', 'verticalAlways', 'simple'].indexOf(this.options.responsive) === -1) {
+    if (["standard", "vertical", "verticalAlways", "simple"].indexOf(this.options.responsive) === -1) {
       if (
         [
-          'scrollMaxHeight',
-          'scrollFullHeight',
-          'stacked',
-          'stackedFullWidth',
-          'scrollFullHeightFullWidth',
-          'scroll',
+          "scrollMaxHeight",
+          "scrollFullHeight",
+          "stacked",
+          "stackedFullWidth",
+          "scrollFullHeightFullWidth",
+          "scroll",
         ].indexOf(this.options.responsive) !== -1
       ) {
         this.warnDep(
           this.options.responsive +
-            ' has been deprecated, but will still work in version 3.x. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
+            " has been deprecated, but will still work in version 3.x. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md",
         );
       } else {
         this.warnInfo(
           this.options.responsive +
-            ' is not recognized as a valid input for responsive option. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
+            " is not recognized as a valid input for responsive option. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md",
         );
       }
     }
     if (this.options.onRowsSelect) {
       this.warnDep(
-        'onRowsSelect has been renamed onRowSelectionChange. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
+        "onRowsSelect has been renamed onRowSelectionChange. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md",
       );
     }
     if (this.options.onRowsExpand) {
       this.warnDep(
-        'onRowsExpand has been renamed onRowExpansionChange. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
+        "onRowsExpand has been renamed onRowExpansionChange. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md",
       );
     }
     if (this.options.fixedHeaderOptions) {
       if (
-        typeof this.options.fixedHeaderOptions.yAxis !== 'undefined' &&
-        typeof this.options.fixedHeader === 'undefined'
+        typeof this.options.fixedHeaderOptions.yAxis !== "undefined" &&
+        typeof this.options.fixedHeader === "undefined"
       ) {
         this.options.fixedHeader = this.options.fixedHeaderOptions.yAxis;
       }
       if (
-        typeof this.options.fixedHeaderOptions.xAxis !== 'undefined' &&
-        typeof this.options.fixedSelectColumn === 'undefined'
+        typeof this.options.fixedHeaderOptions.xAxis !== "undefined" &&
+        typeof this.options.fixedSelectColumn === "undefined"
       ) {
         this.options.fixedSelectColumn = this.options.fixedHeaderOptions.xAxis;
       }
       this.warnDep(
-        'fixedHeaderOptions will still work but has been deprecated in favor of fixedHeader and fixedSelectColumn. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
+        "fixedHeaderOptions will still work but has been deprecated in favor of fixedHeader and fixedSelectColumn. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md",
       );
     }
     if (this.options.serverSideFilterList) {
       this.warnDep(
-        'serverSideFilterList will still work but has been deprecated in favor of the confirmFilters option. See this example for details: https://github.com/gregnb/mui-datatables/blob/master/examples/serverside-filters/index.js More info here: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
+        "serverSideFilterList will still work but has been deprecated in favor of the confirmFilters option. See this example for details: https://github.com/gregnb/mui-datatables/blob/master/examples/serverside-filters/index.js More info here: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md",
       );
     }
 
     props.columns.map((c) => {
       if (c.options && c.options.customFilterListRender) {
         this.warnDep(
-          'The customFilterListRender option has been deprecated. It is being replaced by customFilterListOptions.render (Specify customFilterListOptions: { render: Function } in column options.)',
+          "The customFilterListRender option has been deprecated. It is being replaced by customFilterListOptions.render (Specify customFilterListOptions: { render: Function } in column options.)",
         );
       }
     });
@@ -535,7 +530,7 @@ class MUIDataTable extends React.Component {
     if (Object.values) {
       if (Object.values(STP).indexOf(this.options.selectToolbarPlacement) === -1) {
         this.warnDep(
-          'Invalid option value for selectToolbarPlacement. Please check the documentation: https://github.com/gregnb/mui-datatables#options',
+          "Invalid option value for selectToolbarPlacement. Please check the documentation: https://github.com/gregnb/mui-datatables#options",
         );
       }
     }
@@ -554,18 +549,18 @@ class MUIDataTable extends React.Component {
 
   validateOptions(options) {
     if (options.serverSide && options.onTableChange === undefined) {
-      throw Error('onTableChange callback must be provided when using serverSide option');
+      throw Error("onTableChange callback must be provided when using serverSide option");
     }
     if (options.expandableRows && options.renderExpandableRow === undefined) {
-      throw Error('renderExpandableRow must be provided when using expandableRows option');
+      throw Error("renderExpandableRow must be provided when using expandableRows option");
     }
     if (options.rowsSelected && Array.isArray(options.rowsSelected) && options.rowsSelected.some(isNaN)) {
-      warnInfo('When using the rowsSelected option, must be provided an array of numbers only.');
+      warnInfo("When using the rowsSelected option, must be provided an array of numbers only.");
     }
   }
 
   setTableAction = (action) => {
-    if (typeof this.options.onTableChange === 'function') {
+    if (typeof this.options.onTableChange === "function") {
       this.options.onTableChange(action, this.state);
     }
     if (this.options.storageKey) {
@@ -574,13 +569,13 @@ class MUIDataTable extends React.Component {
   };
 
   setTableInit = (action) => {
-    if (typeof this.options.onTableInit === 'function') {
+    if (typeof this.options.onTableInit === "function") {
       this.options.onTableInit(action, this.state);
     }
   };
 
   getInitTableOptions() {
-    const optionNames = ['rowsPerPage', 'page', 'rowsSelected', 'rowsPerPageOptions'];
+    const optionNames = ["rowsPerPage", "page", "rowsSelected", "rowsPerPageOptions"];
     const optState = optionNames.reduce((acc, cur) => {
       if (this.options[cur] !== undefined) {
         acc[cur] = this.options[cur];
@@ -618,7 +613,7 @@ class MUIDataTable extends React.Component {
 
     newColumns.forEach((column, colIndex) => {
       let columnOptions = {
-        display: 'true',
+        display: "true",
         empty: false,
         filter: true,
         sort: true,
@@ -634,7 +629,7 @@ class MUIDataTable extends React.Component {
       columnOrder.push(colIndex);
       const options = { ...column.options };
 
-      if (typeof column === 'object') {
+      if (typeof column === "object") {
         if (options) {
           if (options.display !== undefined) {
             options.display = options.display.toString();
@@ -642,14 +637,14 @@ class MUIDataTable extends React.Component {
 
           if (options.sortDirection === null || options.sortDirection) {
             this.warnDep(
-              'The sortDirection column field has been deprecated. Please use the sortOrder option on the options object. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
+              "The sortDirection column field has been deprecated. Please use the sortOrder option on the options object. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md",
             );
           }
         }
 
         // remember stored version of display if not overwritten
         if (
-          typeof options.display === 'undefined' &&
+          typeof options.display === "undefined" &&
           prevColumns[colIndex] &&
           prevColumns[colIndex].name === column.name &&
           prevColumns[colIndex].display
@@ -724,7 +719,7 @@ class MUIDataTable extends React.Component {
     );
 
     let sortIndex = null;
-    let sortDirection = 'none';
+    let sortDirection = "none";
     let tableMeta;
 
     let sortOrder;
@@ -736,7 +731,7 @@ class MUIDataTable extends React.Component {
       // if no sortOrder, check and see if there's a sortDirection on one of the columns (deprecation notice for this is given above)
       if (!sortOrder.direction) {
         props.columns.forEach((column, colIndex) => {
-          if (column.options && (column.options.sortDirection === 'asc' || column.options.sortDirection === 'desc')) {
+          if (column.options && (column.options.sortDirection === "asc" || column.options.sortDirection === "desc")) {
             sortOrder.name = column.name;
             sortOrder.sortDirection = column.sortDirection;
           }
@@ -747,17 +742,17 @@ class MUIDataTable extends React.Component {
     const data = status === TABLE_LOAD.INITIAL ? this.transformData(columns, props.data) : props.data;
     let searchText = status === TABLE_LOAD.INITIAL ? this.options.searchText : null;
 
-    if (typeof this.options.searchText === 'undefined' && typeof this.state.searchText !== 'undefined') {
+    if (typeof this.options.searchText === "undefined" && typeof this.state.searchText !== "undefined") {
       searchText = this.state.searchText;
     }
 
     let rowsPerPage = this.state.rowsPerPage;
-    if (typeof this.options.rowsPerPage === 'number') {
+    if (typeof this.options.rowsPerPage === "number") {
       rowsPerPage = this.options.rowsPerPage;
     }
 
     let page = this.state.page;
-    if (typeof this.options.page === 'number') {
+    if (typeof this.options.page === "number") {
       page = this.options.page;
     }
 
@@ -765,7 +760,7 @@ class MUIDataTable extends React.Component {
       for (let rowIndex = 0; rowIndex < data.length; rowIndex++) {
         let value = status === TABLE_LOAD.INITIAL ? data[rowIndex][colIndex] : data[rowIndex].data[colIndex];
 
-        if (typeof tableData[rowIndex] === 'undefined') {
+        if (typeof tableData[rowIndex] === "undefined") {
           tableData.push({
             index: status === TABLE_LOAD.INITIAL ? rowIndex : data[rowIndex].index,
             data: status === TABLE_LOAD.INITIAL ? data[rowIndex] : data[rowIndex].data,
@@ -773,22 +768,22 @@ class MUIDataTable extends React.Component {
         }
 
         if (column.filter !== false) {
-          if (typeof column.customBodyRender === 'function') {
+          if (typeof column.customBodyRender === "function") {
             const rowData = tableData[rowIndex].data;
             tableMeta = this.getTableMeta(rowIndex, colIndex, rowData, column, data, this.state, tableData);
             const funcResult = column.customBodyRender(value, tableMeta);
 
             if (React.isValidElement(funcResult) && funcResult.props.value) {
               value = funcResult.props.value;
-            } else if (typeof funcResult === 'string') {
+            } else if (typeof funcResult === "string") {
               value = funcResult;
             }
           }
 
-          if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
+          if (typeof value === "object" && !Array.isArray(value) && value !== null) {
             // it's extremely rare but possible to create an object without a toString method, ex: var x = Object.create(null);
             // so this check has to be made
-            value = value.toString ? value.toString() : '';
+            value = value.toString ? value.toString() : "";
           }
 
           if (filterData[colIndex].indexOf(value) < 0 && !Array.isArray(value)) {
@@ -796,8 +791,8 @@ class MUIDataTable extends React.Component {
           } else if (Array.isArray(value)) {
             value.forEach((element) => {
               let elmVal;
-              if ((typeof element === 'object' && element !== null) || typeof element === 'function') {
-                elmVal = element.toString ? element.toString() : '';
+              if ((typeof element === "object" && element !== null) || typeof element === "function") {
+                elmVal = element.toString ? element.toString() : "";
               } else {
                 elmVal = element;
               }
@@ -814,7 +809,7 @@ class MUIDataTable extends React.Component {
         if (Array.isArray(column.filterOptions)) {
           filterData[colIndex] = cloneDeep(column.filterOptions);
           this.warnDep(
-            'filterOptions must now be an object. see https://github.com/gregnb/mui-datatables/tree/master/examples/customize-filter example',
+            "filterOptions must now be an object. see https://github.com/gregnb/mui-datatables/tree/master/examples/customize-filter example",
           );
         } else if (Array.isArray(column.filterOptions.names)) {
           filterData[colIndex] = cloneDeep(column.filterOptions.names);
@@ -854,7 +849,7 @@ class MUIDataTable extends React.Component {
 
     if (TABLE_LOAD.INITIAL) {
       // Multiple row selection customization
-      if (this.options.rowsSelected && this.options.rowsSelected.length && this.options.selectableRows === 'multiple') {
+      if (this.options.rowsSelected && this.options.rowsSelected.length && this.options.selectableRows === "multiple") {
         this.options.rowsSelected
           .filter((selectedRowIndex) => selectedRowIndex === 0 || (Number(selectedRowIndex) && selectedRowIndex > 0))
           .forEach((row) => {
@@ -875,7 +870,7 @@ class MUIDataTable extends React.Component {
       } else if (
         this.options.rowsSelected &&
         this.options.rowsSelected.length === 1 &&
-        this.options.selectableRows === 'single'
+        this.options.selectableRows === "single"
       ) {
         let rowPos = this.options.rowsSelected[0];
 
@@ -891,12 +886,12 @@ class MUIDataTable extends React.Component {
       } else if (
         this.options.rowsSelected &&
         this.options.rowsSelected.length > 1 &&
-        this.options.selectableRows === 'single'
+        this.options.selectableRows === "single"
       ) {
         console.error(
           'Multiple values provided for selectableRows, but selectableRows set to "single". Either supply only a single value or use "multiple".',
         );
-      } else if (typeof this.options.rowsSelected === 'undefined' && dataUpdated === false) {
+      } else if (typeof this.options.rowsSelected === "undefined" && dataUpdated === false) {
         if (this.state.selectedRows) {
           selectedRowsData = Object.assign({}, this.state.selectedRows);
         }
@@ -916,7 +911,7 @@ class MUIDataTable extends React.Component {
           expandedRowsData.data.push({ index: rowPos, dataIndex: row });
           expandedRowsData.lookup[row] = true;
         });
-      } else if (typeof this.options.rowsExpanded === 'undefined' && dataUpdated === false && this.state.expandedRows) {
+      } else if (typeof this.options.rowsExpanded === "undefined" && dataUpdated === false && this.state.expandedRows) {
         expandedRowsData = Object.assign({}, this.state.expandedRows);
       }
     }
@@ -999,7 +994,7 @@ class MUIDataTable extends React.Component {
 
         /* drill down to get the value of a cell */
         columnValue =
-          typeof funcResult === 'string' || !funcResult
+          typeof funcResult === "string" || !funcResult
             ? funcResult
             : funcResult.props && funcResult.props.value
               ? funcResult.props.value
@@ -1010,23 +1005,23 @@ class MUIDataTable extends React.Component {
         displayRow.push(columnDisplay);
       }
 
-      const columnVal = columnValue === null || columnValue === undefined ? '' : columnValue.toString();
+      const columnVal = columnValue === null || columnValue === undefined ? "" : columnValue.toString();
 
       const filterVal = filterList[index];
       const caseSensitive = options.caseSensitive;
       const filterType = column.filterType || options.filterType;
-      if (filterVal.length || filterType === 'custom') {
+      if (filterVal.length || filterType === "custom") {
         if (column.filterOptions && column.filterOptions.logic) {
           if (column.filterOptions.logic(columnValue, filterVal, row)) isFiltered = true;
-        } else if (filterType === 'textField' && !this.hasSearchText(columnVal, filterVal, caseSensitive)) {
+        } else if (filterType === "textField" && !this.hasSearchText(columnVal, filterVal, caseSensitive)) {
           isFiltered = true;
         } else if (
-          filterType !== 'textField' &&
+          filterType !== "textField" &&
           Array.isArray(columnValue) === false &&
           filterVal.indexOf(columnValue) < 0
         ) {
           isFiltered = true;
-        } else if (filterType !== 'textField' && Array.isArray(columnValue)) {
+        } else if (filterType !== "textField" && Array.isArray(columnValue)) {
           if (options.filterArrayFullMatch) {
             //true if every filterVal exists in columnVal, false otherwise
             const isFullMatch = filterVal.every((el) => {
@@ -1050,9 +1045,9 @@ class MUIDataTable extends React.Component {
 
       if (
         searchText &&
-        column.display !== 'excluded' &&
+        column.display !== "excluded" &&
         this.hasSearchText(columnVal, searchText, caseSensitive) &&
-        column.display !== 'false' &&
+        column.display !== "false" &&
         column.searchable
       ) {
         isSearchFound = true;
@@ -1063,8 +1058,8 @@ class MUIDataTable extends React.Component {
 
     if (searchText && customSearch) {
       const customSearchResult = customSearch(searchText, row, columns);
-      if (typeof customSearchResult !== 'boolean') {
-        console.error('customSearch must return a boolean');
+      if (typeof customSearchResult !== "boolean") {
+        console.error("customSearch must return a boolean");
       } else {
         isSearchFound = customSearchResult;
       }
@@ -1072,7 +1067,7 @@ class MUIDataTable extends React.Component {
 
     if (options.serverSide) {
       if (customSearch) {
-        console.warn('Server-side filtering is enabled, hence custom search will be ignored.');
+        console.warn("Server-side filtering is enabled, hence custom search will be ignored.");
       }
 
       return displayRow;
@@ -1113,7 +1108,7 @@ class MUIDataTable extends React.Component {
       const filterValue =
         React.isValidElement(funcResult) && funcResult.props.value
           ? funcResult.props.value
-          : prevState['data'][row][index];
+          : prevState["data"][row][index];
 
       const prevFilterIndex = filterData[index].indexOf(filterValue);
       filterData[index].splice(prevFilterIndex, 1, filterValue);
@@ -1186,17 +1181,17 @@ class MUIDataTable extends React.Component {
     this.setState(
       (prevState) => {
         const columns = cloneDeep(prevState.columns);
-        columns[index].display = columns[index].display === 'true' ? 'false' : 'true';
+        columns[index].display = columns[index].display === "true" ? "false" : "true";
         return {
           columns: columns,
         };
       },
       () => {
-        this.setTableAction('viewColumnsChange');
+        this.setTableAction("viewColumnsChange");
         var cb = this.options.onViewColumnsChange || this.options.onColumnViewChange;
 
         if (cb) {
-          cb(this.state.columns[index].name, this.state.columns[index].display === 'true' ? 'add' : 'remove');
+          cb(this.state.columns[index].name, this.state.columns[index].display === "true" ? "add" : "remove");
         }
       },
     );
@@ -1210,11 +1205,11 @@ class MUIDataTable extends React.Component {
         };
       },
       () => {
-        this.setTableAction('viewColumnsChange');
+        this.setTableAction("viewColumnsChange");
         var cb = this.options.onViewColumnsChange || this.options.onColumnViewChange;
 
         if (cb) {
-          cb(null, 'update', newColumns);
+          cb(null, "update", newColumns);
         }
       },
     );
@@ -1222,14 +1217,14 @@ class MUIDataTable extends React.Component {
 
   getSortDirectionLabel(sortOrder) {
     switch (sortOrder.direction) {
-      case 'asc':
-        return 'ascending';
-      case 'desc':
-        return 'descending';
-      case 'none':
-        return 'none';
+      case "asc":
+        return "ascending";
+      case "desc":
+        return "descending";
+      case "none":
+        return "none";
       default:
-        return '';
+        return "";
     }
   }
 
@@ -1247,14 +1242,14 @@ class MUIDataTable extends React.Component {
       (prevState) => {
         let columns = cloneDeep(prevState.columns);
         let data = prevState.data;
-        let newOrder = columns[index].sortDescFirst ? 'desc' : 'asc'; // default
+        let newOrder = columns[index].sortDescFirst ? "desc" : "asc"; // default
 
-        let sequenceOrder = ['asc', 'desc'];
+        let sequenceOrder = ["asc", "desc"];
         if (columns[index].sortDescFirst) {
-          sequenceOrder = ['desc', 'asc'];
+          sequenceOrder = ["desc", "asc"];
         }
         if (columns[index].sortThirdClickReset) {
-          sequenceOrder.push('none');
+          sequenceOrder.push("none");
         }
 
         if (columns[index].name === this.state.sortOrder.name) {
@@ -1311,7 +1306,7 @@ class MUIDataTable extends React.Component {
         return newState;
       },
       () => {
-        this.setTableAction('sort');
+        this.setTableAction("sort");
 
         if (this.options.onColumnSortChange) {
           this.options.onColumnSortChange(this.state.sortOrder.name, this.state.sortOrder.direction);
@@ -1329,7 +1324,7 @@ class MUIDataTable extends React.Component {
         page: getPageValue(rowCount, rows, this.state.page),
       }),
       () => {
-        this.setTableAction('changeRowsPerPage');
+        this.setTableAction("changeRowsPerPage");
 
         if (this.options.onChangeRowsPerPage) {
           this.options.onChangeRowsPerPage(this.state.rowsPerPage);
@@ -1344,7 +1339,7 @@ class MUIDataTable extends React.Component {
         page: page,
       }),
       () => {
-        this.setTableAction('changePage');
+        this.setTableAction("changePage");
         if (this.options.onChangePage) {
           this.options.onChangePage(this.state.page);
         }
@@ -1361,7 +1356,7 @@ class MUIDataTable extends React.Component {
           : this.getDisplayData(prevState.columns, prevState.data, prevState.filterList, null, null, this.props),
       }),
       () => {
-        this.setTableAction('search');
+        this.setTableAction("search");
         if (this.options.onSearchChange) {
           this.options.onSearchChange(this.state.searchText);
         }
@@ -1379,7 +1374,7 @@ class MUIDataTable extends React.Component {
           : this.getDisplayData(prevState.columns, prevState.data, prevState.filterList, text, null, this.props),
       }),
       () => {
-        this.setTableAction('search');
+        this.setTableAction("search");
         if (this.options.onSearchChange) {
           this.options.onSearchChange(this.state.searchText);
         }
@@ -1407,9 +1402,9 @@ class MUIDataTable extends React.Component {
         };
       },
       () => {
-        this.setTableAction('resetFilters');
+        this.setTableAction("resetFilters");
         if (this.options.onFilterChange) {
-          this.options.onFilterChange(null, this.state.filterList, 'reset', null);
+          this.options.onFilterChange(null, this.state.filterList, "reset", null);
         }
       },
     );
@@ -1419,19 +1414,19 @@ class MUIDataTable extends React.Component {
     const filterPos = filterList[index].findIndex((filter) => isEqual(filter, value));
 
     switch (type) {
-      case 'checkbox':
+      case "checkbox":
         filterPos >= 0 ? filterList[index].splice(filterPos, 1) : filterList[index].push(value);
         break;
-      case 'chip':
+      case "chip":
         filterPos >= 0 ? filterList[index].splice(filterPos, 1) : filterList[index].push(value);
         break;
-      case 'multiselect':
-        filterList[index] = value === '' ? [] : value;
+      case "multiselect":
+        filterList[index] = value === "" ? [] : value;
         break;
-      case 'dropdown':
+      case "dropdown":
         filterList[index] = value;
         break;
-      case 'custom':
+      case "custom":
         if (customUpdate) {
           filterList = customUpdate(filterList, filterPos, index);
         } else {
@@ -1439,7 +1434,7 @@ class MUIDataTable extends React.Component {
         }
         break;
       default:
-        filterList[index] = filterPos >= 0 || value === '' ? [] : [value];
+        filterList[index] = filterPos >= 0 || value === "" ? [] : [value];
     }
   };
 
@@ -1466,7 +1461,7 @@ class MUIDataTable extends React.Component {
         };
       },
       () => {
-        this.setTableAction('filterChange');
+        this.setTableAction("filterChange");
         if (this.options.onFilterChange) {
           this.options.onFilterChange(column, this.state.filterList, type, index, this.state.displayData);
         }
@@ -1514,7 +1509,7 @@ class MUIDataTable extends React.Component {
         },
       },
       () => {
-        this.setTableAction('expandRow');
+        this.setTableAction("expandRow");
         if (this.options.onRowExpansionChange) {
           this.options.onRowExpansionChange(
             affecttedRows,
@@ -1538,7 +1533,7 @@ class MUIDataTable extends React.Component {
         };
       },
       () => {
-        this.setTableAction('columnOrderChange');
+        this.setTableAction("columnOrderChange");
         if (this.options.onColumnOrderChange) {
           this.options.onColumnOrderChange(this.state.columnOrder, columnIndex, newPosition);
         }
@@ -1573,7 +1568,7 @@ class MUIDataTable extends React.Component {
       TABLE_LOAD.UPDATE,
       true,
       () => {
-        this.setTableAction('rowDelete');
+        this.setTableAction("rowDelete");
       },
     );
   };
@@ -1613,7 +1608,7 @@ class MUIDataTable extends React.Component {
         },
       },
       () => {
-        this.setTableAction('rowExpansionChange');
+        this.setTableAction("rowExpansionChange");
         if (this.options.onRowExpansionChange || this.options.onRowsExpand) {
           let expandCallback = this.options.onRowExpansionChange || this.options.onRowsExpand;
           expandCallback(this.state.curExpandedRows, this.state.expandedRows.data);
@@ -1625,11 +1620,11 @@ class MUIDataTable extends React.Component {
   selectRowUpdate = (type, value, shiftAdjacentRows = []) => {
     // safety check
     const { selectableRows } = this.options;
-    if (selectableRows === 'none') {
+    if (selectableRows === "none") {
       return;
     }
 
-    if (type === 'head') {
+    if (type === "head") {
       const { isRowSelectable } = this.options;
       this.setState(
         (prevState) => {
@@ -1675,7 +1670,7 @@ class MUIDataTable extends React.Component {
           };
         },
         () => {
-          this.setTableAction('rowSelectionChange');
+          this.setTableAction("rowSelectionChange");
           if (this.options.onRowSelectionChange) {
             this.options.onRowSelectionChange(
               this.state.curSelectedRows,
@@ -1691,7 +1686,7 @@ class MUIDataTable extends React.Component {
           }
         },
       );
-    } else if (type === 'cell') {
+    } else if (type === "cell") {
       this.setState(
         (prevState) => {
           const { dataIndex } = value;
@@ -1717,7 +1712,7 @@ class MUIDataTable extends React.Component {
                 }
               }
             }
-          } else if (selectableRows === 'single') {
+          } else if (selectableRows === "single") {
             selectedRows = [value];
           } else {
             // multiple
@@ -1743,7 +1738,7 @@ class MUIDataTable extends React.Component {
           };
         },
         () => {
-          this.setTableAction('rowSelectionChange');
+          this.setTableAction("rowSelectionChange");
           if (this.options.onRowSelectionChange) {
             this.options.onRowSelectionChange(
               [value],
@@ -1759,7 +1754,7 @@ class MUIDataTable extends React.Component {
           }
         },
       );
-    } else if (type === 'custom') {
+    } else if (type === "custom") {
       const { displayData } = this.state;
 
       const data = value.map((row) => ({ index: row, dataIndex: displayData[row].dataIndex }));
@@ -1771,7 +1766,7 @@ class MUIDataTable extends React.Component {
           previousSelectedRow: null,
         },
         () => {
-          this.setTableAction('rowSelectionChange');
+          this.setTableAction("rowSelectionChange");
           if (this.options.onRowSelectionChange) {
             this.options.onRowSelectionChange(
               this.state.selectedRows.data,
@@ -1794,12 +1789,12 @@ class MUIDataTable extends React.Component {
     let hasCustomTableSort = this.options.customSort && !columnSortCompare;
     let meta = { selectedRows: this.state.selectedRows }; // meta for customSort
     let dataSrc = hasCustomTableSort
-      ? this.options.customSort(data, col, order || (this.options.sortDescFirst ? 'desc' : 'asc'), meta)
+      ? this.options.customSort(data, col, order || (this.options.sortDescFirst ? "desc" : "asc"), meta)
       : data;
 
     // reset the order by index
     let noSortData;
-    if (order === 'none') {
+    if (order === "none") {
       noSortData = data.reduce((r, i) => {
         r[i.index] = i;
         return r;
@@ -1830,7 +1825,7 @@ class MUIDataTable extends React.Component {
     }
 
     return {
-      data: order === 'none' ? noSortData : tableData,
+      data: order === "none" ? noSortData : tableData,
       selectedRows: {
         lookup: buildMap(selectedRows),
         data: selectedRows,
@@ -1894,35 +1889,35 @@ class MUIDataTable extends React.Component {
 
     switch (responsiveOption) {
       // deprecated
-      case 'scroll':
+      case "scroll":
         responsiveClass = classes.responsiveScroll;
-        maxHeight = '499px';
+        maxHeight = "499px";
         break;
       // deprecated
-      case 'scrollMaxHeight':
+      case "scrollMaxHeight":
         responsiveClass = classes.responsiveScrollMaxHeight;
-        maxHeight = '499px';
+        maxHeight = "499px";
         break;
       // deprecated
-      case 'scrollFullHeight':
+      case "scrollFullHeight":
         responsiveClass = classes.responsiveScrollFullHeight;
-        maxHeight = 'none';
+        maxHeight = "none";
         break;
       // deprecated
-      case 'scrollFullHeightFullWidth':
+      case "scrollFullHeightFullWidth":
         responsiveClass = classes.responsiveScrollFullHeight;
         paperClasses = `${classes.paperResponsiveScrollFullHeightFullWidth} ${className}`;
         break;
       // deprecated
-      case 'stacked':
+      case "stacked":
         responsiveClass = classes.responsiveStacked;
-        maxHeight = 'none';
+        maxHeight = "none";
         break;
       // deprecated
-      case 'stackedFullWidth':
+      case "stackedFullWidth":
         responsiveClass = classes.responsiveStackedFullWidth;
         paperClasses = `${classes.paperResponsiveScrollFullHeightFullWidth} ${className}`;
-        maxHeight = 'none';
+        maxHeight = "none";
         break;
 
       default:
@@ -1943,7 +1938,7 @@ class MUIDataTable extends React.Component {
     delete tableProps.className; // remove className from props to avoid the className being applied twice
 
     const dndProps = {};
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       dndProps.context = window;
     }
 
@@ -2004,7 +1999,7 @@ class MUIDataTable extends React.Component {
           filterUpdate={this.filterUpdate}
           columnNames={columnNames}
         />
-        <div style={{ position: 'relative', ...tableHeightVal }} className={responsiveClass}>
+        <div style={{ position: "relative", ...tableHeightVal }} className={responsiveClass}>
           {(this.options.resizableColumns === true ||
             (this.options.resizableColumns && this.options.resizableColumns.enabled)) && (
             <TableResizeComponent
@@ -2020,10 +2015,11 @@ class MUIDataTable extends React.Component {
             const components = (
               <MuiTable
                 ref={(el) => (this.tableRef = el)}
-                tabIndex={'0'}
-                role={'grid'}
+                tabIndex={"0"}
+                role={"grid"}
                 className={tableClassNames}
-                {...tableProps}>
+                {...tableProps}
+              >
                 <caption className={classes.caption}>{title}</caption>
                 <TableHeadComponent
                   columns={columns}
@@ -2096,7 +2092,7 @@ class MUIDataTable extends React.Component {
           changeRowsPerPage={this.changeRowsPerPage}
           changePage={this.changePage}
         />
-        <div className={classes.liveAnnounce} aria-live={'polite'}>
+        <div className={classes.liveAnnounce} aria-live={"polite"}>
           {announceText}
         </div>
       </Paper>
@@ -2104,4 +2100,4 @@ class MUIDataTable extends React.Component {
   }
 }
 
-export default withStyles(MUIDataTable, defaultTableStyles, { name: 'MUIDataTable' });
+export default withStyles(MUIDataTable, defaultTableStyles, { name: "MUIDataTable" });