Breaking News: Grepper is joining You.com. Read the official announcement!

how to setup material-table in react

Theophilus Boakye answered on May 9, 2022 Popularity 10/10 Helpfulness 2/10

answer how to setup material-table in react

how to setup material-table in react

Comment

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

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: javascript material-table

Link to this answer
Share Copy Link

Contributed on May 09 2022

Theophilus Boakye

0 Answers Avg Quality 2/10

how to setup material-table in react

Contents

More Related Answers

how to setup material-table in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.