Vue data passing component to component isn't working - vue.js

Question

I am trying to make a common table component for my project. So, I created a paginationtable.vue component as a master table. And trying to send column and row values using props. But my page can't render row values. But column values are not affecting. Here I am adding some codes.
PaginationTable.Vue:
<template>
<q-table :data="data" :columns="columns">
<template #body="props">
<slot v-bind="props" name="data"></slot>
</template>
</q-table>
</template>
<script>
export default {
name: "PaginationTable",
props: {
data: {
type: Array,
},
columns: {
type: Array,
},
},
};
</script>
Paginationtable.vue is my master table component where I am sending my data. Now adding codes for child component:
DashboardPage.vue:
<template>
<div class="q-pa-md">
<PaginationTableVue
title="Recent Transactions"
:data="data"
:columns="columns"
>
<template #columns="props">
<q-tr>
<q-td key="dateAndTime">
{{ props.row.dateAndTime }}
</q-td>
<q-td key="from">
{{ props.row.from }}
</q-td>
<q-td key="to">
{{ props.row.to }}
</q-td>
<q-td key="transactionType">
{{ props.row.transactionType }}
</q-td>
<q-td key="channel">
{{ props.row.channel }}
</q-td>
<q-td key="transactionAmount">
{{ props.row.transactionAmount }}
</q-td>
<q-td key="trasactionId">
{{ props.row.trasactionId }}
</q-td>
<q-td key="reference">
{{ props.row.reference }}
</q-td>
<q-td key="invoiceNo">
{{ props.row.invoiceNo }}
</q-td>
<q-td key="couponAmount">
{{ props.row.couponAmount }}
</q-td>
<q-td key="discountedAmount">
{{ props.row.discountedAmount }}
</q-td>
<q-td key="cashbackAmount">
{{ props.row.cashbackAmount }}
</q-td>
<q-td key="accountBalance">
{{ props.row.accountBalance }}
</q-td>
</q-tr>
</template>
</PaginationTableVue>
</div>
</template>
<script>
import PaginationTableVue from "src/components/table/PaginationTable.vue";
export default {
name: "DashboardPage",
components: {
PaginationTableVue,
},
data() {
return {
columns: [
{
name: "dateAndTime",
required: true,
label: "Date and Time",
align: "left",
field: "dateAndTime",
sortable: true,
style: "color:#464646;",
headerStyle: "color:#464646; font-weight: bold;",
},
{
name: "from",
align: "center",
label: "From",
field: "from",
sortable: true,
style: "color:#464646;",
headerStyle: "color:#464646; font-weight: bold;",
},
{
name: "to",
label: "To",
field: "to",
sortable: true,
style: "color:#464646;",
headerStyle: "color:#464646; font-weight: bold;",
},
{
name: "transactionType",
label: "Transaction Type",
field: "transactionType",
style: "color:#464646;",
headerStyle: "color:#464646; font-weight: bold;",
},
{
name: "channel",
label: "Channel",
field: "channel",
style: "color:#464646;",
headerStyle: "color:#464646; font-weight: bold;",
},
{
name: "transactionAmount",
label: "Transaction Amount",
field: "transactionAmount",
sortable: true,
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
style: "color:#464646;",
headerStyle: "color:#464646; font-weight: bold;",
},
{
name: "trasactionId",
label: "Trasaction Id",
field: "trasactionId",
style: "color:#464646;",
headerStyle: "color:#464646; font-weight: bold;",
},
{
name: "reference",
label: "Reference",
field: "reference",
style: "color:#464646;",
headerStyle: "color:#464646; font-weight: bold;",
},
{
name: "invoiceNo",
label: "Invoice No",
field: "invoiceNo",
style: "color:#464646;",
headerStyle: "color:#464646; font-weight: bold;",
},
{
name: "couponAmount",
label: "Coupon Amount",
field: "couponAmount",
style: "color:#464646;",
headerStyle: "color:#464646; font-weight: bold;",
sortable: true,
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
},
{
name: "discountedAmount",
label: "Discounted Amount",
field: "discountedAmount",
style: "color:#464646;",
headerStyle: "color:#464646; font-weight: bold;",
sortable: true,
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
},
{
name: "cashbackAmount",
label: "Cashback Amount",
field: "cashbackAmount",
style: "color:#464646;",
headerStyle: "color:#464646; font-weight: bold;",
sortable: true,
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
},
{
name: "accountBalance",
label: "Account Balance",
field: "accountBalance",
style: "color:#464646;",
headerStyle: "color:#464646; font-weight: bold;",
sortable: true,
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
},
],
data: [
{
dateAndTime: "09/10/19 6:15 P.M",
from: "017xxxxxxxx",
to: "017xxxxxxxx",
transactionType: "Refund",
channel: "App",
transactionAmount: 1200,
trasactionId: "XDFGJHNAG",
reference: "Reference Text",
invoiceNo: 90149124,
couponAmount: 10,
discountedAmount: 10,
cashbackAmount: 10,
accountBalance: 100000,
},
],
};
},
};
</script>
Now I am adding my outputted result where I am getting column values but not rows.