Button Opration

[oendnsk675]

i'm sorry for advance, i'm just dont find correctly the documentation about add custom button action like in the demo column oprations, i want make something that, how do that? Thankyou

[Alex-Taf]

Add to headers columns definition a new field, name "operation", like this example:

const headers: Header[] = [
      { text: "Название теста", value: "testname" },
      { text: "Operation", value: "operation"}
];

after, define slot template into an <EasyDataTable></EasyDataTable> tag, like this:

<template #item-operation="{ id }">
            <div class="operation-wrapper">
                <v-icon
                    icon="mdi-delete-off"
                    @click="purgeTest(id)"
                ></v-icon>
            </div>
</template>

good luck)

[diegoOG09]

you can do something like this:

create a new header, in my case is called "ACCIONES" and value "action", the value field is important.

const headers = ref([
  { text: "LUGAR", value: "title" },
  { text: "ESTATUS", value: "status"},
  { text: "UBICACION", value: "location"},
  { text: "ACCIONES", value: "action"}
])

then create the EasyDataTable component in your template tag and inside put another template tag with #item-{your value}="{ }" as parameter and use the icons you want, in my case I like the fontawesome icons:

<EasyDataTable :headers="headers" :items="items" show-index table-class-name="customize-table">
  <template #item-action="{  }">
    <a> <i class="fa-solid fa-trash"></i> </a>
    <a> <i class="fa-solid fa-pen-to-square"></i> </a>
  </template>
</EasyDataTable>

note that the braces after #item-action are empty, this because I really don't know what put there but it works for me.

I hope this helps you

[ContrerasHDaniel]

you can do something like this:

create a new header, in my case is called "ACCIONES" and value "action", the value field is important.

const headers = ref([
  { text: "LUGAR", value: "title" },
  { text: "ESTATUS", value: "status"},
  { text: "UBICACION", value: "location"},
  { text: "ACCIONES", value: "action"}
])

then create the EasyDataTable component in your template tag and inside put another template tag with #item-{your value}="{ }" as parameter and use the icons you want, in my case I like the fontawesome icons:

<EasyDataTable :headers="headers" :items="items" show-index table-class-name="customize-table">
  <template #item-action="{  }">
    <a> <i class="fa-solid fa-trash"></i> </a>
    <a> <i class="fa-solid fa-pen-to-square"></i> </a>
  </template>
</EasyDataTable>

note that the braces after #item-action are empty, this because I really don't know what put there but it works for me.

I hope this helps you

You can replace "{ }" with item and you can access the properties of the whole item. You saved me btw, was scratching my head looking how to conditionally render buttons, thanks!