Multiple DataTables on one page?

[EulersNumber2010]

I have some code that pulls data from CSV files and puts them in DataTables. I am wondering how I can have multiple DataTables with content pulled from different CSV files.

[willmcgugan]

You can create as many data tables as you wish. If you have it working did one, you can do the same thing for a second data table.

[EulersNumber2010]

How do I tell each data table which set to display if I have multiple data sets?

[willmcgugan]

If you show me the code you are using, I can give you suggestions.

[EulersNumber2010]

from rich.text import Text
from textual.app import App, ComposeResult
from textual.widgets import DataTable, TabbedContent, Tabs
import CSVedit

filename = "scores.csv"
ls = "ls.csv"
ms = "ms.csv"
hs = "hs.csv"

ROWS = [
    ("student", "tokens"),
    (f"{CSVedit.readcol(filename, 0)}", f"{CSVedit.readcol(filename, 1)}")
]

LS_ROWS = [
    ("student", "tokens"),
    (f"{CSVedit.readcol(ls, 0)}", f"{CSVedit.readcol(ls, 1)}")
]

MS_ROWS = [
    ("student", "tokens"),
    (f"{CSVedit.readcol(ms, 0)}", f"{CSVedit.readcol(ms, 1)}")
]

HS_ROWS = [
    ("student", "tokens"),
    (f"{CSVedit.readcol(hs, 0)}", f"{CSVedit.readcol(hs, 1)}")
]


class GymScore(App):
    CSS = """
    Tabs {
        dock: top;
    }
    Screen {
        align: center top;
    }
    Label {
        margin:1 1;
        width: 100%;
        height: 100%;
        background: $panel;
        border: tall $primary;
        content-align: center top;
    }
    DataTable {
        margin:1 1;
        width: 100%;
        height: 100%;
        background: transparent;
        border: hkey $primary;
        content-align: center top;
    }
    """

    def compose(self) -> ComposeResult:
        yield Tabs("LS", "MS", "HS")
        yield DataTable()
        yield DataTable()
        yield DataTable()

#        tabs = ("LS", "MS", "HS")
#        
#        with TabbedContent(*tabs):
#            lst()
#            yield DataTable()
#            yield DataTable()

    def on_mount(self) -> None:
        lstable = self.query_one(DataTable)
        lstable.add_columns(*ROWS[0])
        lstable.add_rows(LS_ROWS[1:])

        mstable = self.query_one(DataTable)
        mstable.add_columns(*ROWS[0])
        mstable.add_rows(MS_ROWS[1:])

        hstable = self.query_one(DataTable)
        hstable.add_columns(*ROWS[0])
        hstable.add_rows(HS_ROWS[1:])

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

The tables currently display side by side, with no spacing.

[willmcgugan]

You can give your data tables a unique id.

https://textual.textualize.io/guide/CSS/#id-selector

https://textual.textualize.io/guide/queries/#query-one

[EulersNumber2010]

Thank you for the help.