Pantanal Grid

Appearance

Column Management ​

Demonstrates column resizing, reordering, and pinned columns.

Column Resizing

Hover over the right edge of any column header and drag to resize. Column widths are adjustable.

ID
Product Name
Unit Price
Units In Stock
Category
1
Chai
$18.00
39
Beverages
2
Chang
$17.00
40
Beverages
3
Aniseed Syrup
$10.00
13
Condiments
4
Chef Anton's Cajun Seasoning
$22.00
53
Condiments
5
Chef Anton's Gumbo Mix
$21.35
0
Condiments
Showing 1-5 of 5 items
Showing 1-5 of 5 items

Column Reordering

Drag column headers to reorder columns. Drop them in the desired position.

ID
Product Name
Unit Price
Units In Stock
Category
1
Chai
$18.00
39
Beverages
2
Chang
$17.00
40
Beverages
3
Aniseed Syrup
$10.00
13
Condiments
4
Chef Anton's Cajun Seasoning
$22.00
53
Condiments
5
Chef Anton's Gumbo Mix
$21.35
0
Condiments
Showing 1-5 of 5 items
Showing 1-5 of 5 items

Pinned Columns

ID and Name columns are pinned on the left, Rating is pinned on the right. Scroll horizontally to see pinned columns stay in place.

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

Combined: Resize + Reorder

Combine column resizing and reordering for maximum flexibility. Resize and reorder columns independently.

ID
Product Name
Unit Price
Units In Stock
Category
1
Chai
$18.00
39
Beverages
2
Chang
$17.00
40
Beverages
3
Aniseed Syrup
$10.00
13
Condiments
4
Chef Anton's Cajun Seasoning
$22.00
53
Condiments
5
Chef Anton's Gumbo Mix
$21.35
0
Condiments
Showing 1-5 of 5 items
Showing 1-5 of 5 items

Basic Column Management ​

Drag column borders to resize. Drag column headers to reorder. ID column is pinned left, Actions column is pinned right.

ID
Name
Price
Category
Stock
Actions
1
Product A
$29.99
Electronics
150
...
2
Product B
$49.99
Clothing
75
...
3
Product C
$19.99
Accessories
200
...
4
Product D
$39.99
Electronics
50
...
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, actions: '...' },
  { id: 2, name: 'Product B', price: 49.99, category: 'Clothing', stock: 75, 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"
    :enable-column-resize="true"
    :enable-column-reorder="true"
    locale="en"
    responsive="table"
  />
</template>

Features Demonstrated ​

  • Column resizing: Drag column borders to resize
  • Column reordering: Drag column headers to reorder
  • Pinned columns: ID column pinned left, Actions pinned right