GitLab

Tarefa relacionada

https://dev.azure.com/ages-vincula/Vincula/_workitems/edit/22/

O que foi adicionado?

• Componente de tabela genérica
• Dependências Material UI
• Pasta types
• Linha "type": "module" no package.json. Sem ela, o comando npm run test estava quebrando

Revisar

• A funcionalidade de ordenação só foi implementada quando a paginação é client-side. Se for ter ordenação quando é server-side, o endpoint deve receber os parâmetros necessários. Vamos ter suporte pra isso no back?

• As opções de rowActions vão ser sempre "ver detalhes", "editar" e "excluir"?

• Não foi adicionado no figma o design pra quando a tabela está vazia ou em estado de loading. Por enquanto deixei só um texto simples quando está vazia e um spinner para o loading.

• A tabela do MUI tem suporte para a "variant"? Não encontrei na documentação

Como testar

Substitua o conteúdo de page.tsx pelo mock a seguir:

'use client'

import React, { useState } from 'react';
import { DeleteOutline, Edit } from '@mui/icons-material';
import GenericTable from "../components/GenericTable/GenericTable";
import { Column } from "../types/Table";
import styles from './page.module.css';

const data = [
  { id: 1, case: "Caso 001", responsible: "João Silva", status: "Aberto", openedAt: "2025-08-20" },
  { id: 2, case: "Caso 002", responsible: "Maria Souza", status: "Em andamento", openedAt: "2025-08-21" },
  { id: 3, case: "Caso 003", responsible: "Pedro Santos", status: "Concluído", openedAt: "2025-08-22" },
  { id: 4, case: "Caso 004", responsible: "Ana Oliveira", status: "Aberto", openedAt: "2025-08-23" },
  { id: 5, case: "Caso 005", responsible: "Carlos Pereira", status: "Em andamento", openedAt: "2025-08-24" },
  { id: 6, case: "Caso 006", responsible: "Fernanda Lima", status: "Concluído", openedAt: "2025-08-25" },
  { id: 7, case: "Caso 007", responsible: "Ricardo Alves", status: "Aberto", openedAt: "2025-08-26" },
  { id: 8, case: "Caso 008", responsible: "Juliana Costa", status: "Em andamento", openedAt: "2025-08-27" },
  { id: 9, case: "Caso 009", responsible: "Marcos Rocha", status: "Concluído", openedAt: "2025-08-28" },
  { id: 10, case: "Caso 010", responsible: "Patrícia Martins", status: "Aberto", openedAt: "2025-08-29" },
];

const columns: Column<typeof data[0]>[] = [
  { key: "case", label: "Caso", align: "left" },
  { key: "responsible", label: "Responsável", align: "left" },
  { key: "status", label: "Situação", align: "left" },
  { key: "openedAt", label: "Data de Abertura", align: "left" },
];


const rowActions = [
  // {
  //   label: "Editar",
  //   icon: <Edit />,
  //   onClick: (row: unknown) => console.log("Editar", row),
  // },
  // {
  //   label: "Excluir",
  //   icon: <DeleteOutline />,
  //   onClick: (row: unknown) => console.log("Excluir", row),
  // },
  {
    label: "Ver detalhes",
    onClick: (row: unknown) => console.log("Ver detalhes", row),
  },
];

export default function Home() {
  // const [currentPage, setCurrentPage] = useState(0);
  // const [pageSize, setPageSize] = useState(5);

  // // mock paginacao backend
  // // const paginatedData = data.slice(
  // //   currentPage * pageSize,
  // //   currentPage * pageSize + pageSize
  // // );

  // // const pagination = {
  // //   currentPage,
  // //   pageSize,
  // //   totalItems: data.length,
  // //   onPageChange: (page: number, newPageSize: number) => {
  // //     setCurrentPage(page);
  // //     setPageSize(newPageSize);
  // //   },
  // // };

  return (
    <div className={styles.page}>
      <main className={styles.main}>
        <GenericTable
          columns={columns}
          data={data}
          loading={false}
          selectable
          rowActions={rowActions}
        // pagination={pagination} // se passar, server side, se não, client-side
        />
      </main>
    </div>
  );
}

Screenshots