Pantanal Grid

Appearance

Virtual Scrolling ​

Virtual scrolling renders only visible rows, providing smooth performance even with thousands of rows.

Small Dataset (1,000 rows)

Virtual scrolling with 1,000 rows. Only visible rows are rendered for optimal performance. Scroll through the data to see smooth performance.

ID
Name
Price
Category
1
Product 1
$829.70
Electronics
2
Product 2
$542.50
Clothing
3
Product 3
$932.72
Accessories
4
Product 4
$485.87
Electronics
5
Product 5
$442.81
Clothing
6
Product 6
$490.32
Accessories
7
Product 7
$191.31
Electronics
8
Product 8
$20.07
Clothing
9
Product 9
$178.18
Accessories
10
Product 10
$477.98
Electronics
11
Product 11
$629.22
Clothing
12
Product 12
$92.87
Accessories
13
Product 13
$534.55
Electronics
14
Product 14
$118.01
Clothing
Showing 1-20 of 1000 items

Large Dataset (10,000 rows)

Virtual scrolling with 10,000 rows. Even with a large dataset, performance remains smooth. Try sorting and filtering to see how virtual scrolling handles operations efficiently.

ID
Name
Price
Category
Stock
Supplier
1
Product 1
$749.38
Electronics
220
Supplier A
2
Product 2
$552.82
Clothing
694
Supplier B
3
Product 3
$310.89
Accessories
252
Supplier C
4
Product 4
$923.71
Electronics
915
Supplier A
5
Product 5
$212.30
Clothing
340
Supplier B
6
Product 6
$393.56
Accessories
653
Supplier C
7
Product 7
$59.27
Electronics
557
Supplier A
8
Product 8
$13.65
Clothing
608
Supplier B
9
Product 9
$570.70
Accessories
773
Supplier C
10
Product 10
$140.58
Electronics
165
Supplier A
11
Product 11
$1.31
Clothing
877
Supplier B
12
Product 12
$517.60
Accessories
701
Supplier C
13
Product 13
$212.96
Electronics
159
Supplier A
14
Product 14
$436.89
Clothing
830
Supplier B
Showing 1-20 of 10000 items

Virtual Scrolling with Sorting and Filtering

Virtual scrolling works seamlessly with sorting and filtering. Operations are performed on the full dataset, but only visible rows are rendered.

ID
Name
Price
Category
1
Product 1
$829.70
Electronics
2
Product 2
$542.50
Clothing
3
Product 3
$932.72
Accessories
4
Product 4
$485.87
Electronics
5
Product 5
$442.81
Clothing
6
Product 6
$490.32
Accessories
7
Product 7
$191.31
Electronics
8
Product 8
$20.07
Clothing
9
Product 9
$178.18
Accessories
10
Product 10
$477.98
Electronics
11
Product 11
$629.22
Clothing
12
Product 12
$92.87
Accessories
13
Product 13
$534.55
Electronics
14
Product 14
$118.01
Clothing
Showing 1-20 of 1000 items

Basic Virtual Scrolling ​

Virtual scrolling with 5,000 rows. Only visible rows are rendered for optimal performance. Scroll through the data to see smooth performance.

ID
Name
Price
Category
1
Product 1
$142.17
Electronics
2
Product 2
$382.66
Clothing
3
Product 3
$498.71
Accessories
4
Product 4
$108.39
Electronics
5
Product 5
$79.31
Clothing
6
Product 6
$366.41
Accessories
7
Product 7
$29.48
Electronics
8
Product 8
$112.25
Clothing
9
Product 9
$108.36
Accessories
10
Product 10
$617.17
Electronics
11
Product 11
$994.71
Clothing
12
Product 12
$251.30
Accessories
13
Product 13
$382.81
Electronics
14
Product 14
$411.72
Clothing
Showing 1-20 of 5000 items

Code ​

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

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

const columns: ColumnDef[] = [
  { field: 'id', title: 'ID', width: 80, sortable: true },
  { field: 'name', title: 'Name', sortable: true, filterable: true },
  { field: 'price', title: 'Price', sortable: true, format: (v: number) => `$${v.toFixed(2)}` },
  { field: 'category', title: 'Category', filterable: true }
]
</script>

<template>
  <PantanalGrid
    :rows="rows"
    :columns="columns"
    key-field="id"
    :virtual="true"
    :height="420"
    :row-height="44"
    locale="en"
    responsive="table"
  />
</template>

How Virtual Scrolling Works ​

Virtual scrolling only renders the rows that are currently visible in the viewport, plus a small buffer above and below. This dramatically improves performance for large datasets.

Benefits ​

  • Performance: Smooth scrolling even with 10,000+ rows
  • Memory efficient: Only visible DOM elements are created
  • Fast initial render: Grid appears instantly regardless of data size
  • Works with all features: Sorting, filtering, and grouping work seamlessly

Configuration ​

Row Height ​

Set a fixed row height for optimal performance:

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  :virtual="true"
  :row-height="44"
  :height="400"
/>

Dynamic Row Height ​

For variable row heights, omit row-height (performance may be slightly reduced):

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  :virtual="true"
  :height="400"
/>

When to Use Virtual Scrolling ​

  • ✅ Large datasets: 1,000+ rows
  • ✅ Performance critical: Need smooth scrolling
  • ✅ Memory constrained: Limited device memory
  • ❌ Small datasets: < 100 rows (overhead not worth it)
  • ❌ Variable row heights: May cause layout shifts

Performance Tips ​

  1. Set row height: Fixed height improves performance
  2. Limit columns: Fewer columns = faster rendering
  3. Avoid complex templates: Simple cell templates perform better
  4. Use server-side: For very large datasets, combine with server-side mode

See Also ​