gradio Dataframe — the one component you can actually type into

$ import gradio as gr
import pandas as pd

def evaluate(backbone: str):
    rows = {"resnet50": [0.7623, 0.9210], "vit_b16": [0.8109, 0.9502], "convnext_t": [0.8431, 0.9640]}
    acc, f1 = rows.get(backbone, [0.5, 0.5])
    return pd.DataFrame({"backbone": [backbone], "top1": [acc], "f1": [f1]})

with gr.Blocks(title="Eval board") as demo:
    gr.Markdown("### Benchmark board")
    pick = gr.Dropdown(["resnet50", "vit_b16", "convnext_t"], label="backbone", value="resnet50")
    run  = gr.Button("Run eval")
    board = gr.Dataframe(label="results", interactive=False)   # output-only board
    run.click(evaluate, pick, board)

demo.launch()

Running on local URL:  http://127.0.0.1:7860

Rendered component tree: Markdown "### Benchmark board" -> Dropdown (label "backbone", value resnet50) -> Button "Run eval" -> Dataframe (label "results").

What the browser is told for that Dataframe (read live from /config):
  {"label": "results", "interactive": false, "type": "pandas", "max_height": 500}

Clicking Run eval passes pick's value into evaluate() and postprocesses the returned DataFrame:
  postprocess -> {'headers': ['backbone', 'top1', 'f1'],
                  'data': [['vit_b16', 0.8109, 0.9502]],
                  'metadata': None}
The grid shows one row with the backbone name and two float columns; no cell is editable, so no keyboard ever appears.

Output-only is the default posture: leave `interactive` alone, or set interactive=False explicitly as above. Verified on gradio 6.18.0 / pandas 3.0.3 — the config line is the actual response the launch served.

$ import gradio as gr
import pandas as pd

def total_claim(df: pd.DataFrame) -> str:
    amt = pd.to_numeric(df["amount"], errors="coerce")
    return (f"{len(df)} rows, {int(df['vendor'].isna().sum())} vendor cells still blank, "
            f"total = {amt.sum():.2f} over {int(amt.notna().sum())} filled amounts")

with gr.Blocks(title="Claim lines") as demo:
    lines = gr.Dataframe(
        headers=["date", "vendor", "amount", "gl_code"],
        datatype=["date", "str", "number", "str"],
        column_count=4, row_count=6,
        interactive=True, label="new expense lines",
    )
    run = gr.Button("Total the claim")
    out = gr.Textbox(label="totals")
    run.click(total_claim, lines, out)

demo.launch()

Running on local URL:  http://127.0.0.1:7860

Rendered component tree: one Dataframe labelled "new expense lines" (4 typed columns, 6 empty rows, every cell editable — click or double-click a cell and an inline editor appears with the current value), a Button "Total the claim", a Textbox "totals".

What a freshly rendered blank form hands the function (real run):
  empty form     -> 6 rows, 6 vendor cells still blank, total = 0.00 over 0 filled amounts
  two lines typed -> 6 rows, 4 vendor cells still blank, total = 338.00 over 2 filled amounts

Note the shape: the form always submits 6 rows. Untouched cells arrive inside the DataFrame as NaN, not as '' — which is exactly why isna() counts them and why `total` works without a single None-check.

The 6x4 form was verified end to end; the two result strings are the literal return values. `datatype` drives both the cell renderer (a date picker for "date", a checkbox for "bool") and the dtype coercion in preprocess().

$ import gradio as gr

def inspect_cell(ev: gr.SelectData):
    return (f"index     = {ev.index}\n"
            f"value     = {ev.value!r}\n"
            f"row_value = {ev.row_value!r}\n"
            f"col_value = {ev.col_value!r}   <- the whole COLUMN, not the column name\n"
            f"selected  = {ev.selected}")

with gr.Blocks() as demo:
    grid = gr.Dataframe(value=[["A-1", 4], ["B-2", 9]], headers=["sku", "qty"],
                        datatype=["str", "number"], interactive=True, label="stock")
    picked = gr.Textbox(label="last cell clicked", lines=5)
    grid.select(inspect_cell, None, picked)   # SelectData is injected, so inputs=None

demo.launch()

Running on local URL:  http://127.0.0.1:7860

Rendered component tree: a 2x2 editable Dataframe labelled "stock" (headers sku/qty, header row visible) feeding a Textbox "last cell clicked".

One click on the 'A-1' cell, logged inside the handler:
  index     = [0, 0]
  value     = 'A-1'
  row_value = ['A-1', 4]
  col_value = ['A-1', 'B-2']
  selected  = True

Clicking the 9 in the bottom row instead gives index=[1, 1], value=9, row_value=['B-2', 9], col_value=[4, 9]. `index` is [row, col]; `value` is the cell; `row_value` is that cell's row; `col_value` is the entire column as a flat list.

`col_value` is the trap here: the shipped docstring in 6.18.0 describes it as 'the value of the entire row', a copy-paste of the line above it. The runtime behaviour is the column.

$ import gradio as gr

def on_edit(df):   return f"edit {df.shape}"
def on_change(df): return f"change {df.shape}"
def on_input(df):  return f"input {df.shape}"

with gr.Blocks() as demo:
    grid = gr.Dataframe(value=[["A-1", 4], ["B-2", 9]], headers=["sku", "qty"],
                        datatype=["str", "number"], interactive=True, label="stock")
    out = gr.Textbox(label="last fired")
    grid.edit(on_edit, grid, out)
    grid.change(on_change, grid, out)
    grid.input(on_input, grid, out)

demo.launch()

Running on local URL:  http://127.0.0.1:7860

Do this in the browser: double-click a cell (an inline 'Edit cell' textarea opens), type a new value, press Enter once. Handler invocations counted server-side for that ONE keystroke, repeated on two different cells:

  trial 1  A-1 -> 'Z-9'   edit=2  change=2  input=2   (0 of each before Enter)
  trial 2  9   -> '42'    edit=4  change=4  input=4   (that is +2 of each again)

Ordered timestamps for a single Enter:
  edit   shape=(2, 2)
  change shape=(2, 2)
  input  shape=(2, 2)
  edit   shape=(2, 2)
  change shape=(2, 2)
  input  shape=(2, 2)

So one committed edit is worth two rounds, always in the order edit -> change -> input.

Measured with Playwright against the real launch, counters written from inside the Python handlers. If you wire all three listeners to an expensive function, you are paying for it twice per keystroke — pick one listener and make the other two cheap.