A draggable and resizable grid layout with responsive breakpoints, for React.
Questions tagged [react-grid-layout]
162 questions
0
votes
1 answer
Put a react-grid-layout into a table with headers and rows
I'm using react-grid-layout with Laravel 7, AdminLTE and I have a good result yet :
I would like to put this result in a table as shown below to have headers and rows:
do you advise me to do this in reactjs or in simple html?
If you have a sample…

David
- 427
- 1
- 5
- 21
0
votes
1 answer
Toggling the static key boolean in layout object of a react-grid-layout causes all grid items to move incorrectly
tl;dr:
React-grid-layout incorrectly moves all grid items around when their static option is enabled and disabled (toggled). I want the grid items to be frozen in place when static, and move if and only if the user moves them with static mode…

RATIU5
- 5
- 1
- 6
0
votes
1 answer
React Grid Layout - Grid Item shown on screen even though not within layout
I am using react-grid-layout to try to make a resizable grid. I also tried adding the functionality to remove grid items. However, upon removal of grid item (which in actual fact just removes that item from the layout object passed in, the grid item…

jason
- 562
- 8
- 24
0
votes
1 answer
Weird compacting behaviour in react-grid-layout
I'm building a dashboard application with react-grid-layout and I experience some behaviour that I don't understand.
I have created the following codesandbox to showcase the…

Rasmus Fisker Bang
- 91
- 7
0
votes
1 answer
React Project Looking Different on Localhost and gh-pages enviornment
React beginner here trying to make a portfolio. I ran into an issue which I could not find any answers for hence posting here.
My project uses react-mdl and particularly the projects page, which uses a component. When I view my project in a…

ZoidMeister
- 13
- 5
0
votes
1 answer
React-grid-layout not updating properly with new elements unless I force its resizing
I have the following layout in my state
layouts: {
//x = starting from 0 horizontal position
//y = starting from 0 vertical position
//h = height of the el
//minW = position relative to x width, from…

mouchin777
- 1,428
- 1
- 31
- 59
0
votes
1 answer
Grids using react bootstrap
I want to display 3 cards. I am getting the following error:
./src/views/Notifications.jsx
Line 28:8: 'Container' is not defined react/jsx-no-undef
Search for the keywords to learn more about each error.
import React, { Component } from…

EverydayDeveloper
- 1,110
- 4
- 11
- 34
0
votes
1 answer
From Google Sheets into React Grid
How can I do in REACT if I want to connect Google Sheets as a remote source into React Grid (from DevEstreme)?
0
votes
3 answers
Trying to figure out where this warning is coming from regarding unique keys
I keep getting the warning: "Warning: Each child in a list should have a unique "key" prop in ShowcaseLayout
I've tried going through each area of my code where I use the map function and supply a key that is unique(some of the keys are uuid) yet I…

travisj
- 1
0
votes
0 answers
ReactGridLayout: ReactGridLayout.children[0].x must be a number
im setting up list add for grid that i removed and then store it to the list data, its works before but when im trying to add right now but got this error.
ReactGridLayout: ReactGridLayout.children[0].x must be a number!
listAdd(x){
let…

Ade Putra Susila
- 53
- 10
0
votes
2 answers
React Data Grid rows disappearing on dynamically providing height
I am trying to make RDG Table which can be expanded(for expansion i have used ReactGridLayout) in height & Width. I am using react-sizeme for dynamically providing height & Width to my component(in my case Example component). Now, Table is getting…

mukesh210
- 2,792
- 2
- 19
- 41
0
votes
2 answers
React UI Element Placement?
I'm new to React so how to place UI Elements kind of escapes me.
I want the following layout:
But I can't quite figure it out. In the black box there is supposed to be a group of checkboxes (a component I've already made) stack vertically and in…

OmniOwl
- 5,477
- 17
- 67
- 116
0
votes
1 answer
React-Grid-Layout x,y,w,h
Good day,
I want to change the position of a react grid layout but there's one thing which I do not understand React-Grid-Layout x,y,w,h, especially the x,y part. I know that w is for width, h is for height. I have done css grid and I am not sure…

Paul
- 211
- 1
- 6
- 19
0
votes
1 answer
ReactGridLayout.children[0].y must be a number
I get the following error message when I'm trying to run the website in my development environment:
Uncaught Error: ReactGridLayout:
ReactGridLayout.children[0].y must be a number!
at validateLayout (app.js:6171)
at app.js:6132
at…

Baspa
- 1,099
- 1
- 18
- 49
0
votes
1 answer
How to show hover state for 1 card element that has handler event attached to multiple card elements?
I'm a React beginner, trying to build a dashboard with card components. I have a React component that renders card elements, and for each card, has the same handler events for mouseenter and mouseleave. The expected behavior is to see :hover styles…

stormynpip
- 442
- 4
- 7
- 14