如何根据列是否固定在左侧来更改列的样式？

Question

是否可以根据是否固定来更改列的样式？

我可以在首次呈现 table 时根据值更改样式。我想要做的是在使用鼠标（拖动和固定）固定列时更改样式。

我能够通过触发 gridOptions 中的 ColumnPinnedEvent 来确定固定了哪一列。我尝试修改从 'event.column' 获得的列的 cellClass，但它没有反映在 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);
    }
}

Answer 1

您可以通过 CSS.

实现相同的效果

看看我创建的插件：Column Pinning and styling。添加或删除任何列以查看为其更新的样式。

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

这里 .ag-body-viewport .ag-pinned-left-cols-container 层次结构很重要。仅使用 .ag-pinned-left-cols-container .ag-row 将不起作用，因为某些行级别的 ag-grid 样式会覆盖它。

到目前为止，这些信息足以解决您的挑战，让我知道除此之外，您还需要提供更多详细信息。

如何根据列是否固定在左侧来更改列的样式？

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

ag-grid

ag-grid-react