[Enhancement] Add row or cell callback onClick event.

[brodul]

Hi,

I really like Griddle but I would like to implement a simple CRUD interface. It would help me if I could set a callback if I click on the cell. returning cell and row information (so I can open a modal or something else for update or delete).

Is there any interest to support that ? I can help with dev (I am a newbie in JS but I am willing to help and write tests for it)

[ryanlanciaux]

Hi there,

That sounds like a great idea and seems like a use-case that others my need as well. The full functionality you are looking for isn't currently in Griddle but there is an undocumented feature that may be useful here.

You can pass in a custom component to be rendered instead of the standard column rendering. Say we want to format a column so that it is bold -- we can make a component like this:

var BoldFormatter = React.createClass({
    render: function(){
        return <strong>{this.props.data}</strong>
    }
})

In our column metadata we can set column "id" to use this custom component to render:

var columnMeta = [
  {
    "columnName": "id",
    "order": 1,
    "locked": false,
    "visible": true,
    "customComponent": BoldFormatter
  },
  ...
];

For the ability you are discussing, you could create an onClick event within the custom component that would call another function or have some of the form loading functionality built into the component itself. It should be noted that the custom component should use this.props.data as that is what Griddle is passing to the component.

This functionality is currently undocumented because we're trying to make it a bit better and handle some of these types of scenarios a little more clearly/cleanly.

In regards to your offer for help, any type of help would be fantastic! There are some things I need to add to the roadmap -- automated testing, for instance, is one area that need a bit more attention.

[brodul]

Tnx, for the fast response. The solution you proposed totally fulfills my needs.

I will try it out.

[DinoJay]

Hey guys,

I think, I have a related question. Can I set props to the customComponent. I.e. something like this:

render: function(){
return(
<Griddle getExternalResults={this.dataMethod}
  columnMetadata={columnMeta}
  customFormatClassName="row" useCustomFormat="true"  
  tableClassName="table" 
  customFormat={<OtherComponent prop0="" prop1="" />} 
  columns={["name", "descr", "start_date", "end_date"]}
/> );
}             

[ryanlanciaux]

this.props.rowData should now be available in the customComponent. The rowData consists of all the data within the same row as the current column item.

Please take a look at #32 for some more detailed examples :) I will close this issue out once a new version of Griddle is published to npm later this weekend. 👍

[tsyber1an]

Cool