Easily Create Searchable HTML Tables with JavaScript

In today's video I'll be showing you how to create a HTML table which can be searched using it's heading columns. This is easily done with a small amount of JavaScript code 🙂
Source code:
codepen.io/dco...
🏫 My Udemy Courses - www.udemy.com/...
🎨 Download my VS Code theme - marketplace.vi...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #html #javascript

[@yitzchaksviridyuk932]

Hey, I'd love a video on server side searching. 😄

[@stacherski]

Brilliant! I love vanilla JS being used, this gives you so much more power and independence! Care to share ideas on how to deal with tables that load extra data on scroll?

[@user-mma173]

I like your tables tutorials. I think you should put them together in a simple library. Personally, I would choose it over the well-known ones. Thanks'

[@salamina_]

Thoroughly enjoy all you videos Dom. Thank you for all that you do!

[@diegognoatto8706]

this is beautiful, i never worked with tables in js, just had too, this is awesome little tip, got one sub one thumbs up for that.

[@ColinMarksPlus]

Nice. It would be worth looking at a product like DataTables, or the editable Editor/CloudTables, as it gives far more functionality on top of the table searching!

[@retroprime7244]

thank you 👍

[@syaifulbahri1525]

Thanks for the explanation.
My question is, how to hide the entire table content while nothing to the input box?
The expectation result is to keep the page clean when the input box is empty, until beginning to type something in the box.

[@2theOmega]

I probably won't get a response to this, but I just used this wonderful Table coding for a site I'm creating. I took it a step further, by making the text in the table clickable to the point that it automatically populates in the search inputs. However, in doing this, the table doesn't reload like it does when you type it in. Is there any way to fix that? I'll be using this for a pretty large database.

[@lorimills5456]

This is great! I have a question. I need to wrap the text of one of my column headers but cannot figure out how to do this within the code provided. How would you recommend doing this?

[@bssgiridhar]

Please make a video of server side

[@peshotod]

Hey Dom.Great tutorial as always.But thereis one small tweak.When i create additional rows in the existing columns js search works with them.But when I create additional column and then additional rows in this column js search does not work for the newly created rows.I will try to figure out what's going on with js in this case though useful hint will be greatly appreciated.

[@rossrivalbendillo5582]

Can you add a search button with dropdown.
What I am trying to create an online library.
The search button dropdown list will be genre. So that the search will only push table rows with the said genre

[@RianY2K]

finally, I can make datatable with jquery free, thank you for tutorial

[@streamx2]

could you do server side and use mongodb please?

[@talhasupport3670]

Great sir,
Can you explain that what is difference between "DOMContentLoaded" and "load" event in javascript

[@alieytamang8868]

Love from Nepal ❤🇳🇵

[@dcode-software]

Love from AUS

[@m-saaif]

Thanks… In Safari for iPhone there is a problem. If I search for a name, every non match rows will reserve its places but not shown. So if the name is 1000 row down I have to scroll down until I find it. Other rows will be completely white. In chrome for macOS it is OK.

[@DGronki]

I think instead Array.from better to use spread operator so [...document.querySelectorAll('....')]

[@NotBeHaris]

Awesome sir.

[@manmathan0762]

is that possible can we able to set the source data as CSV and search the data

[@guccireset]

I'm getting an error code saying "TypeError: undefined is not an object (evaluating 'tableCell.closest')"
(line 14 btw)
any reason you can think of as to why?

[@romanryaboshtan9270]

It's a cool video, i like this

[@lappdev5071]

Great video!!

[@dcode-software]

Thanks, glad it helped you!

[@beinyourguard]

pretty nice!

[@bssgiridhar]

Searchable table

[@lalafah]

how to hyperlink those items?

[@vedprakash-zz6hb]

If I type ss in occupation and , Da in name,
Then Names without Da are shown. It's not working properly, as multiple filters gives weird results.
It should allow multiple filters .

[@dcode-software]

Good point, it probably should handle multiple filters. In that case, it would need to be a much more structured solution

[@ryan-heath]

An idea would to have one filter input field. Each word typed in the input field should be found in any column than the row should stay visible.

[@yuppp1473]

any idea on how ro achieve that?