TableTreeExpandButton Element type is invalid
KNagarjuna opened this issue · comments
Hi ,
We are using the DevExpress for tree table,
I am getting following error while loading the page.
Uncaught 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 TableTreeExpandButton
.
But I was remove 'TableTreeColumn' component from "@devexpress/dx-react-grid-material-ui" then it was working.
Here are my deps:
{
"name": "consent_ui",
"version": "3.0.0",
"private": true,
"dependencies": {
"@auth0/auth0-spa-js": "^1.19.2",
"@devexpress/dx-react-core": "^4.0.0",
"@devexpress/dx-react-grid": "^4.0.0",
"@devexpress/dx-react-grid-material-ui": "^4.0.0",
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mui/icons-material": "^5.1.1",
"@mui/lab": "^5.0.0-alpha.55",
"@mui/material": "^5.0.6",
"@mui/styles": "^5.10.16",
"@mui/x-data-grid": "^5.17.14",
"@reduxjs/toolkit": "^1.9.1",
"autosuggest-highlight": "^3.2.0",
"axios": "^0.24.0",
"babel-polyfill": "^6.26.0",
"clsx": "^1.1.1",
"cp-react-tree-table": "^1.1.1",
"cross-fetch": "^3.1.4",
"date-fns": "^2.29.3",
"echarts": "^5.2.2",
"echarts-for-react": "^3.0.2",
"formik": "^2.2.9",
"highcharts": "^10.3.2",
"highcharts-react-official": "^3.1.0",
"jsonwebtoken": "^8.5.1",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.19",
"lodash.clonedeep": "^4.5.0",
"merge": "^2.1.1",
"moment": "^2.29.1",
"notistack": "^2.0.3",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-material-ui-form-validator": "^3.0.0",
"react-multi-select-component": "^4.3.4",
"react-perfect-scrollbar": "^1.5.8",
"react-redux": "^7.2.6",
"react-router-dom": "^6.0.2",
"react-scripts": "^4.0.3",
"react-toastify": "^8.0.0",
"redux": "^4.1.2",
"redux-thunk": "^2.4.0",
"rsuite": "^5.23.2",
"shortid": "^2.2.16",
"yup": "^0.32.11"
},
Can you please help the issue.
Thank you.
Here are my code:
`import React, { useState } from "react";
import Paper from "@mui/material/Paper";
import { TreeDataState, CustomTreeData } from "@devexpress/dx-react-grid";
import {
Grid,
Table,
TableHeaderRow,
TableTreeColumn,
} from "@devexpress/dx-react-grid-material-ui";
import { generateRows, defaultColumnValues } from "./dummyData/generator";
const getChildRows = (row, rootRows) => (row ? row.items : rootRows);
export default () => {
const [columns] = useState([
{ name: "name", title: "Name" },
{ name: "gender", title: "Gender" },
{ name: "city", title: "City" },
{ name: "car", title: "Car" },
]);
const [data] = useState(
generateRows({
columnValues: {
...defaultColumnValues,
items: ({ random }) =>
random() > 0.5
? generateRows({
columnValues: {
...defaultColumnValues,
items: () =>
random() > 0.5
? generateRows({
columnValues: {
...defaultColumnValues,
},
length: Math.trunc(random() * 5) + 1,
random,
})
: null,
},
length: Math.trunc(random() * 3) + 1,
random,
})
: null,
},
length: 3,
})
);
const [tableColumnExtensions] = useState([
{ columnName: "name", width: 300 },
]);
return (
<TableTreeColumn for="name" className="" />
</Grid>
</Paper>
);
};
`
the same error
here sandbox
and when we use grouping then we got error - sandbox
Thank you for using Devextreme Reactive. We use GitHub issues to track bug and feature requests. We process incoming issues as soon as possible. Issues that have been inactive for 30 days are closed. If you have an active DevExtreme license, you can contact us in our Support Center for updates. Otherwise, post your question on StackOverflow.