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:

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

[yitzchaksviridyuk]

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

[salamina_]

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

[diegognoatto]

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.

[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?

[mma]

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'

[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!

[lorimills]

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?

[syaifulbahri]

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.

[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.

[theOmega]

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.

[rossrivalbendillo]

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

[manmathan]

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?

[RianYK]

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

[streamx]

could you do server side and use mongodb please?

[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.

[talhasupport]

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

[DGronki]

I think instead Array.from better to use spread operator so

[vedprakash-zzhb]

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 .