CODEWITHSUNDEEP
ag-gridag-grid-react
Anurag Mantripragada
Anurag Mantripragada

Reputation: 37

Remove border-bottom for the cells in a specific column

Is there a way to remove the row seperator for a specific column. I tried overriding default styles by writing a scss mixin as shown below:

    .ag-theme-balham-custom {
       @include ag-theme-balham(
        (
          row-border-color: null,
        // row-border-color: blue,
        )
       );
     }

It is working but obviously it removes the seperator for all the grid rows. What I need to achieve is, if there are 10 columns, the row separator(bottom border) of 9th and 10th column's rows should be hidden by default and it should appear only when the header of corressponding column is hovered.

As highlighted in the image, the row seperator should be hidden for Test column and it should only appear when the Test column header is hovered.

I am referring to the lines that are highlighted

Upvotes: 1

Views: 5518

Answers (1)

Muhammad Haseeb
Muhammad Haseeb

Reputation: 1341

You can do this by adding a cell-class rule to that specific column in your columnDefs i.e.

  {
    field: 'yourField',
    cellClassRules: { 'no-border-cell' },
  }

You can even apply class when your cell i.e.

cellClassRules: { 'no-border-cell': ({ data }) => data.fieldValue === 'a' }

For Row border you can use getRowStyle in your gridOptions i.e

gridOptions.getRowStyle(params) {
    if (params.data.myColumnToCheck === myValueToCheck) {
        return {'border': 'none'}
    }
    return null;
}

Upvotes: 1

Related Questions