Type to search.

ResultsPerPage

Serverless

Elastic Cloud Serverless projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud.

Availability

  • Generally available

    This functionality is generally available and ready for production usage.

Serverless interfaces and procedures might differ from classic Elastic Stack deployments.

Stack

The Elastic Stack includes Elastic's core products such as Elasticsearch, Kibana, Logstash, and Beats.

Availability

  • Generally available

    This functionality is generally available and ready for production usage.

Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.

This documentation corresponds to the latest patch available for each minor version. If you're not using the latest patch, check the release notes for changes.

Shows a dropdown for selecting the number of results to show per page.

Uses [20, 40, 60] as default options. You can use options prop to pass custom options.

Note

When passing custom options make sure one of the option values match the current resultsPerPageProp value, which is 20 by default. To override resultsPerPage default value, use the initial state property.

Example

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

...

<ResultsPerPage />

Example using custom options

Jsx 
import { SearchProvider, ResultsPerPage } from "@elastic/react-search-ui";

<SearchProvider
    config={
        ...
        initialState: {
            resultsPerPage: 5
        }
    }
>
    <ResultsPerPage options={[5, 10, 15]} />
</SearchProvider>

Properties

Name Description
className
options Type: number[]. Dropdown options to select the number of results to show per page.
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.
onChange function(value: number) - Call this function with the select value from options after a user has made a selection.
options Passed through from main component.
value The currently selected option.

See ResultsPerPage.tsx for an example.