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: 9876543210, city: "Bangalore" }, { id: 2, name: "Raj", email: '[email protected]', phone: 9812345678, city: "Chennai" }, { id: 3, name: "David", email: '[email protected]', phone: 7896536289, city: "Jaipur" }, { id: 4, name: "Vikas", email: '[email protected]', phone: 9087654321, 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>`

Answer 1

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>
        );
    }
}

Answer 2

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.