How to customize the font styles for the entire contents of a React Pivot Table?

Introduction

When working with React Pivot Table, there might be scenarios where you need to customize the font styles, including font size, font family, and font style across different elements of the pivot table like the row headers, column headers, and value cells. This customization can significantly enhance the readability and aesthetic appeal of the pivot table. This article will guide you on how to achieve this customization using CSS.

Customizing font styles

To customize the font styles of the row headers, value cells, and column headers in a pivot table, you need to target these elements specifically using their respective CSS classes. The example below illustrates how to set the font-size, font-family, and font-style properties for the mentioned pivot table elements.

[index.css]

.e-pivotview .e-rowsheader .e-cellvalue, /* target the rows headers */
.e-pivotview .e-headercell .e-cellvalue, /* target the columns headers */
.e-pivotview .e-headertext, /* target the values header */
.e-pivotview .e-grid .e-rowcell { /* target the values cells */
  font-size: 18px !important; /* Setting the font size */
  font-family: sans-serif !important; /* Setting the font family */
  font-style: italic !important; /* Setting the font style */
}

Here’s a breakdown of how the code works:

1. Row headers customization: The row headers in the pivot table have been customized with specific font styles by targeting the CSS selector .e-pivotview .e-rowsheader .e-cellvalue.
2. Column headers customization: To customize the font styles for column headers in the pivot table, we are targeting the CSS selector .e-pivotview .e-headercell .e-cellvalue.
3. Value headers customization: Customization of the value headers in the pivot table is achieved through the use of the CSS selector .e-pivotview .e-headertext.
4. Value cell customization: By targeting the CSS selector .e-pivotview .e-grid .e-rowcell, customization is achieved for the value cells in the pivot table.
5. Finally, each of these elements is assigned a font-size of 18 pixels, a sans-serif font-family, and an italic font-style.

The following screenshots portray the difference between before and after customizing font styles,

Before customization

After customization

For a practical demonstration, refer to the sample of stackblitz.

Additional references

• Apply custom styles to the pivot table headers
• Customize the style of the pivot table header, value, and summary cells.

Conclusion

By customizing the CSS properties as shown in the example, you can effectively change the font styles for the entire contents of a React Pivot Table, including row headers, value cells, and column headers.

You can refer to our React 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 React Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components on 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 questions 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!