The Dynamic Pivot Grid Component is an advanced data visualization and analysis tool that organizes complex datasets into a cross-tabular format. It allows users to summarize, analyze, and compare large volumes of data across multiple dimensions. The component provides powerful capabilities for data transformation, including grouping, filtering, sorting, and calculation of summary values. Pivot grids are particularly useful for business intelligence, financial analysis, and data exploration scenarios.
titleTranslations - Sets the title text displayed above the pivot grid, with support for multiple languages. For example, {"en-US": "Sales Performance Analysis", "de-DE": "Analyse der Verkaufsleistung"} allows proper localization of the component title.
subtitleTranslations - Sets a secondary text displayed below the title, with language support. For example, {"en-US": "Quarterly breakdown by region and product", "de-DE": "Quartalsaufschlüsselung nach Region und Produkt"} provides additional context about the data being presented.
allowFiltering - Enables filtering capabilities for pivot grid fields. When enabled, users can apply filters to reduce the dataset to specific values of interest, enhancing data analysis capabilities.
showBorders - Determines whether borders are displayed around cells in the pivot grid. When enabled, cell borders improve the readability of complex datasets by providing clear visual separation.
allowSorting - Enables sorting capabilities for pivot grid dimensions. When enabled, users can sort data within any column or row to identify trends, highest/lowest values, or other patterns in the data.
showColumnGrandTotals - Determines whether grand totals are shown for columns. When enabled, a summary row calculating totals across all columns is displayed at the bottom of the grid.
showRowGrandTotals - Determines whether grand totals are shown for rows. When enabled, a summary column calculating totals across all rows is displayed at the right edge of the grid.
showRowTotals - Controls the display of subtotals for each row group. When enabled, subtotal rows are shown for each grouped category, providing intermediate summary information.
showColumnTotals - Controls the display of subtotals for each column group. When enabled, subtotal columns are shown for each grouped category, providing intermediate summary information.
showFieldPanel - Displays a panel allowing users to customize the pivot grid layout. When enabled, users can drag and drop fields between different areas (data, row, column, filter) to reconfigure the analysis dynamically.
showDataFields - Controls visibility of data fields in the field panel. This property only applies when showFieldPanel is enabled and determines whether users can manipulate value fields.
showRowFields - Controls visibility of row fields in the field panel. This property only applies when showFieldPanel is enabled and determines whether users can manipulate row dimension fields.
showColumnFields - Controls visibility of column fields in the field panel. This property only applies when showFieldPanel is enabled and determines whether users can manipulate column dimension fields.
showFilterFields - Controls visibility of filter fields in the field panel. This property only applies when showFieldPanel is enabled and determines whether users can manipulate filter fields.
allowFieldDragging - Enables drag-and-drop functionality in the field panel. This property only applies when showFieldPanel is enabled and allows users to reposition fields between different areas for on-the-fly analysis restructuring.
paddingClass - Configures the padding around the component using CSS classes. For example, "p-3" adds medium padding on all sides of the pivot grid component.
dataSourceId - Specifies the data source ID for retrieving pivot grid data. For example, "api/sales-analysis" connects the pivot grid to an endpoint that provides the appropriate data structure for pivot analysis.
getEntityCollectionHttpRequestParametersMap - Configures HTTP request parameters for fetching data. This allows for customizing query parameters or path variables that are sent when requesting data from the specified source.
elements - Defines the fields configuration for the pivot grid, including how raw data fields are mapped to pivot areas (row, column, data, filter). This configuration determines which aspects of the data are used for different dimensions of the analysis and how values are calculated and displayed.
id - Specifies a unique identifier for the component, useful for programmatic access in testing or custom code.
dataTestId - Sets a testing hook ID for automated testing, allowing test scripts to reliably identify this pivot grid component.
enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, this pivot grid can be highlighted during onboarding tours.
guidedTourHotSpotTitle - Sets the title text displayed when this component is highlighted in a guided tour, with support for translations.
guidedTourHotSpotDescription - Sets the descriptive text explaining the pivot grid's purpose during a guided tour, with support for translations.
The Pivot Grid component works best with flat, tabular data in the following format:
[
{
"region": "North",
"product": "Widgets",
"quarter": "Q1",
"year": 2023,
"sales": 12500,
"cost": 7500,
"profit": 5000
},
{
"region": "North",
"product": "Gadgets",
"quarter": "Q1",
"year": 2023,
"sales": 8200,
"cost": 5100,
"profit": 3100
},
// Additional records...
]
The elements property configuration determines how these fields are used in the pivot grid's structure:
The elements property allows for detailed configuration of how data fields are used in the pivot grid:
[
{
"dataField": "region",
"area": "row",
"caption": "Sales Region"
},
{
"dataField": "quarter",
"area": "column",
"caption": "Quarter"
},
{
"dataField": "sales",
"area": "data",
"caption": "Total Sales",
"summaryType": "sum",
"format": "currency"
}
]
Each field can be configured with: