我正在使用Material UI React中的DataGrid。在文档中，列是可调整大小的，但不适合我。这是显示的组件
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>
)
}下面是我的行和列asdf asdf asdf asdf asdf asdf 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",
},
2条答案
按热度按时间mwkjh3gx1#
要调整列的大小，可以使用DataGridPro。
要防止调整列的大小，请设置resizable：在GridColDef中为false。或者，要禁用所有列的大小调整，请设置prop disableColumnResize={true}。
参考：https://mui.com/x/react-data-grid/column-dimensions/、https://codesandbox.io/s/gjh0ln?file=/demo.tsx
ibps3vxo2#
默认情况下，这些列不需要任何 prop 就可以调整大小。我们也可以看到
columns和rows对象吗？