Table displaying incorrectly

[thomastiotto]

So, I have a table with dynamic data and inputs that I display, and I cannot format it correctly.

I would want the two pairs of select and input to be side-by-side i.e., in two different columns, but instead they are displayed on top of each other.

My table definition is as such:

            rx.table.header(
                rx.table.row(
                    rx.table.column_header_cell("Date"),
                    rx.table.column_header_cell("Time"),
                    rx.table.column_header_cell("Country"),
                    rx.table.column_header_cell("Event"),
                    rx.table.column_header_cell("Previous Condition"),
                    rx.table.column_header_cell("Actual Condition"),
                ),
            ),
            rx.table.body(
                rx.foreach(
                    CalendarState.get_included_events,
                    show_conditions_event,
                )
            ),
        ),

and the function that populates it is:

def show_conditions_event(cal_event: EventDate):
    return rx.table.row(
        rx.table.cell(cal_event.day),
        rx.table.cell(cal_event.time),
        rx.table.cell(cal_event.countryCode),
        rx.table.cell(cal_event.name),
        rx.hstack(
            rx.select(
                ["<", ">", "<=", ">="],
                on_change=CalendarState.save_event_condition(
                    cal_event,
                    "actual",
                    "operator",
                ),
            ),
            rx.input(
                placeholder="Actual value",
                default_value="0",
                on_blur=CalendarState.save_event_condition(
                    cal_event,
                    "actual",
                    "value",
                ),
            ),
        ),
        rx.hstack(
            rx.select(
                ["<", ">", "<=", ">="],
                on_change=CalendarState.save_event_condition(
                    cal_event,
                    "previous",
                    "operator",
                ),
            ),
            rx.input(
                placeholder="Previous value",
                default_value="0",
                on_blur=CalendarState.save_event_condition(
                    cal_event,
                    "previous",
                    "value",
                ),
            ),
        ),
    )

Am I doing anything wrong or is this a bug in Reflex?

Thanks!

[picklelo]

@thomastiotto I think you need to put both your rx.select and rx.input within an rx.table_cell - then they should appear in two separate cells.

[thomastiotto]

Perfect!

rx.table.cell(
            rx.hstack(
                rx.select(
                    ["<", ">", "<=", ">="],
                    on_change=CalendarState.save_event_condition(
                        cal_event,
                        "previous",
                        "operator",
                    ),
                ),
                rx.input(
                    placeholder="Previous value",
                    on_blur=CalendarState.save_event_condition(
                        cal_event,
                        "previous",
                        "value",
                    ),
                ),
            )
        ),
        rx.table.cell(
            rx.hstack(
                rx.select(
                    ["<", ">", "<=", ">="],
                    on_change=CalendarState.save_event_condition(
                        cal_event,
                        "actual",
                        "operator",
                    ),
                ),
                rx.input(
                    placeholder="Actual value",
                    on_blur=CalendarState.save_event_condition(
                        cal_event,
                        "actual",
                        "value",
                    ),
                ),
            )
        ),