React-table добавить столбец редактирования / удаления

Я использую Rails и React-Table для отображения таблиц. Пока работает нормально. Но как добавить столбец редактирования / удаления в React-Table?

Это вообще возможно?

return (
    <ReactTable
      data={this.props.working_hours}
      columns={columns}
      defaultPageSize={50}
      className="-striped -highlight"
    />
    )

react-table
person Trinity76    schedule 23.02.2018    source источник
comment
Вы хотите добавить новый столбец, в котором вы хотите предоставить данные для редактирования строки или удалить строку. Я прав ?   -  person GAJESH PANIGRAHI    schedule 26.05.2018
comment
@GAJESHPANIGRAHI У вас есть какие-нибудь подсказки, как сделать ячейку редактируемой, а затем добавить эти кнопки?   -  person VJR08    schedule 04.07.2019
comment
@vrosario да, проверьте эту ссылку codeandbox.io/s/github/tannerlinsley/react-table/tree/master/   -  person GAJESH PANIGRAHI    schedule 04.07.2019
comment
вы можете использовать этот npmjs.com/package/eprofit   -  person xargr    schedule 09.10.2019

Ответы (1)


arrow_upward
41
arrow_downward

Все, что вам нужно сделать, это превратить columns в состояние компонента. Вы можете увидеть рабочий пример https://codesandbox.io/s/0pp97jnrvv

[Обновлено 05.03.2018] Неправильно понял вопрос, вот обновленный ответ:

const columns = [
    ...
    {
       Header: '',
       Cell: row => (
           <div>
               <button onClick={() => handleEdit(row.original)}>Edit</button>
               <button onClick={() => handleDelete(row.original)}>Delete</button>
           </div>
       )
    }
]

где handleEdit и handleDelete будут обратными вызовами, как вы хотите обрабатывать действия при нажатии кнопок.

person Rico Chen    schedule 02.03.2018
comment
Насколько я понимаю вашу демонстрацию, у вас есть функция отображения / скрытия столбца. Но я попросил столбец строки редактирования / удаления. - person Trinity76; 05.03.2018
comment
Мне пришлось немного изменить ответ @Rico Chen, чтобы объект строки передавался функциям обратного вызова: Cell: ({row}) => ( - person Alasdair Shields; 02.04.2020
comment
Да, как сказал @AlasdairShields, это должно быть Cell: ({row}) => (! - person Ayoub Laazazi; 06.11.2020