Horizontal Scrollbar in Scrolling Table

GoJS
1

Hi,
We are using Scrolling Table extension in out project and it is working fine. Now we want to implement Horizontal Scrollbar with one column fixed in the Scrolling Table. We could not find any samples for that, would like to get inputs from you on how to implement horizontal scrolling.

Thanks.

2

That’s a matter of setting the desired column’s RowColumnDefinition.width to zero, or back to NaN if you want to show it again.

To make sure they scroll, each row should not stretch to fill the horizontal area. So you’ll want to comment out the stretch assignment and set the Panel.columnSizing to None:

          {
            "TABLE.itemTemplate":
              $(go.Panel, "TableRow",
                { // removed this:
                  //defaultStretch: go.GraphObject.Horizontal,
                  . . .
                },
                new go.Binding("portId", "name"),
                $(go.TextBlock, { column: 0 }, new go.Binding("text", "name")),
                $(go.TextBlock, { column: 1 }, new go.Binding("text", "value")),
                // ...add more columns here...
              ),
            // added this:
            "TABLE.columnSizing": go.RowColumnDefinition.None,
            . . .

Then your code to scroll one way or the other is a matter of making the desired columns zero width or not. Something like:

  myDiagram.commit(d => {
    const table = node.findObject("TABLE");
    for (let c = 1; c <= 3; c++) {
      const def = table.getColumnDefinition(c);
      def.width = isNaN(def.width) ? 0 : NaN;
    }
  });

This hides/shows columns 1-3. You will want to generalize this to maybe hide one more column or one less column at a time as you are scrolling.