DataTable not appear on the screen when binding data to table with on_mount

[MohamedElgamal]

Hi i am trying the following scenario i want to create a table that show data that will come from database i want to please the table inside a TabbedContent but nothing appears inside the tabs if i tried other component it works
this is my code snippet :
the class component that responsible to create the table called HistoryTable
and i am place it in CollaboratorTabbedContent class

from textual.app import App, ComposeResult, Reactive, Widget
from textual import on
from textual.widgets import Footer, Label, Markdown, TabbedContent, TabPane, Button, Static, Input, DataTable
from yamlfilereader import YamlFileReader
from Validation import Validation
from SMTPReportSubmission import SMTPReportSubmission
from SubmissionDAO import SubmissionDAO


class MessageWidget(Static):
    # Default Value is empty
    msg_value = Reactive("", layout=True)

    def render(self) -> str:
        return f"{self.msg_value}"
    
class HistoryTable(Widget):
    ROWS = [
        ("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),
        (10, "Darren Burns", "Scotland", 51.84),
    ]

    def compose(self) -> ComposeResult:
        yield DataTable()

    def on_mount(self):
        table = self.query_one(DataTable)
        table.add_columns(*self.ROWS[0])
        table.add_rows(self.ROWS[1:])


class CollaboratorFormContent(Static):
    state_msg_value = Reactive("")

    def __init__(self, title, file_reader, current_logged_user):
        super().__init__()
        self.issue_title = title
        self.extracted_title_fields = file_reader.search_for_issue_by_title(self.issue_title)[1]
        self.validation = Validation()
        self.submission_dao = SubmissionDAO()
        self.current_logged_user = current_logged_user

    def compose(self) -> ComposeResult:
        for field in self.extracted_title_fields:
            yield Input(placeholder=field, id=field)
        yield Button("Submit", variant="success")
        yield MessageWidget()

    @on(Button.Pressed)
    def submit_request(self):
        request_field_info = []
        for field in self.extracted_title_fields:
            request_field_info.append(self.get_widget_by_id(id=field).value)
        if self.validation.validate(request_field_info, self.issue_title):
            is_data_inserted = self.submission_dao.insert_request(req_type=self.issue_title,
                                                                  req_username=self.current_logged_user,
                                                                  req_info_name=self.extracted_title_fields,
                                                                  req_info_arr=request_field_info)
            if is_data_inserted is True:
                self.query_one(MessageWidget).msg_value = "Request has been submitted"
            else:
                self.query_one(MessageWidget).msg_value = self.submission_dao.get_error_msg
        else:
            self.query_one(MessageWidget).msg_value = self.validation.error_msg


class CollaboratorTabbedContent(Widget):
    HISTORY_TAB_TITLE = "History"

    def __init__(self, current_logged_user):
        super().__init__()
        self.file_reader = YamlFileReader()
        self.current_logged_user = current_logged_user

    def compose(self) -> ComposeResult:
        yield Footer()
        titles = self.file_reader.extract_issue_titles()
        with TabbedContent():
            for title in titles:
                with TabPane(title):
                    yield CollaboratorFormContent(title, self.file_reader, self.current_logged_user)
            with TabPane(self.HISTORY_TAB_TITLE):
                yield HistoryTable()


class CollaboratorApp(App):
    def __init__(self, current_logged_user):
        super().__init__()
        self.current_logged_user = current_logged_user

    def compose(self) -> ComposeResult:
        yield CollaboratorTabbedContent(self.current_logged_user)
        yield HistoryTable()


if __name__ == "__main__":
    username = "mohamedelgamal"
    app = CollaboratorApp(username)
    app.run()

[davep]

I suspect the issue here, as per the title, isn't down to how and where the DataTable is populated. If we condense the code down to just that:

from textual.app import App, ComposeResult
from textual.widgets import DataTable
from textual.widget import Widget

class HistoryTable(Widget):
    ROWS = [
        ("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),
        (10, "Darren Burns", "Scotland", 51.84),
    ]

    def compose(self) -> ComposeResult:
        yield DataTable()

    def on_mount(self):
        table = self.query_one(DataTable)
        table.add_columns(*self.ROWS[0])
        table.add_rows(self.ROWS[1:])

class ExampleTableApp(App[None]):

    def compose(self) -> ComposeResult:
        yield HistoryTable()

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

the DataTable is visible and populated.

Given there's no styling in your code, as far as I can tell, I would imagine the problem will come from some part of the application's display being obscured or pushed off the screen by another part. I'd start by adding some appropriate styling to your application.

You may find the howto on creating a layout helpful here.

[MohamedElgamal]

thanks bro.