Update to tss-react v4

README.md

@@ -18,20 +18,27 @@ Version 3 has been released! You can read about the [updates here](https://githu
 </div>
 
 # Table of contents
-* [Install](#install)
-* [Demo](#demo)
-* [Compatibility](#compatibility)
-* [Usage](#usage)
-* [API](#api)
-* [Customize Columns](#customize-columns)
-* [Plug-ins](#plug-ins)
-* [Customize Styling](#customize-styling)
-* [Custom Components](#custom-components)
-* [Remote Data](#remote-data)
-* [Localization](#localization)
-* [Contributing](#contributing)
-* [License](#licence)
-* [Thanks](#thanks)
+- [MUI-Datatables - Datatables for MUI (formerly Material-UI)](#mui-datatables---datatables-for-mui-formerly-material-ui)
+- [Table of contents](#table-of-contents)
+  - [Install](#install)
+  - [Compatibility](#compatibility)
+  - [Demo](#demo)
+  - [Usage](#usage)
+  - [API](#api)
+      - [&lt;MUIDataTable />](#muidatatable-)
+      - [Options:](#options)
+  - [Customize Columns](#customize-columns)
+      - [Column:](#column)
+      - [Column Options:](#column-options)
+  - [Plug-ins](#plug-ins)
+      - [Available Plug-ins:](#available-plug-ins)
+  - [Customize Styling](#customize-styling)
+  - [Custom Components](#custom-components)
+  - [Remote Data](#remote-data)
+  - [Localization](#localization)
+  - [Contributing](#contributing)
+  - [License](#license)
+  - [Thanks](#thanks)
 
 ## Install
 
@@ -47,7 +54,7 @@ If your project doesn't already use them, you need to install mui v5 and it's ic
 | ^2.0.0         | ^3.0.0      | `@material-ui/core`,`@material-ui/icons`            |
 | ^3.0.0         | ^4.10.0     | `@material-ui/core`,`@material-ui/icons`            |
 | ^3.8.0         | ^4.12.0     | `@material-ui/core`,`@material-ui/icons`            |
-| ^4.0.0         | ^5.0.0      | `@mui/material`,`@mui/icons-material` |
+| ^4.0.0         | ^5.9.3      | `@mui/material`,`@mui/icons-material`               |
 
 ## Demo
 
@@ -365,13 +372,6 @@ Using Material-UI theme overrides will allow you to customize styling to your li
 import React from "react";
 import MUIDataTable from "mui-datatables";
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import { CacheProvider } from "@emotion/react";
-import createCache from "@emotion/cache";
-
-const muiCache = createCache({
-	"key": "mui",
-	"prepend": true
-});
 
 class BodyCellExample extends React.Component {
 
@@ -390,11 +390,9 @@ class BodyCellExample extends React.Component {
   render() {
 
     return (
-		<CacheProvider value={muiCache}>
 		  <ThemeProvider theme={this.getMuiTheme()}>
-			<MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
+			  <MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
 		  </ThemeProvider>
-		</CacheProvider>
     );
 
   }

examples/Router/index.js

@@ -6,8 +6,6 @@ import ExamplesGrid from './ExamplesGrid';
 import examples from '../examples';
 import Button from '@mui/material/Button';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import { CacheProvider } from '@emotion/react';
-import createCache from '@emotion/cache';
 
 const styles = {
   root: {
@@ -19,11 +17,6 @@ const styles = {
   },
 };
 
-const muiCache = createCache({
-  key: 'mui-datatables',
-  prepend: true,
-});
-
 class Examples extends React.Component {
   returnHome = () => {
     this.props.history.push('/');
@@ -37,34 +30,32 @@ class Examples extends React.Component {
     const defaultTheme = createTheme();
 
     return (
-      <CacheProvider value={muiCache}>
-        <ThemeProvider theme={defaultTheme}>
-          <main className={classes.root}>
-            <div className={classes.contentWrapper}>
-              <Switch>
-                <Route path="/" exact render={() => <ExamplesGrid examples={examples} />} />
-                {Object.keys(examples).map((label, index) => (
-                  <Route
-                    key={index}
-                    path={`/${label.replace(/\s+/g, '-').toLowerCase()}`}
-                    exact
-                    component={examples[label]}
-                  />
-                ))}
-              </Switch>
-              <div>
-                {this.props.location.pathname !== '/' && (
-                  <div style={returnHomeStyle}>
-                    <Button color="primary" onClick={this.returnHome}>
-                      Back to Example Index
-                    </Button>
-                  </div>
-                )}
-              </div>
+      <ThemeProvider theme={defaultTheme}>
+        <main className={classes.root}>
+          <div className={classes.contentWrapper}>
+            <Switch>
+              <Route path="/" exact render={() => <ExamplesGrid examples={examples} />} />
+              {Object.keys(examples).map((label, index) => (
+                <Route
+                  key={index}
+                  path={`/${label.replace(/\s+/g, '-').toLowerCase()}`}
+                  exact
+                  component={examples[label]}
+                />
+              ))}
+            </Switch>
+            <div>
+              {this.props.location.pathname !== '/' && (
+                <div style={returnHomeStyle}>
+                  <Button color="primary" onClick={this.returnHome}>
+                    Back to Example Index
+                  </Button>
+                </div>
+              )}
             </div>
-          </main>
-        </ThemeProvider>
-      </CacheProvider>
+          </div>
+        </main>
+      </ThemeProvider>
     );
   }
 }

examples/customize-styling/index.js

@@ -7,13 +7,6 @@ import Switch from '@mui/material/Switch';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import clsx from 'clsx';
-import { CacheProvider } from '@emotion/react';
-import createCache from '@emotion/cache';
-
-const muiCache = createCache({
-  key: 'mui-datatables',
-  prepend: true,
-});
 
 const customStyles = theme => ({
   BusinessAnalystRow: {
@@ -210,35 +203,33 @@ class Example extends React.Component {
     };
 
     return (
-      <CacheProvider value={muiCache}>
-        <ThemeProvider theme={this.getMuiTheme()}>
-          <FormGroup row>
-            <FormControlLabel
-              control={
-                <Switch
-                  checked={this.state.denseTable}
-                  onChange={this.toggleDenseTable}
-                  value="denseTable"
-                  color="primary"
-                />
-              }
-              label="Dense Table"
-            />
-            <FormControlLabel
-              control={
-                <Switch
-                  checked={this.state.vertical}
-                  onChange={this.toggleResponsive}
-                  value="vertical"
-                  color="primary"
-                />
-              }
-              label="Responsive Vertical Table"
-            />
-          </FormGroup>
-          <MUIDataTable title={'ACME Employee list'} data={data} columns={columns} options={options} />
-        </ThemeProvider>
-      </CacheProvider>
+      <ThemeProvider theme={this.getMuiTheme()}>
+        <FormGroup row>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={this.state.denseTable}
+                onChange={this.toggleDenseTable}
+                value="denseTable"
+                color="primary"
+              />
+            }
+            label="Dense Table"
+          />
+          <FormControlLabel
+            control={
+              <Switch
+                checked={this.state.vertical}
+                onChange={this.toggleResponsive}
+                value="vertical"
+                color="primary"
+              />
+            }
+            label="Responsive Vertical Table"
+          />
+        </FormGroup>
+        <MUIDataTable title={'ACME Employee list'} data={data} columns={columns} options={options} />
+      </ThemeProvider>
     );
   }
 }

examples/expandable-rows/index.js

@@ -3,13 +3,6 @@ import MUIDataTable, { ExpandButton } from '../../src/';
 import TableRow from '@mui/material/TableRow';
 import TableCell from '@mui/material/TableCell';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import { CacheProvider } from '@emotion/react';
-import createCache from '@emotion/cache';
-
-const muiCache = createCache({
-  key: 'mui-datatables',
-  prepend: true,
-});
 
 class Example extends React.Component {
   render() {
@@ -127,17 +120,15 @@ class Example extends React.Component {
     };
 
     return (
-      <CacheProvider value={muiCache}>
-        <ThemeProvider theme={theme}>
-          <MUIDataTable
-            title={'ACME Employee list'}
-            data={data}
-            columns={columns}
-            options={options}
-            components={components}
-          />
-        </ThemeProvider>
-      </CacheProvider>
+      <ThemeProvider theme={theme}>
+        <MUIDataTable
+          title={'ACME Employee list'}
+          data={data}
+          columns={columns}
+          options={options}
+          components={components}
+        />
+      </ThemeProvider>
     );
   }
 }

examples/themes/index.js

@@ -1,13 +1,6 @@
 import React from 'react';
 import MUIDataTable from '../../src/';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import createCache from '@emotion/cache';
-import { CacheProvider } from '@emotion/react';
-
-const muiCache = createCache({
-  key: 'mui-datatables',
-  prepend: true,
-});
 
 class Example extends React.Component {
   render() {
@@ -92,11 +85,9 @@ class Example extends React.Component {
     });
 
     return (
-      <CacheProvider value={muiCache}>
-        <ThemeProvider theme={theme}>
-          <MUIDataTable title={'ACME Employee list'} data={data} columns={columns} options={options} />
-        </ThemeProvider>
-      </CacheProvider>
+      <ThemeProvider theme={theme}>
+        <MUIDataTable title={'ACME Employee list'} data={data} columns={columns} options={options} />
+      </ThemeProvider>
     );
   }
 }