ajuste no cabeçalho
This commit is contained in:
parent
3015974658
commit
03f860dc30
|
|
@ -495,10 +495,17 @@ export default function Teste() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Table>
|
<div className="max-h-[400px] overflow-y-auto border rounded-md relative">
|
||||||
<TableHeader>
|
{/* Header fixo separado */}
|
||||||
<TableRow>
|
<div
|
||||||
<TableHead>
|
className="sticky top-0 z-30 border-b shadow-sm"
|
||||||
|
style={{ backgroundColor: 'white', opacity: 1 }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="flex items-center p-4 font-semibold"
|
||||||
|
style={{ backgroundColor: 'white', opacity: 1 }}
|
||||||
|
>
|
||||||
|
<div className="flex-1 min-w-[200px]">
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
onClick={() => handleSort('descricao')}
|
onClick={() => handleSort('descricao')}
|
||||||
|
|
@ -507,13 +514,13 @@ export default function Teste() {
|
||||||
Descrição
|
Descrição
|
||||||
{getSortIcon('descricao')}
|
{getSortIcon('descricao')}
|
||||||
</Button>
|
</Button>
|
||||||
</TableHead>
|
</div>
|
||||||
{mesesDisponiveis.map((mes) => (
|
{mesesDisponiveis.map((mes) => (
|
||||||
<TableHead key={mes} className="text-right">
|
<div key={mes} className="w-24 text-right px-2">
|
||||||
{mes}
|
{mes}
|
||||||
</TableHead>
|
</div>
|
||||||
))}
|
))}
|
||||||
<TableHead className="text-right">
|
<div className="w-24 text-right px-2">
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
onClick={() => handleSort('valor')}
|
onClick={() => handleSort('valor')}
|
||||||
|
|
@ -522,23 +529,40 @@ export default function Teste() {
|
||||||
Total
|
Total
|
||||||
{getSortIcon('valor')}
|
{getSortIcon('valor')}
|
||||||
</Button>
|
</Button>
|
||||||
</TableHead>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Table>
|
||||||
|
<TableHeader className="hidden">
|
||||||
|
<TableRow>
|
||||||
|
<TableHead></TableHead>
|
||||||
|
{mesesDisponiveis.map((mes) => (
|
||||||
|
<TableHead key={mes}></TableHead>
|
||||||
|
))}
|
||||||
|
<TableHead></TableHead>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{hierarchicalData.map((row, index) => (
|
{hierarchicalData.map((row, index) => (
|
||||||
<TableRow key={index} className={getRowStyle(row)}>
|
<TableRow key={index} className={getRowStyle(row)}>
|
||||||
<TableCell style={getIndentStyle(row.level)}>
|
<TableCell
|
||||||
|
className="flex-1 min-w-[200px]"
|
||||||
|
style={getIndentStyle(row.level)}
|
||||||
|
>
|
||||||
{renderCellContent(row)}
|
{renderCellContent(row)}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
{mesesDisponiveis.map((mes) => (
|
{mesesDisponiveis.map((mes) => (
|
||||||
<TableCell key={mes} className="text-right font-medium">
|
<TableCell
|
||||||
|
key={mes}
|
||||||
|
className="w-24 text-right font-medium px-2"
|
||||||
|
>
|
||||||
{row.valoresPorMes && row.valoresPorMes[mes]
|
{row.valoresPorMes && row.valoresPorMes[mes]
|
||||||
? formatCurrency(row.valoresPorMes[mes])
|
? formatCurrency(row.valoresPorMes[mes])
|
||||||
: '-'}
|
: '-'}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
))}
|
))}
|
||||||
<TableCell className="text-right font-medium">
|
<TableCell className="w-24 text-right font-medium px-2">
|
||||||
{formatCurrency(row.total!)}
|
{formatCurrency(row.total!)}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
|
|
@ -546,5 +570,6 @@ export default function Teste() {
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue