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

Question

有没有办法在单击表格的特定行时打开详细信息对话框。问题与材料表 (https://material-table.com/( 有关。 提前感谢！:)

Answer 1

没有本机解决方案可以像您想要的材料表那样显示弹出窗口。但你可以做到这一点。

你在 MaterialTable 中有一个名为 onRowClick 的道具。

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

使用此 props，您可以定义自己的函数，以在行单击时打开 popper (https://material-ui.com/components/popper/( 或任何您想要的弹出类型组件，并在其中显示所选 Table 行的信息。

这样，您甚至可以请求使用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)}
/>
)
);

如果我不够清楚，请不要犹豫;)