Internationalization

Pantanal Grid supports multiple languages and allows you to customize all UI messages. Built-in locales include English, Spanish, and Portuguese.

Basic Usage

Set the locale using the locale prop:

<template>
  <!-- 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" />
</template>

Built-in Locales

Pantanal Grid includes three built-in locales:

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

Custom Messages

Override specific messages while keeping the default locale:

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

const customMessages: Partial<Messages> = {
  create: 'Add New',
  save: 'Save All',
  cancel: 'Discard Changes',
  edit: 'Modify',
  destroy: 'Remove',
  next: 'Next »',
  previous: '« Previous'
}
</script>

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

All Available Messages

Here are all the messages you can customize:

interface Messages {
  // Pagination
  total: string
  page: string
  rowsPerPage: string
  previous: string
  next: string
  
  // Filtering
  filterPlaceholder: string
  filterAll: string
  filterTrue: string
  filterFalse: string
  
  // Selection
  selectAll: string
  
  // Grouping
  expandAll: string
  collapseAll: string
  subtotal: string
  
  // Toolbar
  create: string
  save: string
  cancel: string
  excel: string
  pdf: string
  
  // Commands
  edit: string
  update: string
  destroy: string
  delete: string
  cancelEdit: string
  
  // Sorting
  sortBy: string
  sortAsc: string
  sortDesc: string
  sortNone: string
  
  // Column Menu
  columnMenuColumns: string
  columnMenuFilter: string
  columnMenuSortAscending: string
  columnMenuSortDescending: string
  columnMenuSettings: string
  columnMenuDone: string
  columnMenuLock: string
  columnMenuUnlock: string
  
  // Delete Confirmation
  confirmDelete: string
  cancelDelete: string
  confirmDeleteTitle: string
  
  // No Records
  noRecords: string
  
  // Expand/Collapse
  expandCollapseColumnHeader: string
  
  // Pageable
  pageableDisplay: string
  pageableEmpty: string
  pageablePage: string
  pageableOf: string
  pageableItemsPerPage: string
  pageableFirst: string
  pageableLast: string
  pageableNext: string
  pageablePrevious: string
  pageableRefresh: string
  pageableMorePages: string
}

Register Custom Locale

Register a new locale:

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

const frenchMessages = {
  total: 'Total',
  page: 'Page',
  rowsPerPage: 'Lignes par page',
  previous: 'Précédent',
  next: 'Suivant',
  create: 'Créer',
  save: 'Enregistrer',
  cancel: 'Annuler',
  edit: 'Modifier',
  destroy: 'Supprimer',
  // ... all other messages
}

registerLocale('fr', frenchMessages)
</script>

<template>
  <PantanalGrid
    :rows="rows"
    :columns="columns"
    key-field="id"
    locale="fr"
  />
</template>

Message Placeholders

Some messages support placeholders:

Pagination Display

<script setup lang="ts">
const messages = {
  pageableDisplay: 'Displaying {0}-{1} of {2} items'
  // {0} = first item number
  // {1} = last item number
  // {2} = total items
}
</script>

Page Of

<script setup lang="ts">
const messages = {
  pageableOf: 'of {0}'
  // {0} = total pages
}
</script>

Complete Example

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

const rows = ref([
  { id: 1, name: 'Product A', price: 29.99 },
  { id: 2, name: 'Product B', price: 49.99 }
])

const columns: ColumnDef[] = [
  { field: 'id', title: 'ID', width: 80 },
  { field: 'name', title: 'Name' },
  { field: 'price', title: 'Price' }
]

const customMessages: Partial<Messages> = {
  create: 'Add New Product',
  save: 'Save Changes',
  cancel: 'Cancel',
  edit: 'Edit',
  destroy: 'Delete',
  noRecords: 'No products found',
  pageableDisplay: 'Showing {0}-{1} of {2} products',
  pageableItemsPerPage: 'Products per page'
}
</script>

<template>
  <PantanalGrid
    :rows="rows"
    :columns="columns"
    key-field="id"
    locale="en"
    :messages="customMessages"
    :toolbar="['create', 'save', 'cancel']"
  />
</template>

IntlService

For advanced internationalization needs, use the IntlService class to format dates, numbers, and strings based on a specific locale:

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

const intl = new IntlService('en')

const formattedDate = intl.formatDate(new Date(), 'long')
const formattedNumber = intl.formatNumber(1234.56, 'c')
const formattedString = intl.format('Total: {0:c}', [1234.56])
</script>

See the IntlService Guide for complete documentation and examples.

Tips

• Use locale prop for quick language switching
• Override specific messages with messages prop for fine-grained control
• Register custom locales for languages not included by default
• Use placeholders in messages for dynamic content
• Keep message keys consistent across your application
• Use IntlService for advanced date and number formatting