Creating a widget without having a parent DOM element that affects layout

[multimeric]

My dilemma is this. I have a large Grid, and I want each row of that Grid to be its own component. However, if I make a "row"-widget, it inserts the widget itself into the DOM as one single element that contains my two child element, meaning that it doesn't follow the grid layout as I want.

Here's an example:

from textual.app import App, ComposeResult
from textual.containers import Grid
from textual.widget import Widget
from textual.widgets import Static


class Row(Widget):
    def compose(self) -> ComposeResult:
        yield Static("Column 1")
        yield Static("Column 2")

class Demo(App):
    CSS = """Grid {
        grid-size: 2;
    }
    """
    def compose(self) -> ComposeResult:
        with Grid():
            for i in range(9):
                yield Row()

Demo().run()

See how "Column 1" and "Column 2" are aligned vertically to each other? I want all the "Column 1" to be on the left and all the "Column 2" on the right.

[davep]

The problem is, as you say, your Static widgets are contained within a Row widget, which in turn is inside each "cell" in the grid. The solution here would be to not have a Row:

from textual.app import App, ComposeResult
from textual.containers import Grid
from textual.widgets import Static


class Demo(App):
    CSS = """Grid {
        grid-size: 2;
    }
    """
    def compose(self) -> ComposeResult:
        with Grid():
            for i in range(9):
                yield Static("Column 1")
                yield Static("Column 2")

if __name__ == "__main__":
    Demo().run()

[multimeric]

Yeah, but then how can I have the modularity of a Widget? I want the widget to be a complex re-usable component that has its own event handlers, events, state etc.

[davep]

If that's the effect you're after, then I wouldn't use a Grid for the main layout. Instead I'd probably go with a Vertical of your own widget, which will handle it's own columnar layout:

from textual.app import App, ComposeResult
from textual.containers import Vertical, Grid
from textual.widgets import Static


class Row(Grid):

    DEFAULT_CSS = """
    Row {
        grid-size: 2;
    }
    """

    def compose(self) -> ComposeResult:
        yield Static("Column 1")
        yield Static("Column 2")

class Demo(App):

    def compose(self) -> ComposeResult:
        with Vertical():
            for i in range(9):
                yield Row()

if __name__ == "__main__":
    Demo().run()

[multimeric]

Yeah, if I can guarantee that each separate grid will have the same column breaks then that solution is okay. I gather from your suggestions that exactly what I want isn't currently possible, but this is a workable solution. Thanks!

[davep]

Well, it's not that it isn't currently possible, it's that it wouldn't really make sense for the grid layout; grid layout is intended to control the layout of widgets, just like Horizontal and Vertical. If you have a compound widget then its own container should handle the internal layout.

[multimeric]

I understand where you're coming from, but I don't think my request is so outrageous. As an example I'm very familiar with React. Their solution to this problem is the "fragment tag": https://react.dev/reference/react/Fragment, which allows you to define a component which renders as a list of components rather than one parent with children. I can envisage a Widget subclass like FragmentWidget that lets you return a list of children without creating a new node.

[mon]

Just bumping as another voice that wants this (or some sort of workaround).

I really want to be able to refactor fearlessly to de-complicate a column-aligned list.
Starting with:

    def compose(self) -> ComposeResult:
        yield Vertical(
            Static("General"), Static(""),
            Static(" Serial"), Static("1234"),
            Static(" Voltage"), Static("12v"),
            Static(" Amperage"), Static("10A"),

I get a lovely aligned grid as expected:

But if I move each row to its own helper, I get the same "expected, but not useful" behaviour as the OP.

I think the best temporary solution seems to be

• use function *args instead of with/yield
• make my wrapper class instead be a wrapper function that returns my 2 elements

like:

def row(name, val = ""):
    yield Static(name)
    yield Static(val)

...

    def compose(self) -> ComposeResult:
        yield Vertical(
            *row("General"),
            *row(" Serial", "1234"),
            *row(" Voltage", "12v"),
            *row(" Amperage", "10A"),

Any other suggestions appreciated.