Allow valid react elements to be used in data manipulator

[dextermb]

I want to add a symbol (such as an up/downward facing arrow) within a single column. I'd like to be able to do this within the dataItemManipulator function as I am only changing a single column.

If we want to keep dataItemManipulator clear of elements, then we should look into implementing a low level cellRenderer on DataRow.

Currently the object/array check in renderCell causes a circular JSON.stringify error when attempting to pass a React element into it (as a React element is an object, verified by $$symbol).

Here's the current expression:

if (typeof value === 'object' || typeof value === 'array') {
    value = JSON.stringify(value);
}

Perhaps this could be:

if (!React.isValidElement(value)) {
    value = JSON.stringify(value);
}

Or:

import Util from '@ninetynine/util';

// ...

if (Util.isObject(value) || Util.isArray(value)) {
    value = JSON.stringify(value);
}

It's worth noting that currently null gets stringified as in JavaScript null is an object.

Thoughts?

cc @NilesB @DivineOmega @wheatleyjj

[AlexCatch]

This would probably make more sense being a seperate prop, dataItemManipulator should just be a function for manipulating data & not rendering components IMO.

[Jord-JD]

I think the isValidElement makes sense in this situation.

[dextermb]

I think the isValidElement makes sense in this situation.

Indeed as isValidElement would return true for anything renderable (PropTypes.node).