From a50895ab8677025e0f621652fd5cdf08ec811081 Mon Sep 17 00:00:00 2001
From: Marko Petzold <marko.petzold@record-evolution.de>
Date: Mon, 2 Nov 2026 09:31:17 +0100
Subject: [PATCH 1/2] feat: add edit column functionality with Material Icons
 support

- Introduced an 'edit' column type in the widget that allows users to trigger actions via an icon button.
- Updated README and documentation to reflect the new 'edit' column type and its usage.
- Enhanced the demo to showcase the edit column alongside links to board pages.
- Added Material Symbols font loading for the edit button icons.
- Updated the Vite configuration to externalize the @material/web dependency.
- Modified the definition schema to include new properties for the edit column.
- Improved rendering logic to handle edit buttons and links appropriately.
---
 CLAUDE.md                  |  20 ++--
 README.md                  |  74 ++++++++----
 demo/index.html            |  44 +++++++-
 package-lock.json          |  27 +++++
 package.json               |   2 +
 src/definition-schema.d.ts |  22 +++-
 src/definition-schema.json |  43 +++++--
 src/widget-table.ts        | 226 ++++++++++++++++++++++++++++++++-----
 vite.config.ts             |   2 +-
 9 files changed, 383 insertions(+), 77 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 890c264..f2deddd 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -16,30 +16,36 @@ No test framework or linter is configured. Node `>=24.9.0`, npm `>=10.0.2`.
 
 ## Architecture
 
-Single-file Lit 3 web component (`src/widget-table.ts`) wrapping `@vaadin/grid` (peer dependency, externalized in the bundle). The component is registered as `widget-table-versionplaceholder`; the Vite build replaces `versionplaceholder` with the package version via `@rollup/plugin-replace`, so the live tag is e.g. `widget-table-1.1.17`. Consumers must use the version-suffixed tag matching the installed package — this lets multiple widget versions coexist on one page in the IronFlock dashboard.
+Single-file Lit 3 web component (`src/widget-table.ts`) wrapping `@vaadin/grid` (peer dependency, externalized in the bundle), with `@material/web`'s icon button for edit columns (peer dependency, externalized too: Studio's import map provides both and loads the Material Symbols font `md-icon` draws with). The component is registered as `widget-table-versionplaceholder`; the Vite build replaces `versionplaceholder` with the package version via `@rollup/plugin-replace`, so the live tag is e.g. `widget-table-1.1.17`. Consumers must use the version-suffixed tag matching the installed package — this lets multiple widget versions coexist on one page in the IronFlock dashboard.
 
 Build pipeline (`vite.config.ts`):
 - Library mode, ES-only output, entry `src/widget-table.ts` → `dist/widget-table.js`.
-- Externalizes `lit*`, `@lit*`, `@vaadin*` so consumers provide them.
+- Externalizes `lit*`, `@lit*`, `@vaadin*` and `@material/web` so consumers provide them.
 - `tslib` aliased to `tslib/tslib.es6.js`; `process.env.NODE_ENV` defined to `"production"`.
 
 ### IronFlock platform contract
 
-The widget exposes two reactive properties consumed by the host dashboard:
+The widget exposes two reactive properties consumed by the host dashboard (it needs no `route`: it never reads the URL, only asks Studio to change it):
 - `inputData: TableConfiguration` — typed by `src/definition-schema.d.ts`, generated from `src/definition-schema.json`. The JSON schema is the source of truth for both the runtime type and the dashboard's config UI (note the non-standard `order`, `dataDrivenDisabled`, `condition.showIfValueIn`, and `color: true` keys consumed by the IronFlock config editor).
 - `theme: { theme_name, theme_object }` — ECharts-style theme object. `registerTheme()` resolves colors with this precedence: CSS custom properties (`--re-text-color`, `--re-hover-color`, `--re-border-color`) on the host element override `theme_object` values. These are not snapshotted: `registerTheme()` stores a `var(--re-…, <theme value>)` chain, so a change to the host property repaints the tile live without the widget being told. The grid paints no background of its own (`--grid-bg-color` stays unset): studio's `widget-item` already paints `--re-tile-background-color` on the tile, and painting it again here composited a translucent tile colour twice, and the grid, its rows and its cells each painting it stacked it several times. Only the sticky header is opaque: `headerSurfaceColor()` composites the tile as displayed (`--re-tile-background-color` over `--re-background-color` over white, read at render time, cached by `opaqueSurface()`), so rows scrolling under it stay hidden.
 
+The widget acts on the platform only through two events dispatched on itself (`bubbles: true, composed: true`): `param-submit` `{ params: { [key]: value } }` from an edit column's button (Studio merges the parameter into the page URL, hands every widget the new `route` and re-queries bindings whose filter uses it), and `nav-submit` `{ path }` from a `button` or `image` link to a board page. Nothing handles them in the Widget Editor's preview or the AI chat.
+
 ### Data shape and rendering
 
-`inputData.columns` is column-oriented (each column carries its own `values[]`). `transformInputData()` pivots columns into row records keyed `col_<index>` for Vaadin Grid, then reverses (newest-first). Vaadin sort paths use `col_<index>.value`.
+`inputData.columns` is column-oriented (each column carries its own `values[]`, bound separately in Studio, so rows line up by position only and a row has no identity of its own). `transformInputData()` pivots columns into row records keyed `col_<index>` for Vaadin Grid, in the order the data arrives (oldest first, as Studio delivers it). Vaadin sort paths use `col_<index>.value`.
+
+Cell rendering dispatches on `column.type` in `renderCell()`: `string`, `number` (with `precision`), `boolean`, `state` (parses `stateMap` string `"'ONLINE': 'green', ..."` into a colored `.statusbox`), `button`, `image`, `timestamp`, `edit`.
+
+Links (`renderLink()`, for `button` and `image`): a link with a scheme or `//` is a web address and opens in a new tab (`rel="noopener noreferrer"`); anything else is a board page and dispatches `nav-submit`, from a real `<button>` rather than an anchor with a relative `href`, which a middle-click would open against Studio's origin. An empty link leaves the content unlinked.
 
