Action Buttons

[abdullah-abunada]

Hello,

Any idea about how we can add custom vue component as action in datable? for example why this component did not support slot for row to allow us to add custom actions like dropdown list.

Best,

[AllanJard]

You can't currently add a Vue component inside a DataTable - sorry.

[monster010]

The question is will it come in and if so, when?

[AllanJard]

Due to the way it is currently implemented, no, I'm afraid that this ability will not be coming any time soon.

[conwayatmundotca]

I created the following component for myself..

import {createVNode, render} from "vue";
import DataTablesLib from 'datatables.net';

/**
 *
 * @name renderVueComponent
 * @memberOf DataTablesLib
 * @param {Object} component - vue component
 * @param {Object} meta - meta infomation from column
 * @param {Object|false} [props] - object of props, if false (default) then row data is used
 * @param {boolean} includeTableAndMeta
 * @returns {String}
 */
function renderVueComponent(component, meta, props = false, includeTableAndMeta = false) {
    props = props ? props : this.cell(meta.row, meta.col).row().data();
    if (includeTableAndMeta) {
        props._table = this;
        props._meta = meta;
    }
    let nodes = this.cell(meta.row, meta.col).nodes();
    if (nodes.length > 0) {
        this.on('draw', () => render(createVNode(component, props), nodes[0]));
    }
    return '';
}

DataTablesLib.Api.register('renderVueComponent', renderVueComponent);

Here are some snipets that i have in the page component where I have datatables....

import TableOptions from "@/Components/RegistrationRequests/TableOptions.vue";

<DataTable
      :ajax="ajax"
      :options="options"
      :columns="columns"
      ref="datatable"
  >

onMounted(() => {
  table = datatable.value.dt;
})
static columns = [
//...other columns
{
    mData: 'id',
    mRender: (data, type, row, meta) => table.renderVueComponent(TableOptions, meta, {id: data})
  }
]

TableOptions is a component with 3 buttons.

The only instance where it doesn't work is where I change the ajax source dynamically. It seems to be related to this.cell not referencing the correct node.

I'm sure there are opportunities to make this a bit better.

[conwayatmundotca]

Writing this post gave me some renewed energy to look at the ajax issue....

const ajax = {
  url: registrations_list_endpoint,
  data:function(d){
    d.format = 'dataTables',
    d.filterQuery = props.type
  }
};

onUpdated(()=>{
  table.ajax.reload();
});

[coyy]

@AllanJard version with template columns not working after pagination. @conwayatmundotca Your code only works when the column index = 0, any column after that doesn't work

My options config:

import TableAction from "@/Components/TableAction.vue";

options: {
  columns: [
  //...other columns
   { 
      data: '',
      title: 'Action'
    }
  ],
  fnDrawCallback: function (dt) {
      let rows = dt.api.rows();
      let headers = dt.api.columns().header();
      for (let i = 0; i < headers.length; i++) {
        if (headers[i].innerText == 'Action') {
          rows[0].forEach((item) => {
            let props = dt.api.row(item).data()
            let node = dt.api.cell(item, i).node()
            if (node) {
              dt.api.on('draw', () => render(createVNode(TableAction, props), node));
            }
          });
        }
      }
    }
}

[AllanJard]

Are you using the unreleased and undocumented version? If so, can you link to a test case showing the issue so I can look into it.

[coyy]

Are you using the unreleased and undocumented version? If so, can you link to a test case showing the issue so I can look into it.

I don't have the test version online at the moment. But I see you use ColumnDefs. I tested it locally and it doesn't work after switching pages

<DataTable :options="configTableFile">
    <template #column-5="props">
      TEST
    </template>
</DataTable>