rodolfo_ruiz/fendi-react-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: fix the widh of the grid

Browse Source
This commit is contained in:
Rodolfo Ruiz
2025-09-04 20:35:32 -06:00
parent f51382164d
commit 2cb7264450
1 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/private/categories/Categories.jsx
View File

@@ -143,36 +143,44 @@ export default function Categories() {
</Box> </Box>
), ),
}, },
// Visible (renamed) fields { field: 'tagName', headerName: 'Name', flex: 1.2, minWidth: 180 },
{ field: 'tagName', headerName: 'Name', width: 220 }, { field: 'slug', headerName: 'Slug', flex: 1.0, minWidth: 160 },
{ field: 'slug', headerName: 'Slug', width: 200 }, { field: 'icon', headerName: 'Icon', flex: 0.7, minWidth: 120 },
{ field: 'icon', headerName: 'Icon', width: 160 },
{ {
field: 'createdAt', field: 'createdAt',
headerName: 'Created Date', headerName: 'Created Date',
width: 200, flex: 1.0,
minWidth: 180,
valueFormatter: (p) => { valueFormatter: (p) => {
const v = p?.value; const v = p?.value;
return v ? new Date(v).toLocaleString() : '—'; return v ? new Date(v).toLocaleString() : '—';
}, },
}, },
{ field: 'createdBy', headerName: 'Created By', width: 180 }, { field: 'createdBy', headerName: 'Created By', flex: 0.9, minWidth: 160 },
{ {
field: 'updatedAt', field: 'updatedAt',
headerName: 'Updated Date', headerName: 'Updated Date',
width: 200, flex: 1.0,
minWidth: 180,
valueFormatter: (p) => { valueFormatter: (p) => {
const v = p?.value; const v = p?.value;
return v ? new Date(v).toLocaleString() : '—'; return v ? new Date(v).toLocaleString() : '—';
}, },
}, },
{ field: 'updatedBy', headerName: 'Updated By', width: 180 }, { field: 'updatedBy', headerName: 'Updated By', flex: 0.9, minWidth: 160 },
{ field: 'status', headerName: 'Status', width: 140 }, { field: 'status', headerName: 'Status', flex: 0.7, minWidth: 120 },
]; ];
return ( return (
<Box> <Box
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2, gap: 2, flexWrap: 'wrap' }}> sx={{
height: 'calc(100vh - 64px - 64px)',
display: 'flex',
flexDirection: 'column',
gap: 2,
}}
>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
<Typography variant="h6">Categories</Typography> <Typography variant="h6">Categories</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
@@ -193,21 +201,23 @@ export default function Categories() {
</Box> </Box>
</Box> </Box>
<Box sx={{ width: '100%', overflowX: 'auto' }}> <Box sx={{ flex: 1, minHeight: 0 }}>
<DataGrid <DataGrid
rows={filteredRows} rows={filteredRows}
columns={columns} columns={columns}
initialState={{ pagination: { paginationModel: { pageSize: 10 } } }} initialState={{ pagination: { paginationModel: { pageSize: 10 } } }}
pageSizeOptions={[10]} pageSizeOptions={[10]}
autoHeight
disableColumnMenu disableColumnMenu
getRowId={(r) => r?._id || r?.id} getRowId={(r) => r?._id || r?.id}
sx={{ sx={{
minWidth: 1400, height: '100%',
'& .MuiDataGrid-cell, & .MuiDataGrid-columnHeader': { '& .MuiDataGrid-cell, & .MuiDataGrid-columnHeader': {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
}, },
'& .MuiDataGrid-filler': {
display: 'none',
},
}} }}
slots={{ slots={{
noRowsOverlay: () => ( noRowsOverlay: () => (