Ag-grid (angular) – Как разместить заголовок столбца на двух столбцах?
Я пытаюсь настроить сетку, используя ag-grid angular. Я хочу разделить заголовок одного столбца на два столбца.
| spans col 1 and 2 | <- header row
| row 1 col1 | row 1 col2 | <- data row 1
| row 2 col1 | row 2 col2 | <- data row 2
Я читал о группах столбцов, но, похоже, добавляется вторая строка заголовка, которая может охватывать два заголовка столбца. Я не хочу этого.
| group spans col 1 and 2 | <- group header row
| col 1 header | col 2 header | <- column header row (don't want this)
| row 1 col1 | row 1 col2 | <- data row 1
| row 2 col1 | row 2 col2 | <- data row 2
Любые предложения о том, как я могу это сделать?
Обновлено: Могу ли я сделать это и сохранить возможность сортировки, фильтрации и т. д.? . . функции, доступные для заголовков?
Основываясь на ответе @Eugene ниже, мне бы хотелось стандартного поведения заголовка, по крайней мере, для ненаполненных столбцов. Могу ли я отсортировать или отфильтровать столбец 3? Было бы здорово, если бы я мог предоставить функтор сортировки для сортировки группы столбцов 1 и 2.
| group spans col 1 and 2 | col 3 group | <- group header row
| col 1 header | col 2 header | col 3 header | <- column header row (hidden with [headerHeight] = "0")
| row 1 col1 | row 1 col2 | row 1 col3 | <- data row 1
| row 2 col1 | row 2 col2 | row 2 col3 | <- data row 2
Ответы 1
Вы можете использовать заголовок группы с опциями headerHeight и groupHeaderHeight:
<ag-grid-angular
[columnDefs] = "columnDefs"
[rowData] = "rowData"
[headerHeight] = "0"
[groupHeaderHeight] = "48"
/>
public columnDefs: (ColDef | ColGroupDef)[] = [
{
headerName: "Header Name",
children: [
{ field: "field1" },
{ field: "field2" },
],
},
{ field: "field3" },
];
@Jobu да, вы можете использовать ColGroupDef на том же уровне, что и ColDef, и добиться желаемого результата. Я обновлю свой ответ.
Понятно. Есть ли способ поставить сортировщик на ColGroupDef? например, чтобы отсортировать сведения о спортсмене по имени? Не обязательно, но мне интересно.
Думаю, в зависимости от задачи можно попробовать не использовать ColGroupDef, а использовать cellRenderer для размещения информации из разных полей в одной ячейке.
Да, пока существует noWrap, который строго соблюдается, то, держу пари, для меня имеет смысл использовать cellRendered и comparator в этом случае.
Я предполагаю, что «заголовок группы» аналогичен «группам столбцов»? ag-grid.com/angular-data-grid/column-groups Если да, то могу ли я при таком подходе сортировать, фильтровать и т. д. из открытого заголовка группы, по крайней мере, для несгруппированных столбцов? Я отредактировал свой пост, добавив col3, чтобы лучше проиллюстрировать этот вопрос.