Stack Overflow
Stack Overflow

Questions tagged [react-grid-layout]

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

162 questions
2
votes
1 answer

React JS display an array of objects to fit the screen

I am new to JS and styling everything but I have created a component that takes in a variety of text from a txt document as well as a slew of images. In my app.js, I am using a loop to input all of my data and create a list of objects. When I return…
Jimmy Sommer
  • 21
  • 2
2
votes
1 answer

React grid layout - Local storage with add/remove widgets

I have been trying to get react grid layout setup with my project and have been unable to merge two of the examples. Local storage and add/remove widgets I figured I needed to also store items in LS and have been trying to get it working but with no…
Clue Less
  • 47
  • 8
2
votes
2 answers

How control how the layout manage the drag and drop 'displacements' of the cells with react-grid-layout

This code creates a 10x1 layout with react-grid-layout . All the elements can move. But I need it when I move one column to another only column don't add an extra row in the 10x1. I need all the movements to happen only in the 10x1. How I can say…
grojas123
  • 45
  • 8
2
votes
0 answers

React-Grid-Layout: How to change ResponsiveReactGridLayout's cols programatically?

I'm using ResponsiveReactGridLayout and I want to change it's cols programatically. When I upload an image, I want my ResponsiveReactGridLayout'cols is changed base on the image size. I tried below and got error: Unhandled Runtime Error Error:…
ggever
  • 33
  • 4
2
votes
0 answers

How To Use Dynamic Height/Width using Reat-Grid-Layout ? React/js

I'm trying to implement a Drag & Drop for a website I'm working on. Its use is to build custom forms. We have the fields and everything, I only need to focus on drag & dropping the fields. I found this library. However, I tried implementing it using…
Worthy Dev
  • 41
  • 1
  • 3
2
votes
0 answers

How to give specific width values to WidthProvider in React Grid Layout

I've been fighting with this for way too long. I need to be able to change the width of the grid if depending on if my sidebar is hidden or not. I just need to know how I can feed the pixel information to change the size. Here is my code: import…
cBrenden
  • 23
  • 4
2
votes
0 answers

Remove Padding From Material UI Grid System

I hope your day is going well. I am a new user of material UI and I am working on building my first profile page (image below). As I am getting closer to building this page, I am struggling to create a grid system that allows the about section to…
user3697597
  • 2,119
  • 3
  • 14
  • 13
2
votes
1 answer

Storing layout for my react app in local storage not working

I am working with react-grid-layout and creating some grids which are drag-drop as well as resizable. So i am able to achieve that and it is working fine. My UI is like I have two tabs and each tab have some grids, so when I move from one tab two…
manish thakur
  • 760
  • 9
  • 35
  • 76
2
votes
1 answer

react-grid layout html not updating cols

I use react Grid-layout : https://github.com/react-grid-layout/react-grid-layout I do not understand why the number of column does not update in my table through the web browser. In fact, this.props.cols.lg is either 17 or 24. When it's 17, my table…
laravelnoobie
  • 51
  • 5
2
votes
1 answer

How to disable checkbox for a row in rowselection in react-data-grid

({props.value}), sortable: true }, { key: 'Size', name: 'Size', width: 80, formatter: (props) => ({props.value})…
pareshm
  • 4,874
  • 5
  • 35
  • 53
2
votes
1 answer

ResponsiveGridLayout static items leave HUGE gap (unusable)

Not sure what to do, has anyone run into this? When grid items are static, it leaves a BIG gap before the items: https://codesandbox.io/s/hungry-dawn-cww14 When grid items are NOT static, everything seems…
bryan
  • 8,879
  • 18
  • 83
  • 166
2
votes
2 answers

React Grid Layout with data-grid passed down to a child component not working

I wanted to implement resizable components in React with React Grid Layout. I played around with it a little bit to understand how it works and then installed it in my project but I can't seem to get it working as my child components don't even have…
J.Ewa
  • 205
  • 3
  • 14
2
votes
2 answers

react-grid-layout with typescript not working

I have a new project and i try to use react-grid-layout for building a dashboard. unfortunately i am not able to get it to work. I use: "@types/react-grid-layout": "0.16.5" "react-grid-layout": "0.16.5" when i try to use it in a tsx file…
René Zweifel
  • 75
  • 1
  • 7
2
votes
0 answers

react-grid-layout is not displaying the layout I pass him

I am encountering a problem with the library react-grid-layout and I don't know if it's a bug or me doing things badly. I opened an issue here, but the more I think about it, the less it's probable that an issue this big has gone unnoticed. You can…
Itry
  • 21
  • 1
  • 4
2
votes
2 answers

How to implement static sized grid like 3x3 in React-Grid-Layout

I want to have a grid which will always have for example 3 rows and 3 columns. Now suppose these are my grid items
1
2
Hayk Safaryan
  • 1,996
  • 3
  • 29
  • 51
1 2
3
…
10 11