Как реагировать на данные в сетке, как сделать так, чтобы ячейка отображала кнопку, при нажатии которой открывается мод - PullRequest
0 голосов
/ 05 декабря 2018

Я пытаюсь визуализировать таблицу с использованием 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 есть кнопка, при нажатии которой открывается модальный

...