Sharing MWE for tags/labels in free version

callmestag

Hi all,

I've recently been trying to set up a table where you can display tags and search for them. AFAIK there is some support for that in the editor version, but not in the free one and I also didn't find any 3rd party plugin. So I cooked something up and thought I'd share it here.

Use case
I have a data set where each entry can have multiple tags/labels. The tags are available a comma sparated string, as a json list or as a JS array. In the table, I want to display them as colored tag-pills (that's how I usually encounter tags in UIs). They should be sorted alphabetically. While searching, I'd like to allow search for "must have all of these tags" as well as "must have at least one of these tags".

A few notes
My web development & JS-ecosystem skill are rather limited. That's why

• I had quite some help from AI with this
• the code is certainly not optimal and people with deeper knowledge of JS & datatables will likely find lots to improve
• providing the functionality in some form of npm package or similar is currently beyond my scope. I'd be very happy to assist if someone would like to collaborate on this, though!

Implementation
I implented a custom data type as well as a custom column control content for the searching behavior.

A bootstrap based MWE is available at https://gist.github.com/Bibo-Joshi/78bc5f513193649d6ac78ccec747c268

Feedback
I'm happy to hear your feedback about

• suggestions for improving the implementation
• suggestions for extending the implementation
• packaging this as proper package (either as collaboration or someone covering that completely)
• whether this helped you for something

Cheers!

allan

Very good! Thank you for sharing this with us.

Editor has an tags input type, but the ColumnControl doesn't yet have a built in filter for such data. Your control seems to fill that gap nicely .

Allan