{"id":31051606,"url":"https://github.com/evotecit/htmlextensions","last_synced_at":"2026-03-11T12:29:46.367Z","repository":{"id":311500900,"uuid":"996718164","full_name":"EvotecIT/HTMLExtensions","owner":"EvotecIT","description":"A bunch of extensions for DataTables/ApexCharts free to use","archived":false,"fork":false,"pushed_at":"2025-12-14T18:58:55.000Z","size":321,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-12-16T15:30:54.127Z","etag":null,"topics":["apexcharts","datatables-plugin"],"latest_commit_sha":null,"homepage":"http://htmlextensions.evotec.xyz/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EvotecIT.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"PrzemyslawKlys","custom":["https://paypal.me/PrzemyslawKlys"]}},"created_at":"2025-06-05T11:06:12.000Z","updated_at":"2025-12-14T18:58:59.000Z","dependencies_parsed_at":"2025-08-24T23:52:41.237Z","dependency_job_id":"e71a0264-7157-45bf-bb57-89874a36b18c","html_url":"https://github.com/EvotecIT/HTMLExtensions","commit_stats":null,"previous_names":["evotecit/htmlextensions"],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/EvotecIT/HTMLExtensions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvotecIT%2FHTMLExtensions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvotecIT%2FHTMLExtensions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvotecIT%2FHTMLExtensions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvotecIT%2FHTMLExtensions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EvotecIT","download_url":"https://codeload.github.com/EvotecIT/HTMLExtensions/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvotecIT%2FHTMLExtensions/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29509445,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-16T09:05:14.864Z","status":"ssl_error","status_checked_at":"2026-02-16T08:55:59.364Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apexcharts","datatables-plugin"],"created_at":"2025-09-15T00:46:19.847Z","updated_at":"2026-03-11T12:29:46.353Z","avatar_url":"https://github.com/EvotecIT.png","language":"JavaScript","funding_links":["https://github.com/sponsors/PrzemyslawKlys","https://paypal.me/PrzemyslawKlys"],"categories":[],"sub_categories":[],"readme":"DataTables Column Highlighter (Standalone)\r\n\r\nA reusable JavaScript extension for DataTables that highlights specific columns in visible rows and responsive child rows based on declarative conditions.\r\n\r\n## Features\n\r\n- Declarative config via DataTables options: `columnHighlighter.rules`\r\n- Supports HTML-backed tables and JavaScript-backed tables (auto-detected)\r\n- Target columns by header name or index; per-target styles\r\n- Condition groups with `AND`/`OR`/`NONE` logic and robust operators\r\n- Applies to visible cells on init/draw and to responsive child rows on expand\n- Optional helper to toggle Responsive/ScrollX at runtime while preserving state (`datatables.toggleView.js`)\n\r\n## Quick Start\r\n\r\n1) Include scripts (jQuery, DataTables, Responsive optional, this plugin):\r\n\r\n```html\r\n\u003clink rel=\"stylesheet\" href=\"https://cdn.datatables.net/1.13.5/css/jquery.dataTables.min.css\" /\u003e\r\n\u003clink rel=\"stylesheet\" href=\"https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css\" /\u003e\r\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@evotecit/htmlextensions@0.1.5/dist/datatables.columnHighlighter.js\"\u003e\u003c/script\u003e\n\u003c!-- Or auto-minified: --\u003e\r\n\u003c!-- \u003cscript src=\"https://cdn.jsdelivr.net/npm/@evotecit/htmlextensions@0.1.5/dist/datatables.columnHighlighter.min.js\"\u003e\u003c/script\u003e --\u003e\n```\r\n\r\n2) Initialize your DataTable with a `columnHighlighter` block:\r\n\r\n```js\r\n$('#myTable').DataTable({\r\n  responsive: { details: { type: 'inline' } },\r\n  columnHighlighter: {\r\n    rules: [\r\n      {\r\n        conditionsContainer: [\r\n          {\r\n            logic: 'AND',\r\n            conditions: [\r\n              { columnName: 'Name', operator: 'eq', type: 'string', value: '1Password' },\r\n              { columnName: 'NPM',  operator: 'eq', type: 'number', value: 17984 }\r\n            ]\r\n          }\r\n        ],\r\n        targets: [\r\n          { column: 'Name', css: { 'background-color': '#fa8072', color: '#000' } },\r\n          { column: 'NPM',  css: { 'background-color': '#fa8072', color: '#000' } }\r\n        ]\r\n      }\r\n    ]\r\n  }\r\n});\r\n```\r\n\r\n## Condition Schema\r\n\r\nEach condition supports:\r\n\r\n- `columnName` or `columnId`: pick either; the other is auto-filled\r\n- `operator`: `eq`, `ne`, `gt`, `lt`, `le`, `ge`, `in`, `notin`, `contains`, `notcontains`, `like`, `notlike`, `between`, `betweenInclusive`\r\n- `type`: `string`, `number`, `bool`, `date`\r\n- `value`: scalar or array; for `date` use `valueDate`\r\n- `valueDate`: `{ year, month, day, hours, minutes, seconds }` or array of those\r\n- `caseSensitive`: `true/false` (for `string`)\r\n- `dateTimeFormat`: string used by `moment` (if included) for date parsing\r\n- `reverseCondition`: swap left/right for comparisons\r\n\r\nGroup multiple conditions using `conditionsContainer` blocks with `logic` set to `AND`, `OR`, or `NONE`.\r\n\r\n## Targets Schema\r\n\r\nEach rule has `targets`: an array of columns to style. Each target:\r\n\r\n- `column`: header name (string) or index (number)\r\n- `backgroundColor` / `textColor` or a full `css` object\r\n- `highlightParent`: also colors the parent element in child rows\r\n\r\n## Imperative API (optional)\r\n\r\nIf you prefer to attach rules in code instead of options:\r\n\r\n- `setupColumnHighlighting(tableId, rules, table)`\r\n- `setupChildRowConditionalFormatting(tableId, conditionsContainer, highlightColumn, css, failCss, table)`\r\n\r\n## Examples\n\n- `final-html-simple.html` — HTML table, simple rule\n- `final-html-and.html` — HTML table, AND group\n- `final-html-advanced.html` — HTML table, responsive demo with multiple rules, fail targets, styles\n- `final-locale-decimals.html` — HTML and JavaScript tables, dot vs comma decimals, pass/fail threshold matrix\n- `final-js-simple.html` — JavaScript data, simple rule\n- `final-js-and.html` — JavaScript data, AND group\n- `final-js-advanced.html` — JavaScript data, responsive demo with multiple rules, fail targets, styles\n- `final-toggle-view-preserve.html` — Toggle Responsive/ScrollX without losing highlighting or filters\n - `final-toggle-view-preserve.html` — Toggle Responsive/ScrollX (default Buttons theme; no styling changes)\n - `final-toggle-view-preserve-bootstrap5.html` — Same with Bootstrap 5 Buttons styling\n\n## Toggle Responsive/ScrollX (preserves state)\n\nInclude the helper and call `hfxToggleView(api)` to switch modes without losing highlighting, searches, or column visibility:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@evotecit/htmlextensions@0.1.5/dist/datatables.toggleView.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  var api = $('#table').DataTable({ responsive: true, columnHighlighter: { rules: [...] } });\n  // later\n  api = window.hfxToggleView(api) || api; // switches mode \u0026 preserves state\n```\n\n- `examples/datatables-bootstrap-striped-responsive.html` — Bootstrap `table-striped` + Responsive; shows consistent per-cell highlights\n\n### Bootstrap 5.3 striped tables\n\nBootstrap 5.3 renders zebra striping and hover states using a full-cell `box-shadow` overlay driven by CSS variables (for example, `--bs-table-accent-bg`). If you only set `background-color` on a cell, that overlay can tint your highlight on odd rows, making it look uneven.\n\nWhen a `backgroundColor` is provided, the Column Highlighter now:\n\n- sets `--bs-table-accent-bg: transparent` on the target cell, and\n- paints an inset `box-shadow` with your color (`inset 0 0 0 9999px \u003ccolor\u003e`),\n\nso highlights look identical on striped and non-striped rows. Any custom `css` you pass still applies last and can override these (for example `{ 'box-shadow': 'none' }`).\n## Toggle button (seamless)\n\nThe extension does not alter your styling. To add the toggle in the standard Buttons bar, include the button type and you’re done:\n\n```js\n$('#table').DataTable({\n  dom: 'Bfrtip',\n  buttons: ['copyHtml5','excelHtml5','colvis','print','toggleView'],\n  responsive: true\n});\n```\n\nIf you are using Bootstrap 5 theme for Buttons, load the `buttons.bootstrap5` CSS/JS; the toggle inherits that look automatically. A standalone button is also available via the attribute:\n\n```html\n\u003cbutton class=\"btn btn-primary btn-sm\" data-hfx-toggle=\"#table\"\u003e⇄ Switch to ScrollX\u003c/button\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevotecit%2Fhtmlextensions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevotecit%2Fhtmlextensions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevotecit%2Fhtmlextensions/lists"}