Scrolling table with static header?

[scruffyvoltherder]

I'm trying to create a table that can scroll, but the header on top stays in place. I tried putting my header labels in a flow, with a scroll-pane containing the table underneath it. I was going to try and set the header label widths to the elements inside the table, but I couldn't figure out a way to find the current size of an element.

I'm trying to make something that looks like this.

02-08-2025, 18-49-40.png (39.65 KiB) Viewed 103 times

Current code so far, the table is going to be part of the tags pane:

Code: Select all

function PLCEditor.open_editor(player, entity)
    local editor={}
    -- create window
    local gui = player.gui.screen.add{type = "frame", name = "my-mod-gui", direction = "vertical"}
    gui.style.natural_height=600
    gui.style.maximal_height=600
    gui.auto_center = true

    --main window flow
    add_titlebar(gui, "PLC Editor", "my-mod-x-button")
    local main_flow = gui.add{type = "flow",direction = "horizontal"}
    local main_TP=main_flow.add{type="tabbed-pane"}
    main_TP.style.vertically_stretchable=true

    --tabs
    local programtab = main_TP.add{type="tab", caption="Program"}
    local tagtab = main_TP.add{type="tab", caption="Tags"}
    local UDTtab = main_TP.add{type="tab", caption="UDTs"}

    --flows inside tabs
    local programflow=main_TP.add{type = "flow",direction = "vertical"}
    local tagflow=main_TP.add{type = "flow",direction = "vertical"}
    local udtflow=main_TP.add{type = "flow",direction = "horizontal"}

    --add tabs
    main_TP.add_tab(programtab, programflow)
    main_TP.add_tab(tagtab, tagflow)
    main_TP.add_tab(UDTtab, udtflow)


  --UDT datatypes pane
  local udt_dt_frame=udtflow.add{type = "frame",direction = "vertical"}
  udt_dt_frame.add{ type = "label",  style = "frame_title",  caption ="Datatypes",  ignored_by_interaction = true,}
  local udt_buttons=udt_dt_frame.add{type = "flow",direction = "horizontal"}
  local new_udt_button=udt_buttons.add{type="button", name="new_UDT", caption="New UDT"}
  local delete_udt_button=udt_buttons.add{type="button", name="delete_UDT", caption="Delete UDT"}
  local udt_pane=udt_dt_frame.add{type = "scroll-pane",direction = "vertical"}
  udt_pane.style.horizontally_stretchable=true
  udt_pane.style.vertically_stretchable=true

  --UDT members pane 
  local udt_member_frame=udtflow.add{type = "frame",direction = "vertical"}
  udt_member_frame.add{ type = "label",  style = "frame_title",  caption ="Members",  ignored_by_interaction = true,}
  local member_buttons=udt_member_frame.add{type = "flow",direction = "horizontal"}
  local new_member_button=member_buttons.add{type="button", name="new_Member", caption="New UDT Member"}
  local delete_member_button=member_buttons.add{type="button", name="delete_Member", caption="Delete UDT Member"}
  local member_pane=udt_member_frame.add{type = "scroll-pane",direction = "vertical"}
  member_pane.style.horizontally_stretchable=true
  member_pane.style.vertically_stretchable=true

  -- Tags pane
  local tags_buttons=tagflow.add{type = "flow",direction = "horizontal"}
  local new_tag_button=tags_buttons.add{type="button", name="new_tag", caption="New Tag"}
  local delete_tag_button=tags_buttons.add{type="button", name="delete_tag", caption="Delete Tag"}

  local tag_headings=tagflow.add{type = "flow",direction = "horizontal"}
  local header1=tag_headings.add{ type = "label",  style = "frame_title",  caption ="Tagname",  ignored_by_interaction = true,}
  local header2=tag_headings.add{ type = "label",  style = "frame_title",  caption ="Value",  ignored_by_interaction = true,}
  local header3=tag_headings.add{ type = "label",  style = "frame_title",  caption ="Type",  ignored_by_interaction = true,}
  local header4=tag_headings.add{ type = "label",  style = "frame_title",  caption ="Comment",  ignored_by_interaction = true,}

  local tag_pane=tagflow.add{type = "scroll-pane",direction = "vertical"}
  local tagtable=tag_pane.add{name="tag_table", type="table", column_count=4,draw_vertical_lines=true,draw_horizontal_lines=true,draw_horizontal_line_after_headers=true}
  tag_pane.style.horizontally_stretchable=true
  tagtable.style.horizontally_stretchable=true

  local label=nil
  label=tagtable.add{ type = "label",  style = "frame_title",  caption ="gg",  ignored_by_interaction = true,}
  label.style.horizontally_stretchable=true
  --header1.style.width=label.style.width

  label=tagtable.add{ type = "label",  style = "frame_title",  caption ="gg",  ignored_by_interaction = true,}
  label.style.horizontally_stretchable=true
  label=tagtable.add{ type = "label",  style = "frame_title",  caption ="gg",  ignored_by_interaction = true,}
  label.style.horizontally_stretchable=true
  label=tagtable.add{ type = "label",  style = "frame_title",  caption ="gg",  ignored_by_interaction = true,}
  label.style.horizontally_stretchable=true

end