JSFiddle - React, Tailwind, and code Playground

by batobolg

HTML

<script src="https://gojs.net/latest/release/go.js"></script>
<script src="https://gojs.net/latest/extensions/ColumnResizingTool.js"></script>
<script src="https://gojs.net/latest/extensions/RowResizingTool.js"></script>
<div id="d1" style="width:400px; height:300px; border-style: solid;"></div>
<button onclick="" id="add">add column</button><button id="delete">delete column</button>

JavaScript

function showContent() {
 jQuery.noConflict();
 var $ = go.GraphObject.make;

  myDiagram =
    $(go.Diagram, "d1", {
       "undoManager.isEnabled": true
    });

  myDiagram.toolManager.mouseDownTools.add(new RowResizingTool());
  myDiagram.toolManager.mouseDownTools.add(new ColumnResizingTool());
  
  myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, { fill: "white" }),
        $(go.Panel, "Table", {name:"TABLE"},
          new go.Binding("itemArray", "people"),
          $(go.RowColumnDefinition,
            { row: 0, background: "lightgray" }),
          $(go.RowColumnDefinition,
            { row: 1, separatorStroke: "black" }),
          // the table headers -- remains even if itemArray is empty
          $(go.Panel, "TableRow",
            { isPanelMain: true },
            new go.Binding("itemArray", "columnDefinitions"),
            {
              itemTemplate:  // bound to a column definition object
                $(go.Panel,
                  new go.Binding("column"),
                  $(go.TextBlock,
                    { margin: new go.Margin(2, 2, 0, 2), font: "bold 10pt sans-serif" },
                    new go.Binding("text"))
                )
            }
          ),
          { // the rows for the people
            defaultAlignment: go.Spot.Left,
            defaultColumnSeparatorStroke: "black",
            itemTemplate:  // bound to a person/row data object
              $(go.Panel, "TableRow",
                // which in turn consists of a collection of cell objects,
                // held by the "columns" property in an Array
                new go.Binding("itemArray", "columns"),
                // you could also have other Bindings here for the whole row
                {
                  itemTemplate:  // bound to a cell object
                    $(go.Panel,  // each of which as "attr" and "text" properties
                      { stretch: go.GraphObject.Fill, alignment: go.Spot.TopLeft },
                   ...