Pivot Table

The Pivot Table component in your application allows for dynamic analysis and summarization of large data sets. This component is designed to transform raw data into meaningful insights by organizing it into rows and columns, providing the ability to apply aggregate functions such as sums, averages, or counts.

Key Features

• Data Grouping: Organize data into specific categories, allowing for analysis of grouped information based on different fields.
• Row and Column Organization: Users can customize how data is displayed by dragging and dropping fields into row or column areas to visualize the data from different perspectives.
• Filters: Apply filters to focus on particular subsets of data or exclude irrelevant data points.
• Aggregation Functions: Choose from various aggregation functions (e.g., sum, count) to analyze data. These functions calculate results based on the data in the rows and columns.
• Grand Totals and Sub Totals: Automatically calculate and display totals and subtotals for grouped data, providing a clear summary of the data at different levels of granularity.
• Sorting and Ordering: Organize rows and columns based on custom sorting options, making it easier to view data in a meaningful order.

Use Cases

• Business Reports: Create reports that highlight key trends and metrics in large data sets, enabling decision-making based on aggregated insights.
• Data Analysis: Perform in-depth data analysis by slicing and dicing data across multiple dimensions, such as time, location, or product categories.
• Financial Analysis: Summarize and compare financial figures, such as revenue or expenses, for different periods or departments.

The Pivot Table component offers powerful flexibility, making it a valuable tool for users needing to analyze and present data in a concise and meaningful way.

Creating a Pivot Table

1. Under Inventory (), click “Component“, which is on the second left panel.

2. Click Create placed on the second horizontal panel from the top, and a dialog box “Create Component” pops up.

3. Select Type as “Media Uploader“, Name it in the text box and click “Create“.

4. When you click Create (), Basic option of Config menu for the Media Uploader opens.
5. Now you will see the following menu options:
   • Basic
   • Properties
   • Style
   • Animation
   • Events
   • Data

Note: You can create this component in the layout option of the configurator section as well. After this, you can follow the process given below.

Basic

Basic Properties	Description
Type	The Component Type indicates the type of component you are adding. In this case, it defaults to “Pivot Table” and cannot be changed here. This selection is made initially when you create the component.
Reference Name	The Reference Name is a unique identifier assigned to the component for internal use. This name is visible only to vFlow users, and is not displayed to end-users. The Reference Name is intended for your convenience, helping you easily identify and manage the component throughout.
Description	The Description field is intended for use by application designers or administrators (vFlow users) to provide additional context or details about the component. This description is not visible to end-users and is used solely for internal reference to assist with component management.

Properties

The Properties page for the Pivot Table component allows users to configure key settings and functionalities for displaying data. Based on the screenshot you provided, here’s a breakdown of the available options:

• Sorting Options: This dropdown enables users to determine whether sorting is required. If sorting is enabled, users can specify which fields will be sorted (for rows or columns).
• Sorting Order: Allows users to select the type of sorting (ascending or descending) for hierarchy members.
• Configurator Active: When checked, it activates the configurator that helps users customize the table layout or settings.
• Configurator Button: This option adds a button that provides users with the ability to further configure the Pivot Table.
• Aggregations: Enables the aggregation of data, such as sum, average, or other summary functions, across the rows and columns.
• Aggregation Labels: Allows displaying labels for the aggregated data to clarify what aggregation function is being applied.
• Grid Type: This dropdown specifies the type or form of the grid used in the Pivot Table.
  • Compact: This option organizes the data in a condensed format, minimizing empty spaces to fit more data within the table and making it easier to view larger datasets in a smaller area.
  • Classic: The Classic grid format presents data in a traditional pivot table layout, with clear distinctions between rows and columns, and is ideal for users familiar with standard pivot table structures.
  • Flat: This option removes hierarchical grouping and presents the data in a flat, simple, and continuous table format. It’s useful when users want to display all the data in one level without any nested categories.
• Total: Controls the display of subtotals, which can be configured to show only for columns, rows, or both. Users can hide subtotals by setting this property to “off.”
• Grand Total: Specifies whether to display grand totals for columns, rows, or both. Similar to subtotals, the grand totals can also be hidden by setting this property to “off.”
• Filter: When enabled, users can apply filters to the Pivot Table data.
• Report Filters Area: Adds a designated area for report filters, allowing users to filter data displayed in the table.
• Drill Through: Enables users to drill through data for more detailed insights.
• Header: When enabled, it will display the header.
• Hierarchies: When selected, hierarchies are displayed in the Pivot Table, organizing data in a tree-like structure.
• Hierarchy Captions: Displays labels or captions for the hierarchies for easier identification.
• Header: It is displayed on the top of the component. To know more about header, click here or see the Header section under the System Components.
• Footer: It is displayed on the bottom of the component. To know more about the footer, click here or see the Footer section under the System Components.

