john/prompts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

consistency updates

Browse Source
This commit is contained in:
John Lancaster
2026-09-01 23:34:02 -05:00
parent b87b1df642
commit f75b24705e
1 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/personal_mcp/docs/skills/nicegui/references/table-customization.md
+13 -8
View File
@@ -288,11 +288,12 @@ Add an action column to the table's column definitions, then target it with the
The slot's `props.key` is the primitive identity derived from the table's `row_key`. Forward that key to Python instead of sending the full browser-side row object. Resolve the current authoritative row again in the handler because the record may have changed or disappeared since the table was rendered:
```python
from nicegui import events, ui
from nicegui import events
from nicegui import ui
columns = [
{"name": "name", "label": "Product", "field": "name", "align": "left"},
{"name": "actions", "label": "Actions", "required": True, "align": "center"},
{"name": "name", "label": "Product", "field": "name", "align": "left"},
]
rows = [
{"id": 101, "name": "Desk lamp"},
@@ -308,14 +309,18 @@ def open_product(event: events.GenericEventArguments) -> None:
return
ui.notify(f"Opening {product['name']}")
with table.add_slot("body-cell-actions"), table.cell("actions"):
action_button = ui.button(icon="open_in_new").props("round flat size='sm'").on(
with (
table.add_slot("body-cell-actions"),
table.cell("actions"),
ui.button(icon="open_in_new")
.props("round flat size='sm'")
.on(
"click.stop",
handler=open_product,
js_handler="() => emit(props.key)",
)
with action_button:
ui.tooltip("Open product")
),
):
ui.tooltip("Open product")
```
The compact icon-only button uses QBtn's `round`, `flat`, and `size` props to avoid a visually heavy filled action in every row. Nest `ui.tooltip` inside the button so each row's cloned QTooltip uses its own parent as the target. Do not call `action_button.tooltip(...)` in a reused scoped slot: NiceGUI implements that convenience method with an element-ID target, and every clone would resolve to the first button. The `.on(...)` bridge is necessary here because `props.key` exists only in the reused browser-side slot scope; a normal Python `on_click` callback cannot capture a different row for each rendered instance. The `click.stop` modifier prevents the button click from also reaching a row-click handler. Treat the key as untrusted input and repeat authorization, existence, and state checks before performing the real action.
@@ -363,7 +368,7 @@ Run it from the repository root:
uv run src/personal_mcp/docs/skills/nicegui/examples/table_customization.py
```
Verify that stock and price sort by their numeric row values while displaying suffix and prefix text. Verify that updated timestamps sort chronologically by their raw ISO values while displaying localized UTC text. Confirm that searches are case-insensitive, match formatted values across columns, reset to the first page, and change the empty-state message when no rows match. Confirm that optional columns can be hidden and restored, the status cell retains its alignment and badge styling, and each action button reports the product from its own row. Resize the browser across mobile, landscape desktop, and portrait desktop widths; the toolbar must remain usable and the table must scroll without overlapping controls.
Verify that stock and price sort by their numeric row values while displaying suffix and prefix text. Verify that updated timestamps sort chronologically by their raw ISO values while displaying localized UTC text. Confirm that searches are case-insensitive, match formatted values across columns, reset to the first page, and change the empty-state message when no rows match. Confirm that optional columns can be hidden and restored, the status cell retains its alignment and badge styling, and each action button reports the product from its own row. Hover action buttons in multiple rows and confirm that each one independently shows exactly one `Open product` tooltip. Resize the browser across mobile, landscape desktop, and portrait desktop widths; the toolbar must remain usable and the table must scroll without overlapping controls.
## Escalation Boundaries