webpage crashes with large mo.ui.table page_size

[Light2Dark]

Describe the bug

When I use mo.ui.table with a large page_size config, the browser will crash. The only solution is to restart marimo. At least some fallback / error message / hardcode the limit is preferable

Environment

{
  "marimo": "0.10.12",
  "OS": "Darwin",
  "OS Version": "23.6.0",
  "Processor": "arm",
  "Python Version": "3.13.1",
  "Binaries": {
    "Browser": "131.0.6778.265",
    "Node": "v23.2.0"
  },
  "Dependencies": {
    "click": "8.1.8",
    "docutils": "0.21.2",
    "itsdangerous": "2.2.0",
    "jedi": "0.19.2",
    "markdown": "3.7",
    "narwhals": "1.21.1",
    "packaging": "24.2",
    "psutil": "6.1.1",
    "pygments": "2.19.1",
    "pymdown-extensions": "10.14",
    "pyyaml": "6.0.2",
    "ruff": "0.9.1",
    "starlette": "0.45.2",
    "tomlkit": "0.13.2",
    "typing-extensions": "4.12.2",
    "uvicorn": "0.34.0",
    "websockets": "14.1"
  },
  "Optional Dependencies": {
    "anywidget": "0.9.13",
    "duckdb": "1.1.3",
    "polars": "1.18.0",
    "pyarrow": "18.1.0"
  }
}

Code to reproduce

@app.cell
def _(mo):
    random = mo.sql(
        f"""
        SELECT 
            1, 2, 3, 4, 5
        FROM generate_series(1,10000)
        """
    )
    return (random,)


@app.cell
def _(mo, random):
    mo.ui.table(random, page_size=10000)
    return

[mscolnick]

My guess is from rendering react. We could add row virtualization (example) when rows are e.g. > 500

[akshayka]

In the meantime I am totally okay with raising a ValueError in Python when the page size is too big (eg, greater than 200)

[Light2Dark]

Hey, sorry have been quite occupied recently. I tested Myles's solution w Marimo and yes it seems to be really smooth! This would add @tanstack/react-virtual lib.

Are we opting for this solution? Instead of hardcoding a page size limit. I imagine either solution is fine for most users 🤔

[mscolnick]

@Light2Dark - might be nice to avoid the complexity of virtualization and whatever other requests come up (not sure how complex your solution was, the additional dependency is ok).

I think a ValueError with "Table limited to 200 rows. If you'd like to this increased, please file an issue ". And then park this branch for later?

Open to thoughts, especially if the solution does carry a maintenance cost (still works with column pinning and other features).

[Light2Dark]

yeap agreed, there is a decent amount of refactoring needed with virtualization. Add tableContainer, grid display. And the table component is used in many places.

[mscolnick]

@Light2Dark have you started the ValueError? (no worries if so) if not, @Haleshot was going to try to take a stab at it.

[Light2Dark]

ah 😅, I finished it but wanted to test in the morning. But feel free to just take it up next time @Haleshot :)

[Haleshot]

ah 😅, I finished it but wanted to test in the morning. But feel free to just take it up next time @Haleshot :)

Ha no issues!