Custom checkbox filter with images

Hello!

I started making a website, it’s hosted locally so I cannot provide any link but I’ll explain as much as I can.
I have a table displaying my game list, several columns:
Platform: PC, PS4…
Thumbnail: Image URL from Steam or local upload
Genre: Horror, Adventure > Using a picture, inserted directly in the cell.
Title > Text
My rating (stars) > Using a picture, inserted directly in the cell.
Status: Completed, In progress > Using a picture, directly in the cell.
My review: Text
Coup de coeur: > Using a picture, directly in the cell.

I’ve enable sorting for Titles and some more. But I would like to add a custom filter system with checkboxes.

At the top of the table, would be a display of:
Pic of Genre 1 ◘ Pic Genre 2 ◘ Pic of Genre 3 ◘ Pic of Genre 4 ◘

Pic of status 1 ◘ Pic of status 2 ◘ Pic of status ◘

Pic of rating 1 ◘ Pic of rating 2 ◘ Pic of rating 3 ◘

Coup de coeur ◘ (displays only rows with the heart image in last column)

PC ◘ PS2 ◘ PS3 ◘

Instead of the text, imagine the picture with a checkbox near it. If checked, only the rows with the genre “Horror” will be displayed. Basically a checkbox filter but with images instead of text.

I have absolutely ZERO knowledge in Javascript sadly, and I learn CSS on the spot to be able to do what I’m aiming for.

I’ve googled all day and found someone who made something similar on their website, I can show it to have an idea of what I’m aiming for: http://bbs.freshgacha.xyz/

I’ve browsed also this: https://www.datatables.net/ and heard of the row filtering here https://tablepress.org/extensions/row-filter/ but I’m not sure how to apply this to pictures.

The idea is to show the whole table when going on the page, and letting visitors filter to see what they want.

Thank you very much for the support!

Drayuu