# Class PivotTable

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 { PivotTable, type PivotTableProps } from '@sisense/sdk-ui-vue';
import * as DM from '../assets/sample-retail-model';

const dimCategoryName = DM.DimProducts.CategoryName;
const dimColor = DM.DimProducts.Color;
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>

# Remarks

Configuration options can also be applied within the scope of a <SisenseContextProvider> to control the default behavior of PivotTable, by changing available settings within appConfig.chartConfig.tabular.*

Follow the link to AppConfig for more details on the available settings.

# 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.