Document how to pass row data into formatter

[maiis]

I had a case where I needed to access others row values inside a cell formatter. Maybe be worth documenting it ?

This is how I achieved it.

let columns = [
    ...
    {
        key: 'mykey',
        name: 'My Column',
        formatter: Formatters.myFormatter,
        getRowMetaData: (row) => row
    }
    ...
];

In into my formatter I can access all the row values into this.props.dependentValues

[bakesteve]

we'll track this under #41 as they will have a common solution.
Generally, we feel that a cell (formatter or editor) should not have access to the row data, but there are cases where you need access to some other props. We'd like to be explicit - but still allow people to provide the access if they need it. The solution above works fine, but we'd like to have a cleaner implementation though. Will update the docs too

[maiis]

👍

[lmaccherone]

I used this getRowMetaData trick myself. Thanks for posting here. Let me know if you add some other mechanism, but I like the current one.

[maxcc0]

thanks @maiis, Just what i was looking for.

[anil1712]

Yeah its great solution but I needed header info also. Is there any solution for the same?

[urbinopescada]

I've been 2 hours searching for this!!!

[jamesajones]

If I use the above column definition what does the static propTypes {} look like?

[Gtosta96]

It should be well documented 👍

[jamesajones]

Where

[vellov]

Holy crap, I looked for this crap for almost 2 hours. This documentation is the worst i've seen.

[Gtosta96]

Yes, such a pity, since the library is very cool...

[Nodios]

Damn! @maiis you just saved me tons of time!

[usersina]

Having the same issue, couldn't replicate the provided solution using JSX as a formatter because it throws a promise rejected exception.

Instead I'm using a function but I can't view the row data.

let columns = [
    ...
    {
      id: 'status',
      name: 'Status',
      getRowMetaData: (row) => row,
      formatter: (_s, _o, rowObject) => _(renderStatus(rowObject)),
    },
    ...
];

const renderStatus = (rowObject) => {
    console.log(rowObject.getRowMetaData); // Returns the string "row => row"
    return <StatusTest myVar={rowObject} />;
};

"gridjs": "^3.3.0",
"gridjs-react": "^3.2.2",

[ps1011]

In case anyone still searching for this, we can access row data with params.row for custom rendering which depends on other row data

const columns=[
{
    headerName: "Duration",
    key: "duration",
    description: "run duration",
    // getRowMetaData: (row) => row,
    sortable: true,
    type: "string",
    valueGetter: (params) => {
      console.log("row dat",params.row); // row data object
      const endDate = params.row.completed_date
        ? moment.utc(params.row.completed_date)
        : moment.utc(new Date());
      const startDate = moment.utc(params.row.created_date);
      var diff = moment.duration(endDate.diff(startDate));
      const duration = [diff.hours(), diff.minutes(), diff.seconds()].join(":");
      return duration + " Hrs";
    },
   valueFormatter: (params)=>{
       console.log("row dat",params.row); // row data object
   }
  },
]