How to use the table and pagination component in the kirby panel?

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>

I’m somehow missing what you are trying to do here.

If you want to simply create a custom area with a section, you can do it like in this example I set up for a files view: GitHub - texnixe/files-area, if you set the layout to table instead of list as in my example, there is no need to recreate everything from scratch. Example is complete with pagination.

Hi @texnixe,

Thanks for the example, but my case is slightly different.
The data I have comes from a file stored in the storage folder. So it’s not data from kirby.

And the code that I have is working as it should, my question was more if I’m using the lab components the right way?

Well, my point was more that you are rebuilding the component instead of using it. So if you want a table, you can use the table component and pass the data to it.

Hey @texnixe, I get your point :slight_smile:. If I try to pass the data to it, the pagination and limitation won’t work. Do you know of any working examples somewhere, perhaps?

1 Like

Thanks for the example!