Как wordwrap заголовок в аг-сетке

Использование ag-grid, есть способ разделить длинный заголовок на 2 строки...

Разрыв в заголовке columnDefsName: 'Long<br />Header' получает меня часть пути (с помощью инструментов dev я вижу, что текст имеет br), однако один из окружающих элементов имеет высоту 25 пикселей; <div class="ag-header" style="height: 25px;">, который, как мне кажется, вызывает отображение второй строки заголовка.

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

Ответы

Ответ 1

Попробуйте добавить в свой CSS следующее:

.ag-header-cell-label {
    text-overflow: clip;
    overflow: visible;
    white-space: normal;
}

и добавьте это в свои параметры сетки:

headerHeight: 48

Ответ 2

Используя [email protected], работало только следующее решение:

.ag-header-cell-label .ag-header-cell-text {
  white-space: normal !important;
}

Это один из первых случаев моей работы с css, который мне действительно нужно было использовать !important.

Ответ 3

Для меня ни одно из вышеперечисленных решений не сработало. Для меня сработало установить заголовок headerHeight (в GridOptions) на указанную вами высоту, а затем добавить следующее:

.ag-header-cell-text {
   overflow: visible;
   text-overflow: unset;
   white-space: normal;
}

В моем случае мне не нужно было ничего добавлять в класс оболочки .ag-header-cell.

Я использую следующие версии:

"ag-grid-angular": "18.1.0",
"ag-grid-enterprise": "18.1.1",

Ответ 4

Для меня, используя комбинацию [email protected] и [email protected], сработало следующее:

::ng-deep .ag-header-cell-text {            
    text-overflow: clip !important;
    overflow: visible !important;
    white-space: normal !important;
}

:: ng-deep - angular комбинатор CSS (директива). Это основано на ответе Стия с той разницей, что в моем случае вместо .ag-header-cell-label он работал только с .ag-header-cell-text.

В объекте параметров сетки вы должны установить высоту заголовка:

this.testGridOptions = <GridOptions>{
            onGridReady: () => {
                this.testGridOptions.api.setHeaderHeight(75);
                this.testGridOptions.api.sizeColumnsToFit();
            }
        };

Ответ 5

Если вам нужен разрыв строки в определенной позиции в заголовке, вы можете использовать white-space: pre для достижения этой цели. Добавьте это в CSS:

.ag-theme-material .ag-header-cell-label .ag-header-cell-text {
  white-space: pre;
}

А затем добавьте символы \n в название заголовка соответственно. Вы также должны будете убедиться, что есть достаточная высота, используя gridApi.setHeaderHeight() и gridApi.setGroupHeaderHeight()