MUI Data-grid-pro React 组件中点击时如何在行下显示自定义组件？

Question

我正在尝试在 MUI DataGrid 中添加一个功能，如果您单击一行，它会展开并显示更多信息，

这是我尝试过的演示 但我无法将其自定义为具有行的全宽并具有更多信息。

期待如下图所示

Answer 1

您需要像这样使用 MUI datagrid 的

getDetailPanelContent

属性：

// Custom component to display a message in place of the new row
const MessageComponent = ({ message }) => (
  <div
    style={{
      padding: '10px',
      background: 'lightblue',
      border: '1px solid #ccc',
    }}
  >
    {message}
  </div>
);

function DetailPanelContent({ row }) {
  return (
    <Stack direction="row" alignItems="center">
      <Box>slected-row-details</Box>
      <MessageComponent
        message={`Sected Row: ${row.firstName} ${row.lastName}, Age: ${row.age}`}
      />
    </Stack>
  );
}

export default function DataGridProDemo() {
  const [selectedRows, setSelectedRows] = React.useState([]);

  const handleRowClick = (params: any) => {
    setSelectedRows([params.row.id]);
  };

  return (
    <Box sx={{ height: 400, width: '100%' }}>
      <DataGridPro
        detailPanelExpandedRowIds={selectedRows}
        rows={rows}
        columns={columns}
        onRowClick={handleRowClick}
        pagination
        pageSize={5}
        disableSelectionOnClick
        getDetailPanelContent={({ row }) => <DetailPanelContent row={row} />}
        getDetailPanelHeight={() => 'auto'}
        sx={{
          '& div[data-field="__detail_panel_toggle__"]': {
            display: 'none',
          },
        }}
      />
    </Box>
  );
}

您可以查看 这个分叉的 StackBlitz，获取使用可扩展行的示例代码的实时工作示例。