React-grid-layout into a table

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.