update datagrid ui

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 (

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,