React ComboBox Templates
The Ignite UI for React ComboBox component allows defining custom templates for different areas such as items, group headers, empty list, and icons.
ComboBox Templates Example
Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.
Template Types
Item Template
The itemTemplate
is a custom template that if defined should be used when rendering items in the list of options.
<IgrCombo
valueKey="id"
displayKey="name"
groupKey="country"
data={cities}
itemTemplate={renderItemTemplate}
></IgrCombo>
function renderItemTemplate(props: { dataContext: any}): any {
return (
<span><b>{props.dataContext.name}</b> [{props.dataContext.id}]</span>
);
}
tsx
Group Header Template
The groupHeaderTemplate
is a custom template that if defined should be used when rendering group headers in the list of options.
<IgrCombo
valueKey="id"
displayKey="name"
groupKey="country"
data={cities}
groupHeaderTemplate={renderGroupHeaderTemplate}
></IgrCombo>
function renderGroupHeaderTemplate(props: { dataContext: any}): any {
return (
<span>Country of {props.dataContext.country}</span>
);
}
tsx
Slots
Other than custom templates, the Ignite UI for React ComboBox component exposes several slots that allow users to pass custom content to different combo parts.
Header Slot
To render a custom header above the list of options pass content to the header
slot:
<IgrCombo>
<header slot="header">
Header content goes here
</header>
</IgrCombo>
tsx
Footer Slot
To render a custom footer below the list of options pass content to the footer
slot:
<IgrCombo>
<footer slot="footer">
Footer content goes here
</footer>
</IgrCombo>
tsx
Empty List Slot
To render a custom content when the filtering operation returns no result, use the empty
slot:
<IgrCombo>
<div slot="empty">¯\_(ツ)_/¯</div>
</IgrCombo>
tsx
Toggle Icon Slot
The toggle icon in the combo input can also be modified via the toggle-icon
slot:
<IgrCombo>
<span slot="toggle-icon">
<IgbIcon name="down"></IgbIcon>
</span>
</IgrCombo>
tsx
Clear Icon Slot
The clear icon can be changed via the clear-icon
slot:
<IgrCombo>
<span slot="clear-icon">
<IgbIcon name="clear"></IgbIcon>
</span>
</IgrCombo>
tsx