How to disable horizontal scrolling in DataTable and wrap text to next line

[vijay609]

I am using DataTables and I notice that when there is not enough horizontal space, horizontal scroll bar shows up, which is nice. Is there a way to disable horizontal scrolling and instead wrap text to next line for columns that don't have enough horizontal space, similar to what Rich.Table does ?

[lingfish]

I'd like to know this too -- if not possible, what would be the widget to use instead, giving us columns?

[vasanth-asokan]

Ran into the same need. Couldn't figure out a way, have tried controlling overflow properties but not sure how to get table cell to wrap text.

[lingfish]

Hi @TomJGooding @willmcgugan -- sorry if my ping here bothers you; figured you might not notice this older discussion.

Do you have any ideas/thoughts?

[TomJGooding]

There isn't a built-in method in the DataTable to achieve this AFAIK.

However, you might consider using the width and height arguments in the add_column and add_row methods as a potential solution. Here's a quick example to show what I mean.

(P.S. I don't mind you tagging me, but just to clarify that I'm not a maintainer of Textual - just a enthusiastic minor contributor!)

from textual import events
from textual.app import App, ComposeResult
from textual.widgets import DataTable

LONG_TEXT = "The quick brown fox jumps over the lazy dog"


class ExampleApp(App):
    def compose(self) -> ComposeResult:
        yield DataTable()

    def update_table(self, width: int) -> None:
        table = self.query_one(DataTable)
        table.clear(columns=True)

        column_count = 8
        column_padding = 1
        max_col_width = (width // column_count) - (column_padding * 2)

        for i in range(column_count):
            table.add_column(f"C{i}", width=max_col_width)
        for _ in range(8):
            table.add_row(
                *[LONG_TEXT] * column_count,
                height=None,  # Use None to auto-detect the optimal height.
            )

    def on_resize(self, event: events.Resize) -> None:
        self.update_table(event.size.width)


if __name__ == "__main__":
    app = ExampleApp()
    app.run()

[lingfish]

There isn't a built-in method in the DataTable to achieve this AFAIK.

Yeah. I think it would be super useful though!

However, you might consider using the width and height arguments in the add_column and add_row methods as a potential solution. Here's a quick example to show what I mean.

Nice. Simply setting width seems to work. Thanks for your example, and I know it's a PoC, but it does clear the table, and columns are re-added so there's loss of data on resize maybe? It would be great to be able to merely update column style/metadata, rather than a full nuke.

It also obviously resizes all cols to the same width -- what if you need wrap only on one, or less than all?

I couldn't find an easy way to elicit that event.size.width (ie. just getting computed width of the terminal) either, to calculate things that way.

(P.S. I don't mind you tagging me, but just to clarify that I'm not a maintainer of Textual - just a enthusiastic minor contributor!)

Understood!

[lingfish]

So I've a go at this, with mixed success and a lot of mess 😆

This is what my table looks like:

The first two columns are auto, their width won't flux much. It's the message column that I want to wrap.

For now, I'm just doing the below in a async message handler -- so every time a new line comes in, this stuff runs (not optimal):

    async def on_output_message(self, message: OutputMessage):
        """Handle OutputMessage to update UI components."""
        log = self.query_one('#log')
        table = self.query_one('#messages')

        # Process the output as it becomes available
        log.write(f'[bold magenta]program: {message.output}')
        current_time, timestamp, address, message = parse_line(message.output)
        self.log('Adding a row')
        if message:
            table.add_row(str(timestamp.strftime('%H:%M:%S')), Text(address, justify='right'), message, height=None)
        else:
            log.write('[orange]No valid message decoded from program')
        try:
            table.action_scroll_bottom()
        except SkipAction:
            pass

        message_col_width = table.columns['time'].get_render_width(table) + table.columns['address'].get_render_width(table)
        if table.show_vertical_scrollbar:
            scroll_padding = table.styles.scrollbar_size_vertical
        else:
            scroll_padding = 0
        table.columns["message"].width = (table.size.width - message_col_width) - (2 * table.cell_padding) - scroll_padding
        table.columns["message"].auto_width = False

So, a few issues happening:

1. Very klunky
2. The final column width doesn't really update until further messages are added
3. The scroll to bottom doesn't initially work too, probably because it needs to go more to the end of that code (scroll to end would be another fantastic feature, a la tail!)
4. I tried also doing this to detect when a vertical scrollbar appears, and it never fires:

    async def watch_show_vertical_scrollbar(self) -> None:
        log = self.query_one('#log')
        log.write('scrollbar appeared!')

Looking for hints as to doing this better... ultimately looking for a simple arg to add_column to all of this for us 😉