react material-table onrowadd fails

Question

I am trying to add a row in a material-table and am getting an error

The example mentioned is in the material tables docs

package.json

"dependencies": {
    "@material-ui/core": "^4.1.0",
    "@material-ui/icons": "^4.1.0",
    "classnames": "^2.2.6",
    "material-table": "^1.39.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1"
  },

testingList.js

<div className={classes.root}>
  <MaterialTable
    title="Testing"
    icons={tableIcons}
    columns={this.state.columns}
    data={this.state.data}
    editable={{
      onRowAdd: (newData) =>
        new Promise((resolve, reject) => {
          setTimeout(() => {
            {
              const data = this.state.data
              data.push(newData)
              this.setState({ data }, () => resolve())
            }
            resolve()
          }, 1000)
        }),
    }}
  />
</div>

Error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of MTableAction.

If I remove on add method the function works as expected.

Also it works fine if I remove the line icons={tableIcons} where tableIcons is

const tableIcons = {
    FirstPage: FirstPage,
    LastPage: LastPage,
    NextPage: ChevronRight,
    PreviousPage: ChevronLeft,
};

What did you end up doing?

user3378165
– user3378165

2022-11-29 19:54:41 +00:00
Commented Nov 29, 2022 at 19:54 — user3378165
– user3378165, Commented Nov 29, 2022 at 19:54

SJ.P · Accepted Answer · 2020-10-11 15:45:49Z

import React, { useState, useEffect } from 'react';
import Search from "@material-ui/icons/Search";
import ViewColumn from "@material-ui/icons/ViewColumn";
import SaveAlt from "@material-ui/icons/SaveAlt";
import ChevronLeft from "@material-ui/icons/ChevronLeft";
import ChevronRight from "@material-ui/icons/ChevronRight";
import FirstPage from "@material-ui/icons/FirstPage";
import LastPage from "@material-ui/icons/LastPage";
import Add from "@material-ui/icons/Add";
import Check from "@material-ui/icons/Check";
import FilterList from "@material-ui/icons/FilterList";
import Remove from "@material-ui/icons/Remove";
import ArrowDownward from "@material-ui/icons/ArrowDownward";
import Clear from "@material-ui/icons/Clear";
import DeleteOutline from "@material-ui/icons/DeleteOutline";
import Edit from "@material-ui/icons/Edit";
import MaterialTable from "material-table";
import UserService from "../../services/user.service";
import ToastServive from "react-material-toast";
import userService from '../../services/user.service';
var _table_Data = [];

const toast = ToastServive.new({
  place: "topRight",
  duration: 2,
  maxCount: 8,
});

const server_Data = userService._get_data().then((response) => {
  return response.data.data
})

