Pantanal Grid

Appearance

Internationalization (i18n) ​

Pantanal Grid supports multiple languages and customizable messages for all UI elements.

English (en)

Default English locale. All UI text is displayed in English.

ID
Name
Price
Category
Stock
1
Product A
$29.99
Electronics
150
2
Product B
$49.99
Clothing
75
3
Product C
$19.99
Accessories
200
4
Product D
$39.99
Electronics
50
Showing 1-4 of 4 items
Showing 1-4 of 4 items

Spanish (es)

Spanish locale. All UI text is displayed in Spanish (página, siguiente, anterior, etc.).

ID
Name
Price
Category
Stock
1
Product A
$29.99
Electronics
150
2
Product B
$49.99
Clothing
75
3
Product C
$19.99
Accessories
200
4
Product D
$39.99
Electronics
50
Mostrando 1-4 de 4 elementos
Mostrando 1-4 de 4 elementos

Portuguese (pt)

Portuguese locale. All UI text is displayed in Portuguese (página, próximo, anterior, etc.).

ID
Name
Price
Category
Stock
1
Product A
$29.99
Electronics
150
2
Product B
$49.99
Clothing
75
3
Product C
$19.99
Accessories
200
4
Product D
$39.99
Electronics
50
Mostrando 1-4 de 4 itens
Mostrando 1-4 de 4 itens

Custom Messages

Override default messages by providing a custom messages object. You can customize any UI text.

ID
Name
Price
Category
Stock
1
Product A
$29.99
Electronics
150
2
Product B
$49.99
Clothing
75
3
Product C
$19.99
Accessories
200
4
Product D
$39.99
Electronics
50
Showing 1-4 of 4 items
Showing 1-4 of 4 items

Built-in Locales ​

Pantanal Grid includes built-in support for:

  • English (en) - Default locale
  • Spanish (es) - Español
  • Portuguese (pt) - Português

Using Locales ​

Set the locale prop to change the language:

vue
<!-- English -->
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  locale="en"
/>

<!-- Spanish -->
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  locale="es"
/>

<!-- Portuguese -->
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  locale="pt"
/>

Custom Messages ​

Override default messages by providing a custom messages object:

vue
<script setup lang="ts">
import { PantanalGrid, type Messages } from '@pantanal/grid'

const customMessages: Messages = {
  noRecords: 'No hay datos disponibles',
  filter: 'Filtrar',
  clear: 'Limpiar',
  page: 'Página',
  of: 'de',
  itemsPerPage: 'Elementos por página',
  first: 'Primero',
  previous: 'Anterior',
  next: 'Siguiente',
  last: 'Último',
  excel: 'Exportar a Excel',
  pdf: 'Exportar a PDF',
  // ... more messages
}
</script>

<template>
  <PantanalGrid
    :rows="rows"
    :columns="columns"
    key-field="id"
    :messages="customMessages"
  />
</template>

Available Message Keys ​

See the Messages API for a complete list of all customizable message keys.

Dynamic Locale Switching ​

You can change the locale dynamically:

vue
<script setup lang="ts">
import { ref } from 'vue'
import { PantanalGrid } from '@pantanal/grid'

const currentLocale = ref<'en' | 'es' | 'pt'>('en')

function switchLocale(locale: 'en' | 'es' | 'pt') {
  currentLocale.value = locale
}
</script>

<template>
  <div>
    <button @click="switchLocale('en')">English</button>
    <button @click="switchLocale('es')">Spanish</button>
    <button @click="switchLocale('pt')">Portuguese</button>
    
    <PantanalGrid
      :rows="rows"
      :columns="columns"
      key-field="id"
      :locale="currentLocale"
    />
  </div>
</template>

See Also ​