How to customize the width and height of the drill-through dialog in a React Pivot Table?

3 mins read

Introduction

When working with React Pivot Table, there might be scenarios where you need to customize the dimensions of the drill-through dialog and the grid column contained within it for a better user interface or to improve the data presentation. This can be achieved by overriding the default styles applied to these elements. This article will provide guidance on adjusting the width and height of the drill-through dialog and the grid column within it.

Adjusting the width and height of the drill-through dialog

In order to alter the width and height of the drill-through dialog, you must target the CSS class associated with the dialog. This is feasible by writing custom CSS styles that override the defaults. Below is an example code snippet that demonstrates how to achieve this.

/* customize the drill through dialog width and height here. */
.e-drillthrough-dialog.e-control.e-dialog.e-lib.e-dlg-modal.e-popup.e-popup-open{
    width: 100% !important; /* Custom width for the dialog */
    max-height: unset !important; /* Unsets any max-height to allow custom height */
    height: 100% !important; /* Custom height for the dialog */
}

Customizing the drill-through grid column height

After adjusting the dimensions of the dialog, you might want to customize the height of the grid column within the drill-through dialog to ensure it fits well within the newly sized dialog. This can also be achieved by overriding the corresponding CSS classes. The code snippet below provides an example of how to set a custom height for the drill-through grid column.

/* customize the drill through grid column height here. */
.e-drillthrough-dialog .e-drillthrough-grid .e-gridcontent .e-content {
    height: 90vh !important; /* Custom height for the grid column */
}

Note

When customizing the styles, the !important rule is used to ensure that these custom styles have higher specificity than the default styles applied by the library. This ensures your customizations take effect.
It’s a good practice to adjust the drill-through grid content height to be less than the dialog height to accommodate other elements of the dialog, such as the header and padding, as shown in the example above.
It’s essential to specify the grid column height in viewport units (i.e., vh) rather than percentages to ensure that a vertical scrollbar is displayed when the content exceeds the visible area.

The following screenshots portray the difference between before and after adjusting the width and height of the drill-through dialog,

Before customization

After customization

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

Conclusion

I hope you enjoyed learning how to customize the width and height of the drill-through dialog in a React Pivot Table.

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!

Did you find this information helpful?

Yes

Comments (0)