Migrate to v5

__tests__/demo/demo-components/RemoteData/index.js

@@ -1,9 +1,5 @@
 import React, { useState, useRef, Component } from 'react';
 import MaterialTable, { MTableBodyRow, MTableEditRow } from '../../../../src';
-import { Grid, MuiThemeProvider, Button } from '@material-ui/core';
-import { createMuiTheme } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-
 // check if removing this.isRemoteData()@https://github.com/material-table-core/core/blob/0e953441fd9f9912d8cf97db103a8e0cb4f43912/src/material-table.js#L119-L120
 // is any good
 

__tests__/demo/demo.js

@@ -16,6 +16,7 @@
  * built-in dev server (run `npm start`)
  */
 
+import { ThemeProvider, createTheme } from '@material-ui/core';
 import React from 'react';
 import { render } from 'react-dom';
 
@@ -39,7 +40,7 @@ import { I1353, I1941, I122 } from './demo-components/RemoteData';
 module.hot.accept();
 
 render(
-  <div>
+  <ThemeProvider theme={createTheme()}>
     <h1>Basic</h1>
     <Basic />
 
@@ -108,6 +109,6 @@ render(
         <I122 />
       </li>
     </ol>
-  </div>,
+  </ThemeProvider>,
   document.querySelector('#app')
 );

package.json

@@ -102,23 +102,22 @@
   "dependencies": {
     "@babel/runtime": "^7.12.5",
     "@date-io/date-fns": "^1.3.13",
-    "@material-ui/pickers": "^3.2.10",
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
     "debounce": "^1.2.0",
     "fast-deep-equal": "^3.1.3",
     "prop-types": "^15.7.2",
     "react-beautiful-dnd": "^13.0.0",
-    "react-double-scrollbar": "0.0.15"
-  },
-  "peerDependencies": {
+    "react-double-scrollbar": "0.0.15",
     "@date-io/core": "^1.3.13",
     "@material-ui/core": "^5.0.0-alpha.35",
     "@material-ui/styles": "^5.0.0-alpha.35",
     "@material-ui/lab": "^5.0.0-alpha.35",
     "@emotion/core": "^11.0.0",
     "@emotion/react": "^11.0.0",
-    "@emotion/styled": "^11.0.0",
+    "@emotion/styled": "^11.0.0"
+  },
+  "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   }

src/components/MTableEditCell/index.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { TableCell, CircularProgress, withTheme } from '@material-ui/core';
+import { TableCell, CircularProgress } from '@material-ui/core';
+import { withTheme } from '@material-ui/styles';
 
 function MTableEditCell(props) {
   const [state, setState] = useState(() => ({

src/components/MTableEditField/DateField.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import DateFnsUtils from '@date-io/date-fns';
-import { MuiPickersUtilsProvider, DatePicker } from '@material-ui/pickers';
+import { LocalizationProvider, DatePicker } from '@material-ui/lab';
 
 function DateField({
   columnDef,
@@ -31,7 +31,7 @@ function DateField({
   const datePickerProps = getProps();
 
   return (
-    <MuiPickersUtilsProvider utils={DateFnsUtils} locale={locale}>
+    <LocalizationProvider dateAdapter={DateFnsUtils} locale={locale}>
       <DatePicker
         {...datePickerProps}
         ref={forwardedRef}
@@ -48,7 +48,7 @@ function DateField({
           'aria-label': `${columnDef.title}: press space to edit`
         }}
       />
-    </MuiPickersUtilsProvider>
+    </LocalizationProvider>
   );
 }
 

src/components/MTableEditField/DateTimeField.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import DateFnsUtils from '@date-io/date-fns';
-import { MuiPickersUtilsProvider, DateTimePicker } from '@material-ui/pickers';
+import { LocalizationProvider, DateTimePicker } from '@material-ui/lab';
 
 function DateTimeField({ forwardedRef, ...props }) {
   return (
-    <MuiPickersUtilsProvider utils={DateFnsUtils} locale={props.locale}>
+    <LocalizationProvider dateAdapter={DateFnsUtils} locale={props.locale}>
       <DateTimePicker
         {...props}
         ref={forwardedRef}
@@ -21,7 +21,7 @@ function DateTimeField({ forwardedRef, ...props }) {
           'aria-label': `${props.columnDef.title}: press space to edit`
         }}
       />
-    </MuiPickersUtilsProvider>
+    </LocalizationProvider>
   );
 }
 

src/components/MTableEditField/TimeField.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import DateFnsUtils from '@date-io/date-fns';
-import { MuiPickersUtilsProvider, TimePicker } from '@material-ui/pickers';
+import { LocalizationProvider, TimePicker } from '@material-ui/lab';
 
 function TimeField({ forwardedRef, ...props }) {
   return (
-    <MuiPickersUtilsProvider utils={DateFnsUtils} locale={props.locale}>
+    <LocalizationProvider dateAdapter={DateFnsUtils} locale={props.locale}>
       <TimePicker
         {...props}
         ref={forwardedRef}
@@ -21,7 +21,7 @@ function TimeField({ forwardedRef, ...props }) {
           'aria-label': `${props.columnDef.title}: press space to edit`
         }}
       />
-    </MuiPickersUtilsProvider>
+    </LocalizationProvider>
   );
 }
 

src/components/MTableFilterRow/DateFilter.js

@@ -4,9 +4,9 @@ import { getLocalizedFilterPlaceHolder } from './utils';
 import {
   DatePicker,
   DateTimePicker,
-  MuiPickersUtilsProvider,
+  LocalizationProvider,
   TimePicker
-} from '@material-ui/pickers';
+} from '@material-ui/lab';
 
 function DateFilter({
   columnDef,
@@ -34,12 +34,12 @@ function DateFilter({
   }
 
   return (
-    <MuiPickersUtilsProvider
-      utils={DateFnsUtils}
+    <LocalizationProvider
+      dateAdapter={DateFnsUtils}
       locale={localization.dateTimePickerLocalization}
     >
       {dateInputElement}
-    </MuiPickersUtilsProvider>
+    </LocalizationProvider>
   );
 }
 

src/components/MTableHeader/index.js

@@ -6,7 +6,8 @@ import TableCell from '@material-ui/core/TableCell';
 import TableSortLabel from '@material-ui/core/TableSortLabel';
 import Checkbox from '@material-ui/core/Checkbox';
 import { Draggable } from 'react-beautiful-dnd';
-import { Tooltip, withStyles } from '@material-ui/core';
+import { Tooltip } from '@material-ui/core';
+import { withStyles } from '@material-ui/styles';
 import * as CommonValues from '../../utils/common-values';
 
 export function MTableHeader({ onColumnResized, ...props }) {

src/components/MTablePagination/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import IconButton from '@material-ui/core/IconButton';
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@material-ui/styles';
 import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
 import PropTypes from 'prop-types';
@@ -9,19 +9,19 @@ import React from 'react';
 
 function MTablePagination(props) {
   const handleFirstPageButtonClick = (event) => {
-    props.onChangePage(event, 0);
+    props.onPageChange(event, 0);
   };
 
   const handleBackButtonClick = (event) => {
-    props.onChangePage(event, props.page - 1);
+    props.onPageChange(event, props.page - 1);
   };
 
   const handleNextButtonClick = (event) => {
-    props.onChangePage(event, props.page + 1);
+    props.onPageChange(event, props.page + 1);
   };
 
   const handleLastPageButtonClick = (event) => {
-    props.onChangePage(
+    props.onPageChange(
       event,
       Math.max(0, Math.ceil(props.count / props.rowsPerPage) - 1)
     );

src/components/MTableSteppedPaginationInner/index.js

@@ -1,5 +1,5 @@
 import IconButton from '@material-ui/core/IconButton';
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@material-ui/styles';
 import Tooltip from '@material-ui/core/Tooltip';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
@@ -8,23 +8,23 @@ import React from 'react';
 
 function MTablePaginationInner(props) {
   const handleFirstPageButtonClick = (event) => {
-    this.props.onPageChange(event, 0);
+    props.onPageChange(event, 0);
   };
 
   const handleBackButtonClick = (event) => {
-    this.props.onPageChange(event, this.props.page - 1);
+    props.onPageChange(event, props.page - 1);
   };
 
   const handleNextButtonClick = (event) => {
-    this.props.onPageChange(event, this.props.page + 1);
+    props.onPageChange(event, props.page + 1);
   };
 
   const handleNumberButtonClick = (number) => (event) => {
-    this.props.onPageChange(event, number);
+    props.onPageChange(event, number);
   };
 
   const handleLastPageButtonClick = (event) => {
-    this.props.onPageChange(
+    props.onPageChange(
       Math.max(0, Math.ceil(props.count / props.rowsPerPage) - 1)
     );
   };

src/components/MTableSummaryRow/index.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { TableRow, TableCell, withStyles } from '@material-ui/core';
+import { TableRow, TableCell } from '@material-ui/core';
+import { withStyles } from '@material-ui/styles';
 import { getStyle } from '../MTableCell/utils';
 import * as CommonValues from '../../utils/common-values';
 import PropTypes from 'prop-types';

src/components/MTableToolbar/index.js

@@ -7,7 +7,8 @@ import TextField from '@material-ui/core/TextField';
 import Toolbar from '@material-ui/core/Toolbar';
 import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
-import { lighten, withStyles } from '@material-ui/core';
+import { lighten } from '@material-ui/core';
+import { withStyles } from '@material-ui/styles';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';

src/components/index.js

@@ -34,7 +34,7 @@ export { default as MTableGroupRow } from './MTableGroupRow';
 export { default as MTableHeader } from './MTableHeader';
 export { default as MTableSteppedPagination } from './MTableSteppedPaginationInner';
 export { default as MTablePagination } from './MTablePagination';
-export { default as MTableSummaryRow } from "./MTableSummaryRow";
+export { default as MTableSummaryRow } from './MTableSummaryRow';
 export { default as MTableToolbar } from './MTableToolbar';
 /** THESE REFACTORS ARE HAVING ISSUES */
 // export { default as MTableEditCell } from './MTableEditCell';

src/components/m-table-edit-cell.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import TableCell from '@material-ui/core/TableCell';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import { withTheme } from '@material-ui/core';
+import { withTheme } from '@material-ui/styles';
 
 class MTableEditCell extends React.Component {
   constructor(props) {

src/defaults/props.options.js

@@ -18,7 +18,7 @@ export default {
   headerSelectionProps: {},
   hideFilterIcons: false,
   loadingType: 'overlay',
-  padding: 'default',
+  padding: 'normal',
   searchAutoFocus: false,
   paging: true,
   pageSize: 5,

src/index.js

@@ -8,12 +8,12 @@ import { withStyles } from '@material-ui/styles';
 MaterialTable.defaultProps = defaultProps;
 MaterialTable.propTypes = propTypes;
 
-const styles = (theme) => ({
+const styles = {
   paginationRoot: {
     width: '100%'
   },
   paginationToolbar: {
-    padding: 0,
+    padding: '0 !important',
     width: '100%'
   },
   paginationCaption: {
@@ -22,7 +22,7 @@ const styles = (theme) => ({
   paginationSelectRoot: {
     margin: 0
   }
-});
+};
 
 export default withStyles(styles, { withTheme: true })((props) => (
   <MaterialTable {...props} ref={props.tableRef} />