📄 tanstack/table/latest/docs/framework/vue/examples/pagination
File: pagination.md | Updated: 11/15/2025
Source: https://tanstack.com/table/latest/docs/framework/vue/examples/pagination
Search...
+ K
Auto
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide
Documentation
Framework
Vue
Version
Latest
Search...
+ K
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples
Framework
Vue
Version
Latest
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples
Vue Example: Pagination
=====================================================================================================================================================================================================================================================================================================================================================================================================
Code ExplorerCode
Interactive SandboxSandbox
-
src
-
App.vue
-
env.d.ts
-
main.ts
-
makeData.ts
-
-
.gitignore
-
README.md
-
env.d.ts
-
index.html
-
package.json
-
tsconfig.json
-
vite.config.ts
vue
<script setup lang="ts">
import {
FlexRender,
getCoreRowModel,
getPaginationRowModel,
useVueTable,
createColumnHelper,
} from '@tanstack/vue-table'
import { ref } from 'vue'
import { makeData, Person } from './makeData'
const INITIAL_PAGE_INDEX = 0
const defaultData = makeData(100)
const columnHelper = createColumnHelper<Person>()
const goToPageNumber = ref(INITIAL_PAGE_INDEX + 1)
const pageSizes = [10, 20, 30, 40, 50]
const data = ref(defaultData)
const columns = [\
columnHelper.group({\
header: 'Name',\
footer: props => props.column.id,\
columns: [\
columnHelper.accessor('firstName', {\
cell: info => info.getValue(),\
footer: props => props.column.id,\
}),\
columnHelper.accessor(row => row.lastName, {\
id: 'lastName',\
cell: info => info.getValue(),\
header: () => 'Last Name',\
footer: props => props.column.id,\
}),\
],\
}),\
columnHelper.group({\
header: 'Info',\
footer: props => props.column.id,\
columns: [\
columnHelper.accessor('age', {\
header: () => 'Age',\
footer: props => props.column.id,\
}),\
columnHelper.group({\
header: 'More Info',\
columns: [\
columnHelper.accessor('visits', {\
header: () => 'Visits',\
footer: props => props.column.id,\
}),\
columnHelper.accessor('status', {\
header: 'Status',\
footer: props => props.column.id,\
}),\
columnHelper.accessor('progress', {\
header: 'Profile Progress',\
footer: props => props.column.id,\
}),\
],\
}),\
],\
}),\
]
const table = useVueTable({
get data() {
return data.value
},
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
})
function rerender() {
data.value = defaultData
}
function handleGoToPage(e: any) {
const page = e.target.value ? Number(e.target.value) - 1 : 0
goToPageNumber.value = page + 1
table.setPageIndex(page)
}
function handlePageSizeChange(e: any) {
table.setPageSize(Number(e.target.value))
}
</script>
<template>
<div class="p-2">
<table>
<thead>
<tr
v-for="headerGroup in table.getHeaderGroups()"
:key="headerGroup.id"
>
<th
v-for="header in headerGroup.headers"
:key="header.id"
:colSpan="header.colSpan"
>
<FlexRender
v-if="!header.isPlaceholder"
:render="header.column.columnDef.header"
:props="header.getContext()"
/>
</th>
</tr>
</thead>
<tbody>
<tr v-for="row in table.getRowModel().rows" :key="row.id">
<td v-for="cell in row.getVisibleCells()" :key="cell.id">
<FlexRender
:render="cell.column.columnDef.cell"
:props="cell.getContext()"
/>
</td>
</tr>
</tbody>
<tfoot>
<tr
v-for="footerGroup in table.getFooterGroups()"
:key="footerGroup.id"
>
<th
v-for="header in footerGroup.headers"
:key="header.id"
:colSpan="header.colSpan"
>
<FlexRender
v-if="!header.isPlaceholder"
:render="header.column.columnDef.footer"
:props="header.getContext()"
/>
</th>
</tr>
</tfoot>
</table>
<div>
<div class="flex items-center gap-2">
<button
class="border rounded p-1"
@click="() => table.setPageIndex(0)"
:disabled="!table.getCanPreviousPage()"
>
«
</button>
<button
class="border rounded p-1"
@click="() => table.previousPage()"
:disabled="!table.getCanPreviousPage()"
>
‹
</button>
<button
class="border rounded p-1"
@click="() => table.nextPage()"
:disabled="!table.getCanNextPage()"
>
›
</button>
<button
class="border rounded p-1"
@click="() => table.setPageIndex(table.getPageCount() - 1)"
:disabled="!table.getCanNextPage()"
>
»
</button>
<span class="flex items-center gap-1">
<div>Page</div>
<strong>
{{ table.getState().pagination.pageIndex + 1 }} of
{{ table.getPageCount() }}
</strong>
</span>
<span class="flex items-center gap-1">
| Go to page:
<input
type="number"
:value="goToPageNumber"
@change="handleGoToPage"
class="border p-1 rounded w-16"
/>
</span>
<select
:value="table.getState().pagination.pageSize"
@change="handlePageSizeChange"
>
<option
:key="pageSize"
:value="pageSize"
v-for="pageSize in pageSizes"
>
Show {{ pageSize }}
</option>
</select>
</div>
<div>{{ table.getRowModel().rows.length }} Rows</div>
<pre>{{ JSON.stringify(table.getState().pagination, null, 2) }}</pre>
</div>
<div class="h-2" />
<button @click="rerender" class="border p-2">Rerender</button>
</div>
</template>
<style>
html {
font-family: sans-serif;
font-size: 14px;
}
table {
border: 1px solid lightgray;
}
tbody {
border-bottom: 1px solid lightgray;
}
th {
border-bottom: 1px solid lightgray;
border-right: 1px solid lightgray;
padding: 2px 4px;
}
tfoot {
color: gray;
}
tfoot th {
font-weight: normal;
}
</style>
<script setup lang="ts">
import {
FlexRender,
getCoreRowModel,
getPaginationRowModel,
useVueTable,
createColumnHelper,
} from '@tanstack/vue-table'
import { ref } from 'vue'
import { makeData, Person } from './makeData'
const INITIAL_PAGE_INDEX = 0
const defaultData = makeData(100)
const columnHelper = createColumnHelper<Person>()
const goToPageNumber = ref(INITIAL_PAGE_INDEX + 1)
const pageSizes = [10, 20, 30, 40, 50]
const data = ref(defaultData)
const columns = [\
columnHelper.group({\
header: 'Name',\
footer: props => props.column.id,\
columns: [\
columnHelper.accessor('firstName', {\
cell: info => info.getValue(),\
footer: props => props.column.id,\
}),\
columnHelper.accessor(row => row.lastName, {\
id: 'lastName',\
cell: info => info.getValue(),\
header: () => 'Last Name',\
footer: props => props.column.id,\
}),\
],\
}),\
columnHelper.group({\
header: 'Info',\
footer: props => props.column.id,\
columns: [\
columnHelper.accessor('age', {\
header: () => 'Age',\
footer: props => props.column.id,\
}),\
columnHelper.group({\
header: 'More Info',\
columns: [\
columnHelper.accessor('visits', {\
header: () => 'Visits',\
footer: props => props.column.id,\
}),\
columnHelper.accessor('status', {\
header: 'Status',\
footer: props => props.column.id,\
}),\
columnHelper.accessor('progress', {\
header: 'Profile Progress',\
footer: props => props.column.id,\
}),\
],\
}),\
],\
}),\
]
const table = useVueTable({
get data() {
return data.value
},
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
})
function rerender() {
data.value = defaultData
}
function handleGoToPage(e: any) {
const page = e.target.value ? Number(e.target.value) - 1 : 0
goToPageNumber.value = page + 1
table.setPageIndex(page)
}
function handlePageSizeChange(e: any) {
table.setPageSize(Number(e.target.value))
}
</script>
<template>
<div class="p-2">
<table>
<thead>
<tr
v-for="headerGroup in table.getHeaderGroups()"
:key="headerGroup.id"
>
<th
v-for="header in headerGroup.headers"
:key="header.id"
:colSpan="header.colSpan"
>
<FlexRender
v-if="!header.isPlaceholder"
:render="header.column.columnDef.header"
:props="header.getContext()"
/>
</th>
</tr>
</thead>
<tbody>
<tr v-for="row in table.getRowModel().rows" :key="row.id">
<td v-for="cell in row.getVisibleCells()" :key="cell.id">
<FlexRender
:render="cell.column.columnDef.cell"
:props="cell.getContext()"
/>
</td>
</tr>
</tbody>
<tfoot>
<tr
v-for="footerGroup in table.getFooterGroups()"
:key="footerGroup.id"
>
<th
v-for="header in footerGroup.headers"
:key="header.id"
:colSpan="header.colSpan"
>
<FlexRender
v-if="!header.isPlaceholder"
:render="header.column.columnDef.footer"
:props="header.getContext()"
/>
</th>
</tr>
</tfoot>
</table>
<div>
<div class="flex items-center gap-2">
<button
class="border rounded p-1"
@click="() => table.setPageIndex(0)"
:disabled="!table.getCanPreviousPage()"
>
«
</button>
<button
class="border rounded p-1"
@click="() => table.previousPage()"
:disabled="!table.getCanPreviousPage()"
>
‹
</button>
<button
class="border rounded p-1"
@click="() => table.nextPage()"
:disabled="!table.getCanNextPage()"
>
›
</button>
<button
class="border rounded p-1"
@click="() => table.setPageIndex(table.getPageCount() - 1)"
:disabled="!table.getCanNextPage()"
>
»
</button>
<span class="flex items-center gap-1">
<div>Page</div>
<strong>
{{ table.getState().pagination.pageIndex + 1 }} of
{{ table.getPageCount() }}
</strong>
</span>
<span class="flex items-center gap-1">
| Go to page:
<input
type="number"
:value="goToPageNumber"
@change="handleGoToPage"
class="border p-1 rounded w-16"
/>
</span>
<select
:value="table.getState().pagination.pageSize"
@change="handlePageSizeChange"
>
<option
:key="pageSize"
:value="pageSize"
v-for="pageSize in pageSizes"
>
Show {{ pageSize }}
</option>
</select>
</div>
<div>{{ table.getRowModel().rows.length }} Rows</div>
<pre>{{ JSON.stringify(table.getState().pagination, null, 2) }}</pre>
</div>
<div class="h-2" />
<button @click="rerender" class="border p-2">Rerender</button>
</div>
</template>
<style>
html {
font-family: sans-serif;
font-size: 14px;
}
table {
border: 1px solid lightgray;
}
tbody {
border-bottom: 1px solid lightgray;
}
th {
border-bottom: 1px solid lightgray;
border-right: 1px solid lightgray;
padding: 2px 4px;
}
tfoot {
color: gray;
}
tfoot th {
font-weight: normal;
}
</style>
