Using custom components in grid cells

[slashwhatever]

Here's a brief snippet of code from a test I'm running up:

import {NGXCButton} from '../../../common/components/ui.jsx';

class GridTest extends Component {

render() {
        const ActiveAction = <NGXCButton btnText='Active' active={true} />

        const columnMeta = [{
            columnName: 'name',
        }, {
            columnName: 'shortStatus',
            displayName: 'Status'
        }, {
            columnName: 'id',
            customComponent: ActiveAction
        }];

        return (
            <Griddle
                columns={['name', 'shortStatus', 'id']}
                columnMetadata={columnMeta}
                useExternal={true}
                externalSetPage={this.setPage}
                externalChangeSort={this.changeSort}
                externalSetFilter={this.setFilter}
                externalSetPageSize={this.setPageSize}
                externalMaxPage={this.props.maxPages}
                externalCurrentPage={this.props.currentPage}
                results={this.props.campaigns}
                resultsPerPage={this.props.resultsPerPage}
                externalSortColumn={this.props.sortColumn}
                externalSortAscending={this.props.sortAscending}
                showFilter={true}
                showSettings={true}
            />
        );
    }
}

Given that this doesn't work in the browser, am I right in saying there's no way of including an existing component in a column?

[mlubovac]

If you take a look at Custom Columns section http://griddlegriddle.github.io/Griddle/customization.html you will clearly see that you can include custom components. However I've run into similar issues as you've described when it comes to external data.

1. get rid of the column property on the griddle and add column names as displayName to objects you've defined under columnMeta.
2. If it still behaves the same render Griddle only once you have received results.

[slashwhatever]

Thanks for the update.

However (and this is meant more as a note to other readers who come up against this issue):

If I get rid of the column property on the griddle, I get this: https://puu.sh/qMtYU/f40c59efdb.png.

Assuming this is because our api returns more than we need and the Griddle doesn't use columnMetadata as a definition of the only columns it should render, if I manipulate the returned data to strip out everything else, I get this: https://puu.sh/qMu3g/5a2d4d1134.png.

Neater, but still no custom component: https://puu.sh/qMvam/fdf6d01f47.png

This did work though (some code removed for brevity):

`

    const ActiveAction = React.createClass({
        render() {
            return <NGXCButton btnText="Active" active={true} />;
        }
    });
    const columnMeta = [{
        columnName: 'name',
        displayName: 'name'
    }, {
        columnName: 'shortStatus',
        displayName: 'Status'
    }, {
        columnName: 'id',
        displayName: 'id',
        customComponent: ActiveAction
    }];

    return (
        <Griddle
            columnMetadata={columnMeta}
            results={this.props.campaigns}
        />
    );

`

So I have to wrap my NGXCButton element in a call to React.createClass in order for the Griddle to successfully render it into a cell.

Not sure if this is considered a bug, a shortfall in features or just expected convention - at least I have something I can work from :)

[ryanlanciaux]

Thanks for documenting this! This is something that is going to be a lot nicer in 1.0 (unfortunately I've been a bit delayed in releasing this newer version)

[slashwhatever]

Looking forward to 1.0 .....soon....? :)

[ryanlanciaux]

Well :) I'm trying -- Just moved and getting ready to welcome a new baby into the world. We will see -- it's fairly close BUT trying to get the API solidified a bit more so we're not recommending basing plugins on an API that we later decide is not going to work. Also we'd like to give time for people to work with the beta a bit (when that's available) to get more eyes on everything.