@coreui/data-grid 0.3.0-rc.0 → 0.4.0

package/dist/types/util/drag.d.mts

@@ -1 +1,48 @@
-export * from './drag.js'
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid util/drag.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+export type DragAxis = 'x' | 'y';
+export interface DragHit {
+    id: string;
+    element: HTMLElement;
+}
+export interface DragDrop {
+    id: string;
+    after: boolean;
+}
+export interface DragControllerOptions {
+    axis: DragAxis;
+    root: HTMLElement;
+    handle: string;
+    resolveSource: (handle: HTMLElement, target: HTMLElement) => DragHit | null;
+    items: DragItems;
+    canDrop: (sourceId: string, targetId: string) => boolean;
+    getScrollElement: () => HTMLElement | null;
+    ghostLabel?: (source: DragHit) => string;
+    preview?: boolean;
+    onDrop: (sourceId: string, drop: DragDrop) => void;
+}
+export interface DragItems {
+    getOrderedIds: () => string[];
+    getElements: (id: string) => HTMLElement[];
+}
+export interface DragController {
+    dispose: () => void;
+}
+export declare const createDragController: (options: DragControllerOptions) => DragController;
+export interface ColumnDragOptions {
+    root: HTMLElement;
+    getScrollElement: () => HTMLElement | null;
+    canDrop: (sourceKey: string, targetKey: string) => boolean;
+    onReorder: (sourceKey: string, targetKey: string, after: boolean) => void;
+}
+export declare const createColumnDragController: (options: ColumnDragOptions) => DragController;
+export interface RowDragOptions {
+    root: HTMLElement;
+    getScrollElement: () => HTMLElement | null;
+    onReorder: (sourceIndex: number, targetIndex: number, after: boolean) => void;
+}
+export declare const createRowDragController: (options: RowDragOptions) => DragController;

package/dist/types/util/export-table.d.mts

@@ -0,0 +1,47 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid util/export-table.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+import type { DataGridItem } from '../types.mjs';
+export interface ExportColumnMeta {
+    label?: string;
+    formatter?: (value: unknown, item: DataGridItem) => string;
+    width?: number;
+}
+export interface ExportColumn {
+    id: string;
+    columnDef: {
+        meta?: unknown;
+    };
+}
+export interface ExportRow {
+    original: DataGridItem;
+    getValue: (columnId: string) => unknown;
+}
+export interface ExportTable {
+    getAllLeafColumns: () => ExportColumn[];
+    getCenterVisibleLeafColumns?: () => ExportColumn[];
+    getCoreRowModel: () => {
+        rows: ExportRow[];
+    };
+    getEndVisibleLeafColumns?: () => ExportColumn[];
+    getFilteredRowModel?: () => {
+        rows: ExportRow[];
+    };
+    getSelectedRowModel?: () => {
+        rows: ExportRow[];
+    };
+    getSortedRowModel?: () => {
+        rows: ExportRow[];
+    };
+    getStartVisibleLeafColumns?: () => ExportColumn[];
+    getVisibleLeafColumns?: () => ExportColumn[];
+}
+export type ExportScope = 'filtered' | 'all' | 'selected';
+export declare const rowsFor: (table: ExportTable, scope: ExportScope | undefined) => ExportRow[];
+export declare const columnsFor: (table: ExportTable) => ExportColumn[];
+export declare const headerFor: (column: ExportColumn) => string;
+export declare const formatterFor: (column: ExportColumn) => ExportColumnMeta["formatter"];
+export declare const widthFor: (column: ExportColumn) => number | undefined;

package/dist/types/util/index.d.mts

