Custom column headers

[0xdabbad00]

Similar to issues #32 and #16 I would like to be able to modify the column header. Specifically, I would like to be able to add React-Bootstrap tooltips to my column headers. So when you hover over a column header it explains in more detail what that header means.

Related to this is being able to have a column header reference name that is different than the text that is displayed there. For example, is it possible to have a column named something like Order Number but internally it is referred to as OrderNum? Or maybe you make your site international and use the text Número de orden for Spanish speakers, but I want to be able to write code that just references a single variable name.

The place where I'm currently experiencing some amount of nuisance with this, is when external results gets sorted. I have to convert Count to NumSystems on my server for the code shown here: https://github.com/DynamicTyped/Griddle/issues/14#issuecomment-64094434

If I then decide to rename it on the front-end to Number of Systems, I'll have to make another change on my server. I would prefer not to have to make changes to my server when I only change some text on my front-end.

This is sort of two issues, but very related as it all comes down to wanting to modify what is shown for my column header, and wanting to be able to reference that column using a different name.

[ryanlanciaux]

Thank you for the description on this! I agree you should not have to mess with the data object to change what text is in the heading. I think we will need to add a ColumnHeadingText property in the Column Metadata. This would be for things like OrderNum -> Order Number.

For the react-bootstrap tooltips, I think we will need something like the custom column formatters (in the issues you referenced). If that were available, I think you would make a custom component that wrapped the this.props.data in the tooltip markup.

One other thing we may need to do is add another property to the metadata that would be used for passing customProperties to the components. Currently, we send the current columnData (so the heading text in this example) and the rowData (not necessarily very helpful for a heading) to the custom element.

The example where I'm thinking this property bag may be useful -- if you have a column description in the tooltip rather than just the columnName -- that description will need to come from somewhere.

something like this:

var columnMeta = [
  {
    "columnName": "id",
    "order": 1,
    "locked": false,
    "visible": true,
    "customHeadingFormatter": toolTipComponent,
    "customProperties": {
        "tooltipText": "This is the id of the person contained in this table. The id is unique for each person."
     }
  },
  ...
];

The component would reference this.props.data for the heading text and this.props.customProperties.tooltipText for the text to display in the tooltip.

In regard to the multi-lingual support -- either the customHeading formatter or whatever is building up the columnMetadata object could do something to set the text to display based on the locale.

I will have to think a bit more on the properties part but we will work on adding the other two suggestions for sure.

Thanks!

[jazayerim]

Hi @ryanlanciaux. Do you have any updates on this issue? I'm gonna render a react component in the header row instead of a string. Do you have any suggestion or advice?

[CrossfireCurt]

Also interested in this!

[plum-dawg]

+1 here. would go with custom rows quite nicely. any progress?

[ryanlanciaux]

Hey there -- we are making progress on the next version and this is something that will be available. Beta should be out in the next week or two.

[ryanlanciaux]

So we totally missed the week or two (rewrote another part of what we were changing). We are moving this issue to the griddle-render project GriddleGriddle/griddle-render#13 and using it as acceptance criteria for when we release the new stuff. Closing this one for now but feel free to comment here or on the other with any questions.

[piush-gupta]

@ryanlanciaux , hi, i got stuck in a problem where i am passing a function declared in react component , to another custom component.

following is my column meta for 'Batch' component:

var columnMeta = [
{
"columnName":"id",
"displayName":"Select",
"customComponent":BatchID,
"customComponentProps": {myFunc : this.getExternalData}
}
]

here for column "id" i am using a customComponent "BatchID" and want to pass a property to this "BatchID" component, which is a function for parent component "Batch"

var Batch = React.createClass({
getInitialState:function(){
var initial = {
"results":[],
"currentPage":0,
"maxPages":0,
"PageSize":PublicMethod.PageSize(),
"SortColumn":null,
"SortAscending":true,
"filters": {
"airlineName":""
}
};
return initial;
},
// general lifecycle methods
componentWillMount: function() {

},
componentDidMount: function() {
    this.getExternalData();
},
// Method will be for external data method
getExternalData: function(page) {
    page = page||1;

    // Preparing the querystring.
    // Sample querystring := 'airline='+airlineName+'&pageNum=0&pageSize=10'
    var url = '/App/api?';
    url += 'view=browseBatch&pageNum=' + (page - 1) + '&pageSize=' + this.state.PageSize;
    url += this.state.filters.airlineName!=''?'&airline='+this.state.filters.airlineName:'';
    // Call the API as required.
    $.ajax({
        type:"GET",
        dataType:"json",
        url:url,
        cache:false,
        success:function(_data){
            if(typeof(_data) == 'string') {
                _data =JSON.parse(_data); 
            }

            this.setState({
                results: _data["data"],
                currentPage: page - 1,
                maxPages: Math.ceil(parseInt(_data["totalCount"]) / PublicMethod.PageSize())
            });
        }.bind(this),
        error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
        }.bind(this)
    })

    },
// render the component
render:function(){
    return(
        <div>
            <h1>Browse Batch</h1>
            <div className="row">
                <div className="col-sm-8">
                    <div className="form form-inline">
                        <select id="airlineName" className="form-control" onChange={this.setFilter}>
                            <option value="">Select Airline</option>
                            <option value="AAL">AAL</option>
                            <option value="JAL">JAL</option>
                            <option value="ASA">ASA</option>
                            <option value="DAL">DAL</option>
                            <option value="AMX">AMX</option>
                            <option value="GG">GG</option>
                        </select>
                    </div>
                </div>
            </div>
            <Griddle 
                useExternal={true} externalSetPage={this.setPage} 
                externalChangeSort={this.changeSort}
                externalSetFilter={this.setFilter}
                externalSetPageSize={this.setPageSize}
                externalMaxPage={this.state.maxPages}
                externalCurrentPage={this.state.currentPage}
                results={this.state.results}
                resultsPerPage={this.state.resultsPerPage}
                externalSortColumn={this.state.SortColumn}
                externalSortAscending={this.state.SortAscending}
                showFilter={false} showSettings={false}
                columns={columns} columnMetadata={columnMeta}
                sortDefaultComponent={<span> <span className="fa fa-sort"></span></span>} 
                useGriddleStyles={false} useCustomPagerComponent={true}
            />
        </div>
    )
}

});

while i am looking into the props at "BatchID" i am getting this prop key "myFunc" with value "undefined".

Please give your suggestion ASAP.