打開行選擇對話框 [材料表]

Question

單擊表格的特定行時，是否可以打開詳細信息對話框。 問題是關於材料表（ https://material-table.com/ ）。 提前致謝！ :)

Answer 1

沒有本地解決方案可以像您想要的那樣使用材料表顯示彈出窗口。 但是你可以做到這一點。

您在 MaterialTable 中有一個名為 onRowClick 的道具。

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

使用這個道具，你可以定義你自己的函數來打開一個彈出窗口（ https://material-ui.com/components/popper/ ）或任何你想要的彈出類型組件，點擊行並在其中顯示所選表格行的信息.

這樣，您甚至可以使用顯示更多詳細信息的 id 請求獲取更多詳細信息！

例子：

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

如果我不夠清楚，請不要猶豫;)