Basic

Define a row (e.g. fruit) and a value (e.g. sales) and add items.

With pagination

Output

Sales
$30
$20
$12
$120
$180

1–5 of 5 1 of 1

Input

<template>
    <PivotDataTable 
        :items 
        :measures 
        :dimensions 
    />
</template>

<script setup>

import type { Dimension, Measure, Item } from "vue3-pivot-data-table";

const rows: Dimension[] = [{ text: 'Fruit', value: 'fruit' }];

const measures: Measure[] = [{ text: 'Sales', value: 'sales', sortable: true}];

const items: Item[] = [
  { fruit: 'Tomato', sales: 30 },
  { fruit: 'Orange', sales: 20 },
  { fruit: 'Cucumber', sales: 12 },
  { fruit: 'Grapes', sales: 120 },
  { fruit: 'Mango', sales: 180 },
];

</script>

Without pagination

Add and set the properties rowsPerPage (-1 to disable pagination) and hideFooter (true to disable footer object)

Output

Sales
$30
$20
$12
$120
$180

Input

<template>
    <PivotDataTable 
        :items 
        :measures 
        :dimensions
        :rows-per-page="-1" 
        hide-footer
    />
</template>

<script setup>

'same as above'

</script>