Я пытаюсь визуализировать таблицу с использованием response-data-grid.Я использую пользовательский форматер для столбца.Я хочу сделать кнопку, которая откроет модальный, когда я нажму на нее.
Я перепробовал все варианты, но мой модал рендерится внутри ячейки (становится почти невидимым) и не совсем так, как ожидалось
import React from 'react'
import ReactDataGrid from 'react-data-grid'
class ReactTableComponent extends React.Component {
componentWillMount () {
this.setState({data: this.props.data, sortedData: this.props.data})
}
sortRows (data, sortColumn, sortDirection) {
const comparer = (a, b) => {
if (sortDirection === 'ASC') {
return a[sortColumn] > b[sortColumn] ? 1 : -1
} else if (sortDirection === 'DESC') {
return a[sortColumn] < b[sortColumn] ? 1 : -1
}
}
this.setState({ sortedData: sortDirection === 'NONE' ? this.state.data
: [...this.state.data].sort(comparer) })
}
onCellSelected (rowIdx, idx) {
this.refs.grid.openCellEditor(rowIdx, idx)
};
onCellDeSelected (rowIdx, idx) {
if (idx === 2) {
alert('the editor for cell (' + rowIdx + ',' + idx + ') should have
just closed')
}
};
render () {
let { classes, columns, edit, channelId, id } = this.props
let data = this.state.data
return (
<ReactDataGrid
ref='grid'
rowKey='id'
columns={columns}
rowGetter={i => this.state.sortedData[i]}
rowsCount={10}
minHeight={600}
enableCellSelect
onRowSelect={this.onRowSelect}
enableRowSelect='multi'
onCellSelected={this.onCellSelected}
onCellDeSelected={this.onCellDeSelected}
onGridSort={(sortColumn, sortDirection) =>
this.sortRows(data, sortColumn, sortDirection)
}
/>
)
}
}
export default (ReactTableComponent)
, а в моих столбцах у меня есть columns.push ({ключ: 'edit', имя: 'Edit', ширина: 10000, форматтер: EditFormatter, изменяемый размер: true})
, а в EditFormatter есть кнопка, при нажатии которой открывается модальный