Sorting
Shows a dropdown for selecting the current Sort.
import { Sorting } from "@elastic/react-search-ui";
...
<Sorting
sortOptions={[
{
name: "Relevance",
value: "",
direction: ""
},
{
name: "Title",
value: "title",
direction: "asc"
}
]}
/>
| Name | Description |
|---|---|
| className | |
| label | A static label to show in the Sorting Component. |
| sortOptions | |
| view | Used to override the default view for this Component. See View customization below. |
| * | Any other property passed will be passed through and available to use in a Custom View |
A complete guide to view customization can be found in the Customization: Component views and HTML section.
The following properties are available in the view:
| Name | Description |
|---|---|
| className | Passed through from main component. |
| label | The label to display for this component. For example: "Sort by". |
| onChange | function(value: string) - Pass the value to this callback from the selected sort option |
| options | { value: string; label: string;}[] - Options to display |
| value | string - The currently selected value |
See Sorting.tsx for an example.