How to create a link in React Data Grid?

Question

I'm using this adazzle component: https://github.com/adazzle/react-data-grid

I am trying to figure out how to create a clickable link. They have an example of a cell formatter here: http://adazzle.github.io/react-data-grid/examples.html#/custom-formatters

However, the formatter only gets passed a single value. Since the formatter only gets one value passed to it, I have no way of creating a link in the format:

const formatter = ({ value }) => (
  <a href=`${value.id}`>{value.name}</a>
)

The problem with the above code is value is not an object. It only passes down a single string, etc.

Does anyone using react-data-grid know how to solve this problem?

Answer 1

Ok you gave me a great idea. You can use the rowFormatter to remap the property you want to the object! Thanks! My solution ended up modifying my rowGetter.

 const rowGetter = (i) => {
    const row = Object.assign({}, person[i]);
    row.name = person[i];
    return row;
  };

Any now the value passed down to the formatter is an object. Cool!

Answer 2

here is how i was able to make it work to work... custom formatter specified and adding the getRowMetaData attribute to the column definition. you could even add props to the data in the getRowMetaData value.

const MyFormatter = React.createClass({
  render(){
    return(
      <a href={this.props.dependentValues.url}>{this.props.dependentValues.name}</a>
    );
  }
});


function MyFunctionalDataTable(props){
  const myCols = [
    {key: "link", name: "Link", width: 200, formatter: MyFormatter, getRowMetaData: (data)=>(data)},
    ...
   ];

  const createRowData = !props.mydata? '' :
    props.mydata.map(function(obj, index){
      ...
      return {"blah": obj.blah,
              "url": obj.url, //doesn't have to match a GUI column
              "name": obj.name, //doesn't have to match a GUI column 
              "column2stuff": obj.blahblah,
      }
  });

  const rowGetter = rowNumber => createRowData[rowNumber];


  return (
    <ReactDataGrid
      columns={myCols}
      rowGetter={rowGetter}
      rowsCount={createRowData.length}
      headerRowHeight={35}
      rowHeight={35}
      minHeight={createRowData.length<15? (37+(35*createRowData.length)) : 500}
    />

  )
}