grid

<vue-editable-grid
class="my-grid-class"
ref="grid"
id="mygrid"
:column-defs="columnDefs"
:row-data="rows"
row-data-key='shipmentId'
@cell-updated="cellUpdated"
@row-selected="rowSelected"
@link-clicked="linkClicked"
>
<template v-slot:header>
    Vue editable grid, by eledwinn
</template>
<template v-slot:header-r>
    Total rows: {{ rows.length }}
</template>
</vue-editable-grid>
export default {
  name: "ReservationImport",
  props: {
  id: { type: String, required: true },
  columnDefs: { type: Array, required: true },
  rowData: { type: Array, required: true },
  rowDataKey: { type: String, required: true },
  enableFilters: { type: Boolean, default: true },
  pageCount: { type: Number, default: 0 },
  itemHeight: { type: Number, default: 30 },
  virtualScrollOffset: { type: Number, default: 3 },
  onlyBorder: { type: Boolean, default: true }
  },
  data() {
    return {
      loading: true,
      ajaxLoading: true,
      layout: "list",
      statusList: [],
      search: [],
      paginationEnd: false,
      reservations: [],
      columnDefs = [
  { sortable: true, filter: true, field: 'eyeColor', headerName: 'Eye color', editable: true },
  { sortable: true, filter: true, field: 'name', headerName: 'Name', editable: true },
  { sortable: true, filter: true, field: 'registered', headerName: 'registered', type: 'date', format: 'MMM dd, yyyy', editable: true },
  { sortable: true, filter: true, field: 'age', headerName: 'Age', type: 'numeric', editable: true },
  { sortable: true, filter: true, field: 'balance', headerName: 'Balance', type: 'currency', editable: true },
  { sortable: true, filter: true, field: 'happiness', headerName: 'Happiness percent', type: 'percent', editable: true },
  { sortable: true, filter: true, field: 'isActive', headerName: 'Is active', type: 'boolean', editable: true },
  { sortable: true, filter: true, field: 'picture', headerName: 'Picture', type: 'link', editable: false }
]
    };
  },
  computed: {},
  created() {}
}