![](https://private-user-images.githubusercontent.com/5573927/238064060-576fdb33-0456-4b3a-8100-25dda04a074f.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg3MzcyNDMsIm5iZiI6MTcxODczNjk0MywicGF0aCI6Ii81NTczOTI3LzIzODA2NDA2MC01NzZmZGIzMy0wNDU2LTRiM2EtODEwMC0yNWRkYTA0YTA3NGYuZ2lmP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYxOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MThUMTg1NTQzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MmIxZGQ2NDNiYjBjZGMwNjMxMzFmY2UwYzVkMDczMTIwYjM4NGI1MTdlNDJmMmZmY2YxOTE5NmYzM2RjMGQ2YyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.FvyS_QBenOPHrMMH1ZcXwIUsUftcymuTJ0u3CRi2598)
Compatible with Quasar UI v2 and Vue 3.
Please give a star if you enjoy the extension.
The most important file just only one: ui/src/components/Component.vue
I just share the idea to you. And you may fork and copy the file whatever you want.
-
/ui - standalone npm package
-
/app-extension - Quasar app extension
quasar ext add inline-edit-table
Quasar CLI will retrieve it from NPM and install the extension.
quasar ext remove inline-edit-table
<template>
<div>
<q-inline-edit-table bordered :loading="loading" :rows="rows" :columns="columns" row-key="name"
:rows-per-page-options="[0]" no-data-label="☝️ No data. Please add an entry. ☝️"
separator="vertical" @removeRow="removeRowListener" @editRow="editRowListener" @confirmRow="confirmRowListener" @createRow="createRowListener">
</q-inline-edit-table>
</div>
</template>
<script>
export default {
name: "TestingTable",
data() {
return {
loading: false,
columns: [
{ name: "name", label: "name", field: "name", type: 'string', editable: true, requireWhenCreate: true, align: 'left' },
{ name: "price", label: "price", field: "price", type: 'number', editable: true, requireWhenCreate: true, decimalPlaces: 2, align: 'left' },
{ name: "percent", label: "percent", field: "percent", type: 'percentage', editable: true, requireWhenCreate: true, decimalPlaces: 2, align: 'left' },
],
rows: [{ name: "Apple", price: 15, percent: 0.6 }, { name: "Orange", price: 10, percent: 0.2 }]
}
},
methods: {
editRowListener(row) {
console.log("editRow event received")
},
removeRowListener(row) {
console.log("removeRow event received")
},
confirmRowListener(row, newValue) {
console.log("confirmRow event received")
},
createRowListener(value) {
console.log("createRow event received")
}
}
}
</script>
Actually it is a q-table wrapper, the props are the same as q-table.
And if you adding slot, it will pass to q-table too. So you can simply make use of q-table slot.
Important:
- The name of column must be SAME as your field of your data.
- v-slot:body and v-slot:bottom-row of q-table is prohibited; since the inline-edit-table has make use of these 2 slots already
Emit Event:
- removeRow(row)
- editRow(row)
- confirmRow(row, newValue)
Type:
- string
- number
- percentage (show as XX% , but save as 0.XX)
Editable:
- editable: true (if you want the field appear as q-input when enter edit mode)
Create Entry in bottom-row:
- requireWhenCreate: true
MIT (c) royroycat