telekom · PapeThePope · May 16, 2026 · May 16, 2026
@@ -16,11 +16,45 @@ import { Cell } from './cell-interface';
 
 export const HTMLCell: Cell = {
   defaults: {},
-  getLongestContent({ rows, columnIndex }) {
-    // Skip check as content width is always the same
+  getLongestContent({ rows, columnIndex, field }) {
+    if (field.display === 'inline') {
+      let maxLength = 0;
+      let longestContent;
+      rows.forEach((row) => {
+        const content = row[columnIndex];
+        const length = content?.textContent?.length || 0;
+        if (length > maxLength) {
+          longestContent = content;
+          maxLength = length;
+        }
+      });
+      return longestContent;
+    }
+
+    // Skip check as nested HTML content width is always the same toggle button.
     return rows[0][columnIndex];
   },
-  render: ({ content, component, localization }) => {
+  render: ({ field, content, component, localization }) => {
+    if (field.display === 'inline') {
+      return (
+        content && (
+          <div
+            class={`tbody__html-cell tbody__html-cell--inline`}
+            ref={(el) => {
+              if (el) {
+                let child = el.lastElementChild;
+                while (child) {
+                  el.removeChild(child);
+                  child = el.lastElementChild;
+                }
+                el.appendChild(content);
+              }
+            }}
+          ></div>
+        )
+      );
+    }
+
     const getAriaLabel = () => {
       if (localization?.expand && localization?.collapse) {
         return content.isExpanded

@@ -308,6 +308,12 @@
   width: auto;
 }
 
+.tbody__html-cell--inline {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+}
+
 .tbody__nested {
   white-space: nowrap;
   padding: 0px;

@@ -0,0 +1,95 @@
+/**
+ * @license
+ * Scale https://github.com/telekom/scale
+ *
+ * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { newSpecPage } from '@stencil/core/testing';
+import { DataGrid } from './data-grid';
+import { HTMLCell } from './cell-handlers/html-cell';
+
+class ResizeObserverMock {
+  observe() {}
+  unobserve() {}
+}
+
+describe('DataGrid', () => {
+  beforeEach(() => {
+    (globalThis as any).ResizeObserver = ResizeObserverMock;
+  });
+
+  it('renders html cell content inline when display is inline', async () => {
+    const inlineButton = document.createElement('button');
+    inlineButton.textContent = 'Open details';
+
+    const page = await newSpecPage({
+      components: [DataGrid],
+      html: '<scale-data-grid></scale-data-grid>',
+    });
+
+    page.root.fields = [
+      {
+        type: 'html',
+        display: 'inline',
+        label: 'Action',
+        width: 120,
+      },
+    ];
+    page.root.rows = [[inlineButton]];
+
+    await page.waitForChanges();
+
+    expect(page.root.shadowRoot.querySelector('.tbody__nested')).toBeNull();
+    expect(
+      page.root.shadowRoot.querySelector('.tbody__cell button').textContent
+    ).toBe('Open details');
+  });
+
+  it('keeps html cell content nested by default', async () => {
+    const nestedContent = document.createElement('div');
+    nestedContent.textContent = 'Nested details';
+
+    const page = await newSpecPage({
+      components: [DataGrid],
+      html: '<scale-data-grid></scale-data-grid>',
+    });
+
+    page.root.fields = [
+      {
+        type: 'html',
+        label: 'Details',
+        width: 96,
+      },
+    ];
+    page.root.rows = [[nestedContent]];
+
+    await page.waitForChanges();
+
+    expect(
+      page.root.shadowRoot.querySelector('.tbody__cell scale-button')
+    ).toBeTruthy();
+    expect(
+      page.root.shadowRoot.querySelector('.tbody__nested div').textContent
+    ).toBe('Nested details');
+  });
+
+  it('uses the longest inline html content for auto width checks', () => {
+    const shortButton = document.createElement('button');
+    shortButton.textContent = 'Open';
+    const longButton = document.createElement('button');
+    longButton.textContent = 'Open ticket details';
+
+    const longestContent = HTMLCell.getLongestContent({
+      rows: [[shortButton], [longButton]],
+      columnIndex: 0,
+      field: { display: 'inline' },
+    });
+
+    expect(longestContent).toBe(longButton);
+  });
+});
@@ -1187,8 +1187,8 @@ export class DataGrid {
                   if (!visible) {
                     return;
                   }
-                  // Add rows nested tables to array
-                  if (field.type === 'html') {
+                  // Add non-inline HTML cells to the nested content row.
+                  if (field.type === 'html' && field.display !== 'inline') {
                     if (!cellContent) {
                       return this.renderTableCell(
                         field,

@@ -66,6 +66,8 @@ To aid readability, you can highlight the rows when hovering over them.
 
 If you fill in the HTML slot in a table row, it will add an expand icon at the end of the row. If users click on the expand icon, it will display the HTML content of this slot.
 
+If you want to render an `HTMLElement` directly inside a data grid cell instead, use the `html` cell type with `display: "inline"` in the field configuration. The default behavior stays expandable nested content.
+
 #### Pagination (8)
 
 With the help of pagination, users can move through the entire data set in a deliberate way.

@@ -59,6 +59,8 @@ Der Inhalt einer Zeile bildet eine Dateneinheit und unterscheidet sich sowohl in
 
 Füllst du den HTML-Slot in einer Tabellenzeile aus, wird am Ende der Zeile ein Expand-Icon hinzugefügt. Klicken/tippen Nutzer\*innen auf das Expand-Icon, blendet sich der HTML-Inhalt dieses Slots ein.
 
+Wenn du ein `HTMLElement` stattdessen direkt in einer Data-Grid-Zelle darstellen möchtest, verwende den `html`-Zelltyp mit `display: "inline"` in der Feldkonfiguration. Das Standardverhalten bleibt aufklappbarer Nested Content.
+
 #### Pagination (8)
 
 Mit Hilfe der Pagination bewegen sich Nutzer\*innen gezielt durch den gesamten Datensatz.