Document how to pass row data into formatter about react-data-grid HOT 14 CLOSED

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

from react-data-grid.

It should be well documented 👍

from react-data-grid.

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

from react-data-grid.

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

from react-data-grid.

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

from react-data-grid.

👍

from react-data-grid.

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.

from react-data-grid.

thanks @maiis, Just what i was looking for.

from react-data-grid.

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

from react-data-grid.

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

from react-data-grid.

Where

from react-data-grid.

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

from react-data-grid.

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",

from react-data-grid.

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
   }
  },
]

from react-data-grid.