Set the title of a column when column is responsively collapsed

windemere

Hey everyone.

I've built a filtering system using a <select> element that sits in the <th> of any given column. It's all working beautifully, however when any column containing this <select> filter is collapsed down, the title of the column is interpreted as a string containing all of the <select> options, rather than the 'name' attribute of the <select> or even just the first <option> which would be preferable. I've tried adding a visuallyhidden label to the <th> in hopes it would pick that up as the column title but it seems to procure the title of the column through something akin to $('th').text() where it just pulls all the text within the <th>.

I've had a look through the documentation but can't find anything aside from column.title() which just overrides/removes my <select> altogether.

Any ideas on how I could explicitly define the name of the column so it doesn't use my whole <select> in one big messy string when the column is collapsed?

Thanks for your help.