ag-grid изменить имя заголовка группы строк

Я использую ag-grid для отображения таблицы с Row Grouping. Столбец, по которому я группирую, невидим, поскольку его значение не имеет значения.

Так, например, у меня будет следующая (полностью свернутая) таблица:

---------------------------------
|   H1       H2        H3        |
----------------------------------
| > groupId1 (1)                 |
----------------------------------
| > groupId2 (5)                 |
----------------------------------

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

Я использую React.

Я использую примеры ag-Grids в качестве отправной точки, следующий пример воплощает проблему, с которой я столкнулся: (например: https://plnkr.co/edit/VM59gScPD55PhX4y4JBj?p=preview)

  1. Имеет группировку строк
  2. Группировка выполняется по невидимому столбцу (страна).
  3. Я хочу динамически изменить название страны на другое значение, полученное на основе значений внутренней строки.

Спасибо за ваше время. :)


react-redux ag-grid-react ag-grid
person Airwavezx    schedule 03.02.2019    source источник

Ответы (3)


arrow_upward
2
arrow_downward

В конце мне помог коллега, его решение было:

valueFormatter: ({ value, data }) => 'something ' + value

внутри colDef моей группы, а значение, которое будет отображаться в заголовке, отправляется внутри «данных».

Он сказал, что cellRenderer - это перебор для такой простой задачи.

person Airwavezx    schedule 04.02.2019

arrow_upward
1
arrow_downward

Вы можете передать дополнительные параметры о рендерере групповых ячеек и настроить его следующим образом:

colDef = {
    // set the cell renderer to 'group'
    cellRenderer:'agGroupCellRenderer',
    // provide extra params to the cellRenderer
    cellRendererParams: {
        innerRenderer: myInnerRenderer, // provide an inner renderer
    }
    ...
};

После этого вы сможете отображать любой текст на основе пользовательской логики с использованием реализации myInnerRenderer.

Вот пример из docs . Проверьте реализацию Group Renderer C.

person Pratik Bhat    schedule 03.02.2019

arrow_upward
1
arrow_downward

Вы также можете переименовать заголовок rowGroup ag-grid, используя эту простую опцию autoGroupColumnDef

<AgGridReact 
  columnDefs={columnDefs} 
  rowData={rowData}
  autoGroupColumnDef={{
    headerName: 'Name'
  }}
/>
person Muhammad Haseeb    schedule 19.11.2019