Как стилизовать вертикальные границы столбцов AG-GRID

Я хочу, чтобы у моих столбцов AG-Grid были вертикальные границы. По умолчанию строки сетки имеют горизонтальные границы. Я хочу, чтобы он имитировал внешний вид обычной электронной таблицы Excel.

Я пробовал использовать стиль ячейки в определениях столбцов следующим образом:

this.columnDefs = [
  { headerName: 'Test', cellStyle: {'border-right-color': '#e2e2e2'}, field: 'test' }];

Это трюк. Но когда я нажимаю на ячейку для редактирования, синяя граница, которую он помещает в активную ячейку, перезаписывается стилем ячейки выше, поэтому я получаю ячейку с 3 синими границами и 1 серой рамкой.

Это не может быть правильным подходом ...

Есть у кого-нибудь идеи? Я попытался сделать некоторые стили CSS, но ничего не добился, поскольку кажется безумно трудным определить, какие классы перезаписывать.


person Tom O'Brien    schedule 14.06.2020    source источник


Ответы (1)


лучше сделать это с помощью темы ag-grid. Вот документы об этом https://www.ag-grid.com/javascript-grid-themes-customising/

И я сделал простой Stackblitz с границами Пример границ, который вы можете проверить.

person Sergey_M    schedule 19.06.2020
comment
Работает как шарм! - person NicuVlad; 27.11.2020
comment
как я могу преобразовать этот scss в код css? - person mnu-nasir; 15.02.2021