Pantanal Grid

Appearance

Export ​

Pantanal Grid supports exporting data to Excel (CSV) and PDF formats with customizable options.

Basic Excel Export

Add 'excel' to the toolbar to enable Excel export. By default, only the current page is exported. Click the Excel button in the toolbar to export the data.

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

Export All Pages

Set excelAllPages to true to export all data pages instead of just the current page. This is useful when you have paginated data and want to export everything.

ID
Product Name
Unit Price
Units In Stock
Category
1
Product 1
$4.64
52
Beverages
2
Product 2
$4.50
3
Condiments
3
Product 3
$4.23
8
Confections
4
Product 4
$2.72
69
Beverages
5
Product 5
$4.65
76
Condiments
6
Product 6
$3.47
28
Confections
7
Product 7
$4.89
42
Beverages
8
Product 8
$9.39
86
Condiments
9
Product 9
$3.15
75
Confections
10
Product 10
$4.85
44
Beverages
Showing 1-10 of 50 items
Showing 1-10 of 50 items

Custom File Name

Specify a custom file name using the excelFileName prop. The file will be exported as CSV format (which Excel opens correctly).

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

Excel Export ​

Basic Usage ​

Add 'excel' to the toolbar to enable Excel export:

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  :toolbar="['excel']"
/>

Export All Pages ​

Set excelAllPages to true to export all data pages:

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  :toolbar="['excel']"
  :excel-all-pages="true"
  :pageable="true"
/>

Custom File Name ​

Specify a custom file name:

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  :toolbar="['excel']"
  :excel-file-name="'my-export.csv'"
/>

PDF Export ​

Basic PDF Export

Add 'pdf' to the toolbar to enable PDF export. By default, the current view is exported. Note: PDF export requires jspdf and html2canvas libraries. Click the PDF button in the toolbar to export the data.

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

Landscape Orientation

Configure paper size and orientation using pdfPaperSize and pdfLandscape props. Use landscape orientation for wider tables.

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

Custom Margins

Specify custom margins using the pdfMargin prop. Margins can be specified as strings (e.g., "2cm") or numbers (in mm).

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

Custom File Name

Specify a custom file name using the pdfFileName prop.

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 Usage ​

Add 'pdf' to the toolbar. Note: PDF export requires jspdf and html2canvas libraries:

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  :toolbar="['pdf']"
/>

Paper Size and Orientation ​

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  :toolbar="['pdf']"
  :pdf-paper-size="'A4'"
  :pdf-landscape="true"
/>

Custom Margins ​

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  :toolbar="['pdf']"
  :pdf-margin="{ top: '2cm', left: '1cm', right: '1cm', bottom: '1cm' }"
/>

Custom File Name ​

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  :toolbar="['pdf']"
  :pdf-file-name="'my-export.pdf'"
/>

Programmatic Export ​

You can also trigger exports programmatically using the grid's exposed methods:

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

const gridRef = ref<InstanceType<typeof PantanalGrid> | null>(null)

function exportToExcel() {
  gridRef.value?.exportToExcel()
}

function exportToPdf() {
  gridRef.value?.exportToPdf()
}
</script>

<template>
  <div>
    <button @click="exportToExcel">Export to Excel</button>
    <button @click="exportToPdf">Export to PDF</button>
    <PantanalGrid
      ref="gridRef"
      :rows="rows"
      :columns="columns"
      key-field="id"
    />
  </div>
</template>

See Also ​