一个单元格中的多行使用 react bootstrap table next
multiple lines in one cell using react bootstrap table next
你能告诉我如何在使用 boostrap table next (bootstrap table 2) 在 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 } />
您可以使用格式化程序。示例:
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}
/>
你能告诉我如何在使用 boostrap table next (bootstrap table 2) 在 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 } />
您可以使用格式化程序。示例:
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}
/>