vue-editable-cell

Demo

To run it locally clone this repo and:

cd demo
yarn
yarn serve

Install

yarn add @lucasbiguet/vue-editable-cell

Then import the component as a plugin:

import EditableCell from 'vue-editable-cell'

Vue.use(EditableCell)

Usage

The components works on any regular table and requires a TD element as target

Call the component just below the table and wrap both the table and the component in a div positioned relatively

The table rows must be of equal heights for the drag n drop box size to be calculated as expected

<div style="position: relative;">
  <table>
    <tr>
      <td></td>
      <!-- ... -->
    </tr>
  </table>

  <EditableCell
    :target="focusedTd"
    v-model="editableValue"
    :options="selectOptions"
    @drag="applyValueToAdjacentRows"
  />
</div>

API

Props

Name	Type	Required	Description
target	HTMLTableCellElement	true	The <td> element to target
value	[Number, String]	false	The value to bind to the input or select while in edit mode
options	Array	false	Options for the select; when set, the component will display a select instead of an input in edit mode. Must be an array of objects with label/value keys ie [{ label: 'January', value: '01' }, {...}]

Events

Name	Payload arguments	Description
drag	value, dragOffset	Triggers when drag n' drop ends
update	value	Triggers when value is updated in input or select

Methods

Name	Description
toggleEdition(editing)	Programatically trigger edit mode

Improvements

This package is in very early stage of development, features are missing, things will break unexpectedly, be prepared for an adventure!

• Drag n drop horizontally
• Write tests
• Improve documentation
• Handle rows / col sizes dynamically