Responsive Grid Layout not working..

Venkatesh-inviz-UpperFunnel commented 6 months ago

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 commented 5 months ago

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 commented 5 months ago

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

react-grid-layout / react-grid-layout