Skip to content

Latest commit

 

History

History
83 lines (59 loc) · 2.55 KB

README.md

File metadata and controls

83 lines (59 loc) · 2.55 KB

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