As a L&D manager, I can sort the list of all the education benefits assigned to a GAPster

Historia de Usuario

Como Encargado del área de L&D,
puedo ordenar la tabla de lista de beneficios asignados por cualquier columna
de modo que pueda encontrar más fácilmente la información

Criterio de Aceptación

1. Se debe de mostrar la información de la lista con el orden y el filtrado según lo que retorna el API
2. La tabla no realiza ninguna acción al darle click o similar
3. En cada línea de la tabla hay un botón para editar y/o borrar un registro nuevo (no hace nada por ahora).
4. La paginación ni el filtrado de la información no forma parte de esta tarea
5. El ordenamiento de la información se debe de efectuar en el frontend pues el API no realiza ninguna operación como esta.
6. Se debe de poder ordenar por cualquier columna, en todos los casos se ordena alfabéticamente de forma ascendente(A-Z) al dar otro click se ordena descendentemente Z-A y si se da click de nuevo, se retorna al ordenamiento por defecto (por nombre, alfabéticamente).
7. Solamente se puede tener activo un ordenamiento a la vez.

Recursos:

• URL del API endpoint para la lista de beneficios otorgados: GET https://up0tbmtu7h.execute-api.us-east-1.amazonaws.com/Prod/api/1/education_benefits
• Guía de diseño: http://products-style-guide.s3-website-us-east-1.amazonaws.com/?path=/story/style-guide--forms
• Respuesta de ejemplo del API:

{
  "data":[
    {
        "id": "8d346337-1e14-4b23-8752-f4a2c6b03ee2",
        "status": 1,
        "type": 1,
        "employee_id": "828b925e-e96a-4b93-9128-c260950c7b2b",
        "updated_at": "2022-01-11T20:12:04.806222+00:00",
        "created_at": "2022-01-11T20:12:04.806222+00:00",
        "education_area_id": "d747e78c-ba1b-46a1-8d14-057394d94b5d",
        "currency": "USD",
        "employee": {
            "email": "rrodriguez@growthaccelerationpartners.com",
            "id": "828b925e-e96a-4b93-9128-c260950c7b2b",
            "full_name": "Rodrigo Rodriguez Ramirez"
        },
        "comments": "Comments updated",
        "description": "Updated description",
        "date": "2021-01-30",
        "budget": 300.0,
        "education_area": {
            "id": "d747e78c-ba1b-46a1-8d14-057394d94b5d",
            "name": "certifications"
        }
    }
  ]
}

Notas

• La imagen de debajo es para fines ilustrativos y para usar de guía. A nivel general, lo más importante es que el diseño de la tabla coincida con el diseño de la guía de diseño.