Cannot read properties of undefined (reading 'direction') React JS Material Table

Question

After installing the Material Table using React JS and mapping the data to it, this error will be displayed on the console while running the application. The reason for this is hard for me to imagine.

Below is the table I developed.

`
const empList = [ { id: 1, name: "Neeraj", email: '[email protected]', phone: [phone], city: "Bangalore" }, { id: 2, name: "Raj", email: '[email protected]', phone: [phone], city: "Chennai" }, { id: 3, name: "David", email: '[email protected]', phone: [phone], city: "Jaipur" }, { id: 4, name: "Vikas", email: '[email protected]', phone: [phone], city: "Hyderabad" }, ]

const [data, setData] = useState(empList)

const columns = [
    { title: "ID", field: "id", editable: false },
    { title: "Name", field: "name" },
    { title: "Email", field: "email" },
    { title: "Phone Number", field: 'phone', },
    { title: "City", field: "city", }
]


            
                <h5>
                    List of Services
                </h5>
            
            <MaterialTable
                title="Employee Data"
                data={data}
                columns={columns}
            />


        </div>`

Bowker

What happens when you assign data={empList}? – Medford

What I am trying to understand is whether empList value is calculated somehow which takes some time. If yes better to set the initial state using a function. – Medford

const empList = [ { id: 1, name: "Neeraj", email: '[email protected]', phone: [phone], city: "Bangalore" }, { id: 2, name: "Raj", email: '[email protected]', phone: [phone], city: "Chennai" }, { id: 3, name: "David", email: '[email protected]', phone: [phone], city: "Jaipur" }, { id: 4, name: "Vikas", email: '[email protected]', phone: [phone], city: "Hyderabad" }, ] – Bowker

codesandbox.io/s/material-table-review-forked-2ydwh2?file=/src/… I used your code and it worked just fine. Check the version of the material table installed. – Medford

I run this in the Chrome browser. The page does not even load when running from the Chrome browser – Bowker

Did you figure out a solution to the problem? I'm running into the same issue here with exactly the same table! – Harbaugh

I'm getting the error: no such file or directory, open 'C:\Users****\node_modules\react-double-scrollbar\dist\DoubleScrollbar.js.map' – Harbaugh

Answer 1

So I figured out the solution. If your current version of material table is 2.0.3, just uninstall your version and re-install version 1.69.3. This will solve the issue, it worked for me. They have released the 2.0.3 version quite recently (10 days back) and it seems to have bugs and I guess that's the reason why you and me faced issues.

Harbaugh

Thanks you SO much for this. I had been trying to figure out what I was doing wrong. I had some warnings when trying to install the older version after removing 2.0.3 about overriding peer dependency but this does not appear to have caused any issues. Thank you! – Afroamerican

Answer 2

I have also encountered the same bug and it seems that they haven't covered the case that no theming is provided. So, in order for the MaterialTable to work properly you need at least the following implementation:

import * as React from 'react';
import MaterialTable from 'material-table';
import { ThemeProvider, createTheme } from '@mui/material';

export class DataGridReact extends React.Component {
    public render(): JSX.Element {
        const defaultMaterialTheme = createTheme();

        return(
            <div style={{ width: '100%', height: '100%' }}>
                <link
                    rel="stylesheet"
                    href="https://fonts.googleapis.com/icon?family=Material+Icons"
                    />
                <ThemeProvider theme={defaultMaterialTheme}>
                    <MaterialTable
                        columns={[
                        { title: 'Name', field: 'name' },
                        { title: 'Surname', field: 'surname' },
                        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
                        { title: 'Birth City', field: 'birthCity', lookup: { 1: 'Linz', 2: 'Vöcklabruck', 3: 'Salzburg' } }
                        ]}
                        data={[
                            { name: 'Max', surname: 'Mustermann', birthYear: 1987, birthCity: 1 },
                            { name: 'Cindy', surname: 'Musterfrau', birthYear: 1995, birthCity: 2 }
                        ]}
                        title="Personen"
                    />
                </ThemeProvider>
            </div>
        );
    }
}

Hephzibah

This is the correct solution – Ventricle

This should be the correct solution for those not willing to downgrade the material-table version – Terrific

I'm using material-react-table, and your solution fixed the problem with the duration error. Thank you! – Spiritualty

Answer 3

I updated mui's packages, using:
yarn upgrade @mui/icons-material @mui/material @mui/styles --latest since I was using material-table 2.0.2.

then don't froget to wrap the table with the ThemeProvider: ( THANKS @nikried FOR your answer, it was very helpful! )

import * as React from 'react';

import MaterialTable from 'material-table';

import { ThemeProvider, createTheme } from '@mui/material';

export function SimpleExample () {
        const defaultMaterialTheme = createTheme();

        return(
            <div style={{ width: '100%', height: '100%' }}>
                <ThemeProvider theme={defaultMaterialTheme}>
                    <MaterialTable
                        columns={columns}
                        data={data}
                    />
                </ThemeProvider>
            </div>
        );
    }
}

if you have other problems, don't forget to check the peerDependencies of material-table inside node_modules, and try to use the same package's version montioned to avoid all the possible conflicts.

Meggs

Answer 4

I tried all possible things but it seems to have a problem with the material-table package itself. I tried to install the v1.69.3 also, but then it showed some 19 errors all of which were from the Metrial-Table Package, which shows that it is really buggy. With some other versions it showed some 20 errors all from the package itself, these errors were silenced after I reinstall @material-ui/core as mentioned on their website https://material-table.com/#/docs/install:~:text=npm%20install%20material%2Dtable%20%2D%2Dsave%0Anpm%20install%20%40material%2Dui/core%20%2D%2Dsave, But the problem that the table is not showing is still there.

Finally installing the very old release having dependency of react version older than 16, helped me. You can run :

npm uninstall material-table

then run following:

npm install [email protected] --save

and then check if it works, if not try to run

npm install @material-ui/core --save

or

npm install in the terminal. I hope it will work for you to help you get running, but I noticed though the table shows but it disturbs some functionlaity of material ui itself.

Highclass

Answer 5

So i had the same problem on some pcs and not on others. Figured out the issue was due to the node js version. so the following worked for me:

• changing to material-table version to 1.69.3 or 1.36.0 works but it was messing up the styling of my other mui components. So shifted back to material-table 2.0.3
• I was using node version 14.19.0 so changed it to 16.5.1 using nvm.
• delete the node modules completely shift+ delete
• npm i to install all dependencies.(remember during this step the node version should be 16.5 , so check once using node -v)
• npm start

Ocean

Answer 6

npm uninstall material-table

Then run the following:

npm install [email protected] --save

It can also work!

Hairworm

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Seamanlike