ajuste no cabeçalho

This commit is contained in:
Felipe Batista 2025-10-08 01:26:38 -03:00
parent 3015974658
commit 03f860dc30
1 changed files with 53 additions and 28 deletions

View File

@ -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>
); );
} }