Internet Explorer 11 browser gives some error (version 3.0.0 or later)😟

Describe the bug

Internet Explorer 11 browser gives some error (version 3.0.0 or later)

To Reploduce

In order to reproduce , I recreated a React App according to the source cords in the link below However, the following error occurs in Internet Explorer 11 browser.

https://github.com/gregnb/mui-datatables

• Sample Code

import MUIDataTable from "mui-datatables";

const columns = ["Name", "Company", "City", "State"];

const data = [
["Joe James", "Test Corp", "Yonkers", "NY"],
["John Walsh", "Test Corp", "Hartford", "CT"],
["Bob Herm", "Test Corp", "Tampa", "FL"],
["James Houston", "Test Corp", "Dallas", "TX"],
];

const options = {
filterType: 'checkbox',
};

<MUIDataTable
title={"Employee List"}
data={data}
columns={columns}
options={options}
/>

• The error output to the console log

Object doesn't support property or method 'includes

This error occurs in version 3.0.0 and later. Versions earlier than 3.0.0(ex. Version 2.15.0) will work normally without error.

Expected behavior

I want it to work fine with the Internet Explorer 11 browser. Of course, I understand that if I don’t use the Internet Explorer 11 browser, the error doesn’t occur. Many enterprise applications still have to use the Internet Explorer 11 browser. So this time I posted this case as a bug.

Please let me know if there are any possible remedies or ideas that may help solve this issue. Thank you.

Your Environment

Tech	Version
Material-UI	4.11.0
MUI-datatables	3.3.0
React
browser	Internet Explorer 11
etc

[patorjk]

Try adding this polyfill for Object.values:

Object.values = Object.values ? Object.values : function(obj) {
	var allowedTypes = ["[object String]", "[object Object]", "[object Array]", "[object Function]"];
	var objType = Object.prototype.toString.call(obj);

	if(obj === null || typeof obj === "undefined") {
		throw new TypeError("Cannot convert undefined or null to object");
	} else if(!~allowedTypes.indexOf(objType)) {
		return [];
	} else {
		// if ES6 is supported
		if (Object.keys) {
			return Object.keys(obj).map(function (key) {
				return obj[key];
			});
		}
		
		var result = [];
		for (var prop in obj) {
			if (obj.hasOwnProperty(prop)) {
				result.push(obj[prop]);
			}
		}
		
		return result;
	}
};

[patorjk]

This sounds like a polyfill issue. Can you add the following polyfill to your code and see if it fixes the issue:

if (!Array.prototype.includes) {
  Object.defineProperty(Array.prototype, "includes", {
    enumerable: false,
    value: function(obj) {
        var newArr = this.filter(function(el) {
          return el == obj;
        });
        return newArr.length > 0;
      }
  });
}

You would need to put that somewhere before mui-datatables is included.

This table should try and work in IE11. If the above polyfill works, I’ll release a version 3.3.2 that doesn’t use includes. However, before I do that, I’d want to make sure that “includes” is the only issue in IE11.