ag-grid: Need to aggregate multiple fields into a table within a cell

问题

I'm wondering what the best practice is for displaying a table (with data from multiple fields) within a cell in ag-grid?

I think I can get it to work with formatting the entire table as an html string and passing that to the grid as the field and using a cellRenderer, however I'd rather not have that kind of view logic on the server-side.

I'd really like for the column definition to be able to take in more than one field, but it doesn't seem like that's possible.

Any ideas? Thanks.

回答1:

You can define a valueGetter for the desired column in column def. Here is a sample -

valueGetter: 
function sumField(params) {
          return params.data.a + params.data.b
}

Value getters example

回答2:

In your ColDef for the column, you can pass data and then destructure the values you're looking for off of that object, which comes through props in ag-grid.

For example...

In your ColDef array:

{
  field: 'data',
  headerName: 'Name',
  cellRendererFramework: NameDescriptionRenderer
}

Then, in your NameDescriptionRenderer:

export default class NameDescriptionRenderer extends React.Component {
  public render() {
    const { description, name } = this.props.data;
    return <React.Fragment>{`${name}: ${description}`}</React.Fragment>;
  }
}

来源：https://stackoverflow.com/questions/50866364/ag-grid-need-to-aggregate-multiple-fields-into-a-table-within-a-cell