Material table editable is not working and needs some dependencies?

Question

I would like to use a data table and that need to be editable. I installed Material-table and i got the error

I got the demo in material ui table (material-table) which exactly solves my purpose. but it is not working

my package.json

{
     "name": "client",
     "version": "0.1.0",
     "private": true,
     "dependencies": {
    "@date-io/core": "^1.3.9",
    "@date-io/date-fns": "^1.3.11",
    "@material-ui/core": "^3.9.2",
    "@material-ui/icons": "^3.0.2",
    "@material-ui/pickers": "^3.2.5",
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "classnames": "^2.2.6",
    "font-awesome": "^4.7.0",
    "jwt-decode": "^2.2.0",
    "material-table": "^1.50.0",
    "material-ui-pickers": "^2.2.1",
    "muicss": "^0.9.41",
    "prop-types": "^15.7.2",
    "react": "^16.9.0",
    "react-dom": "^16.8.3",
    "react-redux": "^6.0.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.5",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "serve": "^10.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000",
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

and my code

render() {
        return (
            <MaterialTable
                title="Editable Preview"
                columns={this.state.columns}
                data={this.state.data}
                editable={{
                    onRowAdd: newData =>
                        new Promise((resolve, reject) => {
                            setTimeout(() => {
                                {
                                    const data = this.state.data;
                                    data.push(newData);
                                    this.setState({ data }, () => resolve());
                                }
                                resolve()
                            }, 1000)
                        }),
                    onRowUpdate: (newData, oldData) =>
                        new Promise((resolve, reject) => {
                            setTimeout(() => {
                                {
                                    const data = this.state.data;
                                    const index = data.indexOf(oldData);
                                    data[index] = newData;
                                    this.setState({ data }, () => resolve());
                                }
                                resolve()
                            }, 1000)
                        }),
                    onRowDelete: oldData =>
                        new Promise((resolve, reject) => {
                            setTimeout(() => {
                                {
                                    let data = this.state.data;
                                    const index = data.indexOf(oldData);
                                    data.splice(index, 1);
                                    this.setState({ data }, () => resolve());
                                }
                                resolve()
                            }, 1000)
                        }),
                }}
            />
        )
    }
}
export default Editable; 

I expects it supposed to work properly . but i get the following error

Failed to compile ./node_modules/material-table/node_modules/date-fns/esm/format/index.js Error: ENOENT: no such file or directory, open '/Users/tlc- 01/Downloads/ictskill/client/node_modules/material- table/node_modules/date-fns/esm/format/index.js'

Answer 1

It looks like you are missing date-fns.

I see that you installed "@date-io/date-fns": "^1.3.11" but you need it to be "date-fns": "2.3.0".

Try to install that with npm install date-fns or yarn add date-fns and it should work.