Expose a header template for the chip area of the headers of the rows dimension in the pivot grid

[dkamburov]

Is your feature request related to a problem? Please describe.

When there a 5-6 row dimensions or more, the chips might get misaligned with the cells of the row dimensions.

Describe the solution you'd like

We need a way to render template or headers that are matching the cells. This should be visible when pivot configuration ui is hidden.

Describe alternatives you've considered

• template
• headers that are enabled with an option

Additional context

[AnjiManova]

Based on the above mentioned issue, we explored and defined a possible solution covering all pain points and aligned our suggestion to the implementation. Our suggestion is based on the functionalities we already had in the implementation, and we tried to reduce the redundant visual breaking change without changing any features related to the Grid.

Link for Figma work file

1. Prototype -> Pivot Grid - Adding Column Fields

2. Prototype -> Pivot Grid - Removing Column Fields

3. Prototype -> Pivot Grid - Moving Column Fields

Please review our suggestion and let us know if we covered everything. Any feedback will be more than welcomed.

[skrustev]

I would like to add to the current design, that with this approach the chips inside the headers would not be draggable out of the box, because of the way each chip is isolated in its own header. If you are ok with the user not being able to move them around we can mark it as a limitation. Otherwise the logic behind the chip dragging would need to be reimplemented for the pivot as well.

[sdimchevski]

I don't know what it would cost in effort and resources to do and if there is any reason for this not to change. If there is - OK, we can mark it as a limitation, otherwise if the client approves this behavior, I think we're good to go with reimplementing the logic behind the chip dragging

[MayaKirova]

I’ve been thinking about it, and since the customer that wants this feature does not wants to have any configuration options (uses a predefined configuration and just want to display it as read-only), similar to this: https://www.infragistics.com/products/ignite-ui-angular/angular/components/pivotGrid/pivot-grid-custom He basically disabled all chips globally via an option - [showPivotConfigurationUI]='false' He doesn’t want the chips since he does not want to allow users to change anything in the configuration.

Perhaps we could just expose headers with just text via an additional options (something like showRowHeaders). The customer won’t be needing a whole chip in that header, since he wants a read-only view where nothing is interactable and chips assume some interaction – moving, filtering, removing etc. .

In case someone wants both configuration chips (showPivotConfigurationUI=true) and headers (showRowHeaders=true), perhaps we could keep the existing chip area, above the headers and so user can do any reorders, filters, sorts and so on via the chip area there and just have the headers as visual guide when looking at the row’s data below. For example (excuse the ugly text in the headers, my design skills are non-existent): In this way we can keep the existing logic for drag/drop of chips, we’ll introduce no breaking changes since all we’re adding is a new property for showing static headers and the customer will be happy with minimum effort.

[skrustev]

While implementing it I've been thinking, because I didn't see any mention, since row dimension resizing is enabled by default and since these headers are related to the headers in the rows themselves, maybe resizing should be possible through these new headers as well and the resize line should span across them as well. Here's how it currently looks in the PR where you can check it out:

Also I've been thinking that maybe we should enable sorting for the new headers as well? I think it would be nice when the users hide any configurations, to be able to sort the rows by dimension values as well. That's why on the screenshot above you can see the sort icon, but its for testing purpose only. We would need for them to match with other columns as well though. Not sure how the sorting icon would be best positioned in this case.

You can play these things I mentioned already in the draft, but if we decide not to include them we can easily disable them.

[dkamburov]

@sdimchevski @AnjiManova can you please check the comment from @skrustev

[sdimchevski]

@dkamburov @skrustev @ChronosSF Although we talked about not having any features at the beginning I'm OK with the sorting and resizing suggestion. We've updated the design in Figma