Can't apply colors from theme to DataTable cell

[catcombo]

I'm trying to understand what am I doing wrong, but it looks like DataTable cells have very limited styling options.

from textual.app import App, ComposeResult
from textual.content import Content
from textual.widgets import DataTable, Footer


class HelloApp(App[None]):
    def compose(self) -> ComposeResult:
        yield DataTable()
        yield Footer()

    def on_mount(self) -> None:
        table = self.query_one(DataTable)
        table.can_focus = False
        table.add_column("Column name")

        # MarkupError: closing tag '[/]' at position 32 has nothing to close
        # table.add_row("Some text. [$accent]Accent color[/]. More text.")

        # Color is not applied
        table.add_row(Content.from_markup("Some text. [$accent]Accent color[/]. More text."))

        # Doesn't work as well
        accent_color = self.app.available_themes[self.app.theme].accent
        table.add_row(Content.from_markup("Some text. [$accent]Accent color[/]. More text.", accent=accent_color))

        # Doesn't work
        table.add_row(Content.from_markup("Some text. [#ffa62b]Accent color[/]. More text."))

        # Works! But I don't want to hardcode color code. I want to use the one from theme.
        table.add_row("Some text. [#ffa62b]Accent color[/]. More text.")


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

[TomJGooding]

The problem is that the DataTable will render cell data as Rich Text. This doesn't know anything about Textual themes or content, this won't be converted correctly.

There might be a better way, but here's a possible workaround:

from textual.app import App, ComposeResult
from textual.content import Content
from textual.widgets import DataTable, Static


class HelloApp(App[None]):
    def compose(self) -> ComposeResult:
        yield Static(
            Content.from_markup(
                "Changing theme should match: [$accent]Accent color[/]",
            )
        )

        yield DataTable()

    def populate_table(self) -> None:
        table = self.query_one(DataTable)
        table.clear(True)

        table.add_column("Column name")

        # Color is not applied
        table.add_row(
            Content.from_markup("Some text. [$accent]Accent color[/]. More text.")
        )
        # Doesn't work
        table.add_row(
            Content.from_markup("Some text. [#ffa62b]Accent color[/]. More text.")
        )

        # The problem is that the DataTable will render cell data as Rich Text,
        # so Textual Content isn't converted correctly.
        #
        # Instead, you can get the theme's accent color and provide the cell
        # data as simple markup.
        accent = self.app.current_theme.accent
        table.add_row(f"Some text. [{accent}]Accent color[/]. More text.")

    def on_mount(self) -> None:
        self.populate_table()

        # But now the accent color is "hard-coded" in the cell, so won't update
        # when the theme is changed.
        #
        # Unfortunately we'll need to re-populate the table when the theme changes. 
        # Here's how you might subscribe to the `theme_changed_signal`.
        self.app.theme_changed_signal.subscribe(self, lambda _: self.populate_table())


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

[catcombo]

Thank you for the solution! I agree, it's not perfect, Maybe I should use only simple styling like bold to highlight text parts in cells. I guess I should always use either plain text or Rich Text object when populate DataTable cells. And Rich Text doesn't have access to the app theme that's why $accent cannot be interpreted correctly. But why Content is not allowed to use in cells? Is it because it can break formatting if there will be many inappropriate styles on it?

[willmcgugan]

It is because it has not been implemented yet. The Content system is newer.

[catcombo]

Thank you, Will!