-Cell rendering dispatches on `column.type` in `renderCell()`: `string`, `number` (with `precision`), `boolean`, `state` (parses `stateMap` string `"'ONLINE': 'green', ..."` into a colored `.statusbox`), `button`, `image`, `timestamp`. Timestamps use a hand-rolled Unicode LDML subset (`yyyy MM dd HH mm ss SSS`) — see `parseTimestamp` / `formatTimestamp`. If `timestampParseFormat` is empty, values are treated as Unix epoch milliseconds.
+Edit column (`renderEditButton()`): the cell's value is the record key, sent as `param-submit` under `styling.parameterKey` (`parameterValue()` turns text, numbers and booleans into text and refuses objects); a blank key renders the button disabled with the reason as the wrapper's `title` (a disabled Material button has `pointer-events: none`, so its own title never shows). Decisions that came out of reading vaadin and Material: the column is a plain `vaadin-grid-column` (sorting by the key means nothing, and `GridSortColumnMixin` forbids a header renderer), its header is centred by `columnHeaderRenderer` with a `.cell.cell-center` div (cell content is a flex container, so vaadin's `textAlign` alone does not centre a bare header); vaadin's focus utils do not count `md-icon-button` as focusable, so the button carries `focus-target` (Enter in the cell focuses it) and the click sets `skipCellActivate` so the row's active item does not toggle; the button is sized in `em` and coloured with `currentColor` tokens (Material's 40px default would make the rows taller, and `currentColor` inside its shadow DOM resolves to the `.cell` colour chain); the default width is `calc(2 * var(--cell-padding-horizontal) + 2.5em)`. `default-data.json` has no edit column: it seeds every new tile and the AI's example, and an edit column only makes sense next to a form or a filtered widget. The demo adds one. Timestamps use a hand-rolled Unicode LDML subset (`yyyy MM dd HH mm ss SSS`) — see `parseTimestamp` / `formatTimestamp`. If `timestampParseFormat` is empty, values are treated as Unix epoch milliseconds.
 
-Text alignment is column-type-driven (`getTextAlign`): numbers/timestamps end, booleans/state/image center, others start.
+Text alignment is column-type-driven (`getTextAlign`): numbers/timestamps end, booleans/state/image/edit center, others start.
 
 ### Demo harness
 
-`demo/index.html` builds the tag dynamically from `package.json` version using `lit/static-html`, applies `demo/themes/light.json`, and randomizes select cell values every 1s via the external `ObjectRandomizer.js` script — useful for verifying reactivity but means the demo will not run fully offline.
+`demo/index.html` builds the tag dynamically from `package.json` version using `lit/static-html`, applies `demo/themes/light.json`, loads the Material Symbols font, adds a demo-only edit column (values from the Name column, `parameterKey: 'edit'`) and a board-page link to the default config, stands in for Studio by logging `param-submit` (mirrored into the demo URL) and `nav-submit`, and randomizes select cell values every 1s via the external `ObjectRandomizer.js` script — useful for verifying reactivity but means the demo will not run fully offline.
 
 ## Releasing
 
diff --git a/README.md b/README.md
index 3f083e4..7f294fc 100644
--- a/README.md
+++ b/README.md
@@ -10,20 +10,18 @@ A Lit 3.x web component for rendering data tables with sortable columns, powered
 npm i @ironflock/widget-table
 ```
 
-**Peer Dependencies:** This widget requires `@vaadin/grid` to be installed in your application.
+**Peer Dependencies:** This widget requires `@vaadin/grid` and `@material/web` to be installed in your application. An `edit` column draws its icon with `md-icon`, which needs the "Material Symbols Outlined" font on the page (IronFlock Studio loads it; a standalone page adds the Google Fonts link, see `demo/index.html`).
 
 ## Usage
 
-```html
-<script type="module">
-    import '@ironflock/widget-table'
-</script>
-
-<widget-table-1.2.0></widget-table-1.2.0>
-```
+The custom element's tag carries the installed version (`widget-table-<version>`), so several versions can share a page. Build it from the package's version rather than writing it out:
 
 ```javascript
