Utilizing the <Box> component from MUI core and the <DataGrid> component from MUIX, along with some other components, I have created a data grid that has the following appearance:
https://i.sstatic.net/Gc8sP.png
When the number of rows exceeds what can be displayed in the grid body, a vertical scrollbar should appear. However, this works as expected in Google Chrome (Beta, 102.0.5005.61) but fails to show up in Safari (15.4 (17613.1.17.1.13)). You can watch this video to see how attempting to scroll behaves like an unscrollable list in Safari even though there is overflow visible. The scrollbar only briefly appears when changing viewport height or refreshing until it reverts back to being unscrollable.
Is there a solution to correct this issue? It seems like there may be a minor error causing Safari to behave strictly while Chrome overlooks it.
I acknowledge that there may be details I have overlooked. Feel free to ask any questions for further clarification. In addition, two key points to note are:
- The sorting and slicing of the list are handled server-side. Initially, the component renders empty columns, rows, null event listeners, etc., before fetching data upon loading.
- The structure of the app components is outlined below:
const flexParent = { display: 'flex', flexDirection: 'column' };
const flexChild = { flexGrow: 1 };
<Box sx={{ height: '100vh', ...flexParent }}>
<Container sx={{ ...flexChild, ...flexParent }}>
<Box sx={{ maxHeight: '100%', ...flexChild, ...flexParent }}>
<Box sx={{ ...flexChild, ...flexParent }}>
<Box sx={{ ...flexChild }}>
<Box sx={{ height: '100%', width: '100%' }}>
<DataGrid
loading={loading}
// data: view
columns={columns}
rows={rows}
// pagination: sorting
sortingMode='server'
sortModel={sortModel}
onSortModelChange={changeOrder}
// pagination: slicing
paginationMode='server'
rowCount={totalCount}
rowsPerPageOptions={limitOptions}
pageSize={limit}
page={pageIndex}
onPageChange={changePageIndex}
onPageSizeChange={changeLimit}
// styles
disableColumnSelector
disableDensitySelector
hideFooterSelectedRowCount
showCellRightBorder
sx={{
'.MuiDataGrid-cell, .MuiDataGrid-columnHeader': {
fontFamily: 'monospace',
},
'.MuiDataGrid-columnHeader:last-child .MuiDataGrid-columnSeparator': {
display: 'none',
},
}}
/>
</Box>
</Box>
</Box>
</Box>
</Container>
</Box>