打开行选择对话框 [材料表]

Question

Is there a way to open a details dialog when clicking on a specific row of the table. The issue is regarding material-table ( https://material-table.com/ ). Thanks in advance! :)

Answer 1

There isn't a native solution to display a popup like you want with material-table. But you can achieve this.

You have a props in MaterialTable called onRowClick.

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

Using this props you can define your own function to open a popper ( https://material-ui.com/components/popper/ ) or whatever popup type component you want on row click and display the informations of the selected Table row in it.

That way you can even make a request to get more details info with the id you get to display even more details info !

Exemple:

  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)}
     />
   )
 );

Don't hesitate if i wasn't clear enough ;)