Pagination

Used for reducing the amount of data shown in a Table. This component should be mounted in a CardFooter for best results.

Depending on your data source, you may have different options for the pagination. For example, if you have the total count of all documents you can show individual pages. However, if your database does not give you a total document count and you don't keep track yourself, you'll be better off using just a previous and next buttons.

The Pagination component relies on the goto function to trigger the svelte load function to rerun to fetch new data. Make sure you have set up the configStore correctly. See the usage section for more information.

Props

rows_per_page Array<Integer> [10, 25, 50, 100]
This is an array of integers to be able to change the limit of how many options that pagination will request. You can change these by adding your own array or choose to not give users this options by passing in null or an empty array.

limit number
The default limit that is used to determine the amount of documents the pagination will request. By default it will pick the first value from rows_per_page (which defaults to 10) but you can set this to whatever integer you would like.

count number
The total number of documents in this set. By passing in count, Bubbles will add page numbers to the pagination for you.

max_buttons number 10
The maximum number of page buttons to include in the component. Does not include next and previous buttons. Defaults to 10. If all of the buttons cannot fit on the page, Bubbles will show only enough buttons to fill the viewport.

arrows boolean true
If you want to include previous and next arrow buttons. Defaults to true.

first_last_arrows boolean
Will add buttons on the left and right sides of the pagination to navigate to the first and last page. You need to add a count for this, otherwise Bubbles does not know what the last page is.

has_more boolean
If you don't provide a count, you should provide a boolean value to share if there is another page in your navigation. If your API or database does not provide this data, you can query the database for the pagination limit + 1 to check if there are more documents, and then respond with just the pagination limit number of documents.

page_query_name string page
Updates the name of the query parameter that gets added for the page query. The default name is "page"

limit_query_name string limit
Updates the name of the query parameter that gets added for the limit query. The default name is "limit"

Rows per page:

100

Rows per page:

500

Viewing page: 1

<script>
  import { Pagination } from "bubbles-ui";

  // Pagination relies on the svelte goto function
  // Make sure you have added the function to the configStore
  import { goto } from "app/navigation";

  import { configStore } from "bubbles-ui";
  $configStore.goto = goto;
</script>

<div>
  <Pagination
    limit={10}
    count={1000}
    max_buttons={10}
    first_last_arrows={true}
    page_query_name="page_query_1"
    limit_query_name="limit_query_1"
  />
</div>
<div>
  <Pagination
    rows_per_page={[5, 500]}
    limit={5}
    count={1000}
    max_buttons={10}
    page_query_name="page_query_2"
    limit_query_name="limit_query_2"
  />
</div>
<div>
  <Pagination
    rows_per_page={null}
    limit={5}
    count={null}
    has_more={true}
    page_query_name="page_query_3"
    limit_query_name="limit_query_3"
  />
</div>

<style>
  div {
    margin-bottom: 2rem;
  }
</style>

Pagination

Props

Pagination Options