• vue

<template>  <div>        <ejs-pivotview                   :dataSourceSettings="dataSourceSettings"          :width="width"          :height="height">        </ejs-pivotview>    </div></template><script>import Vue from "vue";import { PivotViewPlugin } from "@syncfusion/ej2-vue-pivotview";Vue.use(PivotViewPlugin);export default Vue.extend({  data: () => {    return {      dataSourceSettings: {        dataSource: getPivotData(),        columns: [{ name: "Year", caption: "Year" }],        values: [          { name: "Sold", caption: "Units Sold" },          { name: "Amount", caption: "Sold Amount" },        ],        rows: [          { name: "Country", caption: "Country" },          { name: "Products", caption: "Products" },        ],      },      width: "100%",      height: 400,    };  },});function getPivotData() {  var pivotData = [      { Sold: 51, Amount: 86904, Country: 'France', Products: 'Mountain Bikes', Year: 'FY 2015', Quarter: 'Q2'},      { Sold: 21, Amount: 33505.5, Country: 'Germany', Products: 'Touring Bikes', Year: 'FY 2015', Quarter: 'Q1'},      { Sold: 74, Amount: 126096, Country: 'Germany', Products: 'Mountain Bikes', Year: 'FY 2015', Quarter: 'Q1'},      { Sold: 77, Amount: 131208, Country: 'United Kingdom', Products: 'Mountain Bikes', Year: 'FY 2015', Quarter: 'Q1'},      { Sold: 92, Amount: 156768, Country: 'United Kingdom', Products: 'Mountain Bikes', Year: 'FY 2015', Quarter: 'Q2'},      { Sold: 43, Amount: 73272, Country: 'United States', Products: 'Mountain Bikes', Year: 'FY 2015', Quarter: 'Q1'},      { Sold: 43, Amount: 73272, Country: 'United States', Products: 'Mountain Bikes', Year: 'FY 2015', Quarter: 'Q2'}  ];return pivotData;}</script>

Classic (tabular) layout

The classic (tabular) layout is designed to enhance data visibility by presenting information in a traditional table format. In this layout, each row label is displayed distinctly at various levels across separate columns, ensuring clarity and better organization. This structured approach simplifies the analysis of datasets, making it easier to interpret relationships and trends within the data through a detailed, organized, and user-friendly table format.

• Classic layout example
• Classic layout documentation

Pivot Chart

The Vue Pivot Chart can easily be integrated with pivot data rendered independently, and includes support for plotting more than 20 chart types. The end-user experience is greatly enhanced with a set of user-interaction features such as drill up, drill down, zoom, pan, crosshair, trackball, events, selection, and tooltip. Highly interactive field list options are available for generating reports from the relational data dynamically.

• More details on pivot chart

Virtual scrolling

Large amounts of data can be divided and displayed in the rows and columns of the current viewport using the virtual scrolling feature. Users can navigate to a desired view by scrolling the vertical and horizontal scrollbars.

• Virtual scrolling example
• Virtual scrolling documentation

Paging

Large amounts of data can be divided and displayed page by page with the paging feature. The pager UI allows users to navigate to a desired page using the navigation buttons or an input text box. Row and column page sizes can be changed independently at runtime. Furthermore, toggle the position of the row and column pagers, modify their visibility, and visualize them using a compact view mode.

• Paging example
• Paging documentation

Pivot table field list and group fields

The Vue Pivot Tablefield list andgroup fields options are automatically populated with fields from the bound data source. They allow end users to drag, filter, and sort fields, and create pivot reports at runtime.

• Field list example
• Grouping bar example

OLAP data binding

The Pivot Table can be connected to an OLAP cube, and its result can be visualized in both tabular and graphical formats.

• More details on OLAP data binding

Defer layout update

Users can refresh the control on demand instead of during every UI interaction in the Pivot Table.

• Defer layout update example
• Defer layout update documentation

Drill down and drill up

The built-in drill-down (expand) and drill-up (collapse) capabilities visualize data in detailed views and abstract views, respectively. By default, the data is displayed in a grouped manner.

• Drill operation example
• Drill operation documentation

Editing and updating

Users can create, read, update, and delete operations for raw data at runtime and update their changes to the underlying data source, reflecting the information in all corresponding cells. The Pivot Table control supports various edit modes such as inline, dialog, batch, and column edit through an interactive UI.

• Editing and updating example
• Editing and updating documentation

Filtering

Built-in member filters and Excel-like filters with advanced filtering options can be used to easily filter and view data as required. It is also possible to filter data programmatically in the Pivot Table.

Aggregation

Users can perform calculations on a group of values using the aggregation option. By default, values are added together. The other aggregation types are average, minimum, maximum, count, distinct count, product, index, population standard deviation, sample standard deviation, population variance, sample variance, running totals, difference from, percent of difference from, and percent of grand total.

• Aggregation example
• Aggregation documentation

Calculated fields

Calculated or unbound fields generate unique fields with users’ calculated values by executing a simple, user-defined formula.

• Calculated field example
• Calculated field documentation

Drill through

The drill through feature easily obtains a list of raw items for a particular value cell or summary cell.

• Drill through example
• Drill through documentation

Totals

Subtotals and grand totals are calculated automatically by the pivot engine inside the control and displayed in the Pivot Table to help users make decisions more quickly. Also, users can show or hide subtotals and grand totals for rows and columns.

• Show or hide totals example
• Show or hide totals documentation

Conditional formatting

Users can define conditions that, when met, format font style, text color, background color, and font size for values and summary cells.

• Conditional formatting example
• Conditional formatting documentation

Number and date formatting

Number and date formatting help transform the appearance of the actual cell values.

• Number formatting documentation
• Date formatting documentation

Grouping date and number

The Pivot Table control automatically groups dates and numbers, so the date type can be formatted and displayed based on year, quarter, month, day, and more. The number type can be grouped by range, such as 1-5 or 6-10.

• Grouping date and number example
• Grouping date and number documentation

Frozen headers

Users can freeze row and column headers to compare them with cell values.

Columns and rows

Toolbars

A toolbar enhances user interaction and provides access to frequently used features. These features include new report, save report, save as report, rename report, delete report, report list, show grid, show chart, show or hide totals, export reports, and more.

• Toolbar example
• Toolbar documentation

Exporting

Export the Vue Pivot Table data to Excel, PDF, and CSV formats. Users can also customize the exported document by adding header, footer, and cell properties like type, style, and position programmatically.

• Export to Excel documentation
• Export to PDF documentation

Export to Native Excel PivotTable

Users can export Syncfusion Pivot Table directly to Microsoft Excel’s native PivotTable format, not just as a static table or flattened data. This ensures that all interactive features are preserved, allowing users to fully utilize Excel’s PivotTable functionalities, including filtering, sorting, expanding/collapsing groups, and modifying field lists.

Key advantages:

• Native Excel PivotTable: Exports to the actual PivotTable format used by Excel, preserving rows, columns, values, and filters.
• Fully interactive in Excel: Continue to sort, filter, expand/collapse groups, and modify field lists just like in your original pivot.
• Advanced analysis tools: Leverage Excel’s built-in PivotTable capabilities for deeper insights and flexible reporting.
• Reusable layout: Save time by exporting your configured pivot layout for future use or easy sharing.

• Export as Pivot example

Optimized for mobile devices

Other supported frameworks

The Pivot Table is also available in Blazor, React, Angular, and JavaScript frameworks. Explore its platform-specific options through the following links:

• Blazor Pivot Table
• React Pivot Table
• Angular Pivot Table
• JavaScript Pivot Table

Supported browser

The Vue Pivot Table works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera.