How to create column headers that show a dropdown to dynamically select which columns to display

webkam

I'd like to have column headers that include both the column name, and a dropdown that would allow the user to select which columns they want to display. The means of selection would be a checkmark or a checkbox by each column name in the list. I've attached a screenshot of what I'm looking for, from another web app.

If they uncheck a column name from the dropdown, that column would disappear from the table, and vice-versa.

What I'm looking for involves several pieces:
1. Creating a column header that can display the dropdown list of columns to select from
2. The checkmarks persisting on the page, once selected
3. Re-rendering as soon as a column is selected or deselected from the list. (I believe this part will be simpler, once I get #1 and #2... but I could be wrong, so I'm interested in anything anyone can tell me about this as well)

I've been told that DataTables can do this, but I don't see anything obvious in the DataTables documentation. (Nor in general web searches, looking for this functionality in DataTables and other tools.) Does anyone have any ideas? I appreciate any and all ideas!

Thanks