CODEWITHSUNDEEP
material-uidatagridrectmui-x-data-grid
govs
govs

Reputation: 135

How to display a custom component under a row when clicked in MUI Data-grid-pro react component?

I am trying to have a feature in a MUI DataGrid, if you click on a row, it expands with more info,

Here is what I have tried Demo But I can not customise this to have full width of the row and have more info.

Expecting something like below image

enter image description here

Upvotes: 1

Views: 576

Answers (1)

Ahmet Emre Kilinc
Ahmet Emre Kilinc

Reputation: 6935

You need to use getDetailPanelContent prop of MUI datagrid like this:

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

You can take a look at this forked StackBlitz for a live working example of your sample code using expandable rows.

Upvotes: 1

Related Questions