Pantanal Grid

Appearance

IntlService Examples ​

Complete examples demonstrating the IntlService internationalization capabilities.

Grid with IntlService Formatting

This example demonstrates using IntlService to format currency, dates, percentages, and numbers in grid columns. The grid supports sorting, filtering, and all standard features.

ID
Name
Price
Date
Discount
Quantity
1
Product A
$1,234.56
1/15/24
15%
100
2
Product B
$567.89
2/20/24
25%
50
3
Product C
$890.12
3/25/24
10%
75
4
Product D
$2,345.67
4/10/24
30%
200
5
Product E
$456.78
5/5/24
20%
150
Showing 1-5 of 5 items
Showing 1-5 of 5 items

Formatting Examples

  • Currency: $1,234.56
  • Decimal: 1,234.56
  • Percent: 15%
  • Date (short): 7/11/26
  • Date (long): July 11, 2026
  • Formatted string: Total: $1,234.56

Basic Date Formatting ​

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

const intl = new IntlService('en')
const date = new Date(2024, 0, 15)

const shortDate = intl.formatDate(date, 'short')
const longDate = intl.formatDate(date, 'long')
const customDate = intl.formatDate(date, { date: 'full' })
</script>

<template>
  <div>
    <p>Short: {{ shortDate }}</p>
    <p>Long: {{ longDate }}</p>
    <p>Full: {{ customDate }}</p>
  </div>
</template>

Number Formatting ​

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

const intl = new IntlService('en')
const amount = 1234.56

const currency = intl.formatNumber(amount, 'c')
const decimal = intl.formatNumber(amount, 'n')
const percent = intl.formatNumber(0.15, 'p')
const custom = intl.formatNumber(amount, { 
  style: 'currency', 
  currency: 'EUR',
  minimumFractionDigits: 2 
})
</script>

<template>
  <div>
    <p>Currency: {{ currency }}</p>
    <p>Decimal: {{ decimal }}</p>
    <p>Percent: {{ percent }}</p>
    <p>Custom: {{ custom }}</p>
  </div>
</template>

String Formatting with Placeholders ​

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

const intl = new IntlService('en')

const total = intl.format('Total amount {0:c}', [1234.56])
const range = intl.format('Showing {0} to {1} of {2}', [1, 10, 100])
const mixed = intl.format('Price: {0:n}, Date: {1:d}', [99.99, new Date()])
</script>

<template>
  <div>
    <p>{{ total }}</p>
    <p>{{ range }}</p>
    <p>{{ mixed }}</p>
  </div>
</template>

Date and Month Names ​

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

const intl = new IntlService('en')

const dayNames = intl.dateFormatNames({ type: 'days', nameType: 'long' })
const monthNames = intl.dateFormatNames({ type: 'months', nameType: 'short' })
const firstDay = intl.firstDay()
</script>

<template>
  <div>
    <h3>Day Names</h3>
    <ul>
      <li v-for="(name, day) in dayNames" :key="day">{{ name }}</li>
    </ul>
    
    <h3>Month Names</h3>
    <ul>
      <li v-for="(name, month) in monthNames" :key="month">{{ name }}</li>
    </ul>
    
    <p>First day of week: {{ firstDay === 0 ? 'Sunday' : 'Monday' }}</p>
  </div>
</template>

Using with Grid ​

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

const intl = new IntlService('en')

interface Product {
  id: number
  name: string
  price: number
  date: Date
  discount: number
  quantity: number
}

const rows = ref<Product[]>([
  { id: 1, name: 'Product A', price: 1234.56, date: new Date(2024, 0, 15), discount: 0.15, quantity: 100 },
  { id: 2, name: 'Product B', price: 567.89, date: new Date(2024, 1, 20), discount: 0.25, quantity: 50 },
  { id: 3, name: 'Product C', price: 890.12, date: new Date(2024, 2, 25), discount: 0.10, quantity: 75 },
  { id: 4, name: 'Product D', price: 2345.67, date: new Date(2024, 3, 10), discount: 0.30, quantity: 200 },
  { id: 5, name: 'Product E', price: 456.78, date: new Date(2024, 4, 5), discount: 0.20, quantity: 150 },
])

const columns: ColumnDef<Product>[] = [
  { field: 'id', title: 'ID', width: 80, sortable: true },
  { field: 'name', title: 'Name', width: 200, sortable: true, filterable: true },
  { 
    field: 'price', 
    title: 'Price',
    width: 140,
    sortable: true,
    format: (v: number) => intl.formatNumber(v, { style: 'currency', currency: 'USD' })
  },
  { 
    field: 'date', 
    title: 'Date',
    width: 150,
    sortable: true,
    format: (v: Date) => intl.formatDate(v, 'short')
  },
  { 
    field: 'discount', 
    title: 'Discount',
    width: 120,
    sortable: true,
    format: (v: number) => intl.formatNumber(v, { style: 'percent', minimumFractionDigits: 0 })
  },
  { 
    field: 'quantity', 
    title: 'Quantity',
    width: 120,
    sortable: true,
    format: (v: number) => intl.formatNumber(v, { style: 'decimal', useGrouping: true })
  }
]
</script>

<template>
  <PantanalGrid 
    :rows="rows" 
    :columns="columns" 
    key-field="id"
    :height="400"
    locale="en"
    responsive="table"
    :sortable="true"
    :filterable="true"
    :pageable="true"
  />
</template>

Multiple Locales ​

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

const intlEN = new IntlService('en')
const intlPT = new IntlService('pt-BR')
const intlES = new IntlService('es')

const date = new Date(2024, 0, 15)
const amount = 1234.56

const dates = {
  en: intlEN.formatDate(date, 'long'),
  pt: intlPT.formatDate(date, 'long'),
  es: intlES.formatDate(date, 'long')
}

const amounts = {
  en: intlEN.formatNumber(amount, 'c'),
  pt: intlPT.formatNumber(amount, 'c'),
  es: intlES.formatNumber(amount, 'c')
}
</script>

<template>
  <div>
    <h3>Date Formatting</h3>
    <ul>
      <li>English: {{ dates.en }}</li>
      <li>Portuguese: {{ dates.pt }}</li>
      <li>Spanish: {{ dates.es }}</li>
    </ul>
    
    <h3>Currency Formatting</h3>
    <ul>
      <li>English: {{ amounts.en }}</li>
      <li>Portuguese: {{ amounts.pt }}</li>
      <li>Spanish: {{ amounts.es }}</li>
    </ul>
  </div>
</template>

Portuguese (pt-BR) with Real (BRL) ​

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

const intl = new IntlService('pt-BR')

interface Product {
  id: number
  name: string
  price: number
  date: Date
  discount: number
}

const rows = ref<Product[]>([
  { id: 1, name: 'Produto A', price: 1234.56, date: new Date(2024, 0, 15), discount: 0.15 },
  { id: 2, name: 'Produto B', price: 567.89, date: new Date(2024, 1, 20), discount: 0.25 },
  { id: 3, name: 'Produto C', price: 890.12, date: new Date(2024, 2, 25), discount: 0.10 },
])

const columns: ColumnDef<Product>[] = [
  { field: 'id', title: 'ID', width: 80, sortable: true },
  { field: 'name', title: 'Nome', width: 200, sortable: true, filterable: true },
  { 
    field: 'price', 
    title: 'Preço',
    width: 140,
    sortable: true,
    format: (v: number) => intl.formatNumber(v, { style: 'currency', currency: 'BRL' })
  },
  { 
    field: 'date', 
    title: 'Data',
    width: 150,
    sortable: true,
    format: (v: Date) => intl.formatDate(v, { date: 'short' })
  },
  { 
    field: 'discount', 
    title: 'Desconto',
    width: 120,
    sortable: true,
    format: (v: number) => intl.formatNumber(v, { style: 'percent', minimumFractionDigits: 0 })
  }
]
</script>

<template>
  <PantanalGrid 
    :rows="rows" 
    :columns="columns" 
    key-field="id"
    :height="400"
    locale="pt"
    responsive="table"
    :sortable="true"
    :filterable="true"
    :pageable="true"
  />
</template>

Spanish (es) with Euro (EUR) ​

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

const intl = new IntlService('es')

interface Product {
  id: number
  name: string
  price: number
  date: Date
  discount: number
}

const rows = ref<Product[]>([
  { id: 1, name: 'Producto A', price: 1234.56, date: new Date(2024, 0, 15), discount: 0.15 },
  { id: 2, name: 'Producto B', price: 567.89, date: new Date(2024, 1, 20), discount: 0.25 },
  { id: 3, name: 'Producto C', price: 890.12, date: new Date(2024, 2, 25), discount: 0.10 },
])

const columns: ColumnDef<Product>[] = [
  { field: 'id', title: 'ID', width: 80, sortable: true },
  { field: 'name', title: 'Nombre', width: 200, sortable: true, filterable: true },
  { 
    field: 'price', 
    title: 'Precio',
    width: 140,
    sortable: true,
    format: (v: number) => intl.formatNumber(v, { style: 'currency', currency: 'EUR' })
  },
  { 
    field: 'date', 
    title: 'Fecha',
    width: 150,
    sortable: true,
    format: (v: Date) => intl.formatDate(v, { date: 'short' })
  },
  { 
    field: 'discount', 
    title: 'Descuento',
    width: 120,
    sortable: true,
    format: (v: number) => intl.formatNumber(v, { style: 'percent', minimumFractionDigits: 0 })
  }
]
</script>

<template>
  <PantanalGrid 
    :rows="rows" 
    :columns="columns" 
    key-field="id"
    :height="400"
    locale="es"
    responsive="table"
    :sortable="true"
    :filterable="true"
    :pageable="true"
  />
</template>