Tabelas dinâmicas ReactJS + Material UI

index.tsx

import React from 'react';
import {
  Card, CardHeader, CardContent, Grid, Table, TableHead, TableBody, TableRow,
  TableCell, Accordion, AccordionSummary, AccordionDetails, Typography, Box
} from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

type TabelaData = {
  headers: string[];
  rows: string[][];
};

const CustomTable: React.FC<{ data: TabelaData }> = ({ data }) => (
  <Box sx={{ overflowX: 'auto' }}>
    <Table sx={{ minWidth: 300 }}>
      <TableHead>
        <TableRow>
          {data.headers.map((header, i) => (
            <TableCell key={i} sx={{ fontWeight: 'bold', backgroundColor: '#f5f5f5' }}>
              {header}
            </TableCell>
          ))}
        </TableRow>
      </TableHead>
      <TableBody>
        {data.rows.map((row, rowIndex) => (
          <TableRow key={rowIndex}>
            {row.map((cell, i) => (
              <TableCell key={i}>{cell}</TableCell>
            ))}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </Box>
);

// Dados de exemplo
const tabela1: TabelaData = {
  headers: ['Ano', 'Receita', 'Lucro'],
  rows: [['2023', 'R$ 100.000', 'R$ 20.000'], ['2024', 'R$ 150.000', 'R$ 30.000']],
};

const tabela2: TabelaData = {
  headers: ['Setor', 'Ativos', 'Passivos'],
  rows: [['Financeiro', 'R$ 200.000', 'R$ 50.000'], ['Operações', 'R$ 300.000', 'R$ 100.000']],
};

const outrasTabelas: TabelaData[] = [
  {
    headers: ['Produto', 'Quantidade', 'Preço'],
    rows: [['Notebook', '50', 'R$ 3.000'], ['Mouse', '200', 'R$ 50']],
  },
  {
    headers: ['Departamento', 'Funcionários', 'Desempenho'],
    rows: [['TI', '12', 'Ótimo'], ['RH', '5', 'Bom']],
  },
];

const RelatorioPage: React.FC = () => (
  <Box sx={{ p: 2 }}>
    <Typography variant="h4" gutterBottom>
      Relatório Geral
    </Typography>

    <Grid container spacing={2}>
      <Grid item xs={12} md={6}>
        <Card elevation={3}>
          <CardHeader title="Resumo Financeiro" />
          <CardContent>
            <CustomTable data={tabela1} />
          </CardContent>
        </Card>
      </Grid>
      <Grid item xs={12} md={6}>
        <Card elevation={3}>
          <CardHeader title="Estatísticas Operacionais" />
          <CardContent>
            <CustomTable data={tabela2} />
          </CardContent>
        </Card>
      </Grid>
    </Grid>

    <Box mt={4}>
      {outrasTabelas.map((tabela, idx) => (
        <Accordion key={idx}>
          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
            <Typography>Tabela {idx + 3}</Typography>
          </AccordionSummary>
          <AccordionDetails>
            <CustomTable data={tabela} />
          </AccordionDetails>
        </Accordion>
      ))}
    </Box>
  </Box>
);

export default RelatorioPage;