How can I change the styling of a column based on whether the column is pinned to the left?

Question

Is it possible to change the style of a column based on whether it's pinned or not?

I'm able to change the style based on the value while the table is rendered for the first time. What I'm trying to do is change the style when the column is pinned using the mouse (drag and pin).

I'm able to figure out which column has been pinned by firing the ColumnPinnedEvent in gridOptions. I tried modifying the cellClass of the column obtained from 'event.column' but it does not get reflected on the table.

onColumnPinned(event: ColumnPinnedEvent) {
    const column = event.column;
    if (column) {
        const columnDef = column.getColDef();
        const userProvidedColDef = columnDef;
        userProvidedColDef.cellStyle = event.pinned ? { color: 'white', backgroundColor: 'black' } : {};
        column.setColDef(columnDef, userProvidedColDef);
    }
}

The style of the cells are getting updated, but only if they are outside the view. When I tried scrolling down, the data items which were not in view had the updated style. — Vivek Kumar

Paritosh Paritosh · Accepted Answer · 2019-04-01T08:54:10

You can achieve the same by just with the CSS.

Have a look at the plunk I've created: Column Pinning and styling. Add or remove any column to see the styles updated for it.

.ag-body-viewport .ag-pinned-left-cols-container .ag-row {
    background-color: yellow;
}

Here .ag-body-viewport .ag-pinned-left-cols-container hierarchy is important. Just using .ag-pinned-left-cols-container .ag-row will not work as some row levels' styling of ag-grid will overwrite it.

So far this information is enough to solve your challenge, let me know in addition to this, you have some more details to provide.

How can I change the styling of a column based on whether the column is pinned to the left?

1 Answers