[Feature] Adding entries

[sabatale]

Great library, thanks! I'm wondering if you had any recommendations on how to have an additional option allowing users to add entries into the table? A good implementation example would be https://quintet.io/vue-quintable-demo/ (Add/Remove/Move example).

[MicroDroid]

You'll need to implement the form yourself above the table and append to the rows array from there.

For deletion, you can embed a button within the table using slots, checkout the docs for an example on that.

Let me know if this helps.

[sabatale]

Thanks for the quick update @MicroDroid . I think it would be best to add a new custom button "Add" (similarly to the one on your main screenshot, which seems to be "Copy" but does not appear in the docs) and then call a modal.

However when trying to setup the custom button, all clicks get undefined (e.g. the Delete button from the docs) and I get the following: [Vue warn]: Invalid handler for event "click": got undefined / vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property '_wrapper' of undefined

Code:

<template>
  <datatable
    title=""
    :columns="tableColumns1"
    :rows="tableRows5"
    :clickable="false"
    :customButtons='[
      {
        hide: false, // Whether to hide the button
        icon: "add", // Materialize icon
        onClick: console() // Click handler
      }
    ]'
  >
    <th slot="thead-tr">
      Actions
    </th>
    <template slot="tbody-tr" scope="props">
      <td>
        <button
          class="btn darken-2 waves-effect waves-light compact-btn"
        >
          <i class="material-icons white-text">edit</i>
        </button>
        <button
          class="btn red darken-2 waves-effect waves-light compact-btn"
          @click="e => deleteItem(props.row, e)"
        >
          <i class="material-icons white-text">delete</i>
        </button>
      </td>
    </template>
  </datatable>
</template>

<script>
import DataTable from 'vue-materialize-datatable'

export default {
  components: {
    datatable: DataTable
  },
  data() {
    return {
      tableColumns1: [
        {
          label: 'Character name',
          field: 'charName',
          numeric: false,
          html: false
        },
        {
          label: 'First appearance',
          field: 'firstAppearance',
          numeric: false,
          html: false
        },
        {
          label: 'Created by',
          field: 'createdBy',
          numeric: false,
          html: false
        },
        {
          label: 'Voiced by',
          field: 'voicedBy',
          numeric: false,
          html: false
        }
      ],
      tableRows5: [
        {
          charName: 'Abu',
          firstAppearance: 'Alladin (1992)',
          createdBy: 'Joe Grant',
          voicedBy: 'Frank Welker'
        },
        {
          charName: 'Magic Carpet',
          firstAppearance: 'Alladin (1992)',
          createdBy: 'Randy Cartwright',
          voicedBy: 'N/A'
        },
        {
          charName: 'The Sultan',
          firstAppearance: 'Alladin (1992)',
          createdBy: 'Navid Negahban',
          voicedBy: 'Douglas Seale'
        }
      ]
    }
  },
  methods: {
            deleteItem(row, e) {
                const index = this.tableRows5.findIndex(x => x.charName === row.charName);
                this.tableRows5.splice(index, 1);
            },
      console() {
        console.log("dummy")
      }
        }
}
</script>

<style>
.red {
  color: red;
}
</style>

[MicroDroid]

Hi, the last time I used this library was like 250,000,000 years ago so I can't quickly validate your code, but in customButtons in your template, change console() to console to get rid of the undefined error.

What you are doing now is you're calling console using the parenthesis () operator, the function returns undefined and that is getting assigned as the handler.

Removing the parenthesis () causes the function itself to get assigned as the handler.