How to render a table dynamically ?

[yellowbean]

class State(rx.State):
    """The app state."""
    listResultHeader:list[str] = []
    listResultData:list = []

def index() -> rx.Component:
    return rx.center(
            rx.table.root(
                rx.table.header(
                    rx.table.row(*rx.foreach(lambda x: rx.table.column_header_cell(x), State.listResultHeader)),
                ),
                #buildBody(vals),
                rx.table.body(
                    rx.table.row(
                        rx.table.row_header_cell("Danilo Sousa"),
                        rx.table.cell("danilo@example.com"),
                        rx.table.cell("Developer"),
                    ),
                ),
            ),
    )

Could you pls advise why it is wrong ?

[picklelo]

@yellowbean You have the order of the argument switched in your rx.foreach, and you don't need to * on the output. This code works for me:

rx.table.header(
      rx.table.row(
          rx.foreach(
              State.listResultHeader,
              lambda x: rx.table.column_header_cell(x),
          )
      ),
  ),

Let me know if that works!

[yellowbean]

@picklelo Thanks !

I'm wondering how to render table via a 2-D list ? like here tableData is actually a list of rows, and each element inside represent a single row with multiple cells. I'm trying to nested the rx.foreach() but it doesn't seem work. Could you pls advise ? Thanks

State:
   tableData = [["A",1],["B",2]]

rx.table.body(
    rx.foreach(State.tableData
               , lambda xs: rx.table.row(
                   rx.foreach(xs, lambda x: rx.table.cell(x))
                 )
                )
),

But it wont' work

[picklelo]

@yellowbean your code is correct, you just need to add a type annotation to your var (so it knows that its a list of lists that it can foreach, without this you may get a Javascript error by iterating over a non-list type)

from typing import Any

class State(rx.State):
  tableData: list[list[Any]] = [["A",1],["B",2]]