Ag-Grid: Изменить CSS / стиль заголовка одного столбца?

Question

У меня есть два разных столбца, и я хотел бы, чтобы они отображались как один столбец.Чтобы создать эту иллюзию, я использовал cellStyle для установки 'border-right': 'none' для ячеек в левом столбце, однако для заголовка, который я обнаружил, это не так просто.

IЯ пытался использовать headerComponentParams и добавлять пользовательский шаблон, но для удаления правой границы требуется слишком много HTML-кода.

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

Функциональность одних столбцов работает очень хорошо, один из них - шеврон, который должен расширять и сворачивать дополнительные строки.Мне может понадобиться скрыть этот шеврон по мере необходимости.Есть идеи о том, что я могу сделать?

Answer 1

Группировка столбцов без дочерних заголовков - это то, что может быть полезно для вас.

В определениях столбцов определите 2 дочерних столбца, как обычно, -

this.columnDefs = [
  {
    headerName: "Athlete Country",
    children: [
      {
        headerName: "Athlete",
        field: "athlete",
        width: 150,
      },
      {
        headerName: "Country",
        field: "country",
        width: 120
      }
    ]
  }]

И в вашем onGridReady

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    this.gridApi.setHeaderHeight(0);
    this.gridApi.setGroupHeaderHeight(30);
}

На основепример здесь