@highcharts/grid-pro 2.0.0

package/es-modules/Grid/Core/Table/Actions/ColumnFiltering/ColumnFiltering.js

@@ -0,0 +1,351 @@
+/* *
+ *
+ *  Grid ColumnFiltering class
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Dawid Dragula
+ *  - Sebastian Bochan
+ *  - Kamil Kubik
+ *
+ * */
+'use strict';
+import U from '../../../../../Core/Utilities.js';
+import GU from '../../../GridUtils.js';
+import Globals from '../../../Globals.js';
+import { conditionsMap } from './FilteringTypes.js';
+const { defined, fireEvent } = U;
+const { makeHTMLElement } = GU;
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Class that manages filtering for a dedicated column.
+ */
+class ColumnFiltering {
+    /* *
+     *
+     *  Static Methods
+     *
+     * */
+    /**
+     * Parses a camel case string to a readable string and capitalizes the first
+     * letter.
+     *
+     * @param value
+     * The camel case string to parse.
+     *
+     * @returns
+     * The readable string with the first letter capitalized.
+     */
+    static parseCamelCaseToReadable(value) {
+        const readable = value
+            .replace(/([A-Z])/g, ' $1')
+            .trim()
+            .toLowerCase()
+            .split(/\s+/).join(' ');
+        return readable.charAt(0).toUpperCase() + readable.slice(1);
+    }
+    /* *
+    *
+    *  Constructor
+    *
+    * */
+    /**
+     * Constructs filtering controller for a dedicated column.
+     *
+     * @param column
+     * The filtered column.
+     */
+    constructor(column) {
+        /**
+         * Handles the keydown event for the filtering content. Used externally,
+         * not in the class itself.
+         *
+         * @param e
+         * The keyboard event.
+         */
+        this.onKeyDown = (e) => {
+            const contentOrder = [];
+            if (this.filterSelect && !this.filterSelect.disabled) {
+                contentOrder.push(this.filterSelect);
+            }
+            if (this.filterInput && !this.filterInput.disabled) {
+                contentOrder.push(this.filterInput);
+            }
+            if (this.clearButton && !this.clearButton.disabled) {
+                contentOrder.push(this.clearButton);
+            }
+            const direction = {
+                'ArrowDown': 1,
+                'ArrowUp': -1
+            }[e.key];
+            if (direction) {
+                e.preventDefault();
+                const currentIndex = contentOrder.indexOf(e.target);
+                const n = contentOrder.length;
+                contentOrder[(currentIndex + direction + n) % n].focus();
+                return;
+            }
+            if (e.key === 'Enter') {
+                if (e.target === this.clearButton) {
+                    e.preventDefault();
+                    void this.set();
+                    contentOrder[0]?.focus();
+                    return;
+                }
+            }
+        };
+        this.column = column;
+    }
+    /* *
+    *
+    *  Methods
+    *
+    * */
+    /**
+     * Sets the value and condition for the filtering.
+     *
+     * @param value
+     * The value to set.
+     *
+     * @param condition
+     * The condition to set.
+     */
+    async set(value, condition) {
+        if (this.filterInput) {
+            this.filterInput.value = value ?? '';
+        }
+        if (this.filterSelect) {
+            this.filterSelect.value =
+                condition ?? conditionsMap[this.column.dataType][0];
+        }
+        await this.applyFilter({ value, condition });
+    }
+    /**
+     * Render the filtering content in the container.
+     *
+     * @param container
+     * The container element.
+     */
+    renderFilteringContent(container) {
+        const column = this.column;
+        const columnType = column.dataType;
+        if (!column.options.filtering?.enabled) {
+            return;
+        }
+        // Render the input wrapper.
+        const inputWrapper = makeHTMLElement('div', {
+            className: Globals.getClassName('columnFilterWrapper')
+        }, container);
+        this.renderConditionSelect(inputWrapper);
+        if (columnType !== 'boolean') {
+            this.renderFilteringInput(inputWrapper, columnType);
+        }
+        this.renderClearButton(inputWrapper);
+    }
+    /**
+     * Takes the filtering value and condition from the inputs and applies it
+     * to the column.
+     */
+    applyFilterFromForm() {
+        const result = {
+            condition: this.filterSelect?.value
+        };
+        if (this.filterInput) {
+            result.value = this.filterInput.value;
+        }
+        if (result.condition &&
+            conditionsMap[this.column.dataType].includes(result.condition)) {
+            void this.applyFilter(result);
+        }
+    }
+    /**
+     * Applies the filtering to the column.
+     *
+     * @param condition
+     * The filtering condition.
+     */
+    async applyFilter(condition) {
+        const viewport = this.column.viewport;
+        const querying = viewport.grid.querying;
+        const filteringController = querying.filtering;
+        const columnId = this.column.id;
+        const a11y = viewport.grid.accessibility;
+        const { value } = condition;
+        fireEvent(this.column, 'beforeFilter', {
+            target: this.column
+        });
+        const filteringApplied = this.isFilteringApplied();
+        const clearButton = this.clearButton;
+        if (clearButton && filteringApplied === clearButton.disabled) {
+            clearButton.disabled = !filteringApplied;
+        }
+        if (defined(value) && value !== '' && typeof value !== 'number') {
+            switch (this.column.dataType) {
+                case 'number':
+                    condition.value = Number(value);
+                    break;
+                case 'datetime':
+                    condition.value = new Date(`${value}Z`).getTime();
+                    break;
+            }
+        }
+        // Update the userOptions.
+        void this.column.update({ filtering: condition }, false);
+        filteringController.addColumnFilterCondition(columnId, condition);
+        this.disableInputIfNeeded();
+        await querying.proceed();
+        await viewport.updateRows();
+        a11y?.userFilteredColumn({
+            ...condition,
+            columnId,
+            rowsCount: viewport.rows.length
+        }, filteringApplied);
+        fireEvent(this.column, 'afterFilter', {
+            target: this.column
+        });
+    }
+    /**
+     * Render the filtering input element, based on the column type.
+     *
+     * @param inputWrapper
+     * Reference to the input wrapper.
+     *
+     * @param columnType
+     * Reference to the column type.
+     */
+    renderFilteringInput(inputWrapper, columnType) {
+        // Render the input element.
+        this.filterInput = makeHTMLElement('input', {}, inputWrapper);
+        this.filterInput.setAttribute('tabindex', '-1');
+        const column = this.column;
+        this.filterInput.setAttribute('id', 'filter-input-' + column.viewport.grid.id + '-' + column.id);
+        this.filterInput.placeholder = 'Value...';
+        if (columnType === 'number') {
+            this.filterInput.type = 'number';
+        }
+        else if (columnType === 'datetime') {
+            this.filterInput.type = 'date';
+        }
+        else {
+            this.filterInput.type = 'text';
+            this.filterInput.classList.add(Globals.getClassName('icon'), Globals.getClassName('iconSearch'));
+        }
+        // Assign the default input value.
+        const { value } = this.column.options.filtering ?? {};
+        if (value || value === 0) {
+            this.filterInput.value = columnType === 'datetime' ?
+                column.viewport.grid.time.dateFormat('%Y-%m-%d', Number(value)) :
+                value.toString();
+        }
+        if (this.filterSelect) {
+            this.disableInputIfNeeded();
+        }
+        const eventTypes = {
+            string: ['keyup'],
+            number: ['keyup', 'change'],
+            datetime: ['change']
+        };
+        for (const eventType of eventTypes[columnType]) {
+            this.filterInput.addEventListener(eventType, () => {
+                this.applyFilterFromForm();
+            });
+        }
+    }
+    /**
+     * Render the condition select element.
+     *
+     * @param inputWrapper
+     * Reference to the input wrapper.
+     */
+    renderConditionSelect(inputWrapper) {
+        // Render the select element.
+        this.filterSelect = makeHTMLElement('select', {}, inputWrapper);
+        this.filterSelect.setAttribute('tabindex', '-1');
+        const column = this.column;
+        this.filterSelect.setAttribute('id', 'filter-select-' + column.viewport.grid.id + '-' + column.id);
+        const conditions = conditionsMap[column.dataType];
+        const langConditions = this.column.viewport.grid.options
+            ?.lang?.columnFilteringConditions ?? {};
+        // Render the options.
+        for (const condition of conditions) {
+            const optionElement = document.createElement('option');
+            optionElement.value = condition;
+            optionElement.textContent = langConditions[condition] ??
+                ColumnFiltering.parseCamelCaseToReadable(condition);
+            this.filterSelect.appendChild(optionElement);
+        }
+        // Use condition from options or first available condition as default.
+        const filteringCondition = this.column.options.filtering?.condition;
+        if (filteringCondition && conditions.includes(filteringCondition)) {
+            this.filterSelect.value = filteringCondition;
+        }
+        else {
+            this.filterSelect.value = conditions[0];
+        }
+        this.disableInputIfNeeded();
+        // Attach event listener.
+        this.filterSelect.addEventListener('change', () => {
+            this.applyFilterFromForm();
+        });
+    }
+    renderClearButton(inputWrapper) {
+        this.clearButton = makeHTMLElement('button', {
+            className: Globals.getClassName('clearFilterButton'),
+            innerText: 'Clear filter' // TODO: Lang
+        }, inputWrapper);
+        this.clearButton.setAttribute('tabindex', '-1');
+        this.clearButton.disabled = !this.isFilteringApplied();
+        this.clearButton.addEventListener('click', () => {
+            void this.set();
+        });
+    }
+    /**
+     * Checks if filtering is applied to the column.
+     *
+     * @returns
+     * `true` if filtering is applied to the column, `false` otherwise.
+     */
+    isFilteringApplied() {
+        const { filterSelect: select, filterInput: input } = this;
+        const { dataType } = this.column;
+        const condition = select?.value;
+        if (dataType === 'boolean') {
+            return condition !== 'all';
+        }
+        if (condition === 'empty' || condition === 'notEmpty') {
+            return true;
+        }
+        return input?.value !== '';
+    }
+    /**
+     * Disables the input element if the condition is `empty` or `notEmpty`.
+     */
+    disableInputIfNeeded() {
+        const { filterSelect: select, filterInput: input } = this;
+        const condition = select?.value;
+        if (!input || !select) {
+            return;
+        }
+        if (condition === 'empty' || condition === 'notEmpty') {
+            input.disabled = true;
+        }
+        else if (input?.disabled) {
+            input.disabled = false;
+        }
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default ColumnFiltering;

package/es-modules/Grid/Core/Table/Actions/ColumnFiltering/FilterCell.d.ts

@@ -0,0 +1,14 @@
+import type Row from '../../Row.js';
+import type Column from '../../Column.js';
+import HeaderCell from '../../Header/HeaderCell.js';
+/**
+ * Represents a cell in the data grid header.
+ */
+declare class FilterCell extends HeaderCell {
+    column: Column;
+    constructor(row: Row, column: Column);
+    render(): void;
+    protected onKeyDown(e: KeyboardEvent): void;
+    protected onClick(e: MouseEvent): void;
+}
+export default FilterCell;

package/es-modules/Grid/Core/Table/Actions/ColumnFiltering/FilterCell.js

@@ -0,0 +1,86 @@
+/* *
+ *
+ *  Grid Filter Cell class
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Dawid Dragula
+ *
+ * */
+'use strict';
+import HeaderCell from '../../Header/HeaderCell.js';
+import U from '../../../../../Core/Utilities.js';
+const { fireEvent } = U;
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Represents a cell in the data grid header.
+ */
+class FilterCell extends HeaderCell {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor(row, column) {
+        const trueHeader = column.header;
+        super(row, column);
+        column.header = trueHeader;
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    render() {
+        const { column } = this;
+        if (!column) {
+            return;
+        }
+        // Render content of th element
+        this.row.htmlElement.appendChild(this.htmlElement);
+        this.htmlElement.setAttribute('scope', 'col');
+        this.htmlElement.setAttribute('data-column-id', column.id);
+        // Add user column classname
+        if (column.options.className) {
+            this.htmlElement.classList.add(...column.options.className.split(/\s+/g));
+        }
+        this.setCustomClassName(column.options.header?.className);
+        fireEvent(this, 'afterRender', { column, filtering: true });
+    }
+    onKeyDown(e) {
+        this.column.filtering?.onKeyDown(e);
+        if (e.target === this.htmlElement) {
+            if (e.key === 'Enter') {
+                this.column.filtering?.filterSelect?.focus();
+            }
+            else {
+                super.onKeyDown(e);
+            }
+        }
+        else {
+            if (e.key === 'Escape') {
+                this.htmlElement.focus();
+            }
+        }
+    }
+    onClick(e) {
+        if (e.target === this.htmlElement) {
+            this.htmlElement.focus();
+        }
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default FilterCell;

package/es-modules/Grid/Core/Table/Actions/ColumnFiltering/FilterRow.d.ts

@@ -0,0 +1,19 @@
+import type Table from '../../Table.js';
+import type Column from '../../Column.js';
+import FilterCell from './FilterCell.js';
+import HeaderRow from '../../Header/HeaderRow.js';
+/**
+ * Represents a special filtering row in the data grid header.
+ */
+declare class FilterRow extends HeaderRow {
+    /**
+     * Constructs a filtering row in the Grid's header.
+     *
+     * @param viewport
+     * The Grid Table instance which the row belongs to.
+     */
+    constructor(viewport: Table);
+    createCell(column: Column): FilterCell;
+    renderContent(): void;
+}
+export default FilterRow;

package/es-modules/Grid/Core/Table/Actions/ColumnFiltering/FilterRow.js

@@ -0,0 +1,80 @@
+/* *
+ *
+ *  Grid FilteringRow class
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Dawid Dragula
+ *
+ * */
+'use strict';
+import FilterCell from './FilterCell.js';
+import Globals from '../../../Globals.js';
+import HeaderRow from '../../Header/HeaderRow.js';
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Represents a special filtering row in the data grid header.
+ */
+class FilterRow extends HeaderRow {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    /**
+     * Constructs a filtering row in the Grid's header.
+     *
+     * @param viewport
+     * The Grid Table instance which the row belongs to.
+     */
+    constructor(viewport) {
+        super(viewport, (viewport.header?.levels ?? 0) + 1 // Level (1-based)
+        );
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    createCell(column) {
+        return new FilterCell(this, column);
+    }
+    renderContent() {
+        const vp = this.viewport;
+        const enabledColumns = vp.grid.enabledColumns || [];
+        vp.theadElement?.appendChild(this.htmlElement);
+        this.htmlElement.classList.add(Globals.getClassName('headerRow'));
+        for (let i = 0, iEnd = vp.columns.length; i < iEnd; i++) {
+            const column = vp.columns[i];
+            if (enabledColumns?.indexOf(column.id) < 0) {
+                continue;
+            }
+            const cell = this.createCell(column);
+            cell.render();
+            if (column.options.filtering?.inline) {
+                column.filtering?.renderFilteringContent(cell.htmlElement);
+            }
+        }
+        const firstCell = this.cells[0];
+        if (firstCell.column?.index === 0) {
+            // Add class to disable left border on first column
+            this.cells[0].htmlElement.classList.add(Globals.getClassName('columnFirst'));
+        }
+        this.setLastCellClass();
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default FilterRow;

package/es-modules/Grid/Core/Table/Actions/ColumnFiltering/FilteringTypes.d.ts

@@ -0,0 +1,52 @@
+import type Column from '../../Column';
+/**
+ * String filtering conditions.
+ */
+export type StringCondition = typeof stringConditions[number];
+/**
+ * Number filtering conditions.
+ */
+export type NumberCondition = typeof numberConditions[number];
+/**
+ * DateTime filtering conditions.
+ */
+export type DateTimeCondition = typeof dateTimeConditions[number];
+/**
+ * Boolean filtering conditions.
+ */
+export type BooleanCondition = typeof booleanConditions[number];
+/**
+ * The event object for the 'afterRender' event.
+ */
+export type AfterRenderEvent = Event & {
+    column: Column;
+    filtering: boolean;
+};
+/**
+ * Combined filtering conditions.
+ */
+export type Condition = StringCondition | NumberCondition | DateTimeCondition | BooleanCondition;
+/**
+ * String conditions values for the condition select options.
+ */
+export declare const stringConditions: readonly ["contains", "doesNotContain", "equals", "doesNotEqual", "beginsWith", "endsWith", "empty", "notEmpty"];
+/**
+ * Number conditions values for the condition select options.
+ */
+export declare const numberConditions: readonly ["equals", "doesNotEqual", "greaterThan", "greaterThanOrEqualTo", "lessThan", "lessThanOrEqualTo", "empty", "notEmpty"];
+/**
+ * DateTime conditions values for the condition select options.
+ */
+export declare const dateTimeConditions: readonly ["equals", "doesNotEqual", "before", "after", "empty", "notEmpty"];
+/**
+ * Boolean conditions values for the condition select options.
+ */
+export declare const booleanConditions: readonly ["all", "true", "false", "empty"];
+/**
+ * Corresponding values for the boolean select options.
+ */
+export declare const booleanValueMap: Record<BooleanCondition, 'all' | boolean | null>;
+/**
+ * Conditions map for the condition select options.
+ */
+export declare const conditionsMap: Record<Column.DataType, readonly Condition[]>;

package/es-modules/Grid/Core/Table/Actions/ColumnFiltering/FilteringTypes.js

@@ -0,0 +1,81 @@
+/* *
+ *
+ *  Grid Filtering Types and Constants
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Dawid Dragula
+ *  - Sebastian Bochan
+ *  - Kamil Kubik
+ *
+ * */
+'use strict';
+/**
+ * String conditions values for the condition select options.
+ */
+export const stringConditions = [
+    'contains',
+    'doesNotContain',
+    'equals',
+    'doesNotEqual',
+    'beginsWith',
+    'endsWith',
+    'empty',
+    'notEmpty'
+];
+/**
+ * Number conditions values for the condition select options.
+ */
+export const numberConditions = [
+    'equals',
+    'doesNotEqual',
+    'greaterThan',
+    'greaterThanOrEqualTo',
+    'lessThan',
+    'lessThanOrEqualTo',
+    'empty',
+    'notEmpty'
+];
+/**
+ * DateTime conditions values for the condition select options.
+ */
+export const dateTimeConditions = [
+    'equals',
+    'doesNotEqual',
+    'before',
+    'after',
+    'empty',
+    'notEmpty'
+];
+/**
+ * Boolean conditions values for the condition select options.
+ */
+export const booleanConditions = [
+    'all',
+    'true',
+    'false',
+    'empty'
+];
+/**
+ * Corresponding values for the boolean select options.
+ */
+export const booleanValueMap = {
+    'all': 'all',
+    'true': true,
+    'false': false,
+    'empty': null
+};
+/**
+ * Conditions map for the condition select options.
+ */
+export const conditionsMap = {
+    string: stringConditions,
+    number: numberConditions,
+    datetime: dateTimeConditions,
+    'boolean': booleanConditions
+};