@lucasbiguet/vue-editable-cell NPM

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' }, {...}]`