parkirin/resources/js/pages/test-transaction/Entry.vue

<script setup>
import { useForm } from '@inertiajs/inertia-vue3'
import AppPagination from '@/components/AppPagination.vue'

import { InTable } from './TableHeader'

defineProps({
  data: Object,
})

const form = useForm({})

const submit = () => {
  form.post(route('test-transactions.store'))
}
</script>
<template>
  <Card>
    <template #title> <h1>Entry</h1> </template>
    <template #content>
      <DataTable
        responsiveLayout="scroll"
        columnResizeMode="expand"
        :value="data.data"
        :rowHover="true"
        :stripedRows="true"
      >
        <template #header>
          <span style="color: var(--primary-color)">Maksimal ditampilkan :</span> 5
          <br />
          <span style="color: var(--primary-color)">Ditampilkan :</span>
          {{ Object.keys(data.data).length }}
        </template>

        <Column v-for="inTable in InTable" :field="inTable.field" :header="inTable.header" :key="inTable.field" />
      </DataTable>

      <AppPagination :links="data.links" />
    </template>
    <template #footer>
      <div class="flex flex-column md:flex-row justify-content-end">
        <Button
          label="Car Entry"
          icon="pi pi-check"
          class="p-button-outlined"
          :disabled="form.processing"
          @click="submit"
        />
      </div>
    </template>
  </Card>
</template>