bug(data frame width): Do not allow row number column to grow with table width (#1534)

Author: schloerke

CHANGELOG.md

@@ -35,7 +35,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   * `.update_sort(sort=)` allows app authors to programmatically update the sorting of the data frame. (#1374)
   * `.update_filter(filter=)` allows app authors to programmatically update the filtering of the data frame. (#1374)
 
-* `@render.data_frame` now accepts both a non-`"none"` `selection_mode` value and `editable=True`. (#1454)
+* `@render.data_frame` now accepts both a non-`"none"` `selection_mode` value and `editable=True`. When both settings are enabled, row numbers are displayed in the first column. (#1454, #1534)
 
 * `@render.data_frame`'s `<ID>.cell_selection()` no longer returns a `None` value and now always returns a dictionary containing both the `rows` and `cols` keys. This is done to achieve more consistent author code when working with cell selection. When the value's `type="none"`, both `rows` and `cols` are empty tuples. When `type="row"`, `cols` represents all column numbers of the data. In the future, when `type="col"`, `rows` will represent all row numbers of the data. These extra values are not available in `input.<ID>_cell_selection()` as they are independent of cells being selected and are removed to reduce information being sent to and from the browser. (#1376)
 

examples/dataframe/app.py

@@ -23,7 +23,7 @@ def app_ui(req):
                 "row": "Single row",
                 "rows": "Multiple rows",
             },
-            selected="multiple",
+            selected="rows",
         ),
         ui.input_switch("editable", "Edit", False),
         ui.input_switch("filters", "Filters", True),

js/data-frame/index.tsx

@@ -723,7 +723,7 @@ const ShinyDataGrid: FC<ShinyDataGridProps<unknown>> = ({
                       // @ts-ignore:next-line
                       key={header.id}
                       colSpan={header.colSpan}
-                      style={{ width: header.getSize() }}
+                      style={{ minWidth: header.getSize() }}
                       scope="col"
                       tabIndex={0}
                       onClick={header.column.getToggleSortingHandler()}

js/data-frame/styles.scss

@@ -284,6 +284,13 @@ shiny-data-frame {
   }
 }
 
+// When table corner is present, ensure it has a minimum width
+// but make sure it doesn't take up extra space
+shiny-data-frame .table-corner {
+  width: 0;
+  min-width: 25px;
+}
+
 /*
  *
  * # CELL EDITING STYLES

shiny/www/py-shiny/data-frame/data-frame.js

@@ -147,6 +147,9 @@ def test_sort(
     select_dataset.set("diamonds")
     select_dataset.expect.to_have_value("diamonds")
 
+    selection_mode = controller.InputSelect(page, "selection_mode")
+    selection_mode.set("none")
+
     # Table cell locators
     header_clarity = grid_container.locator("tr:first-child th:nth-child(4)")
     first_cell_clarity = grid_container.locator("tr:first-child td:nth-child(4)")
@@ -276,6 +279,8 @@ def _filter_test_impl(
     summary: Locator,
     snapshot: Any,
 ):
+    controller.InputSelect(page, "selection_mode").set("none")
+
     filters = grid.locator("tr.filters")
 
     filter_subidir_min = filters.locator("> th:nth-child(1) > div > input:nth-child(1)")

shiny/www/py-shiny/data-frame/data-frame.js.map

@@ -1,12 +1,14 @@
+import pytest
 from playwright.sync_api import Page
-from utils.deploy_utils import skip_if_not_chrome
+from utils.deploy_utils import reruns, reruns_delay, skip_if_not_chrome
 
 from shiny.playwright import controller
 from shiny.run import ShinyAppProc
 
 
 # Edit mode becomes flaky near end of test on CI on webkit.
 @skip_if_not_chrome
+@pytest.mark.flaky(reruns=reruns, reruns_delay=reruns_delay)
 def test_validate_row_selection_in_edit_mode(
     page: Page, local_app: ShinyAppProc
 ) -> None:
@@ -58,7 +60,9 @@ def test_validate_row_selection_in_edit_mode(
     data_frame._edit_cell_no_save("Temp value", row=1, col=16)
     page.keyboard.press("Escape")
     page.keyboard.press("Enter")
-    data_frame.expect_class_state("editing", row=1, col=0)
+    data_frame.expect_class_state(
+        "editing", row=1, col=5
+    )  # Stage column begins to be edited.
 
     # Click outside the table/Press Escape to exit row focus.
     # Tab to the column name, hit enter. Verify the table becomes sorted.