How to expand a header that contains a Dot(.) character?

This article explains how to expand a header that contains a Dot(.) character in Vue Pivot Table .

Expand a header that contains a Dot(.) character

In certain situations, you might encounter a problem while trying to expand a specific header that contains a Dot(.) character. This problem arises because we use a Dot(.) as the default separator to identify header levels in our pivot table. In such scenarios, you need to specify a different delimiter (for example, ##) for header levels by setting the headerDelimiter property within the valueSortSettings.

Here is a code example that shows how to expand a header that contains a Dot(.) character.

[App.Vue]

<template>
    <ejs-pivotview id="pivotview" :datasourcesettings="dataSourceSettings">
	</ejs-pivotview>
</template>

In the code example above, the headerDelimiter is set to ‘##’ instead of the default delimiter (i.e., Dot(.)). You can choose any other sequence of characters that does not conflict with your header names.

The following GIF image, which portrays the results of the code snippet mentioned above,

GIF

For a practical demonstration, refer to the sample of stackblitz

Conclusion:

I hope you enjoyed learning how to expand a header that contains a Dot(.) character.

You can also refer to our Vue Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Vue Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!