Открыть диалоговое окно выбора строки [таблица материалов] - PullRequest
Новая
       6

Открыть диалоговое окно выбора строки [таблица материалов]

0 голосов
/ 28 января 2020

Есть ли способ открыть диалоговое окно сведений при нажатии на указанную строку c таблицы. Вопрос касается таблицы материалов (https://material-table.com/). Заранее спасибо! :)

1 Ответ

0 голосов
/ 29 января 2020

Нет встроенного решения для отображения всплывающего окна с таблицей материалов. Но вы можете достичь этого.

У вас есть реквизит в MaterialTable, называемый onRowClick.

<MaterialTable onRowClick={(evt, selectedRow) => yourFunction(selectedRow)} />

Используя этот реквизит, вы можете определить свою собственную функцию для открытия поппера (https://material-ui.com/components/popper/ ) или любой другой компонент всплывающего типа, который вы хотите щелкнуть по строке и отобразить в нем информацию о выбранной строке таблицы.

Таким образом, вы даже можете сделать запрос на получение более подробной информации с идентификатором, который вы получите, чтобы отобразить еще более подробную информацию!

Пример: 

  const alertMyRow = (selectedRow) => (
      // here i can request something on my api with selectedRow.id to get additional
      // datas which weren't displayed in the table
      alert(`name: ${selectedRow.name}, surname: ${selectedRow.surname}`);
    );

return(){
  render(
    <MaterialTable
       columns={[
          { title: 'ID', field:'id' },
          { title: 'Name', field: 'name' },
          { title: 'Surname', field: 'surname' },
          { title: 'Phone Number', field: 'phone' },
       ]}
       datas={[...]}
       onRowClick={(evt, selectedRow) => alertMyRow(selectedRow)}
     />
   )
 );

Не стесняйтесь, если я не достаточно ясно;)

...