Project Twenty Four: CRUD

No matter what service you're building you'll end up needing to be able to create, read (or list), update and delete an entry. And as you could already guess - that's what CRUD(L) stands for.

Static websites are lightweight and easy to implement and host, but most of services require a certain amount of dynamic data: user profiles, e-commerce products, categories, messages and even blog posts.

And regardless of the type of the entries both API and control panels look very alike so it would be beneficial for you to have some generic bits and pieces ready for when you'd need to build a dashboard for a service. How about starting with a data table?

Data Table: requirements and recipe

As a user I want to be able to see and filter all existing entries, so that I could easily find and edit or delete an entry

I'm sure you are already tired of me saying the same thing in every post up until this point, but there are plenty of different ways to implement a data table. It can look nothing like a table even, take Dev.to posts dashboard for instance:

Or it can have explicit columns and much more features like this:

And as usual, it is up to you how you'd like to style your data table and what features it has as long as some requirements are met:

Requirements

1. Table should have sufficient contrast and keyboard navigation
2. Every row should be approximately the same height
3. Every column should have the same width
4. User should be prompted to confirm deletion upon clicking delete button

Recipe

1. Start with one static row markup
2. Add control elements: column titles, buttons, etc
3. Ensure that component is accessible
4. Write a function that renders a row based on entry
5. Write a function that renders a table based on array of entries
6. Implement delete button logic
7. Add confirmation logic before deleting the entry
8. Add more data
9. Proudly gaze upon your creation

Hints

It's easier to keep elements accessible when using actual <table> markup as opposed to CSS grid layout.

You can use built-in confirm function to implement a simple confirmation window.

Keep the style simple and maybe even define styles in variables so that you could easily adjust the theme for future projects.

Hard Mode: Generic CRUD API

With such an awesome table one definitely needs to have backend ready - surely it would be very popular :-) And you can implement a generic CRUD API for an entry. Problem is depending on the data it might be stored in different databases so you might want to consider that and implement easily replaceable repositories for example.

Maybe you could even write a template for creating many different CRUDs?

Share your creations and feedback and see you tomorrow!

Liked the idea a lot and would love to have it all year long?