Responsive Grid Layout not working..

[Venkatesh-inviz-UpperFunnel]

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

[dkireeti]

Hi @Venkatesh-inviz-UpperFunnel ,
From my understanding data-grid={{...layoutConfig}} is needed.
For me this is working

(props)=>{
     return (
      <div id={id} key={key} data-grid={{...layoutConfig}} >
        <YourComp/>
      </div>
     );
}

[gpoulet]

@Venkatesh-inviz-UpperFunnel I use 1.3.x version because 1.4 is buggy