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,
  dataCount: Number,
})

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)">Car Entry :</span> {{ dataCount }} </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>