@@ -0,0 +1,66 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI util/index.ts
+ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
+ *
+ * This is a modified version of the Bootstrap's util/index.ts
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+type JQueryStatic = ((selector: unknown) => any) & Record<string, any> & {
+    fn: Record<string, any>;
+};
+type JQueryPlugin = {
+    NAME: string;
+    jQueryInterface: (...args: any[]) => unknown;
+};
+declare global {
+    interface Window {
+        jQuery?: JQueryStatic;
+    }
+}
+/**
+ * Properly escape IDs selectors to handle weird IDs
+ * @param {string} selector
+ * @returns {string}
+ */
+declare const parseSelector: (selector: string) => string;
+declare const toType: (object: unknown) => string;
+/**
+ * Public Util API
+ */
+declare const getUID: (prefix: string) => string;
+declare const getTransitionDurationFromElement: (element: Element | null) => number;
+declare const triggerTransitionEnd: (element: Element) => void;
+declare const isElement: (object: unknown) => object is Element;
+declare const getElement: (object: unknown) => HTMLElement | null;
+declare const isVisible: (element: unknown) => boolean;
+declare const isDisabled: (element: Element | null | undefined) => boolean;
+declare const findShadowRoot: (element: Node) => ShadowRoot | null;
+declare const noop: () => void;
+/**
+ * Trick to restart an element's animation
+ *
+ * @param {HTMLElement} element
+ * @return void
+ *
+ * @see https://www.charistheo.io/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation
+ */
+declare const reflow: (element: HTMLElement) => void;
+declare const getjQuery: () => JQueryStatic | null;
+declare const onDOMContentLoaded: (callback: () => void) => void;
+declare const isRTL: () => boolean;
+declare const defineJQueryPlugin: (plugin: JQueryPlugin) => void;
+declare const execute: <T = any>(possibleCallback: T | ((...functionArgs: any[]) => T), args?: any[], defaultValue?: T | ((...functionArgs: any[]) => T)) => T;
+declare const executeAfterTransition: (callback: () => void, transitionElement: Element, waitForTransition?: boolean) => void;
+/**
+ * Return the previous/next element of a list.
+ *
+ * @param {array} list    The list of elements
+ * @param activeElement   The active element
+ * @param shouldGetNext   Choose to get next or previous element
+ * @param isCycleAllowed
+ * @return {Element|elem} The proper element
+ */
+declare const getNextActiveElement: <T>(list: T[], activeElement: T, shouldGetNext: boolean, isCycleAllowed?: boolean) => T;
+export { defineJQueryPlugin, execute, executeAfterTransition, findShadowRoot, getElement, getjQuery, getNextActiveElement, getTransitionDurationFromElement, getUID, isDisabled, isElement, isRTL, isVisible, noop, onDOMContentLoaded, parseSelector, reflow, triggerTransitionEnd, toType };

package/dist/types/util/print.d.mts

@@ -1 +1,32 @@
-export * from './print.js'
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid util/print.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+import type { DataGridItem } from '../types.mjs';
+export interface PrintColumn {
+    id: string;
+    label: string;
+    formatter?: (value: unknown, item: DataGridItem) => string;
+}
+export interface PrintRow {
+    getValue: (columnId: string) => unknown;
+    original: DataGridItem;
+}
+export interface PrintTable {
+    getSortedRowModel?: () => {
+        rows: PrintRow[];
+    };
+    getFilteredRowModel?: () => {
+        rows: PrintRow[];
+    };
+    getCoreRowModel: () => {
+        rows: PrintRow[];
+    };
+}
+export interface PrintOptions {
+    title?: string;
+}
+export declare const createPrintTable: (table: PrintTable, columns: PrintColumn[], options?: PrintOptions) => HTMLElement;
+export declare const printGrid: (table: PrintTable, columns: PrintColumn[], options?: PrintOptions) => void;

package/dist/types/util/sanitizer.d.mts

@@ -0,0 +1,15 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI util/sanitizer.ts
+ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
+ *
+ * This is a modified version of the Bootstrap's util/sanitizer.ts
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+type SanitizerAllowList = Record<string, Array<string | RegExp>>;
+export declare const DefaultAllowlist: SanitizerAllowList;
+export declare const SVGAllowlist: SanitizerAllowList;
+export declare function escapeHtml(unsafeText: string): string;
+export declare function sanitizeHtml(unsafeHtml: string, allowList: SanitizerAllowList, sanitizeFunction?: ((unsafeHtml: string) => string) | null): string;
+export type { SanitizerAllowList };

