更改 react-virtualized 中服务器端数据的格式 table

Question

我正在制作一个具有两个视图选项的 React 应用程序：

卡片和
个列表（table 个）。

我正在为列表视图选项使用 react-virtualized。问题是我需要更改数据类型为数字时获取的服务器端数据的格式。我已经在卡片视图选项中完成了该操作。例如，这是我的 ItemCard 组件：

<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>

我在 ItemList 组件中使用的是这样的：

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

我应该如何使用 react-virtualized table 做完全相同的事情，如下所示：

<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}
    />

如何更改类型为字符串的'Inventory'和'UnitPrice'服务器端数据的格式？

Answer 1

我找到了解决方案，我这样使用 cellDataGetter：

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

更改 react-virtualized 中服务器端数据的格式 table

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

javascript

reactjs

react-virtualized