(".ui5-tabular-input-suggestions-wrapper");
+ if (!scrollContainer) {
+ return;
+ }
+
+ const containerRect = scrollContainer.getBoundingClientRect();
+ const rowRect = rowElement.getBoundingClientRect();
+
+ const isRowAboveView = rowRect.top < containerRect.top;
+ const isRowBelowView = rowRect.bottom > containerRect.bottom;
+
+ if (isRowAboveView || isRowBelowView) {
+ rowElement.scrollIntoView({
+ behavior: "auto",
+ block: "nearest",
+ });
+ }
+ }
+
+ /**
+ * Override focusout handler to prevent closing popover when clicking inside it
+ * @private
+ */
+ _onfocusout(e: FocusEvent) {
+ if (this._useTabularSuggestions) {
+ const toBeFocused = e.relatedTarget as HTMLElement;
+ const popover = this._getTabularPopover();
+
+ if (popover?.contains(toBeFocused) || this.contains(toBeFocused)) {
+ return;
+ }
+
+ this.focused = false;
+ this.open = false;
+ this.isTyping = false;
+ this.lastConfirmedValue = "";
+ this._clearPopoverFocusAndSelection();
+ return;
+ }
+
+ super._onfocusout(e);
+ }
+}
+
+TabularInput.define();
+
+export default TabularInput;
+export type {
+ ITabularSuggestionRow,
+ TabularInputSelectionChangeEventDetail,
+};
diff --git a/packages/main/src/TabularInputPopoverTemplate.tsx b/packages/main/src/TabularInputPopoverTemplate.tsx
new file mode 100644
index 000000000000..4dcf6b4b339c
--- /dev/null
+++ b/packages/main/src/TabularInputPopoverTemplate.tsx
@@ -0,0 +1,193 @@
+import type TabularInput from "./TabularInput.js";
+import type { JsxTemplateResult } from "@ui5/webcomponents-base/dist/index.js";
+
+import Icon from "./Icon.js";
+import error from "@ui5/webcomponents-icons/dist/error.js";
+import alert from "@ui5/webcomponents-icons/dist/alert.js";
+import sysEnter2 from "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import information from "@ui5/webcomponents-icons/dist/information.js";
+
+import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
+import Popover from "./Popover.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import Button from "./Button.js";
+import Title from "./Title.js";
+import Input from "./Input.js";
+import Table from "./Table.js";
+import TableHeaderRow from "./TableHeaderRow.js";
+import TableHeaderCell from "./TableHeaderCell.js";
+import TableRow from "./TableRow.js";
+import TableCell from "./TableCell.js";
+
+export default function TabularInputPopoverTemplate(this: TabularInput): JsxTemplateResult {
+ return (
+ <>
+
+ {this._isPhone &&
+
+ }
+
+ {!this._isPhone && this.hasValueStateMessage &&
+
+
+ {this.open && valueStateMessage.call(this)}
+
+ }
+
+ {tabularSuggestionsList.call(this)}
+
+ {this._isPhone &&
+
+ }
+
+
+ {this.hasValueStateMessage && (
+
+
+
+ {this.valueStateOpen && valueStateMessage.call(this)}
+
+
+ )}
+
+ );
+}
+
+function valueStateMessage(this: TabularInput) {
+ return (
+ <>
+ {
+ this.shouldDisplayDefaultValueStateMessage ? this.valueStateText :
+ }
+
+ );
+}
+
+function valueStateMessageInputIcon(this: TabularInput) {
+ const iconPerValueState = {
+ Negative: error,
+ Critical: alert,
+ Positive: sysEnter2,
+ Information: information,
+ };
+
+ return this.valueState !== ValueState.None ? iconPerValueState[this.valueState as keyof typeof iconPerValueState] : "";
+}
+
+function tabularSuggestionsList(this: TabularInput): JsxTemplateResult {
+ const isScrollMode = this.overflowMode === "Scroll";
+ const lastColumnIndex = this.suggestionColumns.length - 1;
+
+ return (
+
+ );
+}
diff --git a/packages/main/src/TabularInputTemplate.tsx b/packages/main/src/TabularInputTemplate.tsx
new file mode 100644
index 000000000000..7744e82895e9
--- /dev/null
+++ b/packages/main/src/TabularInputTemplate.tsx
@@ -0,0 +1,23 @@
+import InputTemplate from "./InputTemplate.js";
+import type Input from "./Input.js";
+import type TabularInput from "./TabularInput.js";
+import TabularInputPopoverTemplate from "./TabularInputPopoverTemplate.js";
+
+export default function TabularInputTemplate(this: TabularInput) {
+ return InputTemplate.call(this as unknown as Input, {
+ preContent: tabularPreContent.bind(this),
+ postContent: tabularPostContent.bind(this),
+ popoverTemplate: tabularPopoverTemplate.bind(this),
+ });
+}
+
+function tabularPreContent(this: TabularInput) {}
+function tabularPostContent(this: TabularInput) {}
+
+function tabularPopoverTemplate(this: TabularInput) {
+ if (!this._useTabularSuggestions) {
+ return;
+ }
+
+ return TabularInputPopoverTemplate.call(this);
+}
diff --git a/packages/main/src/bundle.esm.ts b/packages/main/src/bundle.esm.ts
index d916b641dfac..05bd63285e0e 100644
--- a/packages/main/src/bundle.esm.ts
+++ b/packages/main/src/bundle.esm.ts
@@ -84,6 +84,7 @@ import Icon from "./Icon.js";
import Input from "./Input.js";
import SuggestionItemCustom from "./SuggestionItemCustom.js";
import MultiInput from "./MultiInput.js";
+import TabularInput from "./TabularInput.js";
import Label from "./Label.js";
import LastOptions from "./dynamic-date-range-options/LastOptions.js";
import Link from "./Link.js";
diff --git a/packages/main/src/themes/TabularInput.css b/packages/main/src/themes/TabularInput.css
new file mode 100644
index 000000000000..0be759b2d322
--- /dev/null
+++ b/packages/main/src/themes/TabularInput.css
@@ -0,0 +1,51 @@
+:host([open][focused][_row-focused]) .ui5-input-focusable-element::after {
+ content: none;
+}
+
+:host([open][focused][_row-focused]) {
+ border-color: var(--sapField_BorderColor);
+ background-color: var(--sapField_Background);
+}
+
+.ui5-tabular-input-suggestions-wrapper {
+ width: 100%;
+ max-height: var(--_ui5_tabular_suggestions_max_height, 20rem);
+ overflow: auto;
+}
+
+.ui5-tabular-suggestions-table {
+ width: 100%;
+}
+
+.ui5-tabular-suggestions-table::part(before),
+.ui5-tabular-suggestions-table::part(after) {
+ display: none;
+}
+
+.ui5-tabular-suggestions-table [ui5-table-row].ui5-tabular-suggestions-row--focused,
+.ui5-tabular-suggestions-table [ui5-table-row].ui5-tabular-suggestions-row--selected {
+ background-color: var(--sapList_SelectionBackgroundColor);
+}
+
+.ui5-tabular-suggestions-table [ui5-table-row].ui5-tabular-suggestions-row--focused {
+ outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+ outline-offset: var(--_ui5_tabular_suggestions_focus_offset, -0.125rem);
+}
+
+.ui5-tabular-suggestions-table [ui5-table-row].ui5-tabular-suggestions-row--focused:hover,
+.ui5-tabular-suggestions-table [ui5-table-row].ui5-tabular-suggestions-row--selected:hover {
+ background-color: var(--sapList_Hover_SelectionBackground);
+}
+
+.ui5-tabular-suggestions-table [ui5-table-cell] b {
+ font-weight: bold;
+ color: var(--sapList_TextColor);
+}
+
+.ui5-tabular-suggestions-table [ui5-table-row] [ui5-table-cell]:first-of-type {
+ font-weight: 500;
+}
+
+:host([_isPhone]) .ui5-tabular-input-suggestions-wrapper {
+ max-height: none;
+}
diff --git a/packages/main/test/pages/TabularInput.html b/packages/main/test/pages/TabularInput.html
new file mode 100644
index 000000000000..804bddf9310d
--- /dev/null
+++ b/packages/main/test/pages/TabularInput.html
@@ -0,0 +1,661 @@
+
+
+
+
+
+ TabularInput - Test Page
+
+
+
+
+ TabularInput Component - POC Test Page
+ This page demonstrates the TabularInput component with tabular suggestions.
+
+
+
+
Example 1: Product Search
+
+ Search for products. The suggestions show Product ID, Name, Category, and Price in columns.
+ Try typing "Laptop" or "Phone". Matching text is highlighted in the suggestions.
+
+
+
+
+ Product ID
+ Name
+ Category
+ Price
+
+
+
+ PRD-001
+ Laptop Pro 15
+ Electronics
+ $1,299
+
+
+ PRD-002
+ Smartphone X
+ Electronics
+ $899
+
+
+ PRD-003
+ Wireless Mouse
+ Accessories
+ $49
+
+
+ PRD-004
+ USB-C Hub
+ Accessories
+ $79
+
+
+ PRD-005
+ Phone Case
+ Accessories
+ $29
+
+
+
+
Selected: (none)
+
+
Example 2: Employee Directory
+
+ Search for employees by name. Typed text is highlighted in all cells.
+
+
+
+
+ Name
+ Department
+ Location
+ Extension
+
+
+
+ John Smith
+ Engineering
+ Building A
+ x1234
+
+
+ Jane Doe
+ Marketing
+ Building B
+ x2345
+
+
+ James Wilson
+ Sales
+ Building A
+ x3456
+
+
+ Sarah Johnson
+ HR
+ Building C
+ x4567
+
+
+ Mike Brown
+ Engineering
+ Building A
+ x5678
+
+
+
+
Selected: (none)
+
+
Example 3: Popin Overflow Mode (Default)
+
+ This example uses overflow-mode="Popin" (the default) in a narrow container.
+ Columns will stack vertically when there's not enough space.
+
+
+
+
+
+ Code
+ Description
+ Quantity
+ Status
+
+
+
+ A001
+ Widget Alpha
+ 150
+ In Stock
+
+
+ B002
+ Widget Beta
+ 75
+ Low Stock
+
+
+ C003
+ Widget Gamma
+ 0
+ Out of Stock
+
+
+
+
+
Selected: (none)
+
+
Example 4: Scroll Overflow Mode
+
+ This example uses overflow-mode="Scroll" in a narrow container.
+ A horizontal scrollbar appears when columns don't fit.
+
+
+
+
+
+ Code
+ Description
+ Quantity
+ Status
+
+
+
+ A001
+ Widget Alpha
+ 150
+ In Stock
+
+
+ B002
+ Widget Beta
+ 75
+ Low Stock
+
+
+ C003
+ Widget Gamma
+ 0
+ Out of Stock
+
+
+
+
+
Selected: (none)
+
+
Example 6: With Clear Icon
+
+ TabularInput with show-clear-icon enabled for easy value clearing.
+
+
+
+
+ ID
+ Task
+ Priority
+
+
+
+ T-101
+ Review PR #123
+ High
+
+
+ T-102
+ Update documentation
+ Medium
+
+
+ T-103
+ Fix login bug
+ Critical
+
+
+
+
Selected: (none)
+
+
Example 7: Value States
+
+ TabularInput supports all value states: Negative (Error), Critical (Warning), Positive (Success), and Information.
+
+
+
+
+ Name
+ Status
+
+ Item A
+ Invalid
+
+
+
+
+ Name
+ Status
+
+ Item B
+ Pending
+
+
+
+
+ Name
+ Status
+
+ Item C
+ Approved
+
+
+
+
+ Name
+ Status
+
+ Item D
+ Info
+
+
+
+
+
Example 8: Value State with Custom Message
+
+ Custom value state messages are shown in a popover when the input is focused.
+ Focus on each input to see the message.
+
+
+
+
+
+ This product ID is invalid. Please enter a valid ID starting with "PRD-".
+
+ Product
+ Price
+
+ PRD-001
+ $99
+
+
+
+
+
+ Stock is running low. Consider reordering soon.
+
+ Product
+ Stock
+
+ Widget X
+ 5 left
+
+
+
+
+
+ Tip: You can use wildcards (*) for broader search results.
+
+ Search
+ Results
+
+ Widget*
+ 25 matches
+
+
+
+
+
Example 9: Value State with Formatted Text
+
+ Value state messages can contain formatted text with bold, italic, and other styling.
+
+
+
+
+
+ Invalid Entry: The value "XYZ-999" does not match any record.
+ Please check your input and try again.
+
+ Code
+ Description
+
+ ABC-001
+ Valid Code
+
+
+
+
+
+ Attention: This item will be discontinued on December 31, 2026.
+ Consider selecting an alternative.
+
+ Item
+ End Date
+
+ Legacy Widget
+ Dec 31, 2026
+
+
+ New Widget
+ Active
+
+
+
+
+
Example 10: Value State with Links
+
+ Value state messages can contain interactive links for help, documentation, or actions.
+ Focus on the input to see the message with links.
+
+
+
+
+
+ Product not found in catalog.
+ View product guidelines
+ or
+ contact support.
+
+ Product
+ Category
+
+ PRD-001
+ Electronics
+
+
+
+
+
+ This vendor requires approval.
+ Request approval
+ or
+ choose alternative vendor.
+
+ Vendor
+ Status
+
+ Acme Corp
+ Pending
+
+
+ Beta Inc
+ Approved
+
+
+
+
+
+ New search syntax available!
+ Learn about advanced search operators.
+
+ Query
+ Results
+
+ name:Widget
+ 15 matches
+
+
+
+
+
Example 11: Disabled and Readonly
+
+ Disabled inputs cannot be focused or edited. Readonly inputs can be focused but not edited.
+
+
+
+
+ Product
+ Price
+
+ PRD-001
+ $99
+
+
+ PRD-002
+ $149
+
+
+
+
+ Product
+ Stock
+
+ Widget X
+ 50 units
+
+
+ Widget Y
+ 25 units
+
+
+
+
+
Example 12: Many Suggestions (112 rows)
+
+ This example demonstrates performance with a large number of suggestions (112 rows).
+ The popover should handle scrolling smoothly.
+
+
+
+ SKU
+ Product Name
+ Category
+ Price
+
+
+
Selected: (none)
+
+
+ Product ID is invalid. Please enter a valid ID.
+ Product
+ Price
+
+ PRD-001
+ $99
+
+
+
+
+ Stock is running low. Consider reordering soon.
+ Product
+ Stock
+
+ Widget X
+ 5 left
+
+
+
+
+ Tip: You can use wildcards (*) for broader search.
+ Search
+ Results
+
+ Widget*
+ 25 matches
+
+
+
+
+ Product ID is invalid. Please enter a valid ID.
+ Product
+ Price
+
+ PRD-001
+ $99
+
+
+
+
+ Stock is running low. Consider reordering soon.
+ Product
+ Stock
+
+ Widget X
+ 5 left
+
+
+
+
+ Tip: You can use wildcards (*) for broader search.
+ Search
+ Results
+
+ Widget*
+ 25 matches
+
+
+