React-grid-layout: data-grid property in children with ResponsiveReactGridLayout
Hello,
I'm trying to use data-grid property inside a ResponsiveReactGridLayout element. I have several configurations following screen size, i found this example https://github.com/STRML/react-grid-layout/blob/da07f0fac53dcc5a65383ec095c8376f5bc67539/test/examples/17-responsive-bootstrap-style.jsx and tried to use the same syntax. The problem is that this format
data-grid={{
w: { lg: 6, md: 5, sm: 3, xs: 4, xxs: 2 },
h: { lg: 4, xxs: 3 }
}}
is not correctly recognized, an exception saying that w element is not a number is raised, and even if i comment the code responsible for the check of layout format, the component is not working anymore.
fchennouf
All 4 comments
I finally managed by handling it manually using onBreakpointChange prop, and update data-grid following the current breakpoint.
fchennouf
on 6 Aug 2020
this is actually a good idea. _data-grid_ key could accept something like
{
w: { lg: 6, md: 5, sm: 3, xs: 4, xxs: 2 },
h: { lg: 4, xxs: 3 }
}
or
{
lg: {w,h,x,y},
md: {...},
sm: {...},
xs: {...},
xxs: {...}
}
samuelpucat
on 23 Oct 2020
@samuelpucat Have you been able to get this working reliably?
I tried to use the method you use above, but things don't re-render correctly.
The grid never picks up the new layout and keeps trying to use the old one.
seanaguinaga
on 7 Dec 2020
@STRML I would like to nominate @samuelpucat's idea for how data-grid could work with responsive layouts as a feature request.
valtism
on 2 Jan 2021
Related issues
Francismb
路
4Comments
larrydahooster
路
3Comments
hepiyellow
路
4Comments
f15gdsy
路
4Comments
dphaener
路
3Comments
Most helpful comment
this is actually a good idea. _data-grid_ key could accept something like
{ w: { lg: 6, md: 5, sm: 3, xs: 4, xxs: 2 }, h: { lg: 4, xxs: 3 } }or
{ lg: {w,h,x,y}, md: {...}, sm: {...}, xs: {...}, xxs: {...} }