how can I use pagination for table?

[Rivendall]

Hello. I have some component include tables. I need pagination for them. create a component and use vue-paginate in them. but not work for table. my tables are in other component and don't want this code:

 <li v-for="item in paginated('items')">
        {{ item }}
</li>

I want use in table in other component.

[TahaSh]

@Rivendall Could you please add more details for me to help you?

[shrue348]

use for <paginate attribute :tag= for example <paginate :tag="'tbody'"

[Askadar]

Simple snippet from what I've used it for (I've removed transition group and several unnecessary elements to show pure pagination use). Table, async paginate-links and multiple non-paginatable entries inside container.

<paginate-links
	for="items"
	:limit="3"
	:show-step-links="true"
	:async="true"
>
</paginate-links>
<paginate
	name="items"
	:list="filteredItems"
	:per="20"
	tag="table" class="data-set">
	<tr key="header">
		<th>Name</th>
		<th>Count</th>
		<th>Total</th>
	</tr>
	<tr :key="name" v-for="{url, name, count, sum} in paginated('items')">
		<td v-if="url">
			<a	:href="url"
				class="fancy-ajax zn-fancy-ajax">
				{{name}}
			</a>
		</td>
		<td v-else>{{name}}</td>
		<td>{{(+count).toFixed(3)}}</td>
		<td>{{(+sum / 100).toFixed(2)}}</td>
	</tr>
	<tr key="search" v-if="isSearchValid">
		<td>Search total</td>
		<td>{{searchTotals.count.toFixed(3)}}</td>
		<td>{{(searchTotals.sum / 100).toFixed(2)}}</td>
	</tr>
</paginate>

As you can see paginate is just a container with tag=element in real DOM, so you can place anything you want inside, not just pageable entries. What allows pagination is iteratable return from paginated(<your list key provided in configuration>) function.