Sorting

Serverless Stack

Shows a dropdown for selecting the current Sort.

Example

		import { Sorting } from "@elastic/react-search-ui";

...

<Sorting
  sortOptions={[
    {
      name: "Relevance",
      value: "",
      direction: ""
    },
    {
      name: "Title",
      value: "title",
      direction: "asc"
    }
  ]}
/>
		
	

Properties

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

View customization

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.