获取 Ag Grid 中一个单元格内的整行数据

Question

我正在使用 AgGridReact，但这是一个关于如何使用 AgGrid 在该行的单元格中获取整行数据的一般性问题。

我正在为某个单元格（其字段为 id）使用自定义单元格渲染器，我需要在其中获取整行的数据，而不仅仅是 id 字段的数据。

网格是这样定义的：

<AgGridReact
    rowData={users}
    frameworkComponents={{
        idRenderer: IdRenderer,
    }}
>
    <AgGridColumn field="id" cellRenderer="idRenderer"></AgGridColumn>
    <AgGridColumn field="name"></AgGridColumn>
    <AgGridColumn field="phone"></AgGridColumn>
    <AgGridColumn field="email"></AgGridColumn>
</AgGridReact>

这是我需要获取行数据的 IdRender 组件（用于自定义 id 字段单元格的外观）：

import { useEffect } from 'react';

function IdRenderer(props) {
    // the following currently stores the cell's value in `rowData`
    const rowData = props.valueFormatted ? props.valueFormatted : props.value;

    useEffect(() => {
        console.log(rowData);  // get the entire row's data here instead of just this cell's value
    }, [])

    return (
        <>
            {/* some components */}
        </>
    );
}

export default IdRenderer;

我无法从文档中弄清楚我应该向网格或单元格渲染器添加什么，以便能够在 id 字段的单元格中获取整行数据（我将在其中单击按钮将数据发布到 API。

Answer 1

在查阅文档很长时间后，我终于找到了实现此目的的方法：使用 valueGetter。我决定 post 这个问答来帮助其他人弄清楚如何实现同样的目标。

只需为该行的数据定义以下值getter：

const rowDataGetter = function (params) {
    return params.data;
};

并通过设置 valueGetter 属性在 AgGridColumn 上使用它：

<AgGridColumn field="id" cellRenderer="idRenderer" valueGetter={rowDataGetter}></AgGridColumn>

现在 IdRenderer 中的 rowData 将包含整行数据而不是单元格值。

获取 Ag Grid 中一个单元格内的整行数据

Get the entire row's data inside a cell in AgGrid

ag-grid

ag-grid-react