Question 136765 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – anyone knows how to add resizable columns to my react data grid?

I am using DataGrid from material UI React. In the documentation the columns are resizable but it is not for me. This is the component displayed

return (
    <Box m="1.5rem 2.5rem">
      <Typography variant="h4">Reservation List</Typography>
      <Box style={{ height: 400, width: "100%" }}>
        <DataGrid
          rows={rows}
          columns={columns}
          pageSize={5}
          onRowClick={handleRowClick}
          rowSelected={selectedRow !== null}
          disableSelectionOnClick
          selectionModel={selectedRow !== null ? [selectedRow] : []}
          disableColumnResize={false}
        />
      </Box>
    </Box>
  )
  }

below are my rows and columns asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf

     const columns = [
        { field: "id", headerName: "#", width: 90 },
        { field: "reservationId", headerName: "Reservation ID", width: 150 },
        { field: "customerId", headerName: "Customer ID", width: 150 },
        { field: "numAdults", headerName: "Adults", width: 120 },
        { field: "numChildren", headerName: "Children", width: 120 },
        { field: "daysOfStay", headerName: "Days of Stay", width: 150 },
        { field: "roomType", headerName: "Room Type", width: 150 },
        { field: "arrivalDate", headerName: "Arrival Date", width: 150 },
        { field: "leadTime", headerName: "Lead Time", width: 120 },
        { field: "cancelled", headerName: "Cancelled", width: 120 },
        { field: "bookingChannel", headerName: "Booking Channel", width: 180 },
      ];
    
      const rows = [
        {
          id: 1,
          reservationId: "R001",
          customerId: "C001",
          numAdults: 2,
          numChildren: 1,
          daysOfStay: 4,
          roomType: "Deluxe",
          arrivalDate: "2023-05-01",
          leadTime: 14,
          cancelled: false,
          bookingChannel: "Expedia",
        },
Tags:

2

Answers


  1. 0

    The columns should be resizable by default without any props. Can we see the columns and rows objects as well?

    Login or Signup to reply.
  2. 0

    To resize the columns, DataGridPro can be used.

    To prevent the resizing of a column, set resizable: false in the GridColDef. Alternatively, to disable all columns resize, set the prop disableColumnResize={true}.

    References:
    https://mui.com/x/react-data-grid/column-dimensions/, https://codesandbox.io/s/gjh0ln?file=/demo.tsx

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search