Closed visinescu13 closed 6 years ago
Try something like this:
const joinArray = separator => props => <span>props.value.join(separator)</span>;
return (<Griddle
data={data}
plugins={[plugins.LocalPlugin]}
>
<RowDefinition>
<ColumnDefinition id="a" title="Test" customComponent={joinArray(' ')} />
</RowDefinition>
</Griddle>);
Note that props.value
will be an ImmutableJS object (a List
in this case, I believe). I'm being more clever than necessary by passing in separator
; you could hard-code that instead.
It worked but with one modification:
const joinArray = separator => props => <span>props.value.join(separator)</span>;
return (<Griddle
data={data}
plugins={[plugins.LocalPlugin]}
>
<RowDefinition>
<ColumnDefinition id="a" title="Test" customComponent={joinArray(' ')[0]} />
</RowDefinition>
</Griddle>);
I have another problem: how can I insert a space for example between "text1" and "text2" in the new column. I tried a lot of separators sent in joinArray() (e.g. joinArray('-'),joinArray(' '),joinArray('\n')) function but none separated my text.
[0]
would be necessary there… calling joinArray(' ')
should return a function, and accessing [0]
would returnundefined
in most situations, meaning no customComponent
would be applied.join
isn't being called.I can give you the code if it helps.
Sigh. My typo:
const joinArray = separator => props => <span>{props.value.join(separator)}</span>;
Your [0]
or whatever is just returning undefined
so Griddle doesn't think you set customComponent
and you see the default behavior. 😀
Thank you, it worked. But how can I concatenate all the values in one new column if the data looks like:
{
"a": [
{
"b": [
"text1",
"text2"
],
"c": [
"text3"
],
"d": "text4"
}
]
}
How should be modified the joinArray in order to use a separator between all the text and the result be something like: "text1 text2 text3 text4"?
I tried
const joinArray = separator => props => <span>{props.data.join(separator)}</span>;
but it didn't worked.
@visinescu13 I'm going to keep this closed, as it doesn't seem to be a Griddle issue.
At this point you're into ImmutableJS territory as to how to manipulate the nested data. It sounds like you want something like:
const joinArray = separator => props => <span>{props.data.flatten().join(separator)}</span>;
But honestly Stack Overflow or equivalent would be a better place to get answers about that library.
Griddle version
1.11.2
Expected Behavior
Concatenate the contents from multiple columns in one single column. Ex:
Concatenate in column with title "Test" both texts:
How to concatenate the both texts ("text1" and "text2") from two columns in one single column (with title "Test")?
Actual Behavior
Steps to reproduce
Pull request with failing test or storybook story with issue
While this step is not necessary, a failing test(s) and/or a storybook story will help us resolve the issue much more easily. Please see the README for more information.