Edit cell(s)?

[PrimozRome]

Is there a plan to ad support for editing cell (or multiple cells at same) values with a callback for handling save logic?

[ratiw]

No real plan for that. As I use dedicated modal window for adding/editing data in the row.

[PrimozRome]

Modal is then almost the same as opening a new page with edit form for that record...

We are developing a business application which relies heavily on tables. There is often a need to update some columns on a group (multiple) of records. Doing this by opening modal/page to edit a record is very time consuming operation.

Thats why in-line editing in table comes in very handy. Even selecting group of records in column and edit more at once is very nifty feature.

For example here you can see out Angular grid component which is used in our client application and shows similar editing functionalities >> https://www.youtube.com/watch?v=On9eSj_4xzo.

I don't say we need everything but the editing would be 👍.

[ratiw]

You can implement an editable input component and use Vuetable's __component special field to use that component.

[rubinsh]

You can also do that using the __slot option and add handlers to save the data

[zaqpiotr]

This works for me

<template>
    <vuetable ref="vuetable"
              :api-mode="false"
              :data=gridData
              :fields="fields"
    >

        <template slot="inputField" scope="props">
            <div class="custom-actions">
                <input/>
            </div>
        </template>

    </vuetable>
</template>
<script>
    import Vuetable from 'vuetable-2'

    export default {
        components: {
            Vuetable
        },
        data() {
            return {
                gridData : [
                    {
                    id:1,
                    }
                ],
                fields: [
                    {
                        name: '__slot:inputField',
                        title: 'Input Field'
                    }
                ]
            }
        }

    }
</script>

[CDT]

Advice: use html's built-in property contentEditable:

// field:
{
    title: 'name',
    name: 'name',
    editable: true // this is a custom field
  }

<vuetable ref="vuetable"
      @vuetable:cell-clicked="onCellClick"
/>

onCellClick ({data, field, event}) {
      if (field.editable && cell.contentEditable != 'true') {
        console.log(data, field, event)
        // editable cell:
        let cell = event.target
        cell.contentEditable  = true
        cell.addEventListener('blur', function() {
          data[field.name] = cell.innerText
        });
        cell.focus()
      }
    },