Material-Table example

material-table-wrapper.tsx

import React, { FC, useState } from "react";
import MaterialTable from "material-table";
import DeleteIcon from "@material-ui/icons/Delete";
import SearchIcon from "@material-ui/icons/Search";
import SaveIcon from "@material-ui/icons/Save";
import { Button } from "@material-ui/core";

import { useStyles } from './material-table-wrapper.styles';

interface Column {
    name: string;
    occupation: string;
    age: number;
}

export const MaterialTableWrapper: FC = () => {
    const classes = useStyles();
    const [dataStore, setDataStore] = useState([
        { name: "Jon", job: "Software Dev", age: 29 }
    ]);

    return (
        <div style={{ maxWidth: '100%' }}>
            <MaterialTable
                columns={[
                    {
                        title: "Name",
                        field: "name"
                    },
                    {
                        title: "Occupation",
                        field: "job"
                    },
                    {
                        title: "Age",
                        field: "age",
                        type: "numeric"
                    }
                ]}
                data={dataStore}
                title="Material-Table Demo"
                icons={{
                    Clear: (() => <DeleteIcon />) as unknown as React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>,
                    Search: (() => <SearchIcon />) as unknown as React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>,
                    ResetSearch: (() => <DeleteIcon />) as unknown as React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>
                }}
                actions={[
                    {
                        icon: () => <SaveIcon />,
                        tooltip: "Save User",
                        onClick: (event, rowData) => alert("You saved " + (rowData as unknown as Column).name)
                    }
                ]}
                components={{
                    Action: props => (
                        <Button
                            onClick={event => props.action.onClick(event, props.data)}
                            color="primary"
                            variant="text"
                            style={{ textTransform: "none" }}
                            size="small"
                        >
                            Save
                        </Button>
                    )
                }}
                options={{
                    headerStyle: {
                        backgroundColor: "#01579b",
                        color: "#FFF"
                    }
                }}
            />
        </div>
    )
}

See a video of coding a material-table for react here:
https://youtu.be/3bg5w8JNXII