package/dist/types/util/selector.d.mts

@@ -0,0 +1,12 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid util/selector.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+/**
+ * Escapes a column key or row index for a double-quoted CSS attribute selector value.
+ * @param value The key or index interpolated into `[data-…="…"]`.
+ * @returns The value as a string, with `"` and `\` backslash-escaped and line breaks as hex escapes.
+ */
+export declare const escapeAttributeValue: (value: string | number) => string;

package/dist/types/util/selector.d.ts

@@ -0,0 +1,12 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid util/selector.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+/**
+ * Escapes a column key or row index for a double-quoted CSS attribute selector value.
+ * @param value The key or index interpolated into `[data-…="…"]`.
+ * @returns The value as a string, with `"` and `\` backslash-escaped and line breaks as hex escapes.
+ */
+export declare const escapeAttributeValue: (value: string | number) => string;

package/dist/types/util/xlsx.d.mts

@@ -1 +1,17 @@
-export * from './xlsx.js'
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid util/xlsx.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+import { type ExportScope, type ExportTable } from './export-table.mjs';
+export interface XlsxOptions {
+    scope?: ExportScope;
+    sheetName?: string;
+}
+export interface XlsxDownloadOptions extends XlsxOptions {
+    filename?: string;
+}
+export type XlsxTable = ExportTable;
+export declare const exportXlsx: (table: XlsxTable, options?: XlsxOptions) => Uint8Array;
+export declare const downloadXlsx: (table: XlsxTable, options?: XlsxDownloadOptions) => void;

package/dist/types/util/zip.d.mts

@@ -0,0 +1,11 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid util/zip.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+export interface ZipEntry {
+    name: string;
+    data: Uint8Array;
+}
+export declare const zip: (entries: ZipEntry[]) => Uint8Array;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coreui/data-grid",
-  "description": "High-performance vanilla JavaScript data grid for CoreUI \u2014 100,000 rows with sorting, filtering, selection, pagination, and server-side data",
-  "version": "0.3.0-rc.0",
+  "description": "High-performance vanilla JavaScript data grid for CoreUI — 100,000 rows with sorting, filtering, selection, pagination, and server-side data",
+  "version": "0.4.0",
   "keywords": [
     "coreui",
     "data-grid",
@@ -26,7 +26,7 @@
     "js": "npm-run-all js-compile js-types js-minify",
     "js-compile": "rolldown --config build/rolldown.config.mjs --sourcemap",
     "js-minify": "npm-run-all --aggregate-output --parallel js-minify-*",
-    "js-types": "tsc --project tsconfig.types.json && node build/types-esm-shims.mjs",
+    "js-types": "tsc --project tsconfig.types.json && node build/types-esm.mjs dist/types",
     "js-minify-lite": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/data-grid.lite.js.map,includeSources,url=data-grid.lite.min.js.map\" --output dist/js/data-grid.lite.min.js dist/js/data-grid.lite.js",
     "js-minify-lite-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/data-grid.lite.esm.js.map,includeSources,url=data-grid.lite.esm.min.js.map\" --output dist/js/data-grid.lite.esm.min.js dist/js/data-grid.lite.esm.js",
     "js-minify-standalone": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/data-grid.js.map,includeSources,url=data-grid.min.js.map\" --output dist/js/data-grid.min.js dist/js/data-grid.js",
@@ -134,6 +134,16 @@
         "default": "./dist/js/direction.cjs"
       }
     },
