react material-table onrowadd fails - reactjs

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

Answer 1

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

Answer 2

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!

Answer 3

I solved it by downgrading to version 1.54.0