chore: show all the columns from db

src/private/catalogs/products/ProductCollections.jsx

@@ -174,7 +174,7 @@ export default function ProductCollections() {
   }, [statusFilter, rawRows]);
 
   const columns = [
-   {
+    {
       field: 'actions',
       headerName: '',
       width: 130,
@@ -192,7 +192,7 @@ export default function ProductCollections() {
               borderRadius: 2,
               p: 1,
             }}
-            onClick={() => { setEditRow(p.row); setOpen(true); }}
+            onClick={() => { setEditRow(params.row); setOpen(true); }}
           >
             <EditRoundedIcon fontSize="small" />
           </IconButton>
@@ -212,31 +212,30 @@ export default function ProductCollections() {
         </Box>
       ),
     },
-
-    
-    { field: 'name', headerName: 'Name', width: 200 },
-    { field: 'categoryId', headerName: 'Category', width: 170, valueGetter: (p) => labelCategory(p?.row?.categoryId) },
-    { field: 'providerId', headerName: 'Provider', width: 170, valueGetter: (p) => labelProvider(p?.row?.providerId) },
-    { field: 'color', headerName: 'Color', width: 130, valueGetter: (p) => labelColor(p?.row?.color) },
-    { field: 'line', headerName: 'Line', width: 130, valueGetter: (p) => labelLine(p?.row?.line) },
+    { field: 'name', headerName: 'Name', flex: 1, minWidth: 160 },
+    { field: 'categoryId', headerName: 'Category', flex: 1, minWidth: 160 },
+    { field: 'providerId', headerName: 'Provider', flex: 1, minWidth: 160 },
+    { field: 'color', headerName: 'Color', flex: 1, minWidth: 160 },
+    { field: 'line', headerName: 'Line', flex: 1, minWidth: 160 },
     {
       field: 'price',
       headerName: 'Price',
-      width: 130,
+      flex: 1,
+      minWidth: 160,
       type: 'number',
       valueGetter: (p) => parsePrice(p?.row?.price),
       renderCell: (p) => {
-        const currency = labelCurrency(p?.row?.currency || 'USD');
         const val = parsePrice(p?.row?.price);
+        const currency = p?.row?.currency || 'USD';
         try {
-          return new Intl.NumberFormat(undefined, { style: 'currency', currency: currency || 'USD' }).format(val);
+          return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(val);
         } catch {
           return `${currency} ${val.toFixed(2)}`;
         }
       }
     },
-    { field: 'currency', headerName: 'Currency', width: 120, valueGetter: (p) => labelCurrency(p?.row?.currency) },
-    { field: 'stock', headerName: 'Stock', width: 100, type: 'number', valueGetter: (p) => Number(p?.row?.stock ?? 0) },
+    { field: 'currency', headerName: 'Currency', flex: 1, minWidth: 160 },
+    { field: 'stock', headerName: 'Stock', flex: 1, minWidth: 160 },
     {
       field: 'attributes',
       headerName: 'Attributes',
@@ -246,17 +245,12 @@ export default function ProductCollections() {
       filterable: false,
       renderCell: (params) => {
         const a = params?.row?.attributes || {};
-        const chips = [
-          ['Material', labelMaterial(a.material)],
-          ['Legs', labelLegs(a.legs)],
-          ['Origin', labelOrigin(a.origin)],
-        ].filter(([, value]) => !!value);
-
+        const chips = Object.entries(a).filter(([, v]) => !!v);
         return (
           <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
-            {chips.map(([label, value]) => (
+            {chips.map(([key, value]) => (
               <Box
-                key={label}
+                key={key}
                 component="span"
                 sx={{
                   px: 1.5,
@@ -268,19 +262,19 @@ export default function ProductCollections() {
                   lineHeight: '18px',
                 }}
               >
-                {label}: {value}
+                {key}: {value}
               </Box>
             ))}
           </Box>
         );
       }
     },
-    { field: 'status', headerName: 'Status', width: 120 }
+    { field: 'status', headerName: 'Status', flex: 1, minWidth: 160 }
   ];
 
   return (
     <Box sx={{ height: 'calc(100vh - 64px - 64px)', display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <SectionContainer>
+     <SectionContainer sx={{ px: 0, maxWidth: '100%!important', width: '100%' }}>
       <Box display="flex" alignItems="center" justifyContent="space-between" mb={2} flexWrap="wrap" gap={2}>
         <Typography variant="h6">Product Collection</Typography>
         <Box display="flex" alignItems="center" gap={2}>
@@ -312,10 +306,28 @@ export default function ProductCollections() {
             columns: { columnVisibilityModel: { id: false, _Id: false } },
           }}
           getRowHeight={() => 'auto'}
+          columnBuffer={0}
           sx={{
-            '& .MuiDataGrid-cell': { display: 'flex', alignItems: 'center' },
-            '& .MuiDataGrid-columnHeader': { display: 'flex', alignItems: 'center' },
-            '& .MuiDataGrid-virtualScroller': { overflowX: 'hidden' },
+            width: '100%',
+            '& .MuiDataGrid-cell': {
+              display: 'flex',
+              alignItems: 'center',
+              whiteSpace: 'normal',
+              wordBreak: 'break-word',
+              minHeight: '100%',
+            },
+            '& .MuiDataGrid-columnHeader': {
+              display: 'flex',
+              alignItems: 'center',
+              whiteSpace: 'normal',
+              wordBreak: 'break-word',
+            },
+            '& .MuiDataGrid-virtualScroller': {
+              overflowX: 'auto',
+            },
+            '& .MuiDataGrid-main': {
+              minWidth: '1000px',
+            },
           }}
         />
       </Box>