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