Custom Cell Markup

[sam3k]

Currently I cannot find how to allow for a single cell in the grid to have custom HTML. The basic example would be, having the text in a cell be a link which gets its href value from another value in the data coming in.

Is this currently possible?

[ryanlanciaux]

This is "kind of" possible today, however, it will look a lot more like you describe in a forthcoming version. Please see this comment as it's somewhat similar. The downside is that the current row is not passed in and to get that info you would have to do some hokey manual changes to the data object.

This is not ideal and the row data will be available to the custom components soon.

[sam3k]

@ryanlanciaux I just tried that on a component render inside another component but didn't work for me:

   var Link = React.createClass({
    render: function(){
        return <strong>{this.props.AcceptEmail}</strong>
    }
  });

   // then in another component's render function:
   ...
   render: function() {
        var columnMeta = [
            {
                'columnName': 'OrderNum',
                'order': 3,
                'locked': false,
                'visible': true,
                'customComponent': Link
            }
        ];

        return (
            <form className="row-fluid" onSubmit={this.handleSubmit}>
                <div className="span3">
                    <ContractsSearch data={this.state.data} />
                </div>
                <div className="span9">
                    <legend>Contracts</legend>
                    <Griddle results={this.state.data.Contracts} columnMetadata="columnMeta" tableClassName="table-condensed" columns={["OrderNum", "DocDesc", "AcceptDate", "AcceptName"]} />
                </div>
            </form>
            )
    }
   ....

Tried on the master branch and the externalResults branch. (would it be in that branch?)

[ryanlanciaux]

Hmm -- Could you try changing columnMetadata="columnMeta" to columnMetadata={columnMeta} in your Griddle definition and then in your custom component use {this.props.data} instead of {this.props.AcceptEmail}?

Please let me know if that works out better for you 👍

[sam3k]

That worked! However, I think now I understand what you were trying to say by "current row is not passed " meaning, the cell does not know about other keys in that object (or data in that row), no? Which is a problem as I was hoping to construct the link from two keys in that object like:

var Link = React.createClass({
    handleClick: function(e){
        e.preventDefault();
        window.location = '/contracts/' + this.props.DocId
    },
    render: function(){
        return <a href="#" onClick={this.handleClick}>{this.props.data}</a>
    }
});

[ryanlanciaux]

Yea you've definitely run into the limitation I was describing. I'm really hoping to get that working soon but was trying to prioritize removing all callbacks from this React component :)

The manual overriding of the data object may work but be warned it's extremely hacky and unideal. Your data would be like:

var data = [{
   linkData: { DocId: "Something", AcceptEmail: "Something@Something.some" },
   Name: "Some Name", 
   ...
}, 
...];

and in your component you would have access to data.DocId and data.AcceptEmail

Unfortunately, this is something that we really want to avoid. Tonight, I'll see if there is a quick fix that can be applied to get the rowData applied to the customFormat components.

[sam3k]

Ah okay. I'll use this approach for now. Thanks once again!

[ryanlanciaux]

This is not in the npm version yet but you should be able to reference rowData prop in your custom component in addition to the data property.

For your example above, acceptEmail would be the this.props.data -- DocId would be this.props.rowData.DocId. Please let me know if that works out for you.

[sam3k]

It works! Closing this issue. Thanks once again. For future reference:

var Link = React.createClass({
    render: function(){
        return <a href={'/contracts/' + this.props.rowData.DocId}>{this.props.data}</a>
    }
});

[ryanlanciaux]

No problem -- Glad to hear it's working! Thanks for posting the example.