DEV Community: ddubois2

Cols not updating after select list changing

ddubois2 — Fri, 12 Mar 2021 19:04:59 +0000

Hello,

I use react Grid-layout, thanks to the developers for this superb work.

On the other hand, I do not understand why the number of column does not update in my table.

In fact, this.props.cols.lg is either 17 or 24.

When it's 17, my table is displayed correctly. On the other hand, when I choose a period with 24 columns, my columns are placed one below the other from the 18th.

this.props.cols.lg to the correct value (17 or 24) but my HTML page does not update to the design level.

This is the right table

https://www.dropbox.com/s/2qymjbmtnjflvka/Capture%20d%E2%80%99%C3%A9cran%202021-03-12%20%C3%A0%2019.37.45.png?dl=0

and the bad table

https://www.dropbox.com/s/2gkayc4veazlg2c/Capture%20d%E2%80%99%C3%A9cran%202021-03-12%20%C3%A0%2019.37.57.png?dl=0

IMPORTANT :

this.props.cols.lg=loopValue+1;

contains the right value (17 or 25 cols) but it does not apply to my site.

Thank you in advance for your help.

Here is a part of my code:

import React, { useState, useEffect, Fragment } from 'react';
import { WidthProvider, Responsive } from "react-grid-layout";
import ReactTooltip from 'react-tooltip';
import _ from "lodash";
import { Button, Container } from 'react-bootstrap';
const ResponsiveReactGridLayout = WidthProvider(Responsive);
import { Responsive as ResponsiveGridLayout } from 'react-grid-layout';
/**
 * This layout demonstrates how to use a grid with a dynamic number of elements.
 */
export class AddRemoveLayout extends React.PureComponent {
    //les propriétés par défaut
    static defaultProps = {
        className: "layout border-darken-1 child-background-color",
        cols:
        { lg: 10, md: 10, sm: 10, xs: 10, xxs: 10 },
        width: 1000,
        margin: [0, 0],
        preventCollision: true,
        autoSize: true,
      //  preventCollision: true,
        rowHeight: 70,

    // Build HTML to insert
    render() {


        //Week
        let createDateItem =
            (x, y, day) => ({
                i: `date-${x}_${y}`,
                x,
                y,
                w: 1,
                h: 1,
                myText: `${day}` ,
                static: true
            });
        /**
         *
         * @param {*} y
         * @param {*} xStart
         * @param {num semaine} dateStart
         * @param {nombre semaine total} count
         */

        let getDateItems =
            (y, xStart, dateStart, count,dateEnd) => {
                let items = [];

                let loopValue = 0;

                while(dateStart<=dateEnd){//semainee
                    if(loopValue>1){
                        dateStart.setDate(dateStart.getDate() + 7)
                    }
                    if(dateStart<=dateEnd){
                    items.push(
                        createDateItem(xStart + loopValue, y,  loopValue === 0 ? 0 :
                           (dateStart.getDate()+"/" +(dateStart.getUTCMonth()+1)+ " (Sem. "+loopValue +") ")
                        ))
                    }
                    loopValue++;
                }

               console.log('props:')
               console.log(this.props);
               this.props.cols.lg=loopValue+1;
               this.props.cols.md=loopValue+1;
               this.props.cols.sm=loopValue+1;
               this.props.cols.xs=loopValue+1;
               this.props.cols.xxsloopValue+1;
               console.log(this.props);

               // console.log(AddRemoveLayout.defaultProps)

                return items;
            }
            ;
    ```

React-grid-layout into a table

ddubois2 — Sun, 22 Nov 2020 18:45:26 +0000

Hello

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 code, I'm interested.

This is my code :

import React from 'react';
import { WidthProvider, Responsive } from "react-grid-layout";
import _ from "lodash";

const ResponsiveReactGridLayout = WidthProvider(Responsive);
/**

This layout demonstrates how to use a grid with a dynamic number of elements.
*/
export class AddRemoveLayout extends React.PureComponent {
static defaultProps = {
className: "layout",
cols: { lg: 7, md: 10, sm: 6, xs: 4, xxs: 2 },
rowHeight: 100,
preventCollision: true,
verticalCompact: false // //you may want to turn off vertical compacting so items can be placed anywhere in the grid. Set the property verticalCompact to false to achieve this effect.

};

onLayoutChange(layout) {
/eslint no-console: 0/
saveToLS("layout", layout);
this.setState({ layout });
this.props.onLayoutChange(layout); // updates status display
if (global.localStorage) {
try {
ls = JSON.parse(global.localStorage.getItem("rgl-7")) || {};
console.log(ls);
} catch (e) {
/Ignore/
}
}
}

constructor(props) {
super(props);
```
this.state = {
    items: [0, 1, 2, 3, 4].map(function (i, key, list) {
        return {
            i: i.toString(),
            x: i * 2,
            y: 0,
            w: 2,
            h: 2,
            //add: false                    //You can add an item by clicking here, too
        };
    }),
    newCounter: 0
};

this.onAddItem = this.onAddItem.bind(this);
this.onBreakpointChange = this.onBreakpointChange.bind(this);
```
}

createElement(el) {
const removeStyle = {
position: "absolute",
right: "2px",
top: 0,
cursor: "pointer"
};
const i = el.add ? "+" : el.i;
return (

{el.add ? ( className="add text"
onClick={this.onAddItem}
title="You can add an item by clicking here, too."
>
Add +
) : ( {i} )} className="remove"
style={removeStyle}
onClick={this.onRemoveItem.bind(this, i)}
>
x
); }
onAddItem() {
/eslint no-console: 0/
console.log("adding", "n" + this.state.newCounter);
this.setState({
// Add a new item. It must have a unique key!
items: this.state.items.concat({
i: "n" + this.state.newCounter,
x: (this.state.items.length * 2) % (this.state.cols || 12),
y: Infinity,
w: 2,
h: 2
}),
// Increment the counter to ensure key is always unique.
newCounter: this.state.newCounter + 1
});
}

// We're using the cols coming back from this to calculate where to add new items.
onBreakpointChange(breakpoint, cols) {
this.setState({
breakpoint: breakpoint,
cols: cols
});
}

onLayoutChange(layout) {
this.props.onLayoutChange(layout);
this.setState({ layout: layout });
}

onRemoveItem(i) {
console.log("removing", i);
```
this.setState({ items: _.reject(this.state.items, { i: i }) });
console.log(this.state);//
```
}

render() {
return (

Add Item onLayoutChange={this.onLayoutChange} onBreakpointChange={this.onBreakpointChange} {...this.props} > {_.map(this.state.items, el => this.createElement(el))} ); } }

Thank you in advance.

How to install react-grid-Layout ?

ddubois2 — Sat, 14 Nov 2020 14:21:21 +0000

Hello and thank you in advance for your help.

I'm a reactjs beginner.

I would like to use this reactjs tool :

https://github.com/STRML/react-grid-layout

I create a folder in htdocs, I clone the project.

Have I also use npm after the clone ?

I see this, but I'm not able to make something else :

Thank you in advance for your help and sorry for this question