react-table Редактируемый контент + сортировка; редактируемая ячейка не обновляется?

Для тех, кто борется с этим, пока мы ждем исправления, я нашел обходной путь.

Учитывая пример в исходном вопросе, замена renderEditable на следующее будет действовать правильно:

renderEditable(cellInfo) {
  return (
    <div
      style={{ backgroundColor: "#fafafa" }}
      contentEditable
      suppressContentEditableWarning
      onBlur={e => {
        const data = [...this.state.data];
        data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
        data[cellInfo.index].full = data[cellInfo.index].age * 2;
        e.target.innerHTML = this.state.data[cellInfo.index][cellInfo.column.id];
        this.setState({ data });
      }}
    >{this.state.data[cellInfo.index][cellInfo.column.id]}</div>
  );
}

Событие onBlur срабатывает до того, как таблица пересортирует себя, поэтому, если мы просто возьмем значение, отложим его в сторону и сбросим innerHTML на исходное значение перед запуском курорта с setState, мы получим правильные отображаемые значения. Это не идеально, но это работает. Не забудьте подтвердить ввод.

Проблема в том, что вы являетесь hot-calculating значением full вашей таблицы и сортируете свою таблицу на основе этого атрибута full. Для решения вашей проблемы вы можете

1) Не сортировать таблицу по full.

как это

defaultSorted={[
  {
    id: "firstName",
    desc: true
  }
]}

2) Избегайте горячего вычисления вашего full и вычисляйте его только один раз в своем конструкторе.

Что-то вроде этого

this.state = {
  data: makeData().map(item => ({ ...item, full: item.age * 2 }))
};

и ваш заголовок, как это

{
  Header: "full",
  id: "full",
  accessor: "full",
}