CODEWITHSUNDEEP
javascriptjsonreactjsreact-nativereact-bootstrap-table
Anand
Anand

Reputation: 391

How to format a list of string into columns of react bootstrap table 2 such that data doesn't flows out of actual columns

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:

enter image description here

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.

enter image description here

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.

enter image description here

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

Upvotes: 1

Views: 6643

Answers (1)

Apostolos
Apostolos

Reputation: 10463

Check this sandbox.

https://codesandbox.io/s/competent-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 "complex" html inside your table cell.

Upvotes: 4

Related Questions