Translations

The default language of the Inertia Table package is English. However, you can easily translate the package into another language.

Inline translations

You can import the setTranslations() method from the inertiaui/table package and pass it an object with the translations you want to override.

Vue

import { setTranslations } from '@inertiaui/table-vue';

setTranslations({
    no_rows_selected: 'No rows selected',
    selected_rows: ':count of :total rows selected',
    // ...
});

React

import { setTranslations } from '@inertiaui/table-react';

setTranslations({
    no_rows_selected: 'No rows selected',
    selected_rows: ':count of :total rows selected',
    // ...
});

In addition to passing a literal string as a translation, you can also pass a function that returns the translation. The function receives an object with parameters that you can use in the translation.

setTranslations({
    selected_rows: (params) => `${params.count} of ${params.total} rows selected`,
})

You can also destructure the parameters in the function's signature:

setTranslations({
    selected_rows: ({ count, total }) => `${count} of ${total} rows selected`,
})

Storing translations in a separate file

You can also choose to store the translations in a separate file. For example, you can create a nl.json file in the resources/js directory of your project.

{
    "no_rows_selected": "Geen rijen geselecteerd"
}

Then, you can import the translations into your JavaScript file and pass them to the setTranslations() method:

Vue

import { setTranslations } from '@inertiaui/table-vue';
import nl from './nl.json';

setTranslations(nl);

React

import { setTranslations } from '@inertiaui/table-react';
import nl from './nl.json';

setTranslations(nl);

Available translations

Check out the source code of the package to see all the available translations. You can find them in the js/src/translations.js file: https://github.com/inertiaui/table/blob/main/vue/src/translations.js