Brief

In this project, we're going to create a table of data.


You can use as many (or as few) tools, libraries, and frameworks as you'd like. If you're trying to learn something new, this would be a great way to push yourself.

Users should be able to:

  • Display 10 entries of data preloaded into app.js

  • Sort columns ascending or descending by ID, Name, Email Address, and Job Title

  • Click on the edit button and the row will show the content in an inline form. Changes can be confirmed by clicking on the check button.

  • Users can view the next page of data (if you’re not on the last page already) by clicking on the next arrow (bottom right).

  • Users can view the previous page of data (if you’re not on the first page) by clicking on the previous arrow (bottom right).

  • The user can jump to a specific page by changing the number in the pagination text field (bottom right). Data is updated as soon as the user clicks off the input (blur).

  • The total number of results is displayed (bottom left).


Need some support on this challenge?

Upgrade to the Solution Tier. You'll get a video explanation from Amy.

Getting Started

  1. To get started, download the zip file. This includes all the project assets you need to get started: Figma file, images, and a style guide.

  2. Take a look around. Look at the project's Figma file. This is a great way to see how the pieces and parts should look within the browser.

  3. Open the project's README.md file. It has additional information on how the project is structured.

  4. Customize your project/file architecture to your liking.

  5. Happy coding!

  6. Once you're finished, share your work using #adventofcss


Taking your Project to the Next Level

  • Use a framework or libraries like Tailwind CSS, Styled Components, or CSS Modules. Or, if you're feeling particularly adventurous, try writing everything in Vanilla CSS.

  • Provide the ability to add a new entry.


FAQs

  • Can I use libraries/frameworks on these projects? 

    • Of course! We're providing the solution in vanilla HTML and CSS, but you can use whatever tools and frameworks you'd like.

  • Oh no! I'm stuck! 

  • Can I use this project in my portfolio? 

    • Sure! But, be honest about the work that you did