Ag Grid React Cell 渲染器将数组值放入一个单元格中

Question

我有一个想要使用 Ag Grid 数据表显示的对象。该对象只是表的一行数据。

0: {appID: 12345, blocker_issues: Array(2), crtitical_issues: Array(2), major_issues: Array(2), minor_issues: Array(2), …}

eg: 
{appID: 123456,
blocker_issues:  [554, -1563],
crtitical_issues:[3522, -3058],
duplication:     [1322494, '-471d'],
lines_of_code:  [374993, '-471d'],
major_issues:  [16581, -10864],
minor_issues: [14381, -9658],
tech_debt:  [26.3, '+16.26']}

银网格详细信息：

   const [columndefs] = useState([
        { field: 'appID', headerName: 'App ID', cellRenderer: CustomElements },
        { field: 'blocker_issues', headerName: 'Blocker Issues', cellRenderer: SplitCellRenderer, cellDataType: 'object' },
        { field: 'critical_issues', headerName: 'Critical Issues',  cellRenderer: SplitCellRenderer, cellDataType: 'object' },
        { field: 'major_issues', headerName: 'Major Issues', cellRenderer: SplitCellRenderer, cellDataType: 'object' },
        { field: 'minor_issues', headerName: 'Minor Issues',cellRenderer: SplitCellRenderer, cellDataType: 'object' },
        { field: 'tech_debt', headerName: 'Tech Debt', cellRenderer: SplitCellRenderer, cellDataType: 'object' },
        { field: 'lines_of_code', headerName: 'Lines Of Code', cellRenderer: SplitCellRenderer, cellDataType: 'object' },
        { field: 'duplications', headerName: 'Duplications', cellRenderer: SplitCellRenderer, cellDataType: 'object' }
    ]);


 return (
        parsedAppData?(<div
        id = "appStats"
        className = 'ag-theme-* bordered'
        style = {{ paddingTop: '1rem', height: '100%', width: '100%' }}
        > <AgGridReact onGridReady={onGridReady} gridOptions={gridoptions} rowData={parsedAppData} />
    </div >
    ) : ''

我创建了一个单元格渲染器，我想将两个值添加到同一个单元格，第二个值有条件地为绿色或红色。

 function SplitCellRenderer(props) {
        if (props.value !== undefined) {
            return <span>{props.value[0]}
                <span style={changeColor(props.value[1])}>
                    {` (${props.value[1]})`}
                </span></span>
        }
    }

 const changeColor = (val) => {
        if (val > 0) return { color: "red" };
        return { color: "#02b013" };
    };

我收到错误：

AG Grid: Cell data type is "object" but no value formatter has been provided. Please either provide an object data type definition with a value formatter, or set "colDef.valueFormatter"

所以我添加了 dataType 作为对象，但是如果我想使用单元格渲染器，我是否需要格式化程序？任何帮助表示赞赏。预先感谢！

Answer 1

我会尝试将“cellDataType”更改为 false 以禁用此行为。