I want to use Editor extension in my vue 3 project. How do I use it?

chita

I want to use editor, one of the extension features of datatable, in my vue 3 project. However, all the descriptions or examples on the official page are based on jquery and do not have any descriptions related to vue. I've tried many ways, but they all failed. So I want to know how to use editor in vue 3 project.

allan

Hi,

Have you seen this example which, while it doesn't show Editor, it does how the Vue component we publish for DataTables and use of extensions such as Buttons.

Using Editor in Vue would be done in exactly the same way. npm install Editor and then import it and use it in the same way as the examples on this site - e.g.:

import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';
import 'datatables.net-buttons';
import 'datatables.net-buttons/js/buttons.html5';
import 'datatables.net-responsive';
import 'datatables.net-select';
import '@datatables.net/editor-dt';

DataTable.use(DataTablesCore);

const editor = new DataTable.Editor({
    ajax: '../php/staff.php',
    fields: [
        {
            label: 'First name:',
            name: 'first_name'
        },
        // ...
    ],
    table: '#example'
});
 
new DataTable('#example', {
    ajax: '../php/staff.php',
    buttons: [
        { extend: 'create', editor },
        { extend: 'edit', editor },
        { extend: 'remove', editor }
    ],
    columns: [
        { data: 'first_name' },
       // ...
    ],
    dom: 'Bfrtip',
    select: true
});

Let me know how you get on with it.

I'll look at adding an example on our site for that.

Regards,
Allan

chita

I set up the code as above and installed editor, but the error TypeError: DataTable.Editor is not a constructor appears in the Web Administrator tool. Is there an example of actually using editor to add features to the data table?

allan

There isn't an example of Vue with Editor yet. As I noted I need to look into doing that.

Try:

import Editor from '@datatables.net/editor-dt';

then

const editor = new Editor( ... );

Editor should attach itself to the DataTable object so I'm not sure what is going wrong there, but it will return itself, so my suggestion here should do the job.

From your other thread it sounds like you want to make changes to the table's data without an Ajax submit. Is that correct? If so, have a look at this example which shows how to do that (not Vue based, but the key is simply that the ajax option isn't given - that would apply for using it in Vue as well).

Allan

chita

<script setup>
    import DataTable from 'datatables.net-vue3';
    import DataTablesCore from 'datatables.net';
    import Editor from '@datatables.net/editor-2023-09-13-dt';
    import 'datatables.net-buttons';
    import 'datatables.net-buttons/js/buttons.html5';
    import 'datatables.net-responsive';
    import 'datatables.net-select';
    import 'datatables.net-datetime';
     
    DataTable.use(DataTablesCore);
    
    const editor = new DataTable.Editor({
        fields: [
            {
                label: 'First name:',
                name: 'first_name'
            },
            // ...
        ],
        table: '#example'
    });
    
    const tables = new DataTable('#example', {
        buttons: [
            { extend: 'create', editor },
            { extend: 'edit', editor },
            { extend: 'remove', editor }
        ],
        columns: [
          {
            data: null,
            render: data => data.first_name + ' ' + data.last_name
          },
          { data: 'position' },
          { data: 'office' },
          { data: 'extn' },
          { data: 'start_date' },
          { data: 'salary' }
        ],
        dom: 'Bfrtip',
        select: true
    });
</script>

The above-mentioned error continues to occur. The current <script> situation. What's the problem?

chita

Is the above code not available in the .vue file?

allan

If you change:

const editor = new DataTable.Editor({

to:

const editor = new Editor({

I think that should address it.

Allan

chita

The existing error is gone, but a new error called Uncaught (inpromise) TypeError: DataTable is not a constructor...

allan

Doh - I was forgetting how the Vue component works. You use the <DataTable> component in the template, not as a constructor. Try this:

<script setup>
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';
import Editor from '@datatables.net/editor-2023-09-13-dt';
import 'datatables.net-buttons';
import 'datatables.net-buttons/js/buttons.html5';
import 'datatables.net-responsive';
import 'datatables.net-select';
 
DataTable.use(DataTablesCore);
 
const editor = new Editor({
    ajax: '../php/staff.php',
    fields: [
        {
            label: 'First name:',
            name: 'first_name'
        },
        // ...
    ],
    table: '#example'
});

const columns = [
  { data: 'name', title: 'Name' },
  // ...
];

const options = {
  responsive: true,
  dom: 'Bfrtip',
  select: true,
  buttons: [
    { extend: 'create', editor },
    { extend: 'edit', editor },
    { extend: 'remove', editor }
  ],
};
</script>

<template>
    <DataTable
        :columns="columns"
        :options="options"
        ajax="/php/staff.php'"
        class="display"
    />
</template>

Allan

chita

Wow! The table is showing normally using the above code! Thank you so much!! Excuse me, but may I ask you one more question? How do I use the inline editing function in the code above? I'm explaining it in that example, but I don't know how to add it.

allan

You need a reference to the DataTables API instance for the table. you can get that as described in the manual here. There is an example linked there too.

Then, use

table.on('click', 'tbody td:not(:first-child)', function (e) {
    editor.inline(this);
});

where table is the API reference.

Allan

chita

The current state of <script> is like this, and this will result in the error Uncaught (in prompt) TypeError: table.on is not a function.

<script setup>
import { onMounted, ref } from 'vue';
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';
import Editor from '@datatables.net/editor-2023-09-13-dt';
import 'datatables.net-buttons';
import 'datatables.net-buttons/js/buttons.html5';
import 'datatables.net-responsive';
import 'datatables.net-select';
import 'datatables.net-datetime';
import 'datatables.net-colreorder';
      
DataTable.use(DataTablesCore);

let dt;
const table = ref();

onMounted(function () {
  dt = table.value.dt;
});
     
const editor = new Editor ({
  fields: [
    { label: 'Name:', name: 'name' },
    { label: 'Id', name: 'id' },
  ],
  idSrc: 'id',
  table: '#example'
});
     
const columns = [
  { data: 'checkbox', title: '', className: 'select-checkbox', orderable: false },
  { data: 'name', title: 'Name' },
  { data: 'id', title: 'Id' },
];

const options = {
  responsive: true,
  orderMulti: false,
  order: [[1, 'asc']],
  dom: 'Bfrtip',
  select: {
    style: 'os',
    selector: 'td:first-child'
  },
  buttons: [
    { extend: 'create', editor },
    { extend: 'edit', editor },
    { extend: 'remove', editor }
  ],
  colReorder: true,
};

const data = [
  {
    checkbox: '',
    name: 'pjh',
    id: 'chita',
  },
  {
    checkbox: '',
    name: 'pjh2',
    id: 'chita2',
  }
];

table.on('click', 'tbody td:not(:first-child)', function(e) {
  editor.inline(this);
});
</script>

allan

With that code you DataTable API instance is the variable dt:

onMounted(function () {
  dt = table.value.dt;
});

You would use dt.on(...).

This example shows the API being used.

Allan