Pantanal Grid

Appearance

Responsive Cards ​

Demonstrates responsive card layout for mobile devices.

Responsive Mode Controls

Current mode: auto

Breakpoint: 768px

Auto Mode (Responsive)

Automatically switches between table and cards based on container width. Resize your browser window to see the change.

ID
Product Name
Price
Category
Stock
Description
ID
1
Product Name
Product A
Price
$29.99
Category
Electronics
Stock
150
Description
High quality product
ID
2
Product Name
Product B
Price
$49.99
Category
Clothing
Stock
75
Description
Comfortable and stylish
ID
3
Product Name
Product C
Price
$19.99
Category
Accessories
Stock
200
Description
Affordable option
ID
4
Product Name
Product D
Price
$39.99
Category
Electronics
Stock
50
Description
Latest technology
Showing 1-4 of 4 items
Showing 1-4 of 4 items

Cards Mode

Force card layout regardless of screen size. Useful for mobile-first designs.

ID
Product Name
Price
Category
Stock
Description
ID
1
Product Name
Product A
Price
$29.99
Category
Electronics
Stock
150
Description
High quality product
ID
2
Product Name
Product B
Price
$49.99
Category
Clothing
Stock
75
Description
Comfortable and stylish
ID
3
Product Name
Product C
Price
$19.99
Category
Accessories
Stock
200
Description
Affordable option
ID
4
Product Name
Product D
Price
$39.99
Category
Electronics
Stock
50
Description
Latest technology
Showing 1-4 of 4 items
Showing 1-4 of 4 items

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, category: 'Electronics', stock: 150 },
  { id: 2, name: 'Product B', price: 49.99, category: 'Clothing', stock: 75 }
])

const columns: ColumnDef[] = [
  { field: 'id', title: 'ID', width: 80 },
  { field: 'name', title: 'Name' },
  { field: 'price', title: 'Price', format: (v: number) => `$${v.toFixed(2)}` },
  { field: 'category', title: 'Category' },
  { field: 'stock', title: 'Stock' }
]
</script>

<template>
  <PantanalGrid
    :rows="rows"
    :columns="columns"
    key-field="id"
    responsive="cards"
    :card-breakpoint="768"
    locale="en"
  />
</template>

Features ​

  • Automatic card layout on mobile
  • Table layout on desktop
  • Responsive breakpoint configuration