xxxxxxxxxx1
<template>2
<div class="d-flex justify-content-end mb-4">3
<MDBInput v-model="inputsSearch" label="Search" :disabled="inputsEdit" />4
<MDBBtn5
color="primary"6
size="sm"7
class="ms-3"8
@click="inputsEditorRef?.addRow()"9
:disabled="inputsEdit"10
>11
<MDBIcon icon="plus"/>12
</MDBBtn>13
</div>14
<hr />15
<MDBTableEditor16
v-model:dataset="inputsData"17
:search="inputsSearch"18
v-model:edit="inputsEdit"19
ref="inputsEditorRef"20
:pagination="false"21
/> 22
</template>1
1
xxxxxxxxxx1
<script setup>2
import { MDBTableEditor } from "mdb-vue-table-editor"3
import { MDBInput, MDBBtn, MDBIcon } from 'mdb-vue-ui-kit'4
import { ref } from 'vue'5
6
const typeOptions = [7
'Admitter', 'Attender', 'Callback Contact', 8
'Consultant', 'Discharger', 'Escort', 'Referrer', 9
'Secondary Performer', 'Primary Performer', 10
'Participation', 'Translator', 'Emergency'11
]12
const statusOptions = ['Accepted', 'Declined', 'Tentative', 'Needs Action']13
14
// TABLE EDITOR REFS15
const inputsEditorRef = ref(null);16
const inputsSearch = ref("");17
const inputsEdit = ref(false)18
const inputsData = ref({19
columns: [20
{21
width: 200,22
label: "Name",23
field: "name",24
},25
{26
width: 175,27
sort: false,28
defaultValue: 'Attender',29
options: statusOptions,30
inputType: "select",31
label: "Status",32
field: "status",33
},34
{35
width: 225,36
sort: false,37
defaultValue: 'Needs Action',38
options: typeOptions,39
inputType: "select",40
label: "Type",41
field: "type",42
}43
],44
rows: []45
})46
47
</script> Console errors: 0