Jon20111

//.eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true  //not listed in documentation
  },
  "extends": [
        "plugin:jsx-a11y/recommended"
      ],
        "parserOptions": {

Jon20111

import { makeStyles } from '@material-ui/styles';
import { Theme } from '@material-ui/core';

export const useStyles = makeStyles((theme: Theme) => ({
    parentForm: {
        backgroundColor: '#C0C0C0'
    },
    customInput: {
        margin: 12,
        '&$disabled': {

Jon20111

const calculateTop = useCallback(
    point => {
      const xyPoint = {
        x: paddingOffset + point,
        y: paddingOffset - pathFunction(point)
      };
      return ["L", xyPoint.x, xyPoint.y].join(" ");
    },
    [paddingOffset, pathFunction]
  );

Jon20111

columns={[ 
   { 
      title: "Name",
      field: "name", 
      headerStyle: { 
         backgroundColor: "green" 
      }
   },
...

Jon20111

options={{ 
   headerStyle: { 
      backgroundColor: '#01579b', 
      color: '#FFF' 
   }
}}

Jon20111

components={{ 
   Action: props => ( 
      <Button 
         onClick={event => props.action.onClick(event, props.data)}       
         color="primary" variant="text" 
         style={{ textTransform: "none" }} 
         size="small" 
      >
        Save 
      </Button>

Jon20111

actions={[ 
   { 
     icon: () => <SaveIcon />,
     tooltip: "Save User", 
     onClick: (event, rowData) => alert("You saved " + rowData.name)   
    }
]}

Jon20111

import React, { useState } from "react"; 
import "./styles.css"; 
import MaterialTable from "material-table"; 
export default function App() { 
   const [data, setData] = useState([
     { name: "Jon", job: "Software Dev", age: 29 }
   ]);
   return ( 
      <div className="App"> 
        <h1>Material-Table Demo</h1> 

Jon20111

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 {

Jon20111

import React, { FC, useMemo } from 'react';
import { TextField, withStyles } from '@material-ui/core';
import { useStyles } from './form.styles';

export const Form: FC = () => {
    const classes = useStyles();
    const StyledTextField = useMemo(
        () => {
            return withStyles({
                root: {