React-grid-layout into a table
Tags: laravel, react
Published: 2020-11-22 18:45:26

Hello

I'm using react-grid-layout with Laravel 7, AdminLTE and I have a good result yet :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bqg3mqsfbyglwhu3d4se.png)

I would like to put this result in a table as shown below to have headers and rows:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ddypuexnudvvn4hel8dp.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a1mlepmtoh6srli433bj.png)

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 (
            <div key={i} data-grid={el}>
                {el.add ? (
                    <span
                        className="add text"
                        onClick={this.onAddItem}
                        title="You can add an item by clicking here, too."
                    >
                        Add +
                    </span>
                ) : (
                        <span className="text">{i}</span>
                    )}
                <span
                    className="remove"
                    style={removeStyle}
                    onClick={this.onRemoveItem.bind(this, i)}
                >
                    x
        </span>
            </div>
        );
    }

    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 (
            <div>
                <button onClick={this.onAddItem}>Add Item</button>
                <ResponsiveReactGridLayout
                    onLayoutChange={this.onLayoutChange}
                    onBreakpointChange={this.onBreakpointChange}
                    {...this.props}
                >
                    {_.map(this.state.items, el => this.createElement(el))}
                </ResponsiveReactGridLayout>
            </div>
        );
    }
}


Thank you in advance.