griddle-react passing additional props to custom components

Question

I've defined my column metadata for griddle-react like so:

const cols = [
  {"columnName": 'id', "displayName": "ID", "visible": false, "order": 1},
  {"columnName": 'name', "displayName": "Name", "order": 2, "customComponent": BrandNameLink},
  {"columnName": 'description', "displayName": "Description", "order": 3},
  {"columnName": 'dateCreated', "displayName": "Date Created", "visible": true, "order": 4, "customComponent": DateComponent},
  {"columnName": 'lastUpdated', "displayName": "Last Updated", "visible": true, "order": 5, "customComponent": DateComponent},
];

for the name, dateCreated and lastUpdated I want to pass in additional props to these custom components. For example, my DateComponent looks like so:

import React from 'react';
import Time from 'react-time';

const DateComponent = (props) => {
  return (<Time value={props.rowData.dateCreated} format="MM-DD-YYYY" />);
}

export default DateComponent;

But I would like to be able to tell it to use dateCreated or lastUpdated from the rowData vs making 2 nearly identical components (1 for each date property).

score 1 · Answer 1 · answered Oct 12 '16 at 15:34

Figured this out from this questions.

When you pass a customComponent, you can also pass customComponentMetadata like so:

{"columnName": 'dateCreated', "displayName": "Date Created", "visible": true, "order": 4, "customComponent": DateComponent, customComponentMetadata: {
  "dateField": "dateCreated"
}}

And then access it like so:

props.metadata.customComponentMetadata.dateField

That said, the columnName is already passed in as metadata anyway. So while I didn't need to pass custom data for this scenario, I did need it for something else.

griddle-react passing additional props to custom components

1 Answers1

Linked