When you have a table with lots of numbers that need summarizing, when you want to compare subsets of records, or when you’re trying to find trends, a pivot table is your best friend.
A pivot table is a versatile tool that helps you summarize the information in a data list by slicing and dicing it so you can look at it from different perspectives. It works by grouping records together based on either one or multiple fields, and summarizing the data from those records, either by counting the number of records per group, or by using a specific summary function (like count, or sum) on another field.
Add Pivot table to the page
Firstly, find the Pivot table control in the controls add panel,. Then, drag and drop it into a section or container on your page.
Select data source
The source explains where you found the information that is in your graph. Select the target data list as the source content to create based on filters conditions.
Open the Content > Data Source block, and in the Application section, select the application which is the current application by default.
Afterward, move on to the List section. Select the data list under the selected application.
In the Data Filters section, click the condition button to filter the data from the selected data list.
Rows, Columns and Values
Select fields as row, column and value of this Pivot table, and set the layout.
Rows
Open the Content > Rows block, click the "+ Add Row" button to add one or multiple fields as rows.
Click each item to expend setting section. you can choose the list field, column width and the colors of text and background.
The available Dimension will based on the type of this selected field. If the field is a date type, you can choose day, week, month, quarter, or year.
Columns
Open the Content > Columns block, click the "+ Add Column" button to add one or multiple fields as columns.
Click each item to expend setting section. you can choose the list field, and column width in PX or %.
Values
Open the Content > Values block, click the "+ Add values" button to add one or multiple fields as values.
Click each item to expend setting section. you can choose the list field, and column width in PX or %.
Dimension can be count (count the number of records), sum (sum of the total value of records), Count distinct (tallies unique values in data), Avg, Max or Min.
Show Total: turn on this will display the sub total and grand total rows.
Note:
When Dimension select sum or Avg, show value as could show percentage in the table.
Styling the Pivot table
General
Table Width: Set the width of the pivot table as fixed in px or percentage of the container in %.
Column Width: Set how the column width will be allocated for each column. Fixed means the column width will be exactly the value you set for each column in the column settings panel, while Auto means the column width will be scaled based on the total width of the Table Width set above, and allocated with the ratio of each column width.
Table Alignment: Choose between Right, Center, and Left.
Border Type: Select the type of border to use around the table.
Hidden border for body container: Turn is ON if you do not want the show this border in the table body.
Radius: Set the border radius to control corner roundness.
Shadow: Set options to apply a box shadow on the Data Table.
Table Header
Padding: Change the padding settings of the content inside in each header cell.
Border Type: Select the type of border to use around the table header.
Align: Align the text of the table header to the left, center, or right.
Vertical Align: Vertical align of the table header text to top, middle, or bottom.
Typography: Change the default typography options for the text of table header.
Color: Select the color of the header’s text.
Background color: Select the header's background color. You may use a solid or gradient color.
Table Content
Padding: Change the padding settings of the content inside in each content cell.
Border Type: Select the type of border to use around the table content cell.
Align: Align the text of the table content to the left, center, or right.
Vertical Align: Vertical align of the table content text to top, middle, or bottom.
Content Style: Set the style of the content area.
Typography: Change the default typography options for the text of table content.
Color: Select the color of the content’s text for both Normal and Hover states.
Background color: Select the content’s background color. You may use a solid or gradient color for both Normal and Hover states.
Sub totals style: Set the style of the Sub total's row.
Typography: Change the default typography options for the text of table content.
Color: Select the color of the content’s text for both Normal and Hover states.
Background color: Select the content’s background color. You may use a solid or gradient color for both Normal and Hover states.
Grand Total
Padding: Change the padding settings of the content inside in the grand total row.
Border Type: Select the type of border to use around the grand total row.
Align: Align the text of the grand total row to the left, center, or right.
Vertical Align: Vertical align of the grand total row text to top, middle, or bottom.
Typography: Change the default typography options for the text of grand total row.
Color: Select the color of the grand total row’s text.
Background color: Select the grand total row's background color. You may use a solid or gradient color.
Advanced Settings
Set the Advanced options that are applicable to this control.