Some improvements
Hello there, actually I'm trying to implement all tasks I got and I think it would be good to have some improvements on PivotTable.
- It would be very helpful to have an option in the Grouping Bar to expand or collapse all branches at a specific hierarchy level. Ideally, this could be implemented with simple +/- icons next to each field in the Grouping Bar, allowing users to quickly expand or collapse all members of that field.
- I recently switched my pivot table to Compact mode from Tabular, and now I'm having issues with the rows. I used CSS to style the background of each hierarchy level, as shown in the example below. It works perfectly for columns, where I simply use the index to determine the level and apply a background color accordingly.
However, I can't apply the same approach to rows, because the available parameters have changed. I know it's possible to use a cellTemplate,
but I'd prefer not to—when I interact with the table, it causes
flickering (the background resets to white and then returns to my
style), which is visually disruptive.
So
I'd much prefer using CSS. It would be excellent if you could add some
row-level parameters that expose the hierarchy level of each row header.
Right now, the three available parameters don't help in my case.
Hi Nikita,
Thank you for contacting Syncfusion Support!
We’ve reviewed your query and, based on your requirements, prepared dedicated samples to demonstrate the requested features. Please find the details below:
Add expand and collapse icons in GroupingBar button
We understand your need for a more intuitive way to perform expand/collapse all functionality for each field buttons within the Grouping Bar. To address this, we’ve implemented a sample that introduces custom +/- icons next to each field in the Grouping Bar. These icons allow users to expand or collapse all members of a specific field with a single click.
This enhancement improves usability, especially in large datasets, by giving users quick control over the visibility of grouped data without navigating through individual headers.
Icon sample link - https://stackblitz.com/edit/react-1wclckyy-bdbmr8cb?file=index.js,index.html
In this icon sample:
- We added the +/- icons to the row and column field buttons in the Grouping Bar during the dataBound event, and also implemented the click functionality for these icons.
- Based on the current behavior of the Pivot Table, clicking a Grouping Bar button normally triggers sorting. To handle this, we used the actionBegin event to restrict sorting when the +/- icons are clicked.
- You can customize this logic further based on your needs.
Styling Row Headers by Hierarchy Level in Compact Mode (Without Flicker)
We acknowledge the challenge you’re facing after switching to Compact mode, particularly with styling row headers based on hierarchy level. While column headers expose level-based indexing that makes CSS styling straightforward, row headers currently lack this granularity.
To address this, we’ve prepared a sample that demonstrates a workaround using custom class injection based on the row hierarchy level. This avoids the use of cellTemplate, thereby eliminating the flickering issue you mentioned. The sample applies background colors to row headers purely through CSS, ensuring a smooth and visually consistent experience.
Style sample link - https://stackblitz.com/edit/react-1wclckyy-bdbmr8cb?file=index.js,index.html
In this style sample:
- We added custom class names to row headers using the queryCellInfo event.
- Styles were then applied using CSS based on those class names.
- You can extend this approach to apply custom styles to specific fields or levels as needed.
Sample output GIF:
Please let us know if you have any further questions or need assistance implementing these suggestions. We’re happy to help!
Regards,
Yashvanth G G
