Выбор столбцов - AgGrid Community

Question

Я использую AgGrid версию сообщества с React. Я пытаюсь поставить флажок в каждом столбце в заголовке. Который при выделении должен подсвечивать ячейки под выбранным столбцом. Более того, мне нужно записать изменения в выбранных столбцах.

My columnDefs - это массив следующих объектов, построенный на основе данных из внутреннего интерфейса

{headerName: 'Name Of Header', headerCheckboxSelection: true, field: field }

Вывод

Проблема

Ниже приведена картинка, когда я нажимаю любой флажок столбца он делает две вещи

1. устанавливает другие флажки заголовка столбца
2. выбирает все строки

Принимая во внимание Мне нужно сделать следующее

1. Отметить только флажок, который пользователь проверяет

2. Подсветка только столбцов под этим столбцом

3. Обработка события выбора флажка

Есть указатели?

Answer 1

Насколько я знаю, API для выбора столбцов не существует, так же как и выбор строки , но вы можете использовать rangeSelection метод

вот интерфейс:

interface AddCellRangeParams {
    // start row
    rowStartIndex?: number;
    rowStartPinned?: string; // either 'top', 'bottom' or undefined

    // end row
    rowEndIndex?: number;
    rowEndPinned?: string; // either 'top', 'bottom' or undefined

    // columns
    columnStart?: string | Column;
    columnEnd?: string | Column;
    columns?: (string | Column)[];
}

возможный сценарий, основанный на вашей задаче

this.gridApi.addCellRange({
  rowStartIndex: 0,
  rowEndIndex: this.rowData.length-1,
  columnStart: "col_3",
  columnEnd: "col_3"
});

рабочий Демо

PS Не уверен насчет отслеживания события свойства headerCheckboxSelection, но, похоже, вам нужно самостоятельно создать headerComponent и отслеживать событие-флажок (и я полагаю, что еще лучше держите все под своим контролем)