Pagination

The Pagination component is used for paging through paged result sets.

import { Pagination } from '@sajari/react-search-ui';

import { Pagination } from '@sajari/react-search-ui';

Usage

Additional imports used in the examples:

import { FieldDictionary, Pipeline, Results, SearchProvider } from '@sajari/react-search-ui';

import { FieldDictionary, Pipeline, Results, SearchProvider } from '@sajari/react-search-ui';

Editable Example

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
  );

  const variables = new Variables({ resultsPerPage: 3, q: 'iphone' });

  const SearchPlayground = React.memo(() => (
    <div className="space-y-6">
      <Results appearance="grid" />
      <Pagination />
    </div>
  ));

  return (
    <SearchProvider
      search={{
        pipeline,
        variables,
        fields: new FieldDictionary({
          title: 'name',
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
        }),
      }}
      searchOnLoad
    >
      <SearchPlayground />
    </SearchProvider>
  );
}

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
  );
  const variables = new Variables({ resultsPerPage: 3, q: 'iphone' });
  const SearchPlayground = React.memo(() => (
    <div className="space-y-6">
      <Results appearance="grid" />
      <Pagination />
    </div>
  ));
  return (
    <SearchProvider
      search={{
        pipeline,
        variables,
        fields: new FieldDictionary({
          title: 'name',
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
        }),
      }}
      searchOnLoad
    >
      <SearchPlayground />
    </SearchProvider>
  );
}

Props

Name	Type	Default	Description
`align`	`'left'` \| `'center'` \| `'right'`	`'center'`	How to align the pagination.
`scrollToTop`	`boolean`	`false`	Enable to scroll to top of the page after page change.
`scrollTarget`	`string` \| `Element`	`document.body`	Specify target to scroll to instead of `document.body`, alternatively you can also pass a string selector, if not found it will do nothing.
`compact`	`boolean`	`true` if pagination container is narrower than 480 pixels.	Display a narrower pagination design with previous/next buttons and a current page indicator only.

React SDK

Suggestions

Usage

Editable Example

Props