Expand row by column : Expand row by multiple columns and load different components according to the column clicked

I am following below example to implement "expand row by column".

```
/* eslint max-len: 0 */
import React from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';

const products = [];

function addProducts(quantity) {
const startId = products.length;
for (let i = 0; i < quantity; i++) {
const id = startId + i;
if (i < 3) {
products.push({
id: id,
name: 'Item name ' + id,
price: 2100 + i,
expand: [ {
fieldA: 'test1',
fieldB: (i + 1) * 99,
fieldC: (i + 1) * Math.random() * 100,
fieldD: '123eedd' + i
}, {
fieldA: 'test2',
fieldB: i * 99,
fieldC: i * Math.random() * 100,
fieldD: '123eedd' + i
} ]
});
} else {
products.push({
id: id,
name: 'Item name ' + id,
price: 2100 + i
});
}
}
}
addProducts(5);

class BSTable extends React.Component {
render() {
if (this.props.data) {
return (

Field A
Field B
Field C
Field D
);
} else {
return (

?

);
}
}
}

export default class ExpandRow extends React.Component {
constructor(props) {
super(props);
}

isExpandableRow(row) {
if (row.id < 3) return true;
else return false;
}

expandComponent(row) {
return (

);
}

render() {
const options = {
expandRowBgColor: 'rgb(242, 255, 163)',
expandBy: 'column' // Currently, available value is row and column, default is row
};
return (

Product ID
Product Name
Product Price

);
}
}
```

Questions:
Que 1.) I want to implement expand row on "multiple columns". For eg:

I would make 2 columns out of 3 to expand rows.

```
Product ID
Product Name
Product Price
```

Behavior I want is :

1.) When user clicks on "product id" column, I want to show some other BSTTableNew component like above (on expand row) but with columns "field A" & "field B" and some other functionality.

2.) When user clicks on "product name" column, I want to show BSTTable (on expand row) with similarly as above.

What changes I have to make in below code to load respective component class based upon the column I click to expand row with additional details?

I believe i have to make some changes in below code to load other components:

```
expandComponent(row) {

if( column === "productID") { //something of this sort I want
return (

);
}

if( column === "productName") { //something of this sort I want
return (

);
}
}
```

Que 2.) In BSTTable component class, i want to "dataFormat" "field A" column. I'm doing it like below:

```
class BSTable extends React.Component {

formatter(cell, row) {
return cell.join("
");
}
render() {
if (this.props.data) {
return (

Field A
Field B
Field C
Field D
);
} else {
return (

?

);
}
}
}
```

But formatting is not getting applied here, I'm getting an error like "TypeError: cell.join is not a function. (In 'cell.join("
")', 'cell.join' is undefined)"

What is wrong here? Please help @AllenFang