fix: adicionado o footer table
This commit is contained in:
Alessandro Gonçaalves
parent
4ec19b4f8f
commit
31c7c1f3ca
|
|
@ -842,7 +842,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={{ height: "calc(100% - 2rem)", width: "100%" }}>
|
<div style={{ height: "calc(100% - 2rem)", width: "100%", position: "relative" }}>
|
||||||
<DataGrid
|
<DataGrid
|
||||||
key={`datagrid-${sortedAndFilteredData.length}-${Object.keys(columnFilters).length}`}
|
key={`datagrid-${sortedAndFilteredData.length}-${Object.keys(columnFilters).length}`}
|
||||||
rows={sortedAndFilteredData}
|
rows={sortedAndFilteredData}
|
||||||
|
|
@ -853,6 +853,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
||||||
slots={{ toolbar: GridToolbar }}
|
slots={{ toolbar: GridToolbar }}
|
||||||
disableColumnMenu={true}
|
disableColumnMenu={true}
|
||||||
disableColumnSorting={true}
|
disableColumnSorting={true}
|
||||||
|
hideFooter={true}
|
||||||
getRowId={(row) => row.id || `row-${row.recnum || Math.random()}`}
|
getRowId={(row) => row.id || `row-${row.recnum || Math.random()}`}
|
||||||
initialState={{
|
initialState={{
|
||||||
sorting: { sortModel: [{ field: "data_vencimento", sort: "desc" }] },
|
sorting: { sortModel: [{ field: "data_vencimento", sort: "desc" }] },
|
||||||
|
|
@ -916,6 +917,16 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
||||||
"& .MuiDataGrid-menu": {
|
"& .MuiDataGrid-menu": {
|
||||||
display: "none !important",
|
display: "none !important",
|
||||||
},
|
},
|
||||||
|
// Ocultar footer de paginação
|
||||||
|
"& .MuiDataGrid-footerContainer": {
|
||||||
|
display: "none !important",
|
||||||
|
},
|
||||||
|
"& .MuiDataGrid-pagination": {
|
||||||
|
display: "none !important",
|
||||||
|
},
|
||||||
|
"& .MuiTablePagination-root": {
|
||||||
|
display: "none !important",
|
||||||
|
},
|
||||||
// Garantir que nosso botão customizado apareça
|
// Garantir que nosso botão customizado apareça
|
||||||
"& .MuiDataGrid-columnHeaderTitleContainer": {
|
"& .MuiDataGrid-columnHeaderTitleContainer": {
|
||||||
width: "100%",
|
width: "100%",
|
||||||
|
|
@ -923,12 +934,65 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
},
|
},
|
||||||
"& .MuiDataGrid-footerContainer": {
|
|
||||||
backgroundColor: "#f8fafc",
|
|
||||||
borderTop: "1px solid #e5e7eb",
|
|
||||||
},
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{/* Footer com Totalizadores - Posicionado no lugar do footer nativo */}
|
||||||
|
{sortedAndFilteredData.length > 0 && (
|
||||||
|
<div
|
||||||
|
className="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-2"
|
||||||
|
style={{
|
||||||
|
height: "48px",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
fontSize: "0.75rem",
|
||||||
|
zIndex: 1
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex items-center w-full">
|
||||||
|
{/* Espaçamento para alinhar com as colunas da tabela */}
|
||||||
|
<div className="w-[150px]"></div> {/* Dt Venc */}
|
||||||
|
<div className="w-[130px]"></div> {/* Dt Caixa */}
|
||||||
|
<div className="w-[100px]"></div> {/* Entidade */}
|
||||||
|
<div className="w-[140px]"></div> {/* Cod.Fornec */}
|
||||||
|
<div className="flex-1"></div> {/* Fornecedor */}
|
||||||
|
<div className="w-[130px]"></div> {/* C Custo */}
|
||||||
|
<div className="w-[150px]"></div> {/* Cod.Conta */}
|
||||||
|
<div className="flex-1"></div> {/* Conta */}
|
||||||
|
|
||||||
|
{/* Totalizadores das colunas de valor */}
|
||||||
|
<div className={`w-[140px] text-right font-semibold ${columnTotals.valorRealizado < 0 ? 'text-red-600 font-semibold' : 'text-gray-800'}`}>
|
||||||
|
{new Intl.NumberFormat("pt-BR", {
|
||||||
|
style: "currency",
|
||||||
|
currency: "BRL",
|
||||||
|
}).format(columnTotals.valorRealizado)}
|
||||||
|
</div>
|
||||||
|
<div className={`w-[130px] text-right font-semibold ${columnTotals.valorPrevisto < 0 ? 'text-red-600 font-semibold' : 'text-gray-800'}`}>
|
||||||
|
{new Intl.NumberFormat("pt-BR", {
|
||||||
|
style: "currency",
|
||||||
|
currency: "BRL",
|
||||||
|
}).format(columnTotals.valorPrevisto)}
|
||||||
|
</div>
|
||||||
|
<div className={`w-[140px] text-right font-semibold ${columnTotals.valorConfirmado < 0 ? 'text-red-600 font-semibold' : 'text-gray-800'}`}>
|
||||||
|
{new Intl.NumberFormat("pt-BR", {
|
||||||
|
style: "currency",
|
||||||
|
currency: "BRL",
|
||||||
|
}).format(columnTotals.valorConfirmado)}
|
||||||
|
</div>
|
||||||
|
<div className={`w-[130px] text-right font-semibold ${columnTotals.valorPago < 0 ? 'text-red-600 font-semibold' : 'text-gray-800'}`}>
|
||||||
|
{new Intl.NumberFormat("pt-BR", {
|
||||||
|
style: "currency",
|
||||||
|
currency: "BRL",
|
||||||
|
}).format(columnTotals.valorPago)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Espaçamento para o resto */}
|
||||||
|
<div className="flex-1"></div> {/* Historico */}
|
||||||
|
<div className="flex-1"></div> {/* Historico 2 */}
|
||||||
|
<div className="w-[80px]"></div> {/* Num.Lanc */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue