Hi it’s my first time using the panel components found in kirby lab.
Check out this simple table example with pagination. But I’m not sure if I’m using these components the right way. I ended up writing the pagination function myself, but I’m not sure if I’m supposed to.
<template>
<k-inside>
<k-view class="k-submissions-view">
<div class="k-table">
<table>
<thead>
<tr>
<th class="k-table-index-column">#</th>
<th>Form</th>
<th>Email</th>
<th>Date</th>
<th class="k-table-options-column"></th>
</tr>
</thead>
<tbody v-if="submissions.length">
<tr v-for="(submission, index) in paginatedSubmissions" :key="submission.uuid">
<td class="k-table-index-column">
<span class="k-table-index">{{ index + 1 }}</span>
</td>
<td>{{ submission.form }}</td>
<td>{{ submission.email }}</td>
<td>{{ useParseDate(submission.date) }}</td>
<td class="k-table-options-column">
<k-options-dropdown :disabled="true" :options="options" />
</td>
</tr>
</tbody>
<tbody v-else>
<tr>
<td class="k-table-empty" colspan="5">No submissions yet</td>
</tr>
</tbody>
</table>
<k-pagination
class="k-table-pagination"
:details="true"
:limit="limit"
:page="currentPage"
:total="submissions.length"
@paginate="doPagination"
/>
</div>
</k-view>
</k-inside>
</template>
<script setup>
import useParseDate from './../composables/useParseDate';
import {computed, ref} from 'vue';
const props = defineProps({
submissions: Array
});
const limit = 20;
const currentPage = ref(1);
const paginatedSubmissions = computed(() => {
const startIndex = (currentPage.value - 1) * limit;
const endIndex = startIndex + limit;
return props.submissions.slice(startIndex, endIndex);
});
const doPagination = (data) => {
currentPage.value = data.page
}
</script>