export default function InputTable(props) {
    useEffect(() => {
      UserService._get_data().then((response) => {
        const dataUpdate = [...response.data.data];
        setData([...dataUpdate]);
      })  
    })

    const [columns] = useState([
        {
          title: "Name",
          field: "Name",
          cellStyle: {
            width: "15%",
            maxWidth: "15%",
            fontSize: 12,
          },
          headerStyle: {
            width: "15%",
            maxWidth: "15%",
          },
        },
        {
          title: "Exposure",
          field: "EAD",
          cellStyle: {
            width: "20%",
            maxWidth: "20%",
            fontSize: 12,
            textAlign: "left",
          },
          headerStyle: {
            width: "20%",
            maxWidth: "20%",
            textAlign: "left",
          },
        },
        {
          title: "Def. Prob.",
          field: "PD",
          cellStyle: {
            width: "25%",
            maxWidth: "25%",
            fontSize: 12,
            textAlign: "left",
          },
          headerStyle: {
            width: "25%",
            maxWidth: "25%",
            textAlign: "left",
          },
        },
        {
          title: "LGD",
          field: "LGD",
          cellStyle: {
            width: "30px",
            maxWidth: "30px",
            fontSize: 12,
            textAlign: "left",
          },
          headerStyle: {
            width: 20,
            maxWidth: 12,
            textAlign: "left",
          },
        },
        {
          title: "Corr",
          field: "w",
          cellStyle: {
            width: 20,
            maxWidth: 20,
            fontSize: 12,
            textAlign: "left",
          },
        },
      ]);
    const [data, setData] = useState(_table_Data);
    return (
      <div
        style={{
          fontSize: 10,
          maxWidth: "100%",
          margin: "auto",
          padding: "0 0",
        }}
      >
        <MaterialTable
          icons={{
            Check: Check,
            DetailPanel: ChevronRight,
            Delete: DeleteOutline,
            Export: SaveAlt,
            Filter: FilterList,
            FirstPage: FirstPage,
            LastPage: LastPage,
            NextPage: ChevronRight,
            PreviousPage: ChevronLeft,
            Search: Search,
            ThirdStateCheck: Remove,
            Add: Add,
            SortArrow: ArrowDownward,
            Clear: Clear,
            Edit: Edit,
            ViewColumn: ViewColumn,
            ResetSearch: Clear,
          }}
          options={{
            actionsColumnIndex: -1,
            headerStyle: {
              fontSize: 12,
              fontWeight: "bold",
              backgroundColor: "white",
              color: "black",
            },
            rowStyle: {
              color: "black",
              backgroundColor: "#eeeeee",
              height: "50px",
            },
            actionsCellStyle: {
              fontSize: "small", //doesn't work
            },
            showTitle: true,
            search: true,
            padding: "dense",
            exportButton: true,
          }}
          title="Editable Preview"
          columns={columns}
          data={data}
          editable={{
            onBulkEditRow: (changes) => {
              console.log(changes);
            },
            onBulkUpdate: (changes) =>
              new Promise((resolve, reject) => {
                setTimeout(() => {  
                  resolve();
                }, 1000);
              }),
            onRowAddCancelled: (rowData) => console.log("Row adding cancelled"),
            onRowUpdateCancelled: (rowData) =>
              console.log("Row editing cancelled"),
            onRowAdd: (newData) =>
              new Promise((resolve, reject) => {
                setTimeout(() => {
                  const _sendData = newData;
                  UserService.datamanage(_sendData).then((response) => {
                    toast.success(JSON.parse(JSON.stringify(response.data.message)));
                  }).catch(() => {
                    toast.error("failed")
                  })             
                  resolve();
                }, 1000);
              }),
            onRowUpdate: (newData, oldData) =>
              new Promise((resolve, reject) => {
                setTimeout(() => {
                  const dataUpdate = [...data];
                  const index = oldData.tableData.id;
                  dataUpdate[index] = newData;
                  setData([...dataUpdate]);
                  resolve();
                }, 1000);
              }),
            onRowDelete: (oldData) =>
              new Promise((resolve, reject) => {
                setTimeout(() => {
                  const dataDelete = [...data];
                  const index = oldData.tableData.id;
                  dataDelete.splice(index, 1);
                  setData([...dataDelete]);
                  resolve();
                }, 1000);
              }),
          }}
        />
      </div>
    );
}

Taku · Accepted Answer · 2019-06-26 01:24:22Z

I had the same issue and I solved it by adding Actions under components so that the code becomes:

<Table
title="Editable Preview"
columns={this.state.columns}
data={this.state.data}
editable={{
  isEditable: rowData => rowData.name === "a", // only name(a) rows would be editable
  isDeletable: rowData => rowData.name === "b", // only name(a) rows would be deletable

  onRowAdd: newData => new Promise((resolve) => console.log("onrowadd", newData)),
  onRowUpdate: (newData, oldData) => new Promise((resolve) => console.log("onRowUpdate", newData, oldData)),
  onRowDelete: (oldData) => new Promise((resolve) => console.log("onRowDelete", oldData)),
}}
components={{
  Actions: props => (
    <div>
      <IconButton
        onClick={() =>
          this.props.history.push(`/teams/${props.data.uuid}`)
        }
      >
        <EditIcon />
      </IconButton>
      <IconButton
        onClick={() =>
          this.props.history.push(`/teams/${props.data.uuid}`)
        }
      >
        <EditIcon />
      </IconButton>
    </div>
  )
}}
/>

Hope this helps!

grooveplex · Accepted Answer · 2020-01-20 07:08:26Z

0

I solved it by downgrading to version 1.54.0

edited Jan 20, 2020 at 7:08

grooveplex

2,5274 gold badges30 silver badges30 bronze badges

answered Jan 19, 2020 at 19:01

Edmar Pereira

491 silver badge2 bronze badges

Collectives™ on Stack Overflow

react material-table onrowadd fails

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related