fix: header da tabela analitica
This commit is contained in:
Alessandro Gonçaalves
parent
9f2a169742
commit
0c14945d36
|
|
@ -956,18 +956,43 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
sx={{
|
||||
overflowAnchor: 'none',
|
||||
"& .MuiDataGrid-root": {
|
||||
overflowX: "auto",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
},
|
||||
"& .MuiDataGrid-main": {
|
||||
overflowX: "auto",
|
||||
overflow: "visible",
|
||||
position: "relative",
|
||||
height: "100%",
|
||||
},
|
||||
"& .MuiDataGrid-columnHeaders": {
|
||||
position: "sticky",
|
||||
top: 0,
|
||||
backgroundColor: "#f9fafb",
|
||||
zIndex: 2,
|
||||
backgroundColor: "#f9fafb !important",
|
||||
zIndex: 100,
|
||||
borderBottom: "1px solid #e5e7eb",
|
||||
},
|
||||
"& .MuiDataGrid-columnHeader": {
|
||||
backgroundColor: "#f9fafb !important",
|
||||
},
|
||||
"& .MuiDataGrid-columnHeaderRow": {
|
||||
position: "sticky",
|
||||
top: 0,
|
||||
zIndex: 100,
|
||||
backgroundColor: "#f9fafb !important",
|
||||
},
|
||||
"& .MuiDataGrid-columnHeadersInner": {
|
||||
position: "sticky",
|
||||
top: 0,
|
||||
zIndex: 100,
|
||||
backgroundColor: "#f9fafb !important",
|
||||
},
|
||||
// Garantir que o container dos headers não seja cortado
|
||||
"& .MuiDataGrid-container--top": {
|
||||
overflow: "visible",
|
||||
position: "relative",
|
||||
zIndex: 100,
|
||||
},
|
||||
"& .MuiDataGrid-cell": {
|
||||
borderBottom: "1px solid #f0f0f0",
|
||||
fontSize: "0.875rem",
|
||||
|
|
@ -1005,6 +1030,12 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
borderBottom: "1px solid #e5e7eb",
|
||||
padding: "8px 16px",
|
||||
},
|
||||
"& .MuiDataGrid-container--bottom": {
|
||||
overflow: "hidden",
|
||||
},
|
||||
"& .MuiDataGrid-scrollbar": {
|
||||
display: "none",
|
||||
},
|
||||
// Ocultar todos os ícones nativos das colunas
|
||||
"& .MuiDataGrid-columnHeaderMenuContainer": {
|
||||
display: "none !important",
|
||||
|
|
|
|||
|
|
@ -2371,7 +2371,7 @@ export default function Teste() {
|
|||
Filtros
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent className="w-[400px] sm:w-[540px]">
|
||||
<SheetContent className="w-[400px] sm:w-[540px] flex flex-col">
|
||||
<SheetHeader>
|
||||
<SheetTitle>Filtros</SheetTitle>
|
||||
<SheetDescription>
|
||||
|
|
@ -2379,7 +2379,8 @@ export default function Teste() {
|
|||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="grid flex-1 auto-rows-min gap-3 py-2">
|
||||
<div className="flex-1 overflow-y-auto pr-2">
|
||||
<div className="grid gap-3 py-2">
|
||||
{/* Período */}
|
||||
<div className="grid gap-2">
|
||||
<Label>Período</Label>
|
||||
|
|
@ -2698,8 +2699,9 @@ export default function Teste() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SheetFooter className="flex gap-2">
|
||||
<SheetFooter className="flex gap-2 mt-4 border-t pt-4">
|
||||
<Button variant="outline" onClick={limparFiltros} className="flex-1">
|
||||
Limpar Filtros
|
||||
</Button>
|
||||
|
|
@ -2779,31 +2781,31 @@ export default function Teste() {
|
|||
|
||||
{/* Table Container */}
|
||||
{filtrosAplicados && !loading && !error && (
|
||||
<div className="bg-white rounded-xl shadow-lg border border-gray-200">
|
||||
{/* Scroll Container */}
|
||||
<div className="overflow-x-auto overflow-y-auto max-h-[500px]">
|
||||
<div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
|
||||
{/* Scroll Container - Apenas um container com scroll */}
|
||||
<div className="overflow-auto max-h-[500px]" style={{ scrollbarWidth: 'thin' }}>
|
||||
{/* Table */}
|
||||
<table className="w-full border-collapse">
|
||||
{/* Table Header */}
|
||||
<thead>
|
||||
<tr className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200">
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wide w-[300px] min-w-[300px]">
|
||||
<thead className="sticky top-0 z-10 bg-gradient-to-r from-blue-50 to-indigo-50">
|
||||
<tr className="border-b border-gray-200">
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wide w-[300px] min-w-[300px] bg-gradient-to-r from-blue-50 to-indigo-50">
|
||||
Descrição
|
||||
</th>
|
||||
{mesesDisponiveis.map((mes) => (
|
||||
<React.Fragment key={mes}>
|
||||
<th className="px-2 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px]">
|
||||
<th className="px-2 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px] bg-gradient-to-r from-blue-50 to-indigo-50">
|
||||
{mes}
|
||||
</th>
|
||||
<th className="px-2 py-2 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide w-[100px] min-w-[100px]">
|
||||
<th className="px-2 py-2 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide w-[100px] min-w-[100px] bg-gradient-to-r from-blue-50 to-indigo-50">
|
||||
%
|
||||
</th>
|
||||
</React.Fragment>
|
||||
))}
|
||||
<th className="px-4 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px]">
|
||||
<th className="px-4 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px] bg-gradient-to-r from-blue-50 to-indigo-50">
|
||||
Total
|
||||
</th>
|
||||
<th className="px-2 py-2 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide w-[100px] min-w-[100px]">
|
||||
<th className="px-2 py-2 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide w-[100px] min-w-[100px] bg-gradient-to-r from-blue-50 to-indigo-50">
|
||||
%
|
||||
</th>
|
||||
</tr>
|
||||
|
|
@ -2829,8 +2831,8 @@ export default function Teste() {
|
|||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Componente Analítico - Sempre renderizado para evitar violação das Rules of Hooks */}
|
||||
|
|
|
|||
Loading…
Reference in New Issue