"Error: GraphObject.make requires a class function or GoJS class name or name of an object builder, not: ScrollingTable"

[kai1697595929]

Please do not use the GitHub issue tracker unless you are reporting a bug in GoJS, not a problem in your code nor a question about how to do something or use something. `` For help and support, please use the GoJS forum: https://forum.nwoods.com/c/gojs

<script>
import go from 'gojs';
export default {
  mounted() {
    this.initDiagram();
  },
  methods: {
    initDiagram() {
      const $ = go.GraphObject.make;
      const diagram = $(go.Diagram, this.$refs.myDiagramDiv, {
        PartResized: (e) => {
          const node = e.subject;
          const scroller = node.findObject("SCROLLER");
          if (scroller !== null) scroller._updateScrollBar(scroller.findObject("TABLE"));
        }
      });

      diagram.nodeTemplate =
        $(go.Node, "Vertical",
          {
            selectionObjectName: "SCROLLER",
            resizable: true,
            resizeObjectName: "SCROLLER",
            portSpreading: go.Node.SpreadingNone
          },
          new go.Binding("location").makeTwoWay(),
          $(go.TextBlock,
            { font: "bold 14px sans-serif" },
            new go.Binding("text", "key")),
          $(go.Panel, "Auto",
            $(go.Shape, { fill: "white" }),
            $("ScrollingTable",
              {
                name: "SCROLLER",
                desiredSize: new go.Size(NaN, 60),  // fixed width
                stretch: go.GraphObject.Fill,       // but stretches vertically
                defaultColumnSeparatorStroke: "gray",
                defaultColumnSeparatorStrokeWidth: 0.5
              },
              new go.Binding("TABLE.itemArray", "items"),
              new go.Binding("TABLE.column", "left", function (left) { return left ? 2 : 0; }),
              new go.Binding("desiredSize", "size").makeTwoWay(),
              {
                "TABLE.itemTemplate":
                  $(go.Panel, "TableRow",
                    {
                      defaultStretch: go.GraphObject.Horizontal,
                      fromSpot: go.Spot.LeftRightSides,
                      toSpot: go.Spot.LeftRightSides,
                      fromLinkable: true,
                      toLinkable: true
                    },
                    new go.Binding("portId", "name"),
                    $(go.TextBlock, { column: 0 }, new go.Binding("text", "name")),
                    $(go.TextBlock, { column: 1 }, new go.Binding("text", "value"))
                  ),
                "TABLE.defaultColumnSeparatorStroke": "gray",
                "TABLE.defaultColumnSeparatorStrokeWidth": 0.5,
                "TABLE.defaultRowSeparatorStroke": "gray",
                "TABLE.defaultRowSeparatorStrokeWidth": 0.5,
                "TABLE.defaultSeparatorPadding": new go.Margin(1, 3, 0, 3)
              }
            )
          )
        );

      diagram.model = $(go.GraphLinksModel,
        {
          linkFromPortIdProperty: "fromPort",
          linkToPortIdProperty: "toPort",
          nodeDataArray: [
            {
              key: "Alpha", left: true, location: new go.Point(0, 0), size: new go.Size(100, 50),
              items: [
                { name: "A", value: 1 },
                { name: "B", value: 2 },
                { name: "C", value: 3 },
                { name: "D", value: 4 },
                { name: "E", value: 5 },
                { name: "F", value: 6 },
                { name: "G", value: 7 }
              ]
            },
            {
              key: "Beta", location: new go.Point(150, 0),
              items: [
                { name: "Aa", value: 1 },
                { name: "Bb", value: 2 },
                { name: "Cc", value: 3 },
                { name: "Dd", value: 4 },
                { name: "Ee", value: 5 },
                { name: "Ff", value: 6 },
                { name: "Gg", value: 7 },
                { name: "Hh", value: 8 `},`
                { name: "Ii", value: 9 },
                { name: "Jj", value: 10 },
                { name: "Kk", value: 11 },
                { name: "Ll", value: 12 },
                { name: "Mm", value: 13 },
                { name: "Nn", value: 14 }
              ]
            }
          ],
          linkDataArray: [
            { from: "Alpha", fromPort: "D", to: "Beta", toPort: "Ff" },
            { from: "Alpha", fromPort: "A", to: "Beta", toPort: "Nn" },
            { from: "Alpha", fromPort: "G", to: "Beta", toPort: "Aa" }
          ]
        });
    }
  }
};
</script>

<style>
#myDiagramDiv {
  width: 100%;
  height: 500px;
}
</style>
``

[WalterNorthwoods]

This is not a bug report, so you should not have opened this issue.

You have to load the ScrollingTable extension.