CODEWITHSUNDEEP
reactjsmaterial-uidatagrid
Ayoub Nait Ben Mous
Ayoub Nait Ben Mous

Reputation: 11

How to make the entire row of react material ui datagrid clickable

I need my DataGRid row to be clickable, cause I need to enter details by clicking it, so how to achieve that?


const columns = [
  { field: 'id', headerName: 'ID', width: 20 },
  { field: 'startdate', headerName: 'Start Date', width: 150, type: 'date', editable: true },
  { field: 'enddate', headerName: 'End Date', width: 150, type: 'date', editable: true },
  { field: 'status', headerName: 'Status', width: 150, editable: true },
  { field: 'tenantId', headerName: 'TennatID', type: 'number', width: 110, editable: true },
];

const DataTable = (props) => {

  const styles=useStyles();

  return (
    <>
      <div className={styles.root} >
        <DataGrid
          rows={props.rows}
          columns={columns}
          pageSize={props.numberOfRows}
          rowsPerPageOptions={[props.numberOfRows]}
          checkboxSelection
          disableSelectionOnClick
        />
      </div>
    </>
  );

Upvotes: 1

Views: 7971

Answers (1)

clever_username
clever_username

Reputation: 59

Heres' the reference: https://mui.com/x/api/data-grid/data-grid/

Use the prop onRowClick

Upvotes: 4

Related Questions