4

I am developing an application using Meteor and ReactJS. I am using the react-grid-layout component to create a grid of items.

The problem is that the position of each element needs to be specified manually. In my application, I am generating the grid items based on a Meteor Collection and I might not know how many items are in the collection.

Example

import React from "react";
import Item from "/ui/components/workspace/item.jsx";
import ReactGridLayout from 'react-grid-layout';

export default class WorkspaceGrid extends React.Component {
  componentDidMount() {

  }

  render() {
    let testCollection = [1,2,3,4,5,6,7,8,9,10]
    return (
      <ReactGridLayout isResizable={false} className="layout" cols={4} width={1200}>
        {testCollection.map((item, x) => 
            <Item key={x} _grid={{x: ?, y: ?, w: 1, h: 2}} />
        )}
      </ReactGridLayout>
    )
  }

}

In the above example, the grid should have 4 columns per row, but how would I specify the x and y values so that in testCollection items 1-4 are in row 1, 5-8 are in row 2, 9-10 are in row 3, and so on for however many items there are in the collection.

Thank you very much, help appreciated.

CWSites
  • 1,428
  • 1
  • 19
  • 34
user2840647
  • 1,236
  • 1
  • 13
  • 32

1 Answers1

5

By default, react-grid-layout has parameter verticalCompact set to true, it means that if several items get the same y value, its will compact vertically. I think that you can write:

<Item key={x} _grid={{x: x%4, y: 0, w: 1, h: 2}} />

Several items will get the same y value but that is not a problem for react-grid-layout. x value will go from 0 to 3.

Damien Leroux
  • 11,177
  • 7
  • 43
  • 57
  • 1
    Since react 15.1-15.2 `_grid` causes `Unknown prop `_grid` on
    tag` https://github.com/STRML/react-grid-layout/issues/283. See also https://stackoverflow.com/questions/38368349/react-grid-layout-example-unknown-prop-grid-on-div-tag. The way I could overcome this is to use a `propBag`, idea I saw in https://stackoverflow.com/questions/37674813/dynamically-set-attribute-key-e-g-data-foo-bar-in-react/37674899#37674899. With that the solution would be something like `let propBag = {'_grid': {x: x%4, y: 0, w: 1, h: 2}}` ``
     – Csaba Toth Jul 14 '16 at 21:12
  • Oh, my solution in the comment still yields a warning – Csaba Toth Jul 14 '16 at 21:51
  • Hi I have one issue related to `react-grid-layout` could you please help me out https://stackoverflow.com/questions/66438916/how-to-create-dynamic-drag-and-drop-layout-with-react-grid-layout Could you please check it once, please check edited part I have explained everything. – manish thakur Mar 08 '21 at 10:20