Data Table with Filter, General Search & Column Dropdowns

@Davora was looking for a local website Search capability - https://www.talkgraphics.com/showthr...state-listings.

I offered a couple of suggestions that were fairly painless to implement in Xara directly but these had severe limitations.

I have been a long time advocate of the free datatable.js jQuery extension that allows 'proper' HTML table data to be manipulated.
Xara finally introduced SmartTables in v15 to address a severe lack in the presentation of tabular data.
While powerful, they fail to conform to HTML <table> definitions and so results in a HTML maelstrom of poor semantic content that does little for those relying on screenreaders. I consider Accessibility the right of all users and designers need to meet these basic needs.

Previously I created a large 1000+ row table of Xara-specific key presses and action, collated from a variety of source and personal experience.
I stopped updating the information at v16.1 but a lot is still valid. I did add Smart Duplicates to it for personal reference.

Up to now I had a general Search box for any wild-carded entry , covering all columns.
Today, i have extended the search to create automatic dropdown filters against each column.

Together with pagination and column ordering and repositioning, I consider this to be a powerful complement to any Xara design.

The last bit of the puzzle is the table is designed to retain your last Search, across pages, and, hopefully, across Variants.
This is done through your browser's Local Storage.

I put all the coding directly into the HTML <table> file so all you might need to do is use an IFRAME to access it.
This approach means you publish you Xara design and separately update the HTM file directly.
The column filters can be placed at the bottom o the table or even presented separately in a small cluster of dropdowns.

My example file is http://acorn.xara.hosting

Acorn

The convertcsv.htm file has the following structure:

Loader section - uploads all datatables.js assets; links to your currently used jQuery library [include Name UsesJQuery in your design]
Scripting section - the grunt work to add pagination (displays rows as defined in a small dropdown), general search (automatic wildcard), column ordering(asc/desc), column positioning (drag heading horizontally to new location), column filters (in header but could be in the footer or standalone) & session state
HTML Table: requires class of 'table'; <thead> & <tfoot> with <th> rows, data in <tr><td> arrangement