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):

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@evotecit/htmlextensions@0.1.17/dist/datatables.columnHighlighter.js"></script>
<!-- Or auto-minified: -->
<!-- <script src="https://cdn.jsdelivr.net/npm/@evotecit/htmlextensions@0.1.17/dist/datatables.columnHighlighter.min.js"></script> -->

2. Initialize your DataTable with a columnHighlighter block:

$('#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
• docs/toggleView/final-toggle-default.html — Toggle Responsive/ScrollX with the default Buttons theme
• docs/toggleView/final-toggle-bootstrap5.html — Same toggle demo with Bootstrap 5 Buttons styling
• docs/toggleView/final-toggle-preserved-state.html — Full preserved-state demo for toggling back and forth while retaining filters, search, ordering, visibility, and highlights

Toggle Responsive/ScrollX (preserves state)

Include the helper and call hfxToggleView(api) to switch modes without losing highlighting, searches, or column visibility:

<script src="https://cdn.jsdelivr.net/npm/@evotecit/htmlextensions@0.1.17/dist/datatables.toggleView.js"></script>
<script>
  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:

$('#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:

<button class="btn btn-primary btn-sm" data-hfx-toggle="#table">⇄ Switch to ScrollX</button>