JAVASCRIPT

how to setup material-table in react

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