The following entity is available under an experimental flag and its API and behavior are subject to change.
The ui5-input-table-suggest component is an input field with tabular suggestion support.
It displays suggestions in a table format with multiple columns, allowing users to
see more information about each suggestion before selecting it.
This component uses its own tabular suggestion mechanism instead of the standard
showSuggestions / suggestionItems from ui5-input. The tabular suggestions
are defined via:
headerRow: Table header cells defining the columns
rows (default slot): Table rows with cells containing the suggestion data
Note: Autocomplete (typeahead) is based on the first column of suggestion rows only.
Sets the maximum number of characters available in the input field. Note: This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.
Determines the name by which the component will be identified upon submission in an HTML form. Note: This property is only applicable within the context of an HTML Form element.
Defines the HTML type of the component. Note: - The particular effect of this property differs depending on the browser and the current language settings, especially for type Number. - The property is mainly intended for touch devices that use different soft keyboard layouts depending on the given input type.
Defines the rows for the tabular suggestions. Use the ui5-input-table-suggest-row component with ui5-input-table-suggest-cell children to define each suggestion row. Note: The cells in each row should correspond to the columns defined in the headerRow.
Defines the columns for the tabular suggestions. Use a single ui5-input-table-suggest-header-row component with ui5-input-table-suggest-header-cell children to define the columns. Note: This is a single-element slot. Provide exactly one ui5-input-table-suggest-header-row.
Defines the value state message that will be displayed as pop up under the component. The value state message slot should contain only one root element. Note: If not specified, a default text (in the respective language) will be displayed. Note: The valueStateMessage would be displayed, when the component is in Information, Critical or Negative value state.
This sample demonstrates how to implement custom filtering logic for tabular suggestions. The application filters employees by name, department, or location as the user types. With more columns than the fixed-width input can fit, the lower-importance columns move into the popin area.
This sample shows suggestion rows built from rich UI5 components (avatar, title, text, label, tag) while keeping the first column as plain text. The application highlights the matched substring in the plain-text column and filters rows by name as the user types.
This sample demonstrates app-side highlighting of the matched term across all columns using the generateHighlightedMarkupFirstMatch utility, re-highlighting the cells on every keystroke.