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

Question

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

so why dont you convert your array to <li>? ["DEPT","OLD","CUSTOM_FUNCTION",...].map(obj => <li>{obj}</li>); — Apostolos
– 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
– Anand, Commented Aug 11, 2020 at 10:59

Apostolos · Accepted Answer · 2020-08-11 11:01:23Z

4

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.

answered Aug 11, 2020 at 11:01

Apostolos

10.5k5 gold badges32 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anand Over a year ago

Thanks Apostolos... That's exactly what i needed.... One question though, since some list contents are large in number therefore, the column size is growing sometimes very huge in height. Any suggestions for controlling the height to specific pixels ?

Apostolos Over a year ago

hmm i guess it should be of fixed height and then you could set overflow-y property? sth like that

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related