React-data-grid: создать столбец, основанный на другом столбце

В grid-сетке response-data как создать столбец, который отображает значения из другого столбца?

У меня есть массив объектов, которые содержат что-то вроде следующего:

{
    id: 3,
    latitude: 42.101231231,
    longitude: -81.123132
}

Определение моего столбца таково:

    this.columns = [
            { key: 'id', name: 'ID' },
                //The coordinates key for this column doesn't exist
            { key: 'coordinates', name: 'Coordinates', formatter: coordinatesFormatter  }
        ];

Форматирование:

const coordinatesFormatter = React.createClass({
  render() {
    return (<div>{latitude}, {longitude}</div>);
  }
});

В форматировании, как мне получить доступ к свойствам широты и долготы в строке, чтобы объединить их?

Насколько я могу сказать, форматировщик имеет доступ к значению своей ячейки через this.props.value, не имея возможности получить доступ ко всему объекту для строки.

Ответы

Ответ 1

Оказывается, это ограничение компонента. Здесь описывается одна работа: https://github.com/adazzle/react-data-grid/issues/42

Он включает добавление getRowMetaData: (row) => row в определение столбца. Это заполняет this.props.dependentValues в компоненте форматирования.

Это похоже на взлох, есть ли лучший способ доступа к данным строки в форматировании?

Обновление

Нашел несколько лучший способ. В методе rowGetter задайте любые дополнительные значения, которые вам нужны в строке, чтобы вы могли просто назначить им столбец по ключу.

rowGetter(i) {
  let row = this.props.rows[i];
  row.coordinates = row.latitude + ', ' + row.longitude
  return row;
}

<ReactDataGrid rowGetter={this.rowGetter} ... />