Pantanal Grid

Appearance

Selection ​

Pantanal Grid supports single and multiple row selection with checkboxes or programmatic selection.

Single Row Selection

Enable single-row selection. Only one row can be selected at a time.

ID
Product Name
Unit Price
Category
1
Chai
$18.00
Beverages
2
Chang
$17.00
Beverages
3
Aniseed Syrup
$10.00
Condiments
4
Chef Anton's Cajun Seasoning
$22.00
Condiments
Showing 1-4 of 4 items
Showing 1-4 of 4 items

Multiple Row Selection

Enable multiple-row selection. Select multiple rows using checkboxes.

ID
Product Name
Unit Price
Category
1
Chai
$18.00
Beverages
2
Chang
$17.00
Beverages
3
Aniseed Syrup
$10.00
Condiments
4
Chef Anton's Cajun Seasoning
$22.00
Condiments
Showing 1-4 of 4 items
Showing 1-4 of 4 items

Selection with Keyboard Navigation

Use keyboard shortcuts to select rows: Space to select, Ctrl+Space to toggle, Shift+Space for range.

ID
Product Name
Unit Price
Category
1
Chai
$18.00
Beverages
2
Chang
$17.00
Beverages
3
Aniseed Syrup
$10.00
Condiments
4
Chef Anton's Cajun Seasoning
$22.00
Condiments
Showing 1-4 of 4 items
Showing 1-4 of 4 items

Selection Modes ​

Multiple Selection ​

Select rows using the checkboxes. Try selecting multiple rows.

ID
Product Name
Price
Category
1
Product A
$29.99
Electronics
2
Product B
$49.99
Clothing
3
Product C
$19.99
Accessories
4
Product D
$39.99
Electronics
5
Product E
$59.99
Clothing
6
Product F
$24.99
Accessories
Showing 1-6 of 6 items
Showing 1-6 of 6 items

Single Selection ​

Enable single-row selection:

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  selectable="single"
  @selectionChange="handleSelectionChange"
/>

Multiple Selection ​

Enable multiple-row selection:

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

const rows = ref([/* ... */])
const columns: ColumnDef[] = [/* ... */]

const selectedKeys = ref<number[]>([])

function handleSelectionChange(keys: number[]) {
  selectedKeys.value = keys
  console.log('Selected rows:', keys)
}
</script>

<template>
  <PantanalGrid
    :rows="rows"
    :columns="columns"
    key-field="id"
    selectable="multiple"
    @selectionChange="handleSelectionChange"
  />
</template>

Single Selection ​

Enable single row selection:

vue
<template>
  <PantanalGrid
    :rows="rows"
    :columns="columns"
    key-field="id"
    selectable="single"
    @selectionChange="handleSelectionChange"
  />
</template>

Disable Selection ​

Disable selection entirely:

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

Programmatic Selection ​

Control selection programmatically:

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

const gridRef = ref<InstanceType<typeof PantanalGrid>>()
const selectedKeys = ref<number[]>([])

function selectAll() {
  // Select all rows
  const allKeys = rows.value.map(r => r.id)
  selectedKeys.value = allKeys
}

function clearSelection() {
  selectedKeys.value = []
}

function selectFirst() {
  selectedKeys.value = [rows.value[0].id]
}
</script>

<template>
  <div>
    <div class="mb-4">
      <button @click="selectAll">Select All</button>
      <button @click="clearSelection">Clear Selection</button>
      <button @click="selectFirst">Select First</button>
    </div>
    <PantanalGrid
      ref="gridRef"
      :rows="rows"
      :columns="columns"
      key-field="id"
      selectable="multiple"
      v-model:selectedKeys="selectedKeys"
    />
  </div>
</template>

Persist Selection ​

Persist selection across page changes:

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  selectable="multiple"
  :persist-selection="true"
/>

Selection Events ​

Listen to selection changes:

vue
<template>
  <PantanalGrid
    :rows="rows"
    :columns="columns"
    key-field="id"
    selectable="multiple"
    @selectionChange="handleSelectionChange"
  />
</template>

<script setup lang="ts">
function handleSelectionChange(keys: number[]) {
  console.log('Selection changed:', keys)
  // Update UI, fetch related data, etc.
}
</script>

Keyboard Selection ​

When navigatable is enabled, use keyboard shortcuts for selection:

  • Space: Select/deselect current row
  • Ctrl + Space: Toggle selection (multiple mode)
  • Shift + Space: Range selection (multiple mode)
  • Shift + Arrow Keys: Extend selection (multiple mode)
vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  selectable="multiple"
  :navigatable="true"
  @selectionChange="handleSelectionChange"
/>

Selection with Pagination ​

By default, selection is per-page. Use persistSelection to maintain selection across pages:

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  selectable="multiple"
  :persist-selection="true"
  :pageable="true"
  v-model:page="page"
/>

Initial Selection ​

Set initial selected rows:

vue
<script setup lang="ts">
const selectedKeys = ref<number[]>([1, 3, 5]) // Pre-select rows with IDs 1, 3, and 5
</script>

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

Selection Checkbox ​

The grid automatically adds a checkbox column when selection is enabled. Customize it:

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  selectable="multiple"
  :selection-checkbox="true"
/>

See Also ​