These properties provide flexibility for users to fine-tune the appearance and behavior of the Pivot Table, ensuring that data is presented and analyzed effectively.

Style

The Style option allows you to personalize the appearance of the Pivot Table. This includes adjusting various visual aspects to ensure it complements your application’s branding and overall design. Here’s a breakdown of different settings that you can make adjustments to:

• Large Screen Width: The component width is adjustable by entering a percentage value in the text box. For example, if the width is set to 100%, the Pivot will take the full width of the screen.
• Transparent: When you click to select this checkbox, the component will have a transparent background, allowing it to blend into the background of the page or layout.
• Background Color: To choose the background color for the Pivot Table, you can use a color picker or enter a hexadecimal or RGB color code. The default opacity is set to 100%.

• Dimension:
  • Height: You can define the height of the Pivot Table in pixels (px) or percentage (%).
  • Maximum Height: You can set the maximum height to prevent the Pivot Table from exceeding this limit.
  • Width: You can specify the width of the Pivot Table in pixels (px) or percentage (%).
  • Maximum Width: You can define the maximum width to prevent the Pivot Table from expanding beyond this size.
• Spacing:
  • Margin: To adjust the space around the Pivot Table, enter values for top, right, bottom, and left margins in pixels (px). Default is 0px for all sides.
  • Padding: To set the internal space within the Pivot Table, enter values for top, right, bottom, and left padding in pixels (px). Default is 0px for all sides.
  • Border Radius: To define the curvature of the corners of the Pivot Table, enter values for top-left, top-right, bottom-right, and bottom-left in pixels (px). The default is 0px for all corners.

• Custom CSS Class Name
  • Users can enter custom CSS class names in the provided input field to apply additional styles.
  • Multiple Classes Names can be provided, If needed. They can be applied by separating them with commas, as indicated by the example (classA, classB).

These settings allow you to tailor the Pivot Table to your specific design preferences and requirements.

Animation

This option allows you to apply several animations to enhance the Full calendar’s loading appeal. The following are the available animations:

1. Bounce
2. Flash
3. Pulse
4. Rubber Band
5. Handshake

Their Configuration:

1. Click the Type list, and then select an animation to apply an effect when the Full calendar loads.
2. After you select one of the animations (for example, Bounce), you will see the following configuration options:
   • Speed: In this field, you can select one of the following options to adjust the speed of the animation:
     • Faster
     • Fast
     • Slower
     • Slow
   • Delay: Click this list to select a value (for example, 3 seconds). This value specifies a time period. The application will load the animation after this time period (for example, 3 seconds).
   • Repeat: In this list, select a value (for example, 2). This value specifies the total number of times the application will play the animation.
     
3. After you configure the Full calendar’s animation properties, click  to apply them to the Full calendar.

Events

The Events option of the Pivot Table component, as shown in the image, allows you to assign task groups that will execute when specific actions occur within the Pivot Table component. These tasks can be created separately in the configurator or inventory and can be grouped to perform various actions when certain events are triggered.

Here’s a breakdown of the Events section:

1. On Load:
   • This option lets you assign a task group that will execute automatically when the Pivot Table component is loaded.
   • This could be useful for initializing data or triggering other actions as soon as the Pivot Table is displayed.
2. Custom Load:
   • The Custom Load event enables you to trigger a specific task group during a customized loading scenario.
   • Similar to the previous options, you can choose the task group to be executed from the Select Task Group dropdown list or go back to the inventory or configurator to make a task or task group if needed.

After assigning the appropriate task groups to these events, click the button to apply your configuration to the Pivot Table component.

In summary, the Events section provides flexibility in automating actions within your Pivot Table component by linking predefined tasks to occur during the Pivot Table’s loading process. This customization ensures a more dynamic and interactive user experience, tailored to your application’s specific needs.

Data

If you want to fetch and show some data in the Pivot Table, select one of the data types that fits best for the business requirements:

Note: To learn more about Data, click here or check the post under configurator.