<style>

#app {

  font-family: Roboto, Helvetica, Arial, sans-serif;

}

</style>

<script>

  import { MDBDatatable } from "mdb-vue-ui-kit";

import { ref } from "vue"

​

export default {

  name: "App",

  components: {

    MDBDatatable

  },

  props: {

    msg: String

  },

  setup(props) {

    const searchData = ref("");

    const allRecords = {

      columns: [

        {label: "Transaction Number", field: "transaction_number"},

        {label: "Errors Count", field: "nr_errors"},

        {label: "Actual Transaction Number", field: "actual_transaction_number"},

        {label: "Value Date", field: "value_date"},

        {label: "Type", field: "type"},

        {label: "Amount", field: "amount"}

      ],

      rows: [

        {

          transaction_number: "$t2",

          nr_errors: 0,

          actual_transaction_number: 8719,

          value_date: "2023-02-01",

          type: "Principal",

          amount: "-1043210.1100"

        },

        {

          transaction_number: "$t2",

          nr_errors: 0,

          actual_transaction_number: 8720,

          value_date: "2023-02-01",

          type: "Coupon",

          amount: "30416.6700"

        }]

    }

​

    return {

      searchData,

      allRecords

    };

  },

};

</script>