Sharing my version of column highlighter
Sharing my version of column highlighter
MadBoyEvo
Posts: 121Questions: 39Answers: 0
Link to test case:
- Sources: https://github.com/EvotecIT/HTMLExtensions
- Demo: https://htmlextensions.evotec.xyz/
- Package for CDN usage: https://www.jsdelivr.com/package/npm/@evotecit/htmlextensions?path=dist
Description:
So I'm super fan of datatables.net since years and I've been using and creating it for PowerShell use by thousands of people. The project is called PSWriteHTML (https://github.com/EvotecIT/PSWriteHTML, https://www.powershellgallery.com/packages/PSWriteHTML/) and was downloaded over 1.9 million times, mostly thanks to DataTables. I do merge DataTables with charts, visjs network and do other fun stuff with it, but one thing I think could be useful for others is column highlighter. What it basically does it allows dynamic highlighting of content in responsive table, along the expanded "lists". The part that makes it great is that it takes away a lot of coding and just allows you to define rules and what sort of colors/styuling you should apply to it.
$('#myTable').DataTable({
responsive: { details: { type: 'inline' } },
columnHighlighter: {
rules: [
{
conditionsContainer: [
{
logic: 'AND',
conditions: [
{ columnName: 'Name', operator: 'eq', type: 'string', value: '1Password' },
{ columnName: 'NPM', operator: 'eq', type: 'number', value: 17984 }
]
}
],
targets: [
{ column: 'Name', css: { 'background-color': '#fa8072', color: '#000' } },
{ column: 'NPM', css: { 'background-color': '#fa8072', color: '#000' } }
]
}
]
}
});
This example shows it nicely:
- https://htmlextensions.evotec.xyz/columnHighlighter/final-html-advanced.html
It's able to do complicated, multicolumn conditions and can be seen here: https://github.com/EvotecIT/HTMLExtensions/blob/master/docs/columnHighlighter/final-html-advanced.html how the logic works.
It's my way of giving back. Hopefully it will be useful to someone, if not - feel free to delete 
This question has an accepted answers - jump to answer
Answers
This is outstanding! Thank you for creating and sharing this with the community! I've added it to the news feed on the landing page.
Regards,
Allan
Thanks, appreciate your work! Thank you for linking. Had to update pages to link to github and add more stuff into it as your link was just showing off demo and was scared people would curse me out
Now it should work nice.
Would you be interested in:
- apex charts linked to datatables?
- vis.js linked to datatables
So when you click on either end it searches nodes, etc? I have those working in my powershell module, just not exposed as reusable for people.
Years ago I did a demo integration with Highcharts. An integration with Apex Charts would be interesting to see as an alternative!
Equally, I'm sure there will be folks who are interested in a vis.js integration as well, if you are willing to share what you have put together.
Regards,
Allan