multiple lines in one cell using react bootstrap table next

Question

Can you tell me how to do multiple lines output (with separator, like \n or <br>) when using boostrap table next (bootstrap table 2) in React

import BootstrapTable from 'react-bootstrap-table-next';

const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name'
}, {
  dataField: 'price',
  text: 'Product Price'
}];

const products = [
    id: '1',
    name: 'line1<br>line2<br>line3',
    price: '123'
];

<BootstrapTable keyField='id' data={ products } columns={ columns } />

Answer 1

You can use formatter. Example:

const columns = [
    {
        dataField: "status",
        text: "Status",
        formatter: (cell, row) => (cell || []).map(x => (
            //x - status array, example: [{date: 1639134206672, text: "Starting..."},{date: 1639134210590, text: "Completed"}]
            <div>
                {x.date && (
                    <small>{(new Date(x.date)).toGMTString() + ': '}</small>
                )}
                {x.text && (
                    <span className="status-item">{x.text || '...'}</span>
                )}
            </div>
        )),
    },
    {
        dataField: "date",
        text: "Date",
        formatter: (cell, row) => (
            <small>{cell && (new Date(cell)).toGMTString()}</small>
        ),
    }
];

<BootstrapTable 
    bootstrap4
    keyField='index' 
    data={ sendlog }
    columns={ columns }
    defaultSorted={defaultSorted}
/>