Vue Modern Table

Appearance

On this page

Pagination ​

The pagination allows you to paginate rows using the default (5) or a custom page length.

TIP

By default, pagination option is enabled.

Enabling / disabling pagination ​

To enable / disable rows pagination, simply set the enablePagination option to either true (default) or false:

vue
<template>
  <ModernTable
    :columns="[
      { label: 'Country', field: 'country' },
      { label: 'Capital', field: 'capital' }
    ]"
    :rows="[
      { country: 'Ukraine', capital: 'Kiev' },
      { country: 'France', capital: 'Paris' },
      { country: 'Germany', capital: 'Berlin' },
      { country: 'USA', capital: 'Washington' },
      { country: 'Brazil', capital: 'Brasília' },
      { country: 'England', capital: 'London' },
      { country: 'Russia', capital: 'Moscow' }
    ]"
    :options="{ enablePagination: true }" 
  />
</template>
Country
Capital
Ukraine
Kiev
France
Paris
Germany
Berlin
USA
Washington
Brazil
Brasília
1 - 5 / 7

Without pagination:

Country
Capital
Ukraine
Kiev
France
Paris
Germany
Berlin
USA
Washington
Brazil
Brasília
England
London
Russia
Moscow

Custom page length ​

You can override the default page length (5) using the pageLength option:

vue
<template>
  <ModernTable
    :columns="[
      { label: 'Country', field: 'country' },
      { label: 'Capital', field: 'capital' }
    ]"
    :rows="[
      { country: 'Ukraine', capital: 'Kiev' },
      { country: 'France', capital: 'Paris' },
      { country: 'Germany', capital: 'Berlin' },
      { country: 'USA', capital: 'Washington' },
      { country: 'Brazil', capital: 'Brasília' },
      { country: 'England', capital: 'London' },
      { country: 'Russia', capital: 'Moscow' }
    ]"
    :options="{
      enablePagination: true,
      pageLength: 3 
    }"
  />
</template>
Country
Capital
Ukraine
Kiev
France
Paris
Germany
Berlin
1 - 3 / 7

Custom initial page ​

You can set the initial page to load using the initialPage option:

vue
<template>
  <ModernTable
    :columns="[
      { label: 'Country', field: 'country' },
      { label: 'Capital', field: 'capital' }
    ]"
    :rows="[
      { country: 'Ukraine', capital: 'Kiev' },
      { country: 'France', capital: 'Paris' },
      { country: 'Germany', capital: 'Berlin' },
      { country: 'USA', capital: 'Washington' },
      { country: 'Brazil', capital: 'Brasília' },
      { country: 'England', capital: 'London' },
      { country: 'Russia', capital: 'Moscow' }
    ]"
    :options="{
      enablePagination: true,
      initialPage: 1 
    }"
  />
</template>
Country
Capital
England
London
Russia
Moscow
6 - 7 / 7