Use for navigating between pages of content like search results or tables.
Using the records-only will simplify the appearance of the q2-pagination component. By only displaying the number of records currently displayed.
<q2-pagination total="200" page="1" records-only></q2-pagination>
Using the pages-only will simplify the appearance of the q2-pagination component. By only displaying the current and total pages.
The pages-only option will auto-determine the total number of pages based on the value of the total property in relation to the per-page attribute. If the page is provided that will be used instead.
<q2-pagination page="1" pages="25" pages-only></q2-pagination>
The per-page-increments property renders a dropdown that allows users to change how many records are displayed per page. Provide an array of numeric values (or a JSON string) to define the available options.
The dropdown is only rendered when more than one increment value is provided. The per-page-increments feature is disabled when pages-only or records-only is true.
<q2-pagination total="500" page="1" per-page="10" per-page-increments="[10, 25, 50]"></q2-pagination>
The tctChange event fires whenever the page or per-page value changes. The event detail always includes both page and perPage, giving consumers the full pagination state in a single event.
const pagination = document.querySelector('q2-pagination');
pagination.addEventListener('tctChange', (event) => {
const { page, perPage } = event.detail;
console.log(`Page: ${page}, Per Page: ${perPage}`);
// Fetch new data based on the updated pagination state
});
alignmentIndicates the horizontal alignment of pagination elements
When using the 'stacked' version, the default alignment is 'center'. When using the unstacked version, the default alignment is 'right'.
autoSizeauto-sizeDetermines whether the component uses dynamic resizing behavior. This is disabled when pagesOnly, recordsOnly, or stacked is true.
disabledAllows the component to be disabled should the state of the page require this
pageThe current page that is being displayed.
pagesThe number of pages that can be displayed.
Only referenced when pagesOnly is true.
pagesOnlypages-onlyIndicates to display only the current and total pages. This disables the autoSize feature.
perPageper-pageThe total number of records displayed on each page. This disables the autoSize feature.
perPageIncrementsper-page-incrementsA list of perPage values.
This generates a Select element that allows the user to modify the perPage value.
this.perPageIncrements = [10, 25, 50];pagesOnly or recordsOnly being true disables this feature.
Example:
recordTyperecord-typeDescription of the record type to be displayed alongside the record count.
recordsOnlyrecords-onlyIndicates to display only the current and total records.
stackedAllows the component to be displayed in a stacked layout. This disables the autoSize feature.
When set to true, the default alignment will be 'center'. When false, the default alignment is 'right'.
totalThe total number of records to paginate.
The q2-pagination element exposes events that can be used to send and receive data from the component based on user interaction.
Emitted when the page is changed.
{ page: number; perPage: number; }If an event handler is bound to the element using:
ontctChange property - The default handler will not fire, and the value must be updated in the custom handler.addEventListener("tctChange") method - The default handler will fire alongside the custom handler.The q2-pagination element exposes methods that can be used to perform various actions on the component.
Emulates clicking the button that controls moving to the first page, and emitting a change event with the updated page number.
If the <button> is disabled, this method does nothing.
clickFirstPage() => Promise<void>Emulates clicking the button that controls moving to the last page, and emitting a change event with the updated page number.
If the <button> is disabled, this method does nothing.
clickLastPage() => Promise<void>Emulates clicking the button that controls moving to the next page, and emitting a change event with the updated page number.
If the <button> is disabled, this method does nothing.
clickNextPage() => Promise<void>Emulates clicking the button that controls moving to the previous page, and emitting a change event with the updated page number.
If the <button> is disabled, this method does nothing.
clickPreviousPage() => Promise<void>Emulates selecting a perPage value from the perPageIncrements dropdown,
and updates the value of the perPage property.
If value is not in the perPageIncrements array, this method does nothing.
selectPerPageIncrementValue(value: number) => Promise<void>Emulates setting the page value in the <input> field,
and emitting a change event with the updated page number.
If value is invalid, this method does nothing.
setPageValue(value: number) => Promise<void>The following CSS variables are available to override the default theme styles of the q2-pagination component.
Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!
The changelog provides a detailed history of new features, improvements, and bug fixes going back to Tecton 1.30.0. If the button is disabled, it indicates there have been no detectable changes since then.