Question

我正在使用react-table包和它的表。

在表格列道具中，我已正确格式化了对象。

    Header: 'Charter',
      columns: [
          {
              Header: 'Title',
              accessor: 'charter_title',
              style: {
                  textAlign: 'center'
              }
          }
      ]
    }

我想要做的是将此列值格式化为货币

即。 10000.53将来10,000.53

即。 1230000.123将来1,230,000.123

react-table是否有机会进行此类格式化？

Answer 1

Header: 'Charter',
   columns: [
      {
          Header: 'Title',
          accessor: 'charter_title',
          style: {
              textAlign: 'center'
          },
          Cell: props => new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'USD' }).format(props.value)
      }
  ]

}

Answer 2

我发现Cell props定义了每个单元格的输出。这是工作代码。您可以根据需要提供自定义函数来格式化每个单元格的值。

Header: 'Charter',
       columns: [
          {
              Header: 'Title',
              accessor: 'charter_title',
              style: {
                  textAlign: 'center'
              },
              // provide custom function to format props 
              Cell: props => <div> toCurrency(props.value) </div>
          }
      ]
}

我的自定义功能是：

function toCurrency(numberString) {
    let number = parseFloat(numberString);
    return number.toLocaleString('USD');
}

React-table包：将float格式化为货币

2 个答案: