Translations

Inertia Table ships with English copy for its built-in UI strings: pagination labels, "no rows selected", filter operators, and so on. Override any or all of them with setTranslations() to localize the table into any language. Translations may be plain strings with :placeholder parameters, or callback functions that receive the parameters and return the rendered string.

Inline Translations

Import setTranslations() from the @inertiaui/table package and pass it an object with the translations you want to override. You may register it globally in your app.js file:

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 literal strings, you may pass a function that returns the translation. The function receives an object of parameters to use in the output.

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

You may 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 may store the translations in a separate file. For example, create a nl.json file in your resources/js directory:

{
    "no_rows_selected": "Geen rijen geselecteerd"
}

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

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)

Date Picker Translations v4

The date picker's month names, weekday abbreviations, AM/PM labels, and placeholder text are also translatable via setTranslations(). Prefix each key with date_picker_:

setTranslations({
    date_picker_months: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'],
    date_picker_months_short: ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
    date_picker_days: ['Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za'],
    date_picker_am: 'VM',
    date_picker_pm: 'NM',
    date_picker_select_date: 'Selecteer datum',
})

You only need to override the keys you want to change. The available keys and their defaults:

Key	Default	Type
date_picker_months	['January', ..., 'December']	string[]
date_picker_months_short	['Jan', ..., 'Dec']	string[]
date_picker_days	['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']	string[]
date_picker_am	AM	string
date_picker_pm	PM	string
date_picker_select_date	Select date	string

Available Translations

See the source code for the full list of available table translation keys.