SD Worx Front-End Challenge

Your challenge this evening is to prepare a website that will present a datatable using the following API.

Refrain from using any visual frameworks, like bootstrap, Angular material, ngx-ui, or others, while building the webpage

You can open the Figma sample to get as close a possible to the premade designs. Links can be found in their respective sections below.

The pages must both support desktop and mobile versions

Getting started

Create or log into your existing GitHub account.
- If your GitHub account uses a nickname, make sure to tell us who you are!
Fork this repo; That would be this button:
If you have git:
- Clone your fork to your local pc
- Once you are finished:
  - git add -A
  - git commit -m "SD Worx Challenge! 🚀"
  - git push origin
...Or if you don't have git, you can use GitHub's built-in uploader on your fork's page
Create a Pull Request of your fork to the main repository
Fill in the Pull Request template
Label your PR with the correct country and category. (e.g. Belgium and Professional)
Submit your PR

The table should have internal vertical scrolling for rows that are not visible in the view.
The Delete action - (trash can icon) should show a confirmation window and should remove the row from the list after the user confirms the operation.
The desktop view is >= 576px
Dashboard should include columns for [ID], [Avatar], [First name], [Date of birth], [City], [Country], [Actions(Delete)].
Mobile view is < 576px
Mobile view should contain [Name], [Date of birth], [City], [Country], [Actions(Delete)] data in rows.

Figma link here

The table should have internal vertical scrolling for rows that are not visible in the view.
The table should have pagination with page size of 10 rows.
Data in the table should have the ability to sort by column.
The Edit action - (pen icon) should add the ability to edit values inline as on the project (input=text). The <ok> icon should save the changes, the <X> icon should cancel the operation.
The Delete action - (trash can icon) should show a confirmation window and should remove the row from the list after the user confirms the operation.
The desktop view is >= 576px and the dashboard should include columns for [ID], [Avatar], [First name], [Date of birth], [City], [Country], [Actions(Edit, Delete)].
Mobile view is < 576px, and should contain [Name], [Date of birth], [City], [Country], [Actions(Delete)] data in rows.
Actions should be in pop-menu.

Figma link here

We will judge according to the following criteria:

You don't have much time, first try to provide functionality, and then if you have time refine the designs.

Remember to push all changes to your fork on GitHub before the time expires!

If you have any problems or questions, please do not hesitate to ask our jurors.

Good luck, and may the best developer win!