I am trying to render some data in tabular form using react-bootstrap-table but the data of one column is overlapping with the data of other columns. i wanted to keep my layout fixed and thus have added the css layout:fixed which is actually a requirement as well. But the final result is:

Actually for this column i'm getting an array of string from backend. e.g. ["DEPT","OLD","CUSTOM_FUNCTION",...] which is getting converted into a single string internally by react and i'm not sure how to further format it.

I also searched in react table docs at : .html#rich-editors but didn't find anything.

My ultimate goal is to visualize the data in a much better way like drop down or each element of array in new line within the same column expandable on some mouse click.

The above image can be considered as sample requirement where only the first element of list will be displayed on load and after clicking on arrow button it will show all the list items below one another in the same column as shown below.

I am not able to figure out which column prop will help me or whether it's even possible or not. The goal is exactly the same but a simple new line separated data will also do.

Column Definition Code:

{
    dataField: 'data',
    text: 'DATA',
    editable: false,
    filter: textFilter(),
    headerStyle: () => 
    {
        return { width: '100px', textAlign: 'center'};
    }
}

Table Creation Code:

<BootstrapTable 
    keyField='serialNo' 
    data={ this.state.data } 
    columns={ this.state.columns } 
    filter={ filterFactory() } 
    pagination={ paginationFactory({sizePerPage: 4}) }
    cellEdit={ cellEditFactory({ mode: 'click'}) }
    striped
    hover
/>

Kindly help or suggest something appropriate.

Thanks

I am trying to render some data in tabular form using react-bootstrap-table but the data of one column is overlapping with the data of other columns. i wanted to keep my layout fixed and thus have added the css layout:fixed which is actually a requirement as well. But the final result is:

Actually for this column i'm getting an array of string from backend. e.g. ["DEPT","OLD","CUSTOM_FUNCTION",...] which is getting converted into a single string internally by react and i'm not sure how to further format it.

I also searched in react table docs at : https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-celledit.html#rich-editors but didn't find anything.

My ultimate goal is to visualize the data in a much better way like drop down or each element of array in new line within the same column expandable on some mouse click.

The above image can be considered as sample requirement where only the first element of list will be displayed on load and after clicking on arrow button it will show all the list items below one another in the same column as shown below.

I am not able to figure out which column prop will help me or whether it's even possible or not. The goal is exactly the same but a simple new line separated data will also do.

Column Definition Code:

{
    dataField: 'data',
    text: 'DATA',
    editable: false,
    filter: textFilter(),
    headerStyle: () => 
    {
        return { width: '100px', textAlign: 'center'};
    }
}

Table Creation Code:

<BootstrapTable 
    keyField='serialNo' 
    data={ this.state.data } 
    columns={ this.state.columns } 
    filter={ filterFactory() } 
    pagination={ paginationFactory({sizePerPage: 4}) }
    cellEdit={ cellEditFactory({ mode: 'click'}) }
    striped
    hover
/>

Kindly help or suggest something appropriate.

Thanks

• javascript
• json
• reactjs
• react-native
• react-bootstrap-table

• so why dont you convert your array to <li>? ["DEPT","OLD","CUSTOM_FUNCTION",...].map(obj => <li>{obj}</li>); – Apostolos Commented Aug 11, 2020 at 10:48
• That's exactly my question. where to write the logic. I had updated my question as to include column definition and table creation code as well. Please suggest where i should code the logic to convert array to <li> – Anand Commented Aug 11, 2020 at 10:59
• check my answer. I think this is what you need. – Apostolos Commented Aug 11, 2020 at 11:01

1 Answer 1

Check this sandbox.

https://codesandbox.io/s/petent-rain-2enlp

const columns = [{
  dataField: 'id',
  text: 'Product ID',
}, {
  dataField: 'name',
  text: 'Product Name'
}, {
  dataField: 'labels',
  text: 'Labels',
   formatter: (cell) => {
    return <>{cell.map(label => <li>{label}</li>)}</>
  },
}];

You need to define your own formatter in order to include "plex" html inside your table cell.