+    "./selector": {
+      "import": {
+        "types": "./dist/types/util/selector.d.mts",
+        "default": "./dist/js/selector.mjs"
+      },
+      "require": {
+        "types": "./dist/types/util/selector.d.ts",
+        "default": "./dist/js/selector.cjs"
+      }
+    },
     "./validate": {
       "import": {
         "types": "./dist/types/engine/validate.d.mts",
@@ -188,6 +198,9 @@
       "direction": [
         "dist/types/util/direction.d.ts"
       ],
+      "selector": [
+        "dist/types/util/selector.d.ts"
+      ],
       "validate": [
         "dist/types/engine/validate.d.ts"
       ],
@@ -208,26 +221,26 @@
   },
   "license": "SEE LICENSE IN LICENSE",
   "dependencies": {
-    "@tanstack/store": "^0.11.0",
-    "@tanstack/table-core": "^9.0.0",
-    "@tanstack/virtual-core": "^3.17.3"
+    "@tanstack/store": "^0.11.2",
+    "@tanstack/table-core": "^9.3.1",
+    "@tanstack/virtual-core": "^3.19.6"
   },
   "devDependencies": {
-    "@vitest/coverage-v8": "^4.1.10",
-    "autoprefixer": "^10.5.2",
-    "browserslist": "^4.28.7",
+    "@vitest/coverage-v8": "^5.0.5",
+    "autoprefixer": "^10.6.1",
+    "browserslist": "^4.29.4",
     "clean-css-cli": "^5.6.3",
     "jsdom": "^29.1.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.5.15",
-    "postcss-cli": "^11.0.1",
+    "postcss": "^8.5.31",
+    "postcss-cli": "^12.0.0",
     "rimraf": "^6.1.3",
-    "rolldown": "^1.2.3",
-    "sass-embedded": "^1.100.0",
-    "terser": "5.48.0",
+    "rolldown": "^1.2.15",
+    "sass-embedded": "^1.106.1",
+    "terser": "5.51.2",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3",
-    "vitest": "^4.1.10"
+    "typescript": "~6.0.3",
+    "vitest": "^5.0.5"
   },
   "files": [
     "dist/{css,js,types}/**",

package/scss/data-grid.scss

@@ -1,5 +1,5 @@
 /*!
- * CoreUI PRO data-grid.scss v0.3.0
+ * CoreUI PRO data-grid.scss v0.4.0
  * License (https://coreui.io/pro/license/)
  */
 

package/src/data-grid.ts

@@ -51,6 +51,7 @@ import {
 } from './util/csv'
 import { debounce } from './util/debounce'
 import { DefaultAllowlist, sanitizeHtml, SVGAllowlist } from './util/sanitizer.js'
+import { escapeAttributeValue } from './util/selector'
 
 /**
  * Constants
@@ -1660,12 +1661,12 @@ private _undoStack: DataGridEditCommitEntry[] = []
   private _cellElementFor(cell: ActiveCell): HTMLElement | null {
     if (cell.rowIndex === -1) {
       return this._header.element.querySelector<HTMLElement>(
-        `tr:first-child th[data-coreui-column="${cell.columnId}"]`
+        `tr:first-child th[data-coreui-column="${escapeAttributeValue(cell.columnId)}"]`
       )
     }
 
-    const rowElement = this._body.element.querySelector<HTMLElement>(`tr[data-coreui-index="${cell.rowIndex}"]`)
-    return rowElement?.querySelector<HTMLElement>(`td[data-coreui-column="${cell.columnId}"]`) ?? null
+    const rowElement = this._body.element.querySelector<HTMLElement>(`tr[data-coreui-index="${escapeAttributeValue(cell.rowIndex)}"]`)
+    return rowElement?.querySelector<HTMLElement>(`td[data-coreui-column="${escapeAttributeValue(cell.columnId)}"]`) ?? null
   }
 
   // The roving-tabindex pass: runs after every render/recycle flush, in the

package/src/engine/active-cell.ts

@@ -89,15 +89,11 @@ export const resolveNavigation = (
 
   switch (key) {
     case 'ArrowLeft': {
-      return rtl ?
-        cell(current.rowIndex, Math.min(columnIndex + 1, lastColumn)) :
-        cell(current.rowIndex, Math.max(columnIndex - 1, 0))
+      return cell(current.rowIndex, rtl ? Math.min(columnIndex + 1, lastColumn) : Math.max(columnIndex - 1, 0))
     }
 
     case 'ArrowRight': {
-      return rtl ?
-        cell(current.rowIndex, Math.max(columnIndex - 1, 0)) :
-        cell(current.rowIndex, Math.min(columnIndex + 1, lastColumn))
+      return cell(current.rowIndex, rtl ? Math.max(columnIndex - 1, 0) : Math.min(columnIndex + 1, lastColumn))
     }
 
     case 'ArrowUp': {

package/src/index-lite.ts

@@ -20,7 +20,7 @@ class DataGrid<TFeatures extends TableFeatures = DataGridLiteFeatures> extends D
     // The lite preset is deliberately narrower than the options' invariant
     // features type - the coverage assertion, not the type, polices a config
     // the set cannot serve.
-    return { ...DataGridBase.Default, features: dataGridLiteFeatures as unknown as DataGridFeatures }
+    return { ...super.Default, features: dataGridLiteFeatures as unknown as DataGridFeatures }
   }
 }
 

package/src/index.ts

@@ -16,7 +16,7 @@ import { defineJQueryPlugin } from './util/index.js'
 // keeps the full set out of the lite bundle.
 class DataGrid<TFeatures extends TableFeatures = DataGridFeatures> extends DataGridBase<TFeatures> {
   static get Default(): DataGridOptions {
-    return { ...DataGridBase.Default, features: dataGridFeatures }
+    return { ...super.Default, features: dataGridFeatures }
   }
 }
 

package/src/ui/column-chooser.ts

@@ -57,8 +57,8 @@ export const createColumnChooser = (context: GridColumnChooserContext): GridColu
 
     trigger = null
     element.remove()
-    document.removeEventListener('pointerdown', onOutsidePointerDown, true)
-    window.removeEventListener('scroll', onWindowChange, true)
+    document.removeEventListener('pointerdown', onOutsidePointerDown, { capture: true })
+    window.removeEventListener('scroll', onWindowChange, { capture: true })
     window.removeEventListener('resize', onWindowChange)
   }
 
@@ -156,8 +156,8 @@ export const createColumnChooser = (context: GridColumnChooserContext): GridColu
     element.style.top = `${buttonRect.bottom - rootRect.top}px`
     element.style.left = `${Math.max(buttonRect.left - rootRect.left, 0)}px`
 
-    document.addEventListener('pointerdown', onOutsidePointerDown, true)
-    window.addEventListener('scroll', onWindowChange, true)
+    document.addEventListener('pointerdown', onOutsidePointerDown, { capture: true })
+    window.addEventListener('scroll', onWindowChange, { capture: true })
     window.addEventListener('resize', onWindowChange)
     element.querySelector<HTMLElement>('input:not(:disabled)')?.focus()
   }

package/src/ui/filter-menu.ts

@@ -82,8 +82,8 @@ export const createFilterMenu = (context: GridFilterMenuContext): GridFilterMenu
 
     trigger = null
     element.remove()
-    document.removeEventListener('pointerdown', onOutsidePointerDown, true)
-    window.removeEventListener('scroll', onWindowChange, true)
+    document.removeEventListener('pointerdown', onOutsidePointerDown, { capture: true })
+    window.removeEventListener('scroll', onWindowChange, { capture: true })
     window.removeEventListener('resize', onWindowChange)
   }
 
@@ -157,7 +157,6 @@ export const createFilterMenu = (context: GridFilterMenuContext): GridFilterMenu
   const readCondition = (row: HTMLElement): DataGridFilterCondition | null => {
     const operator = row.querySelector('select')!.value as DataGridFilterOperator
     const { value } = (row.querySelector<HTMLInputElement>('[data-coreui-filter-value]')!)
-    const value2 = row.querySelector<HTMLInputElement>('[data-coreui-filter-value2]')!.value
 
     if (VALUELESS_OPERATORS.has(operator)) {
       return { operator }
@@ -167,6 +166,7 @@ export const createFilterMenu = (context: GridFilterMenuContext): GridFilterMenu
       return null
     }
 
+    const value2 = row.querySelector<HTMLInputElement>('[data-coreui-filter-value2]')!.value
     return {
       operator,
       value,
@@ -371,8 +371,8 @@ export const createFilterMenu = (context: GridFilterMenuContext): GridFilterMenu
     element.style.top = `${buttonRect.bottom - rootRect.top}px`
     element.style.left = `${Math.max(buttonRect.right - rootRect.left - element.offsetWidth, 0)}px`
 
-    document.addEventListener('pointerdown', onOutsidePointerDown, true)
-    window.addEventListener('scroll', onWindowChange, true)
+    document.addEventListener('pointerdown', onOutsidePointerDown, { capture: true })
+    window.addEventListener('scroll', onWindowChange, { capture: true })
     window.addEventListener('resize', onWindowChange)
     element.querySelector<HTMLElement>('select, input')?.focus()
   }

package/src/ui/menu.ts

@@ -49,8 +49,8 @@ export const createMenu = (context: GridMenuContext): GridMenu => {
 
     trigger = null
     element.remove()
-    document.removeEventListener('pointerdown', onOutsidePointerDown, true)
-    window.removeEventListener('scroll', onWindowChange, true)
+    document.removeEventListener('pointerdown', onOutsidePointerDown, { capture: true })
+    window.removeEventListener('scroll', onWindowChange, { capture: true })
     window.removeEventListener('resize', onWindowChange)
   }
 
@@ -191,8 +191,8 @@ export const createMenu = (context: GridMenuContext): GridMenu => {
     // sits at the cell's right edge, where a left-aligned menu would overflow.
     element.style.left = `${Math.max(buttonRect.right - rootRect.left - element.offsetWidth, 0)}px`
 
-    document.addEventListener('pointerdown', onOutsidePointerDown, true)
-    window.addEventListener('scroll', onWindowChange, true)
+    document.addEventListener('pointerdown', onOutsidePointerDown, { capture: true })
+    window.addEventListener('scroll', onWindowChange, { capture: true })
     window.addEventListener('resize', onWindowChange)
     items()[0]?.focus()
   }

package/src/ui/pagination.ts

@@ -137,7 +137,7 @@ export const createPagination = (context: GridPaginationContext): GridPagination
 
       // A configured pageSize outside pageSizeOptions would leave the select
       // blank; surface it as an extra option in numeric position.
-      if (![...select.options].some(option => option.value === String(state.pageSize))) {
+      if ([...select.options].every(option => option.value !== String(state.pageSize))) {
         const option = document.createElement('option')
         option.value = String(state.pageSize)
         option.textContent = String(state.pageSize)

package/src/ui/tooltip.ts

@@ -96,7 +96,7 @@ export const createTooltip = (root: HTMLElement): GridTooltip => {
   root.addEventListener('pointerdown', hide)
   root.addEventListener('focusin', onFocusIn as EventListener)
   root.addEventListener('focusout', hide)
-  window.addEventListener('scroll', hide, true)
+  window.addEventListener('scroll', hide, { capture: true })
 
   return {
     dispose() {
@@ -106,7 +106,7 @@ export const createTooltip = (root: HTMLElement): GridTooltip => {
       root.removeEventListener('pointerdown', hide)
       root.removeEventListener('focusin', onFocusIn as EventListener)
       root.removeEventListener('focusout', hide)
-      window.removeEventListener('scroll', hide, true)
+      window.removeEventListener('scroll', hide, { capture: true })
       element.remove()
     }
   }

package/src/util/csv.ts

@@ -43,12 +43,12 @@ export const exportCsv = (table: CsvTable, options: CsvOptions = {}): string =>
       const value = row.getValue(column.id)
       const formatter = formatterFor(column)
       // Coerce: a formatter may return a number/null in plain-JS usage.
-      return formatter ? String(formatter(value, row.original) ?? '') : String(value ?? '')
+      return String(formatter ? formatter(value, row.original) ?? '' : value ?? '')
     }))
   )
 
   const csv = [header, ...body].join('\r\n')
-  return options.bom ? `\uFEFF${csv}` : csv
+  return options.bom ? `\u{FEFF}${csv}` : csv
 }
 
 export const downloadCsv = (table: CsvTable, options: CsvDownloadOptions = {}): void => {

package/src/util/direction.ts

@@ -13,9 +13,10 @@
 // layout to have a direction. LTR is the right answer there: the server-side
 // pass emits logical markup either way, and the client corrects on hydration.
 export const isElementRTL = (element: Element | null | undefined): boolean =>
-  typeof getComputedStyle === 'function' && element ?
-    getComputedStyle(element).direction === 'rtl' :
-    false
+  typeof getComputedStyle === 'function' &&
+  element !== null &&
+  element !== undefined &&
+  getComputedStyle(element).direction === 'rtl'
 
 interface ResizeDirectionTable {
   options: { columnResizeDirection?: 'ltr' | 'rtl' }

package/src/util/drag.ts

@@ -5,6 +5,8 @@
  * --------------------------------------------------------------------------
  */
 
+import { escapeAttributeValue } from './selector'
+
 // The one drag implementation behind every reorder in the grid: column drag
 // (axis 'x', over the header) and row drag (axis 'y', over the body). It is
 // headless in the sense that matters — it never reads the table, only what the
@@ -726,7 +728,7 @@ const columnItems = (root: HTMLElement): DragItems => ({
     [...root.querySelectorAll<HTMLTableCellElement>('thead tr:first-child th[data-coreui-column]')]
       .map(cell => cell.dataset.coreuiColumn ?? ''),
   getElements(id) {
-    const header = root.querySelector<HTMLTableCellElement>(`thead th[data-coreui-column="${id}"]`)
+    const header = root.querySelector<HTMLTableCellElement>(`thead th[data-coreui-column="${escapeAttributeValue(id)}"]`)
     if (!header) {
       return []
     }
@@ -775,7 +777,7 @@ export const createColumnDragController = (options: ColumnDragOptions): DragCont
     // consumer's own veto — an immovable column is not somewhere to land.
     canDrop: (sourceId, targetId) =>
       sourceId !== targetId &&
-      Boolean(options.root.querySelector(`th[data-coreui-column="${targetId}"][data-coreui-draggable]`)) &&
+      Boolean(options.root.querySelector(`th[data-coreui-column="${escapeAttributeValue(targetId)}"][data-coreui-draggable]`)) &&
       options.canDrop(sourceId, targetId),
     preview: true,
     onDrop: (sourceKey, drop) => options.onReorder(sourceKey, drop.id, drop.after)
@@ -788,7 +790,7 @@ const rowItems = (root: HTMLElement): DragItems => ({
   getOrderedIds: () =>
     [...root.querySelectorAll<HTMLElement>(`tbody ${SELECTOR_ROW}`)].map(row => row.dataset.coreuiIndex ?? ''),
   getElements(id) {
-    const row = root.querySelector<HTMLElement>(`tbody tr[data-coreui-index="${id}"]`)
+    const row = root.querySelector<HTMLElement>(`tbody tr[data-coreui-index="${escapeAttributeValue(id)}"]`)
     return row ? [row] : []
   }
 })

package/src/util/selector.ts

@@ -0,0 +1,16 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid util/selector.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+/**
+ * Escapes a column key or row index for a double-quoted CSS attribute selector value.
+ * @param value The key or index interpolated into `[data-…="…"]`.
+ * @returns The value as a string, with `"` and `\` backslash-escaped and line breaks as hex escapes.
+ */
+export const escapeAttributeValue = (value: string | number): string =>
+  String(value)
+    .replace(/["\\]/g, '\\$&')
+    .replace(/[\n\r\f]/g, character => `\\${character.codePointAt(0)!.toString(16)} `)

package/src/util/xlsx.ts

@@ -33,7 +33,7 @@ const MAX_COLUMN_WIDTH = 120
 // XML 1.0 forbids most control characters outright - Excel refuses to open a
 // file containing them, so they are dropped rather than escaped.
 // eslint-disable-next-line no-control-regex -- matching them is the point
-const CONTROL_CHARACTERS = /[\u0000-\u0008\u000B\u000C\u000E-\u001F]/g
+const CONTROL_CHARACTERS = /[\u{0}-\u{8}\u{B}\u{C}\u{E}-\u{1F}]/gu
 
 const escapeXml = (value: string): string =>
   value