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
Responsive Grid Layout not working.. #2029
Comments
Hi @Venkatesh-inviz-UpperFunnel ,
|
@Venkatesh-inviz-UpperFunnel I use 1.3.x version because 1.4 is buggy |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
Can anyone please check what is wrong in this code.
I'm using RGL but the ResponsiveGridLayout version does not work. I am sending the data correctly as they say in the documentation but it is modified automatically when the component starts.
### All widgets are show in one column no in row how specify layout. Help !!!!! Greetings
import { useState } from 'react';
import { Responsive, WidthProvider } from 'react-grid-layout';
// import GridItemContainer from '../containers/GridItemContainer';
import { ReusableCharts } from '../ReusableCharts';
import { ChartWrapper } from 'components/monitoring/ChartWrapper';
const ResponsiveGridLayout = WidthProvider(Responsive);
export const GridLayoutCustom = (props: any) => {
const { graphData } = props;
const { data, layouts } = graphData;
const [breakpoint, setBreakpoint] = useState('lg');
const handleBreakpointChange = (newBreakpoint: any) => {
setBreakpoint(newBreakpoint);
};
const handleLayoutChange = (newLayout: any) => {
console.log('newLayout', newLayout);
console.log('layouts', layouts);
console.log('breakpoint', breakpoint);
// You can modify or use the newLayout state as needed
};
return (
// <></>
<ResponsiveGridLayout
className="layout"
layouts={layouts}
onBreakpointChange={handleBreakpointChange}
onLayoutChange={handleLayoutChange}
isDraggable
isResizable
draggableHandle=".grid-item__title"
breakpoints={{ lg: 1280, md: 992, sm: 767 }}
cols={{ lg: 12, md: 10, sm: 6 }}
>
{Object.keys(data)?.map((item: any, index: number) => {
let item1 = data[item];
return (
<ChartWrapper
chartTitle={item1?.title}
loading={false}
key={
graph${index}
}>
);
})}
);
};
Your Example Website or App
www.localhost.com
Steps to Reproduce the Bug or Issue
Try to use above code in codesandbox
Expected behavior
Its should work
react-grid-layout library version
1.4.4
Operating System Version
Windows
Browser
Chrome
Additional context
No response
Screenshots or Videos
No response
The text was updated successfully, but these errors were encountered: