Concatenate contents from multiple columns in one single column

[visinescu13]

Griddle version

1.11.2

Expected Behavior

Concatenate the contents from multiple columns in one single column. Ex:

{
  "a": [
    "text1",
    "text2"
    ]
}

Concatenate in column with title "Test" both texts:

<Griddle
        data={data}
        plugins={[plugins.LocalPlugin]}
      >
        <RowDefinition>
          <ColumnDefinition id="a.0 && a.1" title="Test" />
        </RowDefinition>
</Griddle>

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.

[dahlbyk]

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.

[visinescu13]

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.

[dahlbyk]

1. I have no idea why [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.
2. If different separators aren't working, it seems like join isn't being called.

[visinescu13]

1. It looks like it doesn't matter if I put [0], [1] or any number, but it must be a number. If I let only [] an error appears. If I don't put [] then the text in the "Test" column is "props.value.join(separator)".
2. I tried " -" instead of "props.value.join(separator)" but the same result, "text1text2" in the new column, instead of "text1-text2".

I can give you the code if it helps.

[dahlbyk]

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. 😀

[visinescu13]

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.

[dahlbyk]

@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.