https://github.com/evotecit/htmlextensions
A bunch of extensions for DataTables/ApexCharts free to use
https://github.com/evotecit/htmlextensions
apexcharts datatables-plugin
Last synced: 3 months ago
JSON representation
A bunch of extensions for DataTables/ApexCharts free to use
- Host: GitHub
- URL: https://github.com/evotecit/htmlextensions
- Owner: EvotecIT
- License: mit
- Created: 2025-06-05T11:06:12.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-12-14T18:58:55.000Z (6 months ago)
- Last Synced: 2025-12-16T15:30:54.127Z (6 months ago)
- Topics: apexcharts, datatables-plugin
- Language: JavaScript
- Homepage: http://htmlextensions.evotec.xyz/
- Size: 313 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
DataTables Column Highlighter (Standalone)
A reusable JavaScript extension for DataTables that highlights specific columns in visible rows and responsive child rows based on declarative conditions.
## Features
- Declarative config via DataTables options: `columnHighlighter.rules`
- Supports HTML-backed tables and JavaScript-backed tables (auto-detected)
- Target columns by header name or index; per-target styles
- Condition groups with `AND`/`OR`/`NONE` logic and robust operators
- Applies to visible cells on init/draw and to responsive child rows on expand
- Optional helper to toggle Responsive/ScrollX at runtime while preserving state (`datatables.toggleView.js`)
## Quick Start
1) Include scripts (jQuery, DataTables, Responsive optional, this plugin):
```html
```
2) Initialize your DataTable with a `columnHighlighter` block:
```js
$('#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' } }
]
}
]
}
});
```
## Condition Schema
Each condition supports:
- `columnName` or `columnId`: pick either; the other is auto-filled
- `operator`: `eq`, `ne`, `gt`, `lt`, `le`, `ge`, `in`, `notin`, `contains`, `notcontains`, `like`, `notlike`, `between`, `betweenInclusive`
- `type`: `string`, `number`, `bool`, `date`
- `value`: scalar or array; for `date` use `valueDate`
- `valueDate`: `{ year, month, day, hours, minutes, seconds }` or array of those
- `caseSensitive`: `true/false` (for `string`)
- `dateTimeFormat`: string used by `moment` (if included) for date parsing
- `reverseCondition`: swap left/right for comparisons
Group multiple conditions using `conditionsContainer` blocks with `logic` set to `AND`, `OR`, or `NONE`.
## Targets Schema
Each rule has `targets`: an array of columns to style. Each target:
- `column`: header name (string) or index (number)
- `backgroundColor` / `textColor` or a full `css` object
- `highlightParent`: also colors the parent element in child rows
## Imperative API (optional)
If you prefer to attach rules in code instead of options:
- `setupColumnHighlighting(tableId, rules, table)`
- `setupChildRowConditionalFormatting(tableId, conditionsContainer, highlightColumn, css, failCss, table)`
## Examples
- `final-html-simple.html` — HTML table, simple rule
- `final-html-and.html` — HTML table, AND group
- `final-html-advanced.html` — HTML table, responsive demo with multiple rules, fail targets, styles
- `final-locale-decimals.html` — HTML and JavaScript tables, dot vs comma decimals, pass/fail threshold matrix
- `final-js-simple.html` — JavaScript data, simple rule
- `final-js-and.html` — JavaScript data, AND group
- `final-js-advanced.html` — JavaScript data, responsive demo with multiple rules, fail targets, styles
- `final-toggle-view-preserve.html` — Toggle Responsive/ScrollX without losing highlighting or filters
- `final-toggle-view-preserve.html` — Toggle Responsive/ScrollX (default Buttons theme; no styling changes)
- `final-toggle-view-preserve-bootstrap5.html` — Same with Bootstrap 5 Buttons styling
## Toggle Responsive/ScrollX (preserves state)
Include the helper and call `hfxToggleView(api)` to switch modes without losing highlighting, searches, or column visibility:
```html
var api = $('#table').DataTable({ responsive: true, columnHighlighter: { rules: [...] } });
// later
api = window.hfxToggleView(api) || api; // switches mode & preserves state
```
- `examples/datatables-bootstrap-striped-responsive.html` — Bootstrap `table-striped` + Responsive; shows consistent per-cell highlights
### Bootstrap 5.3 striped tables
Bootstrap 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.
When a `backgroundColor` is provided, the Column Highlighter now:
- sets `--bs-table-accent-bg: transparent` on the target cell, and
- paints an inset `box-shadow` with your color (`inset 0 0 0 9999px <color>`),
so 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' }`).
## Toggle button (seamless)
The extension does not alter your styling. To add the toggle in the standard Buttons bar, include the button type and you’re done:
```js
$('#table').DataTable({
dom: 'Bfrtip',
buttons: ['copyHtml5','excelHtml5','colvis','print','toggleView'],
responsive: true
});
```
If 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:
```html
<button class="btn btn-primary btn-sm" data-hfx-toggle="#table">⇄ Switch to ScrollX</button>
```