问题描述:

I would like to use a cellRenderer in React for most of my columns. So, in my colDefs, I have an additional field called unit. If the unit exists, I am trying to have a heatMap like color grid which is handled in my TableCell React component. This identical react component has worked in other data grids like ZippyUI. Can the cellRenderer function return a React component, which is a virtual DOM object, or does it have to be a true HTML DOM object? Would doing something like this with ag-Grid's cellRenderer component method be preferable?

colDefs.map((x) => {

if (x.hasOwnProperty('unit')) {

x.cellRenderer = (params) => {

return <TableCell value={params.value} units={x.unit} min={min[x.field]} max={max[x.field]} colorScheme={colorScheme} />;

};

}

});

网友答案:

I figured out the implementation that is required and figured I'd leave this question up for future users. It seems that the component approach is required, and you can use the cellRendererParms to pass in additional arguments. Then, within the actual renderer (ReactTableCellRenderer below), you can access them via this.props.params.units (or replace units with whatever other param you pass in the object).

 colDefs.map((x) => {
        if (x.hasOwnProperty('unit')) {
            x.cellRenderer = reactCellRendererFactory(ReactTableCellRenderer);
            x.cellRendererParams = {units: x.unit, min: min[x.field], max: max[x.field], colorScheme: colorScheme};
        }
    });

The params passed via cellRendererParams are then available within the React component (in my case, ReactTableCellRenderer) via this.props.params.units (or substitute appropriate vairable name for units)

相关阅读:
Top