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
$428.13
Electronics
3
...
2
Product 2
$339.48
Clothing
969
...
3
Product 3
$698.01
Accessories
540
...
4
Product 4
$599.49
Electronics
554
...
5
Product 5
$211.68
Clothing
919
...
6
Product 6
$327.34
Accessories
341
...
7
Product 7
$414.28
Electronics
47
...
8
Product 8
$677.20
Clothing
414
...
9
Product 9
$36.18
Accessories
698
...
10
Product 10
$567.99
Electronics
113
...
11
Product 11
$176.00
Clothing
390
...
12
Product 12
$528.46
Accessories
525
...
13
Product 13
$57.98
Electronics
62
...
14
Product 14
$549.90
Clothing
943
...
15
Product 15
$211.36
Accessories
83
...
16
Product 16
$31.36
Electronics
873
...
17
Product 17
$983.43
Clothing
297
...
18
Product 18
$116.04
Accessories
956
...
19
Product 19
$560.01
Electronics
460
...
20
Product 20
$473.15
Clothing
889
...
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