Vue3 Datatable translate on dropdown select

dnz

How do we implement a dynamic translation using useI18n upon dropdown select?
My barebone code is similar to the following:

<template>
<DataTable
            class="table table-bordered w-100 nowrap display"
            ref="table"
            :columns="columnsHighest"
            :ajax="{ url: api_url, headers: { Authorization: token } }"
            :options="options"
          />
</template>

<script>
import DataTable from "datatables.net-vue3";
import DataTablesLib from "datatables.net";
import { useI18n } from "vue-i18n";

DataTable.use(DataTablesLib);

export default {
  name: "tableSheet",
  components: { DataTable },
  data() {
    return {
      options : {
        language: {
          url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/en-GB.json'
        },
        responsive: true,
        serverSide: true,
        processing: true,
        paging: true,
        lengthChange: false
      },
      data: [],
      columns: [
        { data: "id" , title: "Id" },
        { data: "name" , title: "Name" },
        { data: "birthday" , title: "Birthday" },
        { data: "address" , title: "Address"}
      ]
   }
}

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

allan

What dropdown? Do you mean you have a dropdown that allows the language to be selected? Does it reload the page, or update everything in place? DataTables doesn't have an API to change language after initialisation, so if it is all in place you would need to destroy the existing table and the initialise a new one with the new language options.

Allan

dnz

Hello. Yes, I have a dropdown that allows the language to be selected. It does not reload the page.

How do we programmatically re-initialize Datatables in Vue3 script?
Also, how about the headers, how do we change the header name depending on the language selected?

allan

How do we programmatically re-initialize Datatables in Vue3 script?

I'll be honest - I don't know. I've never had to do that before In DataTables normally you would call destroy(). You can access the API using the dt() method, but I doubt that is enough. You probably need to destroy the Vue component and create a new one.

Also, how about the headers, how do we change the header name depending on the language selected?

You are setting the title using columns.title, so you would need to run the title string through whatever i18n you are using.

Allan