Tables and collapsible elements overlap in horizontal groups

[ndahn]

Discussed in #2294

^{Originally posted by nickpas February 23, 2024}
Hi all,

I tried to make a screen layout showing multiple tables next to each other (with scroll bars in case the window can not fit everything). To arrange them, I used groups (with horizontal=True).
The result seems however to act rather strange. Mainly horizontal scrolling seems to be broken: all table content outside the original view doesn't render. I made a small example with the elements I used in my real program (see below). If you resize till you get a horizontal scroll bar and then scroll, you should see the effect (I run on MacOS).
The text below the table (in the same group), also seems to influence the behaviour. (If you remove it, the scrolling & rendering acts differently.)
For some reason, the tables also partially render on top of each other.
From the documentation (and many searches) I could not determine if it is allowed to put tables in groups or not. Can anyone clarify if what I try should work or not?

import dearpygui.dearpygui as dpg

dpg.create_context()

with dpg.window(label="Tutorial",horizontal_scrollbar=True) as main_window:
    with dpg.group(horizontal=True):
        with dpg.group():
            dpg.add_text("table 1")
            with dpg.table(header_row=False):

                for i in range(5):
                    dpg.add_table_column()

                for i in range(300):
                    with dpg.table_row():
                        for j in range(5):
                            dpg.add_text(f"T1 Row{i} Column{j}")
            dpg.add_text("under table 1")

        with dpg.group():
            dpg.add_text("table 2")
            with dpg.table(header_row=False):

                for i in range(5):
                    dpg.add_table_column()

                for i in range(310):
                    with dpg.table_row():
                        for j in range(5):
                            dpg.add_text(f"T2 Row{i} Column{j}")
            dpg.add_text("under table 2")

dpg.show_metrics()

# Makes the effect easier to see
dpg.set_primary_window(main_window, True)

dpg.create_viewport(title='Custom Title', width=800, height=600)
dpg.setup_dearpygui()
dpg.show_viewport()
dpg.start_dearpygui()
dpg.destroy_context()

[ndahn]

@nickpas Did you find a workaround? In my case it seems to be fine when setting a width for the group or table. However, the same happens for collapsing_header and tree_node where you can't set a width...

[v-ein]

all table content outside the original view doesn't render.

This is due to a bug in Dear ImGui, which means there's no easy fix on the DPG side. See ocornut/imgui#6421.

[v-ein]

I tried to make a screen layout showing multiple tables next to each other (with scroll bars in case the window can not fit everything)

Add the following to your tables so that they don't adjust to the container size (i.e. group size, which in turn gets extended by the other table):

policy=dpg.mvTable_SizingFixedFit, no_host_extendX=True

Unfortunately this does not solve the problem of incorrect content clipping. As a workaround, you can place your tables into cells of another table, with the outer table providing scrollbars instead of relying on the window scrolling.

    with dpg.table(header_row=False, policy=dpg.mvTable_SizingFixedFit, scrollX=True):
        dpg.add_table_column()
        dpg.add_table_column()
        with dpg.table_row():
            with dpg.group():
                dpg.add_text("table 1")
                with dpg.table(header_row=False, policy=dpg.mvTable_SizingFixedFit, no_host_extendX=True):

                    for i in range(5):
                        dpg.add_table_column()

                    for i in range(300):
                        with dpg.table_row():
                            for j in range(5):
                                dpg.add_text(f"T1 Row{i} Column{j}")
                dpg.add_text("under table 1")

            with dpg.group():
                dpg.add_text("table 2")
                with dpg.table(header_row=False, policy=dpg.mvTable_SizingFixedFit, no_host_extendX=True):

                    for i in range(5):
                        dpg.add_table_column()

                    for i in range(310):
                        with dpg.table_row():
                            for j in range(5):
                                dpg.add_text(f"T2 Row{i} Column{j}")
                dpg.add_text("under table 2")

[ndahn]

Interesting.... thank you for the clever workaround! I will try it over the next few days.