joelson
/
vendaweb-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix: correção do scroll

This commit is contained in:
Alessandro Gonçaalves 2025-11-07 19:22:20 -03:00
parent 0c14945d36
commit bf567eabfa
1 changed files with 34 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/app/DRE/analitico.tsx
View File

@ -939,7 +939,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
</div> </div>
</div> </div>
<div style={{ height: "calc(100% - 2rem)", width: "100%", position: "relative" }}> <div style={{ height: "calc(100% - 2rem)", width: "100%", position: "relative", display: "flex", flexDirection: "column" }}>
<DataGridPremium <DataGridPremium
key={`datagrid-${sortedAndFilteredData.length}-${Object.keys(columnFilters).length}`} key={`datagrid-${sortedAndFilteredData.length}-${Object.keys(columnFilters).length}`}
rows={sortedAndFilteredData} rows={sortedAndFilteredData}
@ -955,19 +955,35 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
getRowId={(row: any) => row.id || `row-${row.recnum || Math.random()}`} getRowId={(row: any) => row.id || `row-${row.recnum || Math.random()}`}
sx={{ sx={{
overflowAnchor: 'none', overflowAnchor: 'none',
height: "100%",
display: "flex",
flexDirection: "column",
"& .MuiDataGrid-root": { "& .MuiDataGrid-root": {
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
height: "100%", height: "100%",
flex: 1,
overflow: "hidden",
}, },
"& .MuiDataGrid-main": { "& .MuiDataGrid-main": {
overflow: "visible", overflow: "hidden !important",
position: "relative", position: "relative",
height: "100%", height: "100%",
display: "flex",
flexDirection: "column",
flex: 1,
},
// Container dos headers - DEVE FICAR FIXO (não rola)
"& .MuiDataGrid-container--top": {
overflow: "hidden !important",
position: "relative",
zIndex: 100,
backgroundColor: "#f9fafb",
flexShrink: 0,
flexGrow: 0,
}, },
"& .MuiDataGrid-columnHeaders": { "& .MuiDataGrid-columnHeaders": {
position: "sticky", position: "relative !important",
top: 0,
backgroundColor: "#f9fafb !important", backgroundColor: "#f9fafb !important",
zIndex: 100, zIndex: 100,
borderBottom: "1px solid #e5e7eb", borderBottom: "1px solid #e5e7eb",
@ -976,31 +992,30 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
backgroundColor: "#f9fafb !important", backgroundColor: "#f9fafb !important",
}, },
"& .MuiDataGrid-columnHeaderRow": { "& .MuiDataGrid-columnHeaderRow": {
position: "sticky",
top: 0,
zIndex: 100,
backgroundColor: "#f9fafb !important", backgroundColor: "#f9fafb !important",
}, },
"& .MuiDataGrid-columnHeadersInner": { "& .MuiDataGrid-columnHeadersInner": {
position: "sticky",
top: 0,
zIndex: 100,
backgroundColor: "#f9fafb !important", backgroundColor: "#f9fafb !important",
}, },
// Garantir que o container dos headers não seja cortado
"& .MuiDataGrid-container--top": {
overflow: "visible",
position: "relative",
zIndex: 100,
},
"& .MuiDataGrid-cell": { "& .MuiDataGrid-cell": {
borderBottom: "1px solid #f0f0f0", borderBottom: "1px solid #f0f0f0",
fontSize: "0.875rem", fontSize: "0.875rem",
}, },
// Container do virtualScroller - deve ter scroll e ocupar espaço restante
"& .MuiDataGrid-container--bottom": {
flex: 1,
overflow: "hidden !important",
position: "relative",
minHeight: 0,
display: "flex",
flexDirection: "column",
},
// Apenas o virtualScroller deve ter scroll
"& .MuiDataGrid-virtualScroller": { "& .MuiDataGrid-virtualScroller": {
overflowY: "auto", overflowY: "auto !important",
overflowX: "auto", overflowX: "auto !important",
maxHeight: "calc(40vh - 120px)", height: "100% !important",
flex: 1,
overflowAnchor: 'none', overflowAnchor: 'none',
// Garantir que a barra de scroll seja visível // Garantir que a barra de scroll seja visível
scrollbarWidth: "thin", scrollbarWidth: "thin",
@ -1030,9 +1045,6 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
borderBottom: "1px solid #e5e7eb", borderBottom: "1px solid #e5e7eb",
padding: "8px 16px", padding: "8px 16px",
}, },
"& .MuiDataGrid-container--bottom": {
overflow: "hidden",
},
"& .MuiDataGrid-scrollbar": { "& .MuiDataGrid-scrollbar": {
display: "none", display: "none",
}, },