Allow datatables to be 100% width and columns to grow to that width

[antoniovazquezblanco]

It would be nice to have a datatable be able to span to a 100% width.
If column width is manually specified, that should be the width, otherwise, remaining space is ocupied by expanded columns that take up the slack.

[github-actions[bot]]

We found the following entry in the FAQ which you may find helpful:

• How do I center a widget in a screen?

Feel free to close this issue if you found an answer in the FAQ. Otherwise, please give us a little time to review.

This is an automated reply, generated by FAQtory

[anzhi0708]

I'm having trouble aligning DataTables, could not place them at the right place, their relative position to other widgets was weird too... align: center middle does not work well neither

[davep]

I'm having trouble aligning DataTables, could not place them at the right place, their relative position to other widgets was weird too... align: center middle does not work well neither

This might have been better in its own issue, or perhaps more as a question in discussions (so that it doesn't get lost under some other issue), but given it's simple enough to address I'll do it here (please though, if you have further questions from this answer, do use the discussions to ask questions).

DataTable aligns to the center/middle of its parent container just fine. This code, for example:

import csv
import io

from textual.app     import App, ComposeResult
from textual.widgets import Header, Footer, DataTable

CSV = """lane,swimmer,country,time
4,Joseph Schooling,Singapore,50.39
2,Michael Phelps,United States,51.14
5,Chad le Clos,South Africa,51.14
6,László Cseh,Hungary,51.14
3,Li Zhuhao,China,51.26
8,Mehdy Metella,France,51.58
7,Tom Shields,United States,51.73
1,Aleksandr Sadovnikov,Russia,51.84"""

class CenterDataTable( App[ None ] ):

    CSS = """
    Screen {
        align: center middle;
    }

    DataTable {
        width: 40%;
        height: 40%;
        border: round red;
    }

    """

    def compose( self ) -> ComposeResult:
        yield Header()
        yield DataTable[str]()
        yield Footer()

    def on_mount( self ) -> None:
        """"""
        table = self.query_one(DataTable[str])
        rows = csv.reader(io.StringIO(CSV))
        table.add_columns(*next(rows))
        table.add_rows(rows)


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

results in this:

I would suspect that, if it's not working for you, you're using the align style on the wrong thing. The align should go on the container of the widget you want in the middle.

[AlexAltea]

The conversation here does not answer the original question by @antoniovazquezblanco. The bot mistakenly thought this was about DataTable alignment, and now Google results are pointing here...

Anyway, I have the same issue as OP: I can't find a way to stretch tables to occupy 100% of the width.

[davep]

The DataTable is still being enhanced and updated and this issue is one thing still to be addressed.

[willmcgugan]

Flexible columns are planned.

[github-actions[bot]]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.

[TomJGooding]

Flexible columns are planned.

So "this issue is one thing still to be addressed"? It's your project, but I don't understand why this was closed.

[willmcgugan]

There are lots of features we plan to add to the Data Table, including flexible columns. The issue was closed because it’s easier for us to track the work offline.