Replicating the border style of a Rich Table in Textual's Grid

[mon]

Hope you're not tired of my questions yet 😅

I want to replicate the design of the Rich Table, for example:

┏━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━┓
┃     Released ┃ Title                             ┃     Box Office ┃
┡━━━━━━━━━━━━━━╇━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╇━━━━━━━━━━━━━━━━┩
│ Dec 20, 2019 │ Star Wars: The Rise of Skywalker  │   $952,110,690 │
│ May 25, 2018 │ Solo: A Star Wars Story           │   $393,151,347 │
│ Dec 15, 2017 │ Star Wars Ep. V111: The Last Jedi │ $1,332,539,889 │
│ Dec 16, 2016 │ Rogue One: A Star Wars Story      │ $1,332,439,889 │
└──────────────┴───────────────────────────────────┴────────────────┘

I don't want to just include a Rich Table as-is, because each cell dynamically updates and recreating the whole table each time would be too expensive. I don't want to use a DataTable because it seems better suited to static data (I also don't need the cursor/colouring, and it's too compact).

I've tried many attempts to style a Grid to replicate this style, but can't work it out. Outline, Keyline, Border, Rule widgets all have strange behaviour at cell boundaries, or style just the cell (there doesn't seem to be a way to replicate HTML table's <tr> to style entire rows, and it doesn't help for column borders anyway).

Is it possible with Textual CSS, or am I thinking about it the wrong way?

[davep]

I don't want to use a DataTable because it seems better suited to static data

Just for clarity: DataTable is very much intended for non-static data.

[mon]

Oh, interesting - that the DataTable seemed to take strings and not custom Widgets (which can self-update) was the reason I didn't initially use it, and which caused me to think it was suited to static data.

The DataTable itself still seems to be missing bordered header/columns - is this just an existing limitation with Textual, or a deliberate style choice?

[davep]

There's no limitation that I can think of; as far as I know it's a deliberate style choice.

[davep]

And to be clear on the "doesn't use widgets" aspect: this is very much deliberate also. The point of DataTable is you can have 1,000s of cells for the price of just one widget; vs 1,000s of cells for the price of 1,000s of widgets -- widgets do have an overhead.

[davep]

On the more general question, and especially thinking about keyline (which is where I might have first gone if I wanted to do what you seem to be wanting to try to do), it seems to work fine for me:

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

DATA =(
    ("Released", "Title", "Box Office"),
    ("Dec 20, 2019", "Star Wars: The Rise of Skywalker", "$952,110,690"),
    ("May 25, 2018", "Solo: A Star Wars Story", "$393,151,347"),
    ("Dec 15, 2017", "Star Wars Ep. V111: The Last Jedi", "$1,332,539,889"),
    ("Dec 16, 2016", "Rogue One: A Star Wars Story", "$1,332,439,889"),
)

class FakeTableApp(App[None]):

    CSS = """
    Grid {
        grid-size: 3;
        grid-rows: 1;
        grid-columns: auto;
        grid-gutter: 1;
        keyline: thin;

        Label {
            width: 1fr;
            padding: 0 1 0 1;
        }
    }
    """

    def compose(self) -> ComposeResult:
        with Grid():
            for row in DATA:
                for col in row:
                    yield Label(col)

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

[mon]

That's certainly closer, but when rows are only 1 unit high, it tries to insert tiny little crossbars:

It also doesn't seem like I can bold the header only

[davep]

Making them 1 high leaves no room for the horizontal lines you wanted, so why would you not want to do the thing you want?

[mon]

I don't actually want the horizontal lines on every cell, just a single one for the header (which is what the Rich table does)

[davep]

If you want it looking more like that I would imagine using a grid with keyline and a vertical container of labels or something for each column of data would get you there.

[mon]

That seems like a reasonable solution for now. It will still not result in a bold header and a thin remainder like Rich:

...but that's nitpicky style.