EvotecIT/HTMLExtensions

記録された最新のソース活動: 2026年10月18日 14:17

SkillsMP カタログ更新: 2026年11月5日 19:57

収集済み skills: 1

GitHub スター: 3
GitHub フォーク: 0

AI アシスタントでインストール

このプロンプトをコピーして、使用中の AI アシスタントに送ってください。

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/EvotecIT/HTMLExtensions.

リポジトリの README

README の元ファイル：README.MD

README の元ファイルを読む

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 <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>   ``` 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 - `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: ```html <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: ```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> ```

リポジトリの README を読み込んでいます…

このリポジトリの skills

分類待ち

skill

職業分類

説明

更新

site-assistant

未分類

Use the HTMLExtensions examples gallery and project documentation.

原文の言語: 英語

2026-10-18

収集済み skill 1 件中 1 件を表示しています。