You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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';
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.
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...
Not able to drag and drop column headers. When dragging column get
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;
`
The text was updated successfully, but these errors were encountered: