如何在 React Bootstrap 表的列定义中使用时刻库？

Question

我的代码如下所示：

const columns = [{
dataField: 'Id',
text: 'Order ID'
}, {
dataField: 'Date',
text: 'Date'
}, {
dataField: 'Total',
text: 'Total'
}];

它在React Bootstrap表中显示日期。但是，日期是Json格式的，我不需要。

我曾尝试使用即时库以这种方式格式化日期：

const columns = [{
dataField: 'Id',
text: 'Order ID'
}, {
dataField: '{moment(Date).format("DD-MM-YYYY")}',
text: 'Date'
}, {
dataField: 'Total',
text: 'Total'
}];

但是，日期列为空。

如何使用即时库来格式化React Bootstrap表库中列的日期？或者还有其他方法可以做到这一点？

Answer 1

column.formatter可以帮助您。有一个在线演示：这个

Answer 2

以下是rendor方法中的示例代码

render () {
let columns = []
columns = [
{ name: 'createAt',
displayName: 'my-Date',
dataFormat: function callback (cell, row, rowIndex, colIndex) { moment(cell).format('DD.MM.YYYY h:mm') },
hideFilter: true,
isKey: true,
width: '140'
}]

Answer 3

我想办法希望你喜欢这个。。。

import moment from "moment";
const Column = [
{
Header: "name",
accessor: "name",
},
{
Header: "ticker",
accessor: "ticketref",
},
{
Header: "Date",
accessor: (data) => moment(data.traded_on).format("L"),  // you can pass your date as props and manupulate accordingly..
},
{
Header: "Qty- Quantity",
accessor: "quantity",
},
{
Header: "Price",
accessor: "price",
},
{
Header: "Amount",
accessor: "settlement_amount",
},
];
export { Column };