-const table = document.querySelector('widget-table-1.2.0')
+import '@ironflock/widget-table'
+import { version } from '@ironflock/widget-table/package.json' with { type: 'json' }
+
+const table = document.createElement(`widget-table-${version}`)
+document.body.append(table)
 table.inputData = {
     title: 'Device Status',
     subTitle: 'Current readings',
@@ -66,9 +64,11 @@ interface TableConfiguration {
 
 interface Column {
     header: string
-    type: 'string' | 'number' | 'boolean' | 'state' | 'button' | 'image'
+    type: 'string' | 'number' | 'boolean' | 'state' | 'button' | 'image' | 'timestamp' | 'edit'
     values: { value: string; link?: string }[]
     styling?: {
+        parameterKey?: string // edit: the URL parameter the button sets
+        iconName?: string // edit: Material Symbols icon name, 'edit' by default
         precision?: number // Decimal places for number type
         stateMap?: string // e.g. "'ONLINE': 'green', 'OFFLINE': 'red'"
         width?: string // Column width e.g. '150px'
@@ -82,18 +82,51 @@ interface Column {
 
 ## Column Types
 
-| Type      | Description                                         |
-| --------- | --------------------------------------------------- |
-| `string`  | Plain text display                                  |
-| `number`  | Numeric value with optional precision formatting    |
-| `boolean` | Boolean display                                     |
-| `state`   | Status indicator with colored dot based on stateMap |
-| `button`  | Clickable button with optional link                 |
-| `image`   | Image display with optional link                    |
+| Type        | Description                                                                   |
+| ----------- | ----------------------------------------------------------------------------- |
+| `string`    | Plain text display                                                            |
+| `number`    | Numeric value with optional precision formatting                              |
+| `boolean`   | Boolean display                                                               |
+| `state`     | Status indicator with colored dot based on stateMap                           |
+| `timestamp` | Epoch milliseconds, or a `timestampParseFormat`, shown as `timestampFormat`   |
+| `button`    | The value as a link (see Links)                                               |
+| `image`     | The value as an image, with an optional link (see Links)                      |
+| `edit`      | An icon button that sends the value as a URL parameter (see Edit column)      |
+
+### Links
+
+A `button` or `image` cell's `link` opens when it is clicked. A web address (one with a scheme, such as `https://example.com`) opens in a new tab. A path without a scheme, such as `/machines/press-1`, is a board page: the widget dispatches `nav-submit` and IronFlock Studio opens the page in place (`/x` from the board root, anything else next to the current page). An empty link shows the value or image without a link.
+
+### Edit column
+
+A column of type `edit` shows one icon button per row (a pen, or `styling.iconName`) instead of its values. Bind its values to the record's key column: a click dispatches `param-submit` with that key under `styling.parameterKey`, Studio writes it into the page URL, and a `widget-form` whose "Open on URL parameter" names the same parameter opens pre-filled with the record. Any other widget on the page can follow the parameter too, with a Parameter filter on its binding. Without a `parameterKey` the button is disabled, with the reason as its tooltip; an empty value shows the empty-cell placeholder.
+
+```javascript
+{
+    header: 'Edit',
+    type: 'edit',
+    values: [{ value: 'press-1' }, { value: 'press-2' }], // bound to machine_id in Studio
+    styling: { parameterKey: 'edit' }
+}
+```
+
+The column is centred, not sortable, and as narrow as its button unless `styling.width` says otherwise.
+
+## Events
+
+The widget never changes the page URL itself. It asks the host to, on the element:
+
+| Event          | Detail                                 | When                                                           |
+| -------------- | -------------------------------------- | -------------------------------------------------------------- |
+| `param-submit` | `{ params: { [parameterKey]: value } }` | An `edit` button is clicked; Studio merges it into the page URL |
+| `nav-submit`   | `{ path }`                              | A `button` or `image` link to a board page is clicked           |
+
+Both bubble and are composed.
 
 ## Features
 
 - **Sortable columns**: Click headers to sort ascending/descending
+- **Row actions**: Links to pages or web addresses, and an edit button that hands the row to a form
 - **Resizable columns**: Drag column borders to resize
 - **Horizontal overflow**: Enable scrolling for wide tables
 - **Theme support**: Integrates with IronFlock theming system
@@ -101,10 +134,7 @@ interface Column {
 
 ## Theming
 
-The widget respects CSS custom properties:
-
-- `--re-text-color`: Text color override
-- `--re-tile-background-color`: Background color override
+The widget respects the CSS custom property `--re-text-color` (text, including the edit buttons). It paints no background of its own: the host's tile shows through.
 
 Pass a theme object for ECharts-style theming:
 
diff --git a/demo/index.html b/demo/index.html
index 51f8e5c..6036826 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -27,6 +27,13 @@
                 height: 100%;
             }
         </style>
+        <!-- The icon font of md-icon, which Studio's page loads. -->
+        <link
+            rel="preload"
+            href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+            as="style"
+            onload="this.onload=null;this.rel='stylesheet'"
+        />
     </head>
 
     <body>
@@ -41,11 +48,28 @@
             import data from '../src/default-data.json'
             import themeObject from './themes/light.json'
 
+            // Demo-only additions (default-data.json seeds every new tile): a
+            // link to a board page in the Link column, and an edit column whose
+            // values are the Name column's, the record key it hands over.
+            // Remove the parameterKey to see the disabled button and its tip.
+            const columns = data.columns.map((col) => ({
+                ...col,
+                values: col.values.map((cell) => ({ ...cell }))
+            }))
+            columns[5].values[1].link = '/machines/mayflower'
+            columns.push({
+                header: 'Edit',
+                type: 'edit',
+                values: columns[1].values.map(({ value }) => ({ value })),
+                styling: { parameterKey: 'edit' }
+            })
+            const demoData = { ...data, columns }
+
             const tag = unsafeStatic(`widget-table-${packageJson.version}`)
             const theme = { theme_name: 'light', theme_object: themeObject }
             render(
                 html`
-                    <${tag} .theme="${theme}" .inputData=${data}>
+                    <${tag} .theme="${theme}" .inputData=${demoData}>
                         web component is not registered. Make sure to use the tag with the correct version
                         string from the package.json
                     </${tag}>
@@ -53,10 +77,24 @@
                 document.getElementById('demo')
             )
             const widget = document.getElementById('demo').children[0]
-            console.log('data', data)
+            console.log('data', demoData)
+
+            // A stand-in for Studio, which merges param-submit into the page URL
+            // (undefined deletes a key) and opens the page a nav-submit names.
+            widget.addEventListener('param-submit', (event) => {
+                console.log('param-submit', event.detail.params)
+                const url = new URL(location.href)
+                for (const [key, value] of Object.entries(event.detail.params ?? {})) {
+                    if (value === undefined || value === null) url.searchParams.delete(key)
+                    else url.searchParams.set(key, value)
+                }
+                history.replaceState(null, '', url)
+            })
+            widget.addEventListener('nav-submit', (event) => console.log('nav-submit', event.detail.path))
+
             const keyPathsToRandomize = ['columns.1.values.0.value', 'columns.2.values.0.value']
             const inter = setInterval(() => {
-                const randomizedObj = randomizeObjectValues(data, keyPathsToRandomize)
+                const randomizedObj = randomizeObjectValues(demoData, keyPathsToRandomize)
 
                 // console.log('random', randomizedObj.dataseries[0].data[0])
                 widget.inputData = randomizedObj
diff --git a/package-lock.json b/package-lock.json
index 8d4d91c..a9b67a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
                 "tslib": "^2.8.1"
             },
             "devDependencies": {
+                "@material/web": "^2.4.1",
                 "@rollup/plugin-replace": "^6.0.2",
                 "@vaadin/grid": "^25.1.3",
                 "json-schema-to-typescript": "^15.0.4",
@@ -24,6 +25,7 @@
                 "npm": ">=10.0.2"
             },
             "peerDependencies": {
+                "@material/web": "^2.4.1",
                 "@vaadin/grid": "^24.0.0 || ^25.1.3"
             }
         },
@@ -503,6 +505,16 @@
             "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.3.0.tgz",
             "integrity": "sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ=="
         },
+        "node_modules/@lit/context": {
+            "version": "1.1.6",
+            "resolved": "https://registry.npmjs.org/@lit/context/-/context-1.1.6.tgz",
+            "integrity": "sha512-M26qDE6UkQbZA2mQ3RjJ3Gzd8TxP+/0obMgE5HfkfLhEEyYE3Bui4A5XHiGPjy0MUGAyxB3QgVuw2ciS0kHn6A==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "@lit/reactive-element": "^1.6.2 || ^2.1.0"
+            }
+        },
         "node_modules/@lit/reactive-element": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.1.0.tgz",
@@ -511,6 +523,21 @@
                 "@lit-labs/ssr-dom-shim": "^1.2.0"
             }
         },
+        "node_modules/@material/web": {
+            "version": "2.5.0",
+            "resolved": "https://registry.npmjs.org/@material/web/-/web-2.5.0.tgz",
+            "integrity": "sha512-x2Uovyq8E/Zc1xHXd9s1eBMXF5pMHVAt70pISKd0fL3Ajj4L6zQaQUY/awcfR2RDAMKXC7i4+vr0arv1YaOR/g==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "workspaces": [
+                "catalog"
+            ],
+            "dependencies": {
+                "@lit/context": "^1.1.6",
+                "lit": "^2.8.0 || ^3.0.0",
+                "tslib": "^2.4.0"
+            }
+        },
         "node_modules/@napi-rs/lzma-linux-x64-gnu": {
             "version": "1.5.1",
             "resolved": "https://registry.npmjs.org/@napi-rs/lzma-linux-x64-gnu/-/lzma-linux-x64-gnu-1.5.1.tgz",
diff --git a/package.json b/package.json
index a8222e9..5da298b 100644
--- a/package.json
+++ b/package.json
@@ -30,9 +30,11 @@
         "tslib": "^2.8.1"
     },
     "peerDependencies": {
+        "@material/web": "^2.4.1",
         "@vaadin/grid": "^24.0.0 || ^25.1.3"
     },
     "devDependencies": {
+        "@material/web": "^2.4.1",
         "@rollup/plugin-replace": "^6.0.2",
         "@vaadin/grid": "^25.1.3",
         "json-schema-to-typescript": "^15.0.4",
diff --git a/src/definition-schema.d.ts b/src/definition-schema.d.ts
index 48b8af8..7c13838 100644
--- a/src/definition-schema.d.ts
+++ b/src/definition-schema.d.ts
@@ -38,15 +38,15 @@ export type CellPaddingVertical = string;
  */
 export type HeaderLabel = string;
 /**
- * Determines how cell values are rendered: 'string' for plain text, 'number' for numeric values with precision, 'boolean' for true/false display, 'state' for colored status indicators, 'timestamp' for formatted dates, 'button' for clickable actions, 'image' for displaying images.
+ * Determines how cell values are rendered: 'string' for plain text, 'number' for numeric values with precision, 'boolean' for true/false display, 'state' for colored status indicators, 'timestamp' for formatted dates, 'button' for clickable actions, 'image' for displaying images, 'edit' for an icon button that writes the row's value (its record key) into a URL parameter, so a form that opens on that parameter, or any widget filtering on it, shows that record.
  */
-export type ColumnType = "state" | "string" | "number" | "boolean" | "button" | "image" | "timestamp";
+export type ColumnType = "state" | "string" | "number" | "boolean" | "button" | "image" | "timestamp" | "edit";
 /**
- * The cell value to display. For images, this is the image URL. For buttons, this is the button label. For other types, this is the raw value to be formatted according to column type.
+ * The cell value to display. For images, this is the image URL. For buttons, this is the button label. For edit columns, this is the record key the button sends as the URL parameter; it is not displayed. For other types, this is the raw value to be formatted according to column type.
  */
 export type DisplayValue = string;
 /**
- * Navigation URL for button and image columns. For buttons, clicking navigates to this URL. For images, clicking the image opens this link. Can be absolute URLs or relative paths for dashboard navigation.
+ * Link of a button or image column, opened when the button or image is clicked. An absolute URL (with a scheme, such as https://example.com) opens in a new tab; a path without a scheme, such as /machines/press-1, opens that board page in place. Leave it empty for no link.
  */
 export type LinkURL = string;
 /**
@@ -57,6 +57,14 @@ export type Values = {
   link?: LinkURL;
   [k: string]: unknown;
 }[];
+/**
+ * For 'edit' columns: the URL parameter the button sets to the cell's value, such as 'edit'. Required: without it the button is shown disabled. Use the same name as the Open on URL parameter setting of the form, or the Parameter filter of the widgets, on this page that should show the clicked record.
+ */
+export type URLParameterKey = string;
+/**
+ * For 'edit' columns: the Material Symbols icon name shown on the button, such as 'edit', 'open_in_new', 'visibility' or 'tune'. Empty means 'edit' (a pen).
+ */
+export type Icon = string;
 /**
  * Format string for parsing input timestamp values using Unicode LDML standard (e.g., 'yyyy-MM-dd HH:mm:ss.SSS'). Leave empty if timestamps are Unix epoch milliseconds (JavaScript timestamps).
  */
@@ -101,7 +109,7 @@ export type ColumnDefinitions = {
 }[];
 
 /**
- * A data table widget for displaying structured information in rows and columns. Use this widget to present lists, records, or any tabular data with customizable column types and formatting. Supports multiple column types: plain text, numbers with precision control, timestamps with format parsing, state indicators with color mapping, boolean values, clickable buttons with links, and images. Features include column width control, cell styling, horizontal overflow for wide tables, and header/cell separators. Ideal for device lists, event logs, inventory tables, status dashboards, or any scenario requiring organized data presentation in a grid format.
+ * A data table widget for displaying structured information in rows and columns. Use this widget to present lists, records, or any tabular data with customizable column types and formatting. Supports multiple column types: plain text, numbers with precision control, timestamps with format parsing, state indicators with color mapping, boolean values, clickable buttons with links, images, and edit buttons that hand a row's key to a form or another widget on the page through a URL parameter. Features include column width control, cell styling, horizontal overflow for wide tables, and header/cell separators.
  */
 export interface TableConfiguration {
   title?: Title;
@@ -122,9 +130,11 @@ export interface TableStyling {
   [k: string]: unknown;
 }
 /**
- * Visual styling options specific to this column. Settings depend on the column type.
+ * Type-specific settings and visual styling for this column. Settings depend on the column type.
  */
 export interface Styling {
+  parameterKey?: URLParameterKey;
+  iconName?: Icon;
   timestampParseFormat?: TimestampParseFormat;
   timestampFormat?: TimestampDisplayFormat;
   precision?: NumberPrecision;
diff --git a/src/definition-schema.json b/src/definition-schema.json
index c4d7022..cc84d4c 100644
--- a/src/definition-schema.json
+++ b/src/definition-schema.json
@@ -1,19 +1,21 @@
 {
     "title": "Table Configuration",
-    "description": "A data table widget for displaying structured information in rows and columns. Use this widget to present lists, records, or any tabular data with customizable column types and formatting. Supports multiple column types: plain text, numbers with precision control, timestamps with format parsing, state indicators with color mapping, boolean values, clickable buttons with links, and images. Features include column width control, cell styling, horizontal overflow for wide tables, and header/cell separators. Ideal for device lists, event logs, inventory tables, status dashboards, or any scenario requiring organized data presentation in a grid format.",
+    "description": "A data table widget for displaying structured information in rows and columns. Use this widget to present lists, records, or any tabular data with customizable column types and formatting. Supports multiple column types: plain text, numbers with precision control, timestamps with format parsing, state indicators with color mapping, boolean values, clickable buttons with links, images, and edit buttons that hand a row's key to a form or another widget on the page through a URL parameter. Features include column width control, cell styling, horizontal overflow for wide tables, and header/cell separators.",
     "aiSelection": {
-        "dataShape": "Rows and columns. Each columns[] entry binds one column of the source data and declares how to render it — string, number with precision, timestamp with format, boolean, state with a colour map, image, or a clickable button with a link. The row count is whatever the query returns.",
+        "dataShape": "Rows and columns. Each columns[] entry binds one column of the source data and declares how to render it — string, number with precision, timestamp with format, boolean, state with a colour map, image, or a clickable button with a link. The row count is whatever the query returns. An 'edit' column shows one icon button per row: its values are the record key, and a click writes that key into the page URL under styling.parameterKey, so a widget-form opening on that parameter, or any widget filtering on it, shows the clicked record.",
         "useWhen": [
             "The user needs to read individual records — event logs, device inventories, order lists, alarm histories.",
             "More than two or three fields per row matter, so no chart can carry them all.",
             "Exact values matter more than trends or comparisons.",
-            "Each row should offer a link or action of its own (a column of type 'button')."
+            "Each row should offer a link or action of its own (a column of type 'button').",
+            "Each row needs an edit or open action that hands the record to another widget on the page — a column of type 'edit' with styling.parameterKey, next to a widget-form opening on that parameter or a detail widget bound with a Parameter filter on that key."
         ],
         "notFor": [
             "Spotting a trend, comparing magnitudes, or seeing a distribution — use widget-linechart; a table makes the reader do the work a chart does for them.",
             "One number that matters more than the rest — use widget-value, or widget-gauge to read it against a range.",
             "Shares of a total — use widget-doughnut when the parts are a fixed set that arrive as columns of one row (or as one value each); when the parts are rows of the result (one row per cause or program), use widget-linechart with dataseries[].type: 'bar'.",
-            "Text written by hand rather than queried — use widget-markdown."
+            "Text written by hand rather than queried — use widget-markdown.",
+            "Entering or changing a record's fields — use widget-form; an 'edit' column only selects the record for a form on the same page."
         ]
     },
     "type": "object",
@@ -91,8 +93,9 @@
                     },
                     "type": {
                         "title": "Column Type",
-                        "description": "Determines how cell values are rendered: 'string' for plain text, 'number' for numeric values with precision, 'boolean' for true/false display, 'state' for colored status indicators, 'timestamp' for formatted dates, 'button' for clickable actions, 'image' for displaying images.",
-                        "enum": ["state", "string", "number", "boolean", "button", "image", "timestamp"],
+                        "description": "Determines how cell values are rendered: 'string' for plain text, 'number' for numeric values with precision, 'boolean' for true/false display, 'state' for colored status indicators, 'timestamp' for formatted dates, 'button' for clickable actions, 'image' for displaying images, 'edit' for an icon button that writes the row's value (its record key) into a URL parameter, so a form that opens on that parameter, or any widget filtering on it, shows that record.",
+                        "enum": ["state", "string", "number", "boolean", "button", "image", "timestamp", "edit"],
+                        "enumLabels": ["State", "String", "Number", "Boolean", "Button", "Image", "Timestamp", "Edit button"],
                         "type": "string",
                         "dataDrivenDisabled": true,
                         "order": 2
@@ -107,14 +110,14 @@
                             "properties": {
                                 "value": {
                                     "title": "Display Value",
-                                    "description": "The cell value to display. For images, this is the image URL. For buttons, this is the button label. For other types, this is the raw value to be formatted according to column type.",
+                                    "description": "The cell value to display. For images, this is the image URL. For buttons, this is the button label. For edit columns, this is the record key the button sends as the URL parameter; it is not displayed. For other types, this is the raw value to be formatted according to column type.",
                                     "type": "string",
                                     "required": true,
                                     "order": 1
                                 },
                                 "link": {
                                     "title": "Link URL",
-                                    "description": "Navigation URL for button and image columns. For buttons, clicking navigates to this URL. For images, clicking the image opens this link. Can be absolute URLs or relative paths for dashboard navigation.",
+                                    "description": "Link of a button or image column, opened when the button or image is clicked. An absolute URL (with a scheme, such as https://example.com) opens in a new tab; a path without a scheme, such as /machines/press-1, opens that board page in place. Leave it empty for no link.",
                                     "type": "string",
                                     "condition": {
                                         "relativePath": "../../../type",
@@ -129,10 +132,32 @@
 
                     "styling": {
                         "title": "Styling",
-                        "description": "Visual styling options specific to this column. Settings depend on the column type.",
+                        "description": "Type-specific settings and visual styling for this column. Settings depend on the column type.",
                         "type": "object",
                         "order": 5,
                         "properties": {
+                            "parameterKey": {
+                                "title": "URL Parameter Key",
+                                "description": "For 'edit' columns: the URL parameter the button sets to the cell's value, such as 'edit'. Required: without it the button is shown disabled. Use the same name as the Open on URL parameter setting of the form, or the Parameter filter of the widgets, on this page that should show the clicked record.",
+                                "type": "string",
+                                "condition": {
+                                    "relativePath": "../../type",
+                                    "showIfValueIn": ["edit"]
+                                },
+                                "dataDrivenDisabled": true,
+                                "order": 1
+                            },
+                            "iconName": {
+                                "title": "Icon",
+                                "description": "For 'edit' columns: the Material Symbols icon name shown on the button, such as 'edit', 'open_in_new', 'visibility' or 'tune'. Empty means 'edit' (a pen).",
+                                "type": "string",
+                                "condition": {
+                                    "relativePath": "../../type",
+                                    "showIfValueIn": ["edit"]
+                                },
+                                "dataDrivenDisabled": true,
+                                "order": 2
+                            },
                             "timestampParseFormat": {
                                 "title": "Timestamp Parse Format",
                                 "description": "Format string for parsing input timestamp values using Unicode LDML standard (e.g., 'yyyy-MM-dd HH:mm:ss.SSS'). Leave empty if timestamps are Unix epoch milliseconds (JavaScript timestamps).",
diff --git a/src/widget-table.ts b/src/widget-table.ts
index 556bcae..acbab8b 100644
--- a/src/widget-table.ts
+++ b/src/widget-table.ts
@@ -5,8 +5,11 @@ import { property, state, customElement } from 'lit/decorators.js'
 import { TableConfiguration, Values } from './definition-schema.js'
 
 import '@vaadin/grid'
+import '@vaadin/grid/vaadin-grid-column.js'
 import '@vaadin/grid/vaadin-grid-sort-column.js'
-import { columnBodyRenderer } from '@vaadin/grid/lit.js'
+import { columnBodyRenderer, columnHeaderRenderer } from '@vaadin/grid/lit.js'
+import '@material/web/icon/icon.js'
+import '@material/web/iconbutton/icon-button.js'
 
 type Column = Exclude<TableConfiguration['columns'], undefined>[number]
 type RowData = { [key: string]: Values[number] }
@@ -16,6 +19,17 @@ type Theme = {
 }
 let colorContext: CanvasRenderingContext2D | null | undefined
 
+// The icon an edit column shows while styling.iconName is empty.
+const DEFAULT_EDIT_ICON = 'edit'
+
+// An edit column without a width of its own: its button plus the cell padding,
+// which is set on the grid as a custom property and inherits into the cells.
+const EDIT_COLUMN_WIDTH = 'calc(2 * var(--cell-padding-horizontal, 16px) + 2.5em)'
+
+// A link with a scheme (https:, mailto:) or a protocol-relative one is a web
+// address; anything else is the path of a board page for Studio to open.
+const isExternalLink = (link: string): boolean => /^[a-z][a-z0-9+.-]*:|^\/\//i.test(link)
+
 // A colour as [r, g, b, alpha] in sRGB (channels 0-255), parsed by the browser
 // itself through a canvas's fillStyle, so names, hsl(), hex with alpha,
 // color-mix() and the like all work. A value the browser rejects comes back
@@ -166,6 +180,36 @@ export class WidgetTable extends LitElement {
         return html`<span class="empty-value">–</span>`
     }
 
+    /**
+     * The value an edit button sends: text, a number or a boolean, as text.
+     * Nothing for an empty cell, and nothing for an object (a JSON column),
+     * which could only arrive as "[object Object]".
+     */
+    parameterValue(value: unknown): string | undefined {
+        if (this.isEmptyValue(value) || typeof value === 'object') return undefined
+        return String(value).trim() || undefined
+    }
+
+    /**
+     * Ask Studio to set a URL parameter. Studio merges it into the page URL,
+     * hands every widget on the page the new route and re-queries bindings
+     * whose filter uses the parameter. The widget never touches the URL.
+     */
+    submitParameter(key: string, value: string) {
+        this.dispatchEvent(
+            new CustomEvent('param-submit', {
+                detail: { params: { [key]: value } },
+                bubbles: true,
+                composed: true
+            })
+        )
+    }
+
+    /** Ask Studio to open a board page: `/x` from the board root, else next to the current page. */
+    navigate(path: string) {
+        this.dispatchEvent(new CustomEvent('nav-submit', { detail: { path }, bubbles: true, composed: true }))
+    }
+
     renderCell(cell: Values[number], colIndex: number) {
         const colDef = this?.inputData?.columns?.[colIndex]
         if (!colDef) return nothing
@@ -183,6 +227,8 @@ export class WidgetTable extends LitElement {
                 return this.renderButton(cell, colDef)
             case 'image':
                 return this.renderImage(cell, colDef)
+            case 'edit':
+                return this.renderEditButton(cell, colDef)
             case 'timestamp':
                 return this.renderTimestamp(cell?.value, colDef)
             default:
@@ -250,14 +296,67 @@ export class WidgetTable extends LitElement {
             : html`<div class="statusbox statusbox-unmapped"></div>`
     }
 
+    /**
+     * A cell's content in its link. A web address opens in a new tab; a path,
+     * such as /machines/press-1, is a board page that Studio opens in place
+     * (nav-submit). The page link is a real button rather than an anchor with
+     * a relative href: a middle-click on that anchor would open the path
+     * against Studio's origin in a new tab, where it is no page. No link
+     * leaves the content as it is.
+     */
+    renderLink(content: unknown, link: unknown) {
+        const href = typeof link === 'string' ? link.trim() : ''
+        if (!href) return html`${content}`
+        if (isExternalLink(href))
+            return html`<a href=${href} target="_blank" rel="noopener noreferrer">${content}</a>`
+        return html`<button type="button" class="link-button" @click=${() => this.navigate(href)}>
+            ${content}
+        </button>`
+    }
+
     renderButton(cell: Values[number], colDef: Column) {
         if (this.isEmptyValue(cell?.value)) return this.renderEmptyValue()
-        return html`<a href="${cell?.link ?? ''}" target="_blank">${cell?.value}</a>`
+        return this.renderLink(cell?.value, cell?.link)
     }
 
     renderImage(cell: Values[number], colDef: Column) {
         if (this.isEmptyValue(cell?.value)) return this.renderEmptyValue()
-        return html`<a href="${cell?.link ?? ''}" target="_blank"><img src="${cell.value}" /></a>`
+        return this.renderLink(html`<img src="${cell.value}" />`, cell?.link)
+    }
+
+    /**
+     * An edit column's cell: an icon button that hands the row's value, the
+     * record key, to Studio as a URL parameter (param-submit), for a form that
+     * opens on that parameter or a widget filtering on it. Without a key the
+     * button is disabled, with the reason as a tooltip on the wrapper: a
+     * disabled Material button has pointer-events: none, so a title on the
+     * button itself never shows. vaadin-grid does not count md-icon-button as
+     * focusable: focus-target lets Enter in the cell reach it, and
+     * skipCellActivate keeps the click from also toggling the row's active
+     * item. The label names the row, so screen readers can tell the buttons
+     * apart.
+     */
+    renderEditButton(cell: Values[number], colDef: Column) {
+        const value = this.parameterValue(cell?.value)
+        if (value === undefined) return this.renderEmptyValue()
+        const key = String(colDef.styling?.parameterKey ?? '').trim()
+        const icon = String(colDef.styling?.iconName ?? '').trim() || DEFAULT_EDIT_ICON
+        const label = String(colDef.header ?? '').trim() || 'Edit'
+        return html`<span
+            class="edit-button"
+            title=${key ? nothing : "Set the column's URL Parameter Key to enable this button"}
+        >
+            <md-icon-button
+                focus-target
+                ?disabled=${!key}
+                aria-label="${label} ${value}"
+                @click=${(event: Event) => {
+                    ;(event as Event & { skipCellActivate?: boolean }).skipCellActivate = true
+                    if (key) this.submitParameter(key, value)
+                }}
+                ><md-icon>${icon}</md-icon></md-icon-button
+            >
+        </span>`
     }
 
     renderTimestamp(value: any, colDef: Column) {
@@ -346,6 +445,7 @@ export class WidgetTable extends LitElement {
             case 'boolean':
             case 'state':
             case 'image':
+            case 'edit':
                 return 'center'
             default:
                 return 'start'
@@ -546,6 +646,43 @@ export class WidgetTable extends LitElement {
             color: inherit;
             text-decoration: underline;
         }
+
+        /* A button column's link to a board page, drawn like the anchors. */
+        .link-button {
+            all: unset;
+            cursor: pointer;
+            color: inherit;
+            font: inherit;
+            text-decoration: underline;
+        }
+
+        .link-button:focus-visible {
+            outline: auto;
+        }
+
+        /* An edit column's icon button, sized by the cell's font (Material's
+           40px button would make these rows taller than text rows) and
+           coloured by the cell's text: currentColor, substituted into
+           Material's shadow DOM, resolves to the .cell colour chain, so a
+           board style edit repaints it. The focus ring's default is a Material
+           system colour that is invisible on a dark tile. */
+        .edit-button {
+            display: inline-flex;
+        }
+
+        md-icon-button {
+            --md-icon-button-icon-size: 1.25em;
+            --md-icon-button-state-layer-width: 2em;
+            --md-icon-button-state-layer-height: 2em;
+            --md-icon-button-icon-color: currentColor;
+            --md-icon-button-hover-icon-color: currentColor;
+            --md-icon-button-focus-icon-color: currentColor;
+            --md-icon-button-pressed-icon-color: currentColor;
+            --md-icon-button-disabled-icon-color: currentColor;
+            --md-icon-button-hover-state-layer-color: currentColor;
+            --md-icon-button-pressed-state-layer-color: currentColor;
+            --md-focus-ring-color: currentColor;
+        }
     `
 
     /**
@@ -564,6 +701,26 @@ export class WidgetTable extends LitElement {
         return opaqueSurface(dashboard ? [dashboard, tile || themeBg] : [themeBg, tile])
     }
 
+    /**
+     * The body renderer of a column: the cell's content in the column's font
+     * and colour. An edit column is a plain vaadin-grid-column (sorting by the
+     * record key means nothing, and the sort column forbids a header renderer)
+     * whose header is centred by a renderer: the cell content is a flex
+     * container (see the styles), so vaadin's textAlign alone does not centre
+     * a bare header text.
+     */
+    private cellRenderer(col: Column, colIndex: number) {
+        return (item: RowData) => html`
+            <div
+                class="cell cell-${this.getTextAlign(col)}"
+                style="font-size: ${col.styling?.fontSize}; font-weight: ${col.styling
+                    ?.fontWeight}; color: ${col.styling?.color || this.themeTitleColor}"
+            >
+                ${this.renderCell(item[`col_${colIndex}`], colIndex)}
+            </div>
+        `
+    }
+
     render() {
         const columns = this.inputData?.columns ?? []
 
@@ -603,32 +760,43 @@ export class WidgetTable extends LitElement {
                         ${repeat(
                             columns,
                             (col, i) => `${col.header}-${i}`,
-                            (col, colIndex) => html`
-                                <vaadin-grid-sort-column
-                                    .flexGrow=${col.styling?.width ? 0 : 1}
-                                    width=${ifDefined(
-                                        col.styling?.width ? `${col.styling.width}` : undefined
-                                    )}
-                                    ?autoWidth=${this.inputData?.horizontalOverflow && !col.styling?.width}
-                                    resizable
-                                    .textAlign=${this.getTextAlign(col)}
-                                    .header=${col.header}
-                                    path=${`col_${colIndex}.value`}
-                                    ${columnBodyRenderer<RowData>(
-                                        (item) => html`
-                                            <div
-                                                class="cell cell-${this.getTextAlign(col)}"
-                                                style="font-size: ${col.styling?.fontSize}; font-weight: ${col
-                                                    .styling?.fontWeight}; color: ${col.styling?.color ||
-                                                this.themeTitleColor}"
-                                            >
-                                                ${this.renderCell(item[`col_${colIndex}`], colIndex)}
-                                            </div>
-                                        `,
-                                        [colIndex, col, this.themeTitleColor]
-                                    )}
-                                ></vaadin-grid-sort-column>
-                            `
+                            (col, colIndex) =>
+                                col?.type === 'edit'
+                                    ? html`
+                                          <vaadin-grid-column
+                                              .flexGrow=${0}
+                                              width=${col.styling?.width || EDIT_COLUMN_WIDTH}
+                                              resizable
+                                              .textAlign=${'center'}
+                                              ${columnHeaderRenderer(
+                                                  () =>
+                                                      html`<div class="cell cell-center">${col.header}</div>`,
+                                                  [col.header]
+                                              )}
+                                              ${columnBodyRenderer<RowData>(
+                                                  this.cellRenderer(col, colIndex),
+                                                  [colIndex, col, this.themeTitleColor]
+                                              )}
+                                          ></vaadin-grid-column>
+                                      `
+                                    : html`
+                                          <vaadin-grid-sort-column
+                                              .flexGrow=${col.styling?.width ? 0 : 1}
+                                              width=${ifDefined(
+                                                  col.styling?.width ? `${col.styling.width}` : undefined
+                                              )}
+                                              ?autoWidth=${this.inputData?.horizontalOverflow &&
+                                              !col.styling?.width}
+                                              resizable
+                                              .textAlign=${this.getTextAlign(col)}
+                                              .header=${col.header}
+                                              path=${`col_${colIndex}.value`}
+                                              ${columnBodyRenderer<RowData>(
+                                                  this.cellRenderer(col, colIndex),
+                                                  [colIndex, col, this.themeTitleColor]
+                                              )}
+                                          ></vaadin-grid-sort-column>
+                                      `
                         )}
                     </vaadin-grid>
                 </div>
diff --git a/vite.config.ts b/vite.config.ts
index bc35a2f..2645095 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -32,7 +32,7 @@ export default defineConfig({
         },
         sourcemap: true,
         rollupOptions: {
-            external: [/^lit/, /^@lit/, /^@vaadin/],
+            external: [/^lit/, /^@lit/, /^@vaadin/, /^@material\/web/],
             output: {
                 banner: '/* @license Copyright (c) 2025 IronFlock GmbH. All rights reserved.*/'
             }

From cf6ff0fdc4c34a73c2d3eacdbdfa7cdadff729e6 Mon Sep 17 00:00:00 2001
From: Marko Petzold <marko.petzold@record-evolution.de>
Date: Mon, 2 Nov 2026 09:42:46 +0100
Subject: [PATCH 2/2] release widget-table 1.2.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a9b67a5..7bd3a13 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@ironflock/widget-table",
-    "version": "1.1.27",
+    "version": "1.2.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@ironflock/widget-table",
-            "version": "1.1.27",
+            "version": "1.2.0",
             "license": "MIT",
             "dependencies": {
                 "lit": "^3.3.3",
diff --git a/package.json b/package.json
index 5da298b..ae075ad 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
     "description": "REWidget widget-table",
     "license": "MIT",
     "author": "widget-table",
-    "version": "1.1.27",
+    "version": "1.2.0",
     "engines": {
         "node": ">=24.9.0",
         "npm": ">=10.0.2"