Example of Classic Layout in React Pivot Table

/
/
Classic Layout

This sample showcases the classic layout option of the Pivot Table, also known as the Excel-like tabular format. In this layout, each field from the row and column axes is arranged sequentially, displayed side by side in separate rows or columns. Subtotals and grand totals are prominently shown, making it easy to compare and analyze data effectively. Additionally, the repeating labels functionality allows you to control whether field labels are repeated across rows for better readability—both in the displayed pivot table and in exported documents (Excel/PDF).

More Details...

Loading....
Description

The Pivot Table's classic layout displays each field in the row axis side by side in separate columns. By default, grand totals are displayed at the end of all rows, while subtotals are placed in a separate row beneath each group. All other features of the pivot table, such as filtering, sorting, drag-and-drop, expand/collapse functionality, and more, remain the same as in the Compact (Excel-like) layout, which serves as the default layout for the Syncfusion® Pivot Table.

The Classic Layout can be enabled by setting the layout property to Tabular within the gridSettings. Using the Classic Layout toggle switch, the pivot table layout can be dynamically switched between Compact and Classic layouts at runtime. In addition, the Repeating Labels toggle switch controls the repeatItemLabels property within the gridSettings. This option is exclusive to the Classic Layout and should be enabled only when it is active. When set to true, row field labels are repeated across all rows, improving readability and analysis in reports with multi‑level hierarchies. The same behavior is preserved when exporting the pivot table to Excel or PDF formats, ensuring consistency between the displayed and exported data.

Note: For pivot table reports containing multi-level hierarchies with extensive sublevels, the default layout (i.e., compact view) is recommended, as it effectively displays data in a simple and compact manner.


More information on the React Pivot Table can be found in this documentation section.