React-table package: formatting float as currency

Question

I am using react-table package and it's table.

In the table column props I have submitted object as it formats properly.

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

What I want to do is to format this column value as currency

i.e. 10000.53 would be come 10,000.53

i.e. 1230000.123 would be come 1,230,000.123

Does react-table give you opportunity to do this kind of formatting?

Answer 1

I have found out that Cell props define what will be output of each cell. Here's working code. You can provide custom function to format each cell's value as you like.

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

Mine custom function is:

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

Answer 2

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)
      }
  ]

}