Questions tagged [react-grid-layout]

A draggable and resizable grid layout with responsive breakpoints, for React.

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…
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…
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…
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…
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…
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
1 2 3
10
11