# Class PivotTable Beta

A Vue component for Pivot table with pagination.

# Example

Here's how you can use the PivotTable component in a Vue application:

<template>
   <PivotTable :dataOptions="pivotTableProps.dataOptions" :dataSet="pivotTableProps.dataSet"
       :styleOptions="pivotTableProps.styleOptions" :filters="pivotTableProps.filters" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { measureFactory, filterFactory } from '@sisense/sdk-data';
import * as DM from '../assets/sample-retail-model';
import { PivotTable, type PivotTableProps } from '@sisense/sdk-ui-vue/Table';

const dimProductName = DM.DimProducts.ProductName;
const measureTotalRevenue = measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue');
const pivotTableProps = ref<PivotTableProps>({
 dataSet: DM.DataSource,
 dataOptions: {
   rows: [dimProductName, dimColor],
   columns: [dimCategoryName],
   values: [measureTotalRevenue],
 },
 styleOptions: {
   width: 1200,
   height: 500,
 },
 filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 1000)],
});
</script>

# Properties

# Data

# dataOptions

readonly dataOptions?: PivotTableDataOptions

Configurations for how to interpret and present the data passed to the component

# dataSet

readonly dataSet?: DataSource

Data source name (as a string) - e.g. Sample ECommerce.

If not specified, the component will use the defaultDataSource specified in the parent Sisense Context.

# filters

readonly filters?: FilterRelations | Filter[]

Filters that will slice query results

# highlights

readonly highlights?: Filter[]

Filters that will highlight query results

# Representation

# styleOptions

readonly styleOptions?: PivotTableStyleOptions

Configurations for how to style and present a pivot table's data.