How can I add a button inside a column called actions

Eddxx

My Controller

class ExpedienteEmpleadoController extends Controller
{
    public function index()
    {

        $expedientes = Expediente::all();

        return Inertia::render('Expedientes/ExpedienteEmpleado', ['expedientes' => $expedientes]);
    }

My Component

const props = defineProps({
  expedientes: {type: Object}
})

const columns1 =  ref([]);
const buttons1 = ref([]);

columns1.value = [
  {data: null, render:function(data,type,row,meta)
  {return (meta.row+1)}},
  {data: 'titulo'},
  {data: 'estado'},
  {data: 'id_region'},
  {data: 'created_at'},

];

This is where I want to put it

    <DataTable :data="expedientes" :columns="columns1" class="w-full row- compact border border cell-border border-gray-800" :options="{responsive:true, autoWidth:false, dom:'Bfrtip', buttons:buttons1}">
        <thead>
            <tr>
                <th>ID</th>
                <th>Nombre</th>
                <th>Estado</th>
                <th>Region</th>
                <th>Creado</th>
                <th class="mr-2">Acciones</th>
              </tr>  
          </thead>
          <!-- <tbody>
            <tr v-for="expediente, id in expedientes" :key="id">
              <td>{{ expediente.id }}</td>
              <td>{{ expediente.titulo }}</td>
              <td>{{ expediente.estado }}</td>
              <td>{{ expediente.id_region }}</td>
              <td>{{ expediente.created_at }}</td>
              <td>
                <a class="btn btn-primary mr-4" :href="'/expedientes/MostrarExpediente'"><i class="fa-solid fa-file-pdf px-2"></i>Ver Expediente</a>
                <a class="btn btn-warning mr-4" :href="route('expedientes.edit', expediente.id)"><i class="fa-solid fa-user-pen px-2"></i>Editar</a>
                <Button class="btn btn-danger" @click="$event => deleteExp(expediente.id)" href=""><i class="fa-solid fa-trash px-2"></i>Eliminar</Button>
              </td>
            </tr>
          </tbody>   -->
      </DataTable>

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

Looks like you are adding directly in HTML. Does it not work?

You could use columns.defaultContent like this example:
https://live.datatables.net/xijecupo/1/edit

Or you can use columns.render. See this example.

If you still need help please post a link to your page or a test case showing what you have so we can offer more specific suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

Looking at your config it looks like you might need to add a column to columns setting columns.data to null. For example:

columns1.value = [
{data: null, render:function(data,type,row,meta)
{return (meta.row+1)}},
{data: 'titulo'},
{data: 'estado'},
{data: 'id_region'},
{data: 'created_at'},
{data: null}
];

Kevin

allan

At the moment it isn't actually possible to have a Vue component as an element inside a DataTable. That is something that I'm working on fixing. Just now you can only have plain data / HTML. So your Vue <Button> wouldn't work, but using a renderer to create a button would. It would just be a bit tricky to wire in Vue event handlers.

As I say, this is something I'm working on addressing.

Allan

Eddxx

Excellent thank, you very much