Make data frame output work correctly with Pandas index

Author: jcheng5

e2e/bugs/0676-row-selection/app.py

@@ -0,0 +1,45 @@
+import pandas as pd
+
+from shiny import App, Inputs, Outputs, Session, render, ui
+
+df = pd.DataFrame(
+    dict(
+        id=["one", "two", "three"],
+        fname=["Alice", "Bob", "Charlie"],
+        lname=["Smith", "Jones", "Brown"],
+    )
+).set_index(  # type: ignore
+    "id",
+    drop=False,
+)
+
+app_ui = ui.page_fluid(
+    ui.p("Select rows in the grid, make sure the selected rows appear below."),
+    ui.output_data_frame("grid"),
+    ui.output_table("detail"),
+    class_="p-3",
+)
+
+
+def server(input: Inputs, output: Outputs, session: Session):
+    @output
+    @render.data_frame
+    def grid():
+        return render.DataGrid(
+            df,
+            row_selection_mode="multiple",
+            height=350,
+        )
+
+    @output
+    @render.table
+    def detail():
+        if (
+            input.grid_selected_rows() is not None
+            and len(input.grid_selected_rows()) > 0
+        ):
+            # "split", "records", "index", "columns", "values", "table"
+            return df.loc[list(input.grid_selected_rows())]
+
+
+app = App(app_ui, server, debug=True)

e2e/bugs/0676-row-selection/test_0676_row_selection.py

@@ -0,0 +1,21 @@
+from __future__ import annotations
+
+from conftest import ShinyAppProc
+from playwright.sync_api import Page, expect
+
+
+def test_row_selection(page: Page, local_app: ShinyAppProc) -> None:
+    page.goto(local_app.url)
+
+    # The purpose of this test is to make sure that the data grid can work on Pandas
+    # data frames that use an index that is not simply 0-based integers.
+
+    row3 = page.locator("#grid tbody tr:nth-child(3)")
+    result_loc = page.locator("#detail tbody tr:nth-child(1) td:nth-child(1)")
+
+    expect(row3).to_be_visible()
+    expect(row3.locator("td:nth-child(1)")).to_have_text("three")
+
+    expect(result_loc).not_to_be_attached()
+    row3.click()
+    expect(result_loc).to_have_text("three")

js/dataframe/index.tsx

@@ -60,9 +60,15 @@ const ShinyDataGrid: FC<ShinyDataGridProps<unknown>> = (props) => {
   const { id, data, bgcolor } = props;
   const { columns, index, type_hints, data: rowData } = data;
   const { width, height, filters: withFilters } = data.options;
+  // The terminology here is a bit confusing. The "key" is the `data-key` attribute on
+  // the table>tbody>tr, which is populated by Tanstack table API's row id, which is
+  // always [0, 1, 2, ...]. The "index" refers to the Pandas index coming from the
+  // Python side, which may or may not be [0, 1, 2, ...]--it could be strings,
+  // discontiguous numbers, or whatever. So the keyToIndex map lets you convert a
+  // Tanstack row to the Pandas index.
   const keyToIndex: Record<string, unknown> = {};
-  index.forEach((value) => {
-    keyToIndex[value + ""] = value;
+  index.forEach((value, i) => {
+    keyToIndex[i + ""] = value;
   });
 
   const containerRef = useRef<HTMLDivElement>(null);