Changing format of Server-Side data inside react-virtualized table

Question

I'm making a React app that has two view options:

cards and
lists (tables).

I'm using react-virtualized for the list-view option. The problem is that I need to change the format of the server-side data I get when the data type is number. I've already done that in the card-view option. For example, this is my ItemCard Component:

<div className="container">
  <div>{id}</div>
  <div>{name}</div>
  <div>{parseFloat(inventory).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</div>
  <div>{parseFloat(unitprice).toFixed(2)}</div>
</div>

which I use in the ItemList Component like this:

beautifiedData.map((product, i) => {
  return ( 
    <ItemCard
      key={i}
      id={item.No}
      name={item.name}
      inventory={item.Inventory}
      unitprice={item.UnitPrice}
    />
   )
 })

How should I do the exact same thing with react-virtualized table which looks like this:

<Table className="items-table"
    width={1300}
    height={400}
    headerHeight={20}
    rowHeight={30}
    rowCount={list.length}
    rowGetter={({ index }) => list[index]}
    sortBy={this.state.sortBy}
    sortDirection={this.state.sortDirection}
    sort={this.sort}
>

    <Column
      label={content[langProp].ID}
      dataKey= 'No'
      width={150}
    />

    <Column
      label={content[langProp].Name}
      dataKey= 'Name'
      width={150}
    />

    <Column
      label={content[langProp].Inventory}
      dataKey= 'Inventory'
      width={150}
    />

    <Column
      label={content[langProp].UnitPrice}
      dataKey= 'UnitPrice'
      width={150}
    />

How can I change the format of 'Inventory' and 'UnitPrice' server-side data whose type is string?

I would transform the data when receiving it if you don't need the original, or transform it with a selector when passing into the view, rather than adding unnecessary complexity to the view and possibly performance degradation on scroll. — Dominic, Feb 04 '19 at 11:13

score 0 · Accepted Answer · answered Feb 04 '19 at 13:25

I found a solution, I used cellDataGetter like this:

<Column
  label={content[langProp].Inventory}
  cellDataGetter={({ rowData }) => parseFloat(rowData.Inventory).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
  dataKey='Inventory'
  width={150}
/>

Changing format of Server-Side data inside react-virtualized table

1 Answers1