2.0.1 • Published 6 years ago
detail_row_editor v2.0.1
Vuetable-2 Detail row editor
Details row editor meant for Vuetable-2
Usage
Inside template
<vuetable ref="vuetable"
...
detail-row-component="detail-row"
...
></vuetable>Inside script
import DetailRowEditor from 'detail-row-editor/src/components/DetailRowEditor'
Vue.component('detail-row', DetailRowEditor);Properties
Due to the fact that vuetable passes only two props to it's details row (rowData and rowIndex) any other properties needs to be passed this way
Vue.prototype.detailRowOptions = {
onSave: (data) => {
return new Promise((resolve) => {
// Do stuff using data. Unless autoHideOnSaveOrCancel is set to false, the details row will be hidden when this promise is resolved
resolve();
});
};
};| Name | Type | Default value | Description |
|---|---|---|---|
| autoRowUpdateAfterChange | boolean | true | If set to true, the parent row will be updated on every change |
| autoRowUpdateAfterSave | boolean | true | If set to true, the parent row will be updated after save |
| autoHideOnSaveOrCancel | boolean | true | If set to true, the details row will be automatically hidden after save / cancel |
| onSave | function | null | Function which will be called on save. It takes data as an argument and it is required to return a Promise object. See example code for tips on error handling. |
| onCancel | function | null | Function which will be called on cancel. It is required to return a Promise object. |
| header | Component | null | Header component |
| footer | Component | null | Custom footer component |
| showFooter | boolean | true | Whenever footer (buttons) should be hidden |
| buttonClasses | String | '' | Classes which will be added to save / cancel buttons (separated by space) |
| boldLabel | boolean | false | Whenever field title should be bolded |
| fields | array | [] | Must be set in order for editor to work |
Field properties
Fields also should have certain properties specified in order to be editable.
| Name | Type | Default value | Description |
|---|---|---|---|
| editable | boolean | false | Important! You must set this value to true in order for it to be editable |
| type | String | text | Any valid HTML input type will do (note that no additional attributes will be added, so there is no point in specifying a radio type for example) |
| detailRowComponent | Component | null | Custom field component. See example for more detailed informations |
Example code
# clone project
git clone https://github.com/kamilbeben/detail-row-editor.git
cd detail-row-editor
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev