Pantanal Grid

Appearance

Sorting ​

Pantanal Grid supports single and multiple column sorting. Click column headers to toggle sorting.

Basic Single Column Sorting

Click column headers to sort. Click again to reverse, click a third time to remove sort.

Order ID
Ship Name
Ship Country
Freight
1
Vins et alcools Chevalier
France
$32.38
2
Toms Spezialitäten
Germany
$11.61
3
Hanari Carnes
Brazil
$65.83
4
Victuailles en stock
France
$41.34
5
Suprêmes délices
Belgium
$51.30
6
Chop-suey Chinese
Switzerland
$22.98
Showing 1-6 of 6 items
Showing 1-6 of 6 items

Multiple Column Sorting

Enable multiple column sorting. Click multiple column headers to sort by multiple columns. Sort indexes are shown.

Order ID
Ship Name
Ship Country
Freight
1
Vins et alcools Chevalier
France
$32.38
2
Toms Spezialitäten
Germany
$11.61
3
Hanari Carnes
Brazil
$65.83
4
Victuailles en stock
France
$41.34
5
Suprêmes délices
Belgium
$51.30
6
Chop-suey Chinese
Switzerland
$22.98
Showing 1-6 of 6 items
Showing 1-6 of 6 items

Column-Level Sortable

Control sorting per column. Only columns with sortable: true can be sorted.

Order ID
Ship Name
Ship Country
Freight
1
Vins et alcools Chevalier
France
32.38
2
Toms Spezialitäten
Germany
11.61
3
Hanari Carnes
Brazil
65.83
4
Victuailles en stock
France
41.34
5
Suprêmes délices
Belgium
51.3
6
Chop-suey Chinese
Switzerland
22.98
Showing 1-6 of 6 items
Showing 1-6 of 6 items

Single Column Sorting ​

Click column headers to sort. Try multiple column sorting by holding Shift and clicking.

ID
Product Name
Price
Category
Stock
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
5
Product E
$59.99
Clothing
100
6
Product F
$24.99
Accessories
300
7
Product G
$69.99
Electronics
25
8
Product H
$34.99
Clothing
120
Showing 1-8 of 8 items
Showing 1-8 of 8 items

By default, clicking a column header cycles through: none → ascending → descending → none.

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

const rows = ref([/* ... */])
const columns: ColumnDef[] = [
  { field: 'name', title: 'Name', sortable: true },
  { field: 'price', title: 'Price', sortable: true }
]

const sort = ref<SortDescriptor[]>([])
</script>

<template>
  <PantanalGrid
    :rows="rows"
    :columns="columns"
    key-field="id"
    v-model:sort="sort"
  />
</template>

Multiple Column Sorting ​

Enable multiple column sorting by setting sortableMode to 'multiple':

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

const rows = ref([/* ... */])
const columns: ColumnDef[] = [
  { field: 'name', title: 'Name', sortable: true },
  { field: 'price', title: 'Price', sortable: true },
  { field: 'category', title: 'Category', sortable: true }
]

const sort = ref<SortDescriptor[]>([])
</script>

<template>
  <PantanalGrid
    :rows="rows"
    :columns="columns"
    key-field="id"
    v-model:sort="sort"
    sortable-mode="multiple"
    :sortable-show-indexes="true"
  />
</template>

Custom Sort Function ​

You can provide a custom sort function for a column:

vue
<script setup lang="ts">
const columns: ColumnDef[] = [
  {
    field: 'name',
    title: 'Name',
    sortable: true,
    sortableCompare: (a, b, descending) => {
      // Custom comparison logic
      const result = a.localeCompare(b)
      return descending ? -result : result
    }
  }
]
</script>

Initial Sort ​

Set initial sort order:

vue
<script setup lang="ts">
const sort = ref<SortDescriptor[]>([
  { field: 'price', dir: 'desc' },
  { field: 'name', dir: 'asc' }
])
</script>

Sort Events ​

Listen to sort changes:

vue
<template>
  <PantanalGrid
    :rows="rows"
    :columns="columns"
    key-field="id"
    @update:sort="handleSortChange"
    @sort="handleSort"
  />
</template>

<script setup lang="ts">
function handleSortChange(newSort: SortDescriptor[]) {
  console.log('Sort changed:', newSort)
}

function handleSort(event: { sort: SortDescriptor[] }) {
  console.log('Sort event:', event.sort)
}
</script>

Sort Descriptor ​

The sort descriptor has the following structure:

typescript
interface SortDescriptor {
  field: string      // Column field name
  dir: 'asc' | 'desc'  // Sort direction
}

Disabling Sort ​

Disable sorting for specific columns:

vue
const columns: ColumnDef[] = [
  { field: 'id', title: 'ID', sortable: false },
  { field: 'name', title: 'Name', sortable: true }
]

Or disable globally:

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  :sortable="false"
/>

Custom Sort Function ​

Provide a custom comparison function:

vue
<script setup lang="ts">
const columns: ColumnDef[] = [
  {
    field: 'name',
    title: 'Name',
    sortable: true,
    sortableCompare: (a, b, descending) => {
      // Custom comparison logic
      const result = a.localeCompare(b, undefined, { sensitivity: 'base' })
      return descending ? -result : result
    }
  }
]
</script>

Server-Side Sorting ​

For server-side sorting, send sort descriptors to your API:

vue
<script setup lang="ts">
watchEffect(async () => {
  const params = new URLSearchParams({
    page: String(page.value),
    pageSize: String(pageSize.value)
  })
  
  if (sort.value.length > 0) {
    params.append('sortBy', sort.value[0].field)
    params.append('order', sort.value[0].dir)
  }
  
  const response = await fetch(`/api/data?${params}`)
  // ...
})
</script>

See Also ​