vue-table 2 : how to add actions column?

Hello ,

How to add one extra column 'Actions' with two buttons: delete and update ?

<template>
    <v-client-table :selected-to="selectedRow" :data="rows" :columns="columns" :options="options"></v-client-table>
</template>

<script>

    export default {
        name: "Users",
        data() {
            return {
                selectedRow: [],
                columns: ['id', 'name', 'email', 'created_at','__checkbox:id'],
                rows: [],

                options: {
                    filterByColumn: false,
                    perPage: 10,
                    texts: {
                        filter: "Filter:",
                        filterBy: 'Filtrar por {column}',
                        count: ' '
                    },
                    dateColumns: ['created_at'],
                    dateFormat: 'YYYY-mm-dd',
                    datepickerOptions: {
                        showDropdowns: true,
                        autoUpdateInput: true,
                    },
                    pagination: {chunk: 10, dropdown: false},
                    filterable: ['name', 'email'],
                    headings: {
                        name: 'User name',
                        year: 'Email',
                        created_at: 'Created at',
                        id: 'ID',
                        action:'Action'
                    },
                }
            }

        },
        mounted() {
            this.getAllUsers()
        },
        methods: {
            getAllUsers() {
                axios.get(`/getAllUsers`)
                    .then(response => {
                        this.rows = response.data
                    })
            }
        },
    }
</script>

<style scoped>
</style>

cometads

6 years ago

Level 3

You should be able to add a generic "actions" column and then add a slot to define the content of that column for each row.

<template>
  <v-client-table :selected-to="selectedRow" :data="rows" :columns="columns" :options="options">
    <div slot="actions" slot-scope="{ row }">
      <a :href="'mailto:' + row.email">Email User</a>
    </div>
  </v-client-table>
</template>

<script>
export default {
  name: "Users",
  data() {
    return {
      selectedRow: [],
      columns: [
        "id",
        "name",
        "email",
        "created_at",
        "__checkbox:id",
        "actions"
      ],
      rows: [],

      options: {
        filterByColumn: false,
        perPage: 10,
        texts: {
          filter: "Filter:",
          filterBy: "Filtrar por {column}",
          count: " "
        },
        dateColumns: ["created_at"],
        dateFormat: "YYYY-mm-dd",
        datepickerOptions: {
          showDropdowns: true,
          autoUpdateInput: true
        },
        pagination: { chunk: 10, dropdown: false },
        filterable: ["name", "email"],
        headings: {
          name: "User name",
          year: "Email",
          created_at: "Created at",
          id: "ID",
          action: "Action"
        }
      }
    };
  },
  mounted() {
    this.getAllUsers();
  },
  methods: {
    getAllUsers() {
      axios.get(`/getAllUsers`).then(response => {
        this.rows = response.data;
      });
    }
  }
};
</script>

<style scoped>
</style>

2 likes

imsyuan

3 years ago

Level 1

@cometads Thanks. It works for me.

Please or to participate in this conversation.