反应 table 排序不适用于计算列

Question

我的“计算”列Header：'EV/Resource ($ per oz)'在反应中按下排序时似乎没有按任何升序或降序排序table，它以某种方式随机化 table 排序。我是否正确地做了一个“计算列”？我的所有其他列都正确排序。

  {
    Header: 'in-situ ($b)',
    accessor: 'minerals_value',
    Cell: (row) => {
      return (row.value / 100 / 1000000000).toFixed(2)
    },
  },
  {
    Header: 'GMV ($/t)',
    accessor: 'minerals_value_per_ton',
  },
  {
    Header: 'EV/Resource ($ per oz)',
    id: 'evresource',
    accessor: 'evresource',
    sortType: 'basic',

    Cell: (row) => {
      return Number(
        row.row.original.company.enterprise_value /
          100 /
          row.row.original.primary_mineral.contained
      ).toFixed()
    },
  },

table 渲染：

<table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                {column.render('Header')}
                <span>{column.isSorted ? (column.isSortedDesc ? ' ▼' : ' ▲') : ''}</span>
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row)
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              })}
            </tr>
          )
        })}
      </tbody>
    </table>

Answer 1

您需要实现自定义访问器才能使排序正常工作。具体来说：

  {
    Header: 'EV/Resource ($ per oz)',
    id: 'evresource',
    accessor: customAccessor,

和

function customAccessor(row) {
  return Number(
        row.company.enterprise_value /
          100 /
          row.primary_mineral.contained
      )
  }
}

反应 table 排序不适用于计算列

react table sort not working on calculated column

javascript

reactjs

react-table