We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to remove excessive margins in editable data grid

I'm trying to remove the 15px right margin in the data grid headers and I nothing I override in CSS seems to eliminate all the wasted space.

I have tried the following in CSS with no luck:

.e-grid .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
  padding-left: 4px;
  padding-right: 4px;
  margin: 0px 0px 0px 0px;

e-grid .e-gridheader .e-sortfilter .e-headercelldiv {
  padding-left: 4px;
  padding-right: 4px;
  margin: 0px 0px 0px 0px;


3 Replies

DT Dan Towey January 9, 2023 03:35 PM UTC

Hoping someone has dealt with this before and can help me?

SG Suganya Gopinath Syncfusion Team January 10, 2023 05:04 PM UTC

Hi Dan,

Yes, we have forwarded issue this to the concern team. Team is validating and will update the details shortly.


Suganya Gopinath.

JC Joseph Christ Nithin Issack Syncfusion Team January 23, 2023 04:27 AM UTC


  Based on your query, you want to remove the additional margins and padding in the header cell. Your requirement can be achieved by using the headerCellInfo event of the EJ2 Grid.

  Refer the below code example:



  headerCellInfo(args) {

    args.node.querySelector('.e-headercelldiv').style.padding = '0px';

    args.node.querySelector('.e-headercelldiv').style.margin = '0px';



Sample: https://stackblitz.com/edit/angular-tnqgws?file=src%2Fapp.component.html,src%2Fapp.component.ts


Joseph I.

Live Chat Icon For mobile
Up arrow icon