как лучше отформатировать данные, извлеченные из API-интерфейса в таблицу Ant Design

Question

Я пытаюсь добавить префикс знака доллара, а также запятых к определенным столбцам в таблице ant design с данными, извлеченными из API.

Вот что я собираюсь, я не могуКажется, я понял это и пару других вещей для меня:

  componentDidMount() {
    axios.get('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=250&page=1&sparkline=true&price_change_percentage=24hr')
      .then(res => {
          const data = res.data;
          this.setState({ data })
      })
  }
  render() {
    const { data } = this.state;

    const tableData = data.map(row => ({
      Rank: row.market_cap_rank,
      Name: row.name,
      Price: row.current_price,
      Change: row.price_change_24h,
      totalVol: row.total_volume,
      marketCap: row.market_cap,
    }))

    const columns = [{
      title: 'Rank',
      dataIndex: 'Rank',
      key: 'Rank',
    }, {
      title: 'Name',
      dataIndex: 'Name',
      key: 'Name',
    }, {
      title: 'Price',
      dataIndex: 'Price',
      key: 'Price',
    }, {
      title: '24hr Change',
      dataIndex: 'Change',
      key: 'Change',
    }, {
      title: 'Total Volume',
      dataIndex: 'totalVol',
      key: 'totalVol',
    },

...

<Table rowKey='Name' columns={columns} dataSource={tableData} size="small"/>

Я также вполне осознаю, что написанный мной код может быть лучше, и любые советы илипредложения, такие как ключ к столу или что-нибудь еще, пожалуйста, дайте мне знать!

Answer 1

это требует некоторого форматирования, я пробовал это давно, и функция, которую я использовал, была:

value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')

это добавит $ и запятую в соответствующие места. Спасибо

Answer 2

В соответствии с документацией таблицы проектирования Ant (см. Раздел «Столбцы»), для этого необходимо использовать render в столбцах. Пример -

const columns = [
.....
{
  title: 'Price',
  dataIndex: 'Price',
  key: 'Price',
  render: (value, row, index) => {
    // do something like adding commas to the value or prefix
    return <span>$ {value.toLocaleString('en-US')}</span>;
  },
},
.....