How to change the rx.component ?

[yellowbean]

I've build a function to generate a rx.table.root with list of strings as input.

Now , I would like to make an other function, which takes in a table component. ( rx.table.root) and return a new table component with extra column attached patchActionToTbl,

But an error show up :

code to reproduce

def patchActionToTbl(tbl:rx.Component) -> rx.Component:
    header = tbl.children[0]
    header.children.append(rx.table.column_header_cell("Action"))
    body = tbl.children[1]
    for r in body.children:
        r.children.append(rx.table.cell(" action "))
    return tbl


class State(rx.State):
    """The app state."""


def index() -> rx.Component:
    return rx.center(
        rx.theme_panel(),
        patchActionToTbl(
            rx.table.root(
                rx.table.header(
                    rx.table.row(
                        rx.table.column_header_cell("Full name"),
                        rx.table.column_header_cell("Email"),
                        rx.table.column_header_cell("Group"),
                    ),
                ),
                rx.table.body(
                    rx.table.row(
                        rx.table.row_header_cell("Danilo Sousa"),
                        rx.table.cell("[email protected]"),
                        rx.table.cell("Developer"),
                    ),
                    rx.table.row(
                        rx.table.row_header_cell("Zahra Ambessa"),
                        rx.table.cell("[email protected]"),
                        rx.table.cell("Admin"),
                    ),
                    rx.table.row(
                        rx.table.row_header_cell("Jasper Eriksson"),
                        rx.table.cell("[email protected]"),
                        rx.table.cell("Developer"),
                    ),
                ),
            )
        ),
        height="100vh",
    )

[masenf]

The dispatch error is usually due to running in prod mode in the same tab where a different app was running before. Try in a new tab to resolve that one.

I get a different error actually, and i think the core problem is the code is adding the column_header_cell directly to the header instead of the row contained within the header. Try this:

def patchActionToTbl(tbl:rx.Component) -> rx.Component:
    header = tbl.children[0]
    header_row = header.children[0]
    header_row.children.append(rx.table.column_header_cell("Action"))
    body = tbl.children[1]
    for r in body.children:
        r.children.append(rx.table.cell(" action "))
    return tbl