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 the output of each cell will be. Here's some working code. You can provide the 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>
          }
      ]
}

My custom function is:

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