Pantanal Grid

Appearance

Pinned Columns Example ​

Demonstrates columns pinned to the left and right sides of the grid.

Scroll horizontally to see pinned columns in action. ID column is pinned left, Actions column is pinned right. These columns remain visible while scrolling.

ID
Name
Price
Category
Stock
Actions
1
Product 1
$61.27
Electronics
521
...
2
Product 2
$584.02
Clothing
631
...
3
Product 3
$818.94
Accessories
593
...
4
Product 4
$288.78
Electronics
992
...
5
Product 5
$105.07
Clothing
781
...
6
Product 6
$331.16
Accessories
134
...
7
Product 7
$799.99
Electronics
668
...
8
Product 8
$921.68
Clothing
400
...
9
Product 9
$879.48
Accessories
379
...
10
Product 10
$409.68
Electronics
707
...
11
Product 11
$531.41
Clothing
462
...
12
Product 12
$352.73
Accessories
768
...
13
Product 13
$766.71
Electronics
351
...
14
Product 14
$328.24
Clothing
552
...
15
Product 15
$650.41
Accessories
58
...
16
Product 16
$308.34
Electronics
578
...
17
Product 17
$629.14
Clothing
386
...
18
Product 18
$416.47
Accessories
610
...
19
Product 19
$109.88
Electronics
321
...
20
Product 20
$251.84
Clothing
539
...
Showing 1-20 of 20 items
Showing 1-20 of 20 items

Code ​

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

const rows = ref(Array.from({ length: 20 }, (_, i) => ({
  id: i + 1,
  name: `Product ${i + 1}`,
  price: Math.round(Math.random() * 100000) / 100,
  category: ['Electronics', 'Clothing', 'Accessories'][i % 3],
  stock: Math.floor(Math.random() * 1000),
  actions: '...'
})))

const columns: ColumnDef[] = [
  { field: 'id', title: 'ID', width: 80, pinned: 'left' },
  { field: 'name', title: 'Name', width: 200 },
  { field: 'price', title: 'Price', width: 120 },
  { field: 'category', title: 'Category', width: 150 },
  { field: 'stock', title: 'Stock', width: 100 },
  { field: 'actions', title: 'Actions', width: 120, pinned: 'right' }
]
</script>

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

Features Demonstrated ​

  • Pinned left: ID column stays visible when scrolling horizontally
  • Pinned right: Actions column stays visible when scrolling horizontally
  • Scrollable middle: Other columns scroll normally