diff --git a/src/components/PoDetail/PoInputGrid.tsx b/src/components/PoDetail/PoInputGrid.tsx index 4117ccd..4951a33 100644 --- a/src/components/PoDetail/PoInputGrid.tsx +++ b/src/components/PoDetail/PoInputGrid.tsx @@ -531,7 +531,7 @@ const closeNewModal = useCallback(() => { { field: "uom", headerName: t("uom"), - width: 120, + width: 150, // flex: 0.5, renderCell: (params) => { return params.row.uom?.code; @@ -554,7 +554,7 @@ const closeNewModal = useCallback(() => { { field: "stockUom", headerName: t("Stock UoM"), - width: 120, + width: 150, // flex: 0.5, renderCell: (params) => { return itemDetail.stockUom.stockUomCode; @@ -789,6 +789,10 @@ const closeNewModal = useCallback(() => { [t, handleStart, handleQC, handleEscalation, handleStockIn, handlePutAway, handleDelete, handleReject, itemDetail], ); + const unsortableColumns = useMemo(() => + columns.map(column => ({ ...column, sortable: false })) + , [columns]); + const addRow = useCallback(() => { console.log(itemDetail); const newEntry = { @@ -913,7 +917,7 @@ const closeNewModal = useCallback(() => { onRowModesModelChange={setRowModesModel} processRowUpdate={processRowUpdate} onProcessRowUpdateError={onProcessRowUpdateError} - columns={columns} + columns={unsortableColumns} isCellEditable={(params) => { const status = params.row.status.toLowerCase(); return ( diff --git a/src/components/StyledDataGrid/StyledDataGrid.tsx b/src/components/StyledDataGrid/StyledDataGrid.tsx index 295dc3b..639a8d2 100644 --- a/src/components/StyledDataGrid/StyledDataGrid.tsx +++ b/src/components/StyledDataGrid/StyledDataGrid.tsx @@ -3,6 +3,9 @@ import { DataGrid } from "@mui/x-data-grid"; const StyledDataGrid = styled(DataGrid)(({ theme }) => ({ "--unstable_DataGrid-radius": 0, + // "& .MuiDataGrid-columnHeader": { + // height: "unset !important" + // }, "& .MuiDataGrid-columnHeaders": { backgroundColor: theme.palette.grey[50], }, @@ -14,6 +17,8 @@ const StyledDataGrid = styled(DataGrid)(({ theme }) => ({ lineHeight: 2, letterSpacing: 0.5, textTransform: "uppercase", + whiteSpace: "normal", + }, "& .MuiDataGrid-columnSeparator": { color: theme.palette.primary.main,