Pagination (TPagination)

VueJs Pagination component with configurable classes and infinite variants. Friendly with utility-first frameworks like TailwindCSS.

Playground:


Basic example

<t-pagination
  :total-items="totalRows"
  :per-page="perPage"
  :limit="limit"
  :disabled="disabled"
  v-model="currentPage"
/>

Props

PropertyTypeDefault valueDescription
valueNumbernullThe current page number (v-model) of the component
tagNameString'ul'The tag name that will wrapper the component
elementTagNameString'li'The tag name that will wrapper every button in the pagination
disabledBooleanfalseIf set the pagination buttons will be disabled
perPageNumber20Number of items that every page represents
limitNumber5How many buttons (including the ellipsis if shown) should be rendered
totalItemsNumber0How many items are in the list
prevLabelStringPrev button label
nextLabelStringNext button label
firstLabelString«First button label
lastLabelString»Last button label
ellipsisLabelStringEllipsis control label
hideFirstLastControlsBooleanfalseIf set will hide the first and last controls
hidePrevNextControlsBooleanfalseIf set will hide the prev and next controls
hideEllipsisBooleanfalseIf set will hide ellipsis control
fixedClassesObjectundefinedThe default CSS Fixed classes shared for all variants
classesObject{...} (see below)The default CSS classes
variantsObjectundefinedThe different variants of classes the component have
variant[String, Object]undefinedThe variant that should be used

Classes and variants format

This component expects an object with classes named after every child element.

The properties in that object are the following:

PropertyDescription
wrapperThe tag name that wraps the component
elementA single page element
disabledElementA single page element when component is disabled
ellipsisElementThe element with the ellipsis
buttonThe button
activeButtonThe button when is active
disabledButtonThe butotn when is disabled
ellipsisThe ellipsis button

Default classes

{
  wrapper: 'table border-collapse text-center bg-white mx-auto shadow-sm',
  element: 'w-8 h-8 border border-gray-200 table-cell hover:border-blue-100',
  activeElement: 'w-8 h-8 border border-blue-500 table-cell hover:border-blue-600',
  disabledElement: 'w-8 h-8 border border-gray-200 table-cell',
  ellipsisElement: 'w-8 h-8 border border-gray-200 hidden md:table-cell',
  activeButton: 'bg-blue-500 w-full h-full text-white hover:bg-blue-600 transition duration-100 ease-in-out focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
  disabledButton: 'opacity-25 w-full h-full cursor-not-allowed transition duration-100 ease-in-out',
  button: 'hover:bg-blue-100 w-full h-full transition duration-100 ease-in-out focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
  ellipsis: '',
}

Events

EventArgumentsDescription
inputNumber (The current selected page)Emitted when the page change
changeNumber (The current selected page)Emitted when the page change

Sign up for our newsletter

Stay up-to-date on news and updates about this project by email.

I will never spam or share your email under any circustance.