# Class PivotTableWidget

The PivotTableWidget component extending the PivotTable component to support widget style options.

# Example

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

<template>
  <PivotTableWidget
     :dataSource="pivotTableWidgetProps.dataSource"
     :filters="pivotTableWidgetProps.filters"
     :dataOptions="pivotTableWidgetProps.dataOptions"
     :styleOptions="pivotTableWidgetProps.styleOptions"
     :title="pivotTableWidgetProps.title"
  />
</template>

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

const pivotTableWidgetProps = ref<PivotTableWidgetProps>({
  dataSource: DM.DataSource,
  dataOptions: {
    rows: [DM.Category.Category],
    values: [measureFactory.sum(DM.Commerce.Cost, 'Total Cost')],
  },
  filters: [],
  title: 'Pivot Table Widget Example',
  styleOptions: {
    spaceAround: 'Medium',
    cornerRadius: 'Large',
    shadow: 'Light',
    border: true,
    borderColor: '#e0e0e0',
    backgroundColor: '#ffffff',
    header: {
      hidden: false,
      titleTextColor: '#333333',
      titleAlignment: 'Center',
      dividerLine: true,
      dividerLineColor: '#e0e0e0',
      backgroundColor: '#f5f5f5',
    },
  },
});
</script>

# Param

Pivot Table Widget properties

# Properties

# Data

# dataSource

readonly dataSource?: DataSource

Data source the query is run against - e.g. Sample ECommerce

If not specified, the query 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

# Chart

# dataOptions

readonly dataOptions: PivotTableDataOptions

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

# description

readonly description?: string

Description of the widget

# styleOptions

readonly styleOptions?: PivotTableWidgetStyleOptions

Style options for both the table and widget including the widget header

# title

readonly title?: string

Title of the widget