Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Grouping doesn't work with next version and mui 5 #538

Closed
ilapsker opened this issue Apr 24, 2022 · 4 comments
Closed

Grouping doesn't work with next version and mui 5 #538

ilapsker opened this issue Apr 24, 2022 · 4 comments
Labels
bug Something isn't working

Comments

@ilapsker
Copy link

ilapsker commented Apr 24, 2022

Not able to drag and drop column headers. When dragging column get
image

Sandbox (same code/deps below): https://codesandbox.io/live/c00f46914b8.
First time using codesandbox if issues with access please let me know

Dependencies:
├── @emotion/react@11.9.0
├── @emotion/styled@11.8.1
├── @material-table/core@0.2.29
├── @mui/icons-material@5.6.0
├── @mui/material@5.6.0
├── @testing-library/jest-dom@5.16.4
├── @testing-library/react@13.1.1
├── @testing-library/user-event@13.5.0
├── react-dom@18.0.0
├── react-scripts@5.0.1
├── react@18.0.0
└── web-vitals@2.1.4

`import React from 'react'

import MaterialTable from '@material-table/core';

import { forwardRef } from 'react';

import AddBox from '@mui/icons-material/AddBox'
import ArrowUpward from '@mui/icons-material/ArrowUpward';
import Check from '@mui/icons-material/Check';
import ChevronLeft from '@mui/icons-material/ChevronLeft';
import ChevronRight from '@mui/icons-material/ChevronRight';
import Clear from '@mui/icons-material/Clear';
import DeleteOutline from '@mui/icons-material/DeleteOutline';
import Edit from '@mui/icons-material/Edit';
import FilterList from '@mui/icons-material/FilterList';
import FirstPage from '@mui/icons-material/FirstPage';
import LastPage from '@mui/icons-material/LastPage';
import Remove from '@mui/icons-material/Remove';
import SaveAlt from '@mui/icons-material/SaveAlt';
import Search from '@mui/icons-material/Search';
import ViewColumn from '@mui/icons-material/ViewColumn';

function App() {
const TABLE_ICONS = {
Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />),
ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />),
};

const DEMO_DATA = [
{ id: 2, name: "Joe" },
{ id: 1, name: "Mary" }
];

const DEMO_COLS = [
{ field: "id", title: "Id" },
{ field: "name", title: "Name" }
];

return (


<MaterialTable
data={DEMO_DATA}
columns={DEMO_COLS}
icons={TABLE_ICONS}
options={{
grouping: true
}}
/>

);
}

export default App;

`

@ilapsker ilapsker added the bug Something isn't working label Apr 24, 2022
@Domino987
Copy link
Contributor

The link does not work currently. Can you add a working one?

@ilapsker
Copy link
Author

ilapsker commented May 1, 2022

The link does not work currently. Can you add a working one?

https://codesandbox.io/live/c00f46914b8?file=/src/App.js

Hope this works. I copied Live link first time - sorry! New to code sandbox.

@Domino987
Copy link
Contributor

No problem!
I see that you are using react 18. This is not yet supported and breaks with the dnd lib.
Please wait for this issue to be resolved and try again with react 18.

@ilapsker
Copy link
Author

ilapsker commented May 5, 2022

Sorry for slow response but thanks much! Was trying to figure out why code with a similar setup we have seem to now work.. - unfortunately can't share that code but will keep an eye on that...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants