Custom Cells
Demonstrates custom cell templates with formatting and styling.
Custom Templates
Use the template property to customize cell rendering with HTML strings.
ID
Name
Price
Status
Rating
1
Product A
$29.99
active
⭐⭐⭐⭐ 4.5/5
2
Product B
$49.99
inactive
⭐⭐⭐ 3.8/5
3
Product C
$19.99
active
⭐⭐⭐⭐ 4.2/5
Custom Cells with Slots
Use the #cell slot to render Vue components, badges, buttons, or any custom content.
ID
Title
Status
Owner
Priority
Progress
1
Landing page redesign
In progress
LSLivia Santos
High
62%
2
CRM integration
Completed
POPaulo Oliveira
Medium
100%
3
Winter Sale campaign
Awaiting approval
FCFernanda Costa
High
35%
Basic Custom Cells
Custom cell templates with formatting and styling. Price is styled in blue, status uses color coding, and rating displays stars.
ID
Name
Price
Status
Rating
1
Product A
$29.99
active
⭐⭐⭐⭐ 4.5/5
2
Product B
$49.99
inactive
⭐⭐⭐ 3.8/5
3
Product C
$19.99
active
⭐⭐⭐⭐ 4.2/5
4
Product D
$39.99
active
⭐⭐⭐⭐⭐ 5/5
Code
vue
<script setup lang="ts">
import { ref } from 'vue'
import { PantanalGrid, type ColumnDef } from '@pantanal/grid'
const rows = ref([
{ id: 1, name: 'Product A', price: 29.99, status: 'active', rating: 4.5 },
{ id: 2, name: 'Product B', price: 49.99, status: 'inactive', rating: 3.8 }
])
const columns: ColumnDef[] = [
{ field: 'id', title: 'ID', width: 80 },
{ field: 'name', title: 'Name' },
{
field: 'price',
title: 'Price',
template: ({ value }) => `<strong class="text-blue-600">$${value.toFixed(2)}</strong>`
},
{
field: 'status',
title: 'Status',
template: ({ value }) => {
const color = value === 'active' ? 'green' : 'red'
return `<span class="text-${color}-500 font-semibold">${value}</span>`
}
},
{
field: 'rating',
title: 'Rating',
template: ({ value }) => {
const stars = '⭐'.repeat(Math.floor(value))
return `<div>${stars} ${value}/5</div>`
}
}
]
</script>
<template>
<PantanalGrid
:rows="rows"
:columns="columns"
key-field="id"
locale="en"
responsive="table"
/>
</template>Features Demonstrated
- Custom formatting: Price with custom styling
- Conditional styling: Status with color coding
- Complex templates: Rating with stars