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

package/scss/data-grid.standalone.scss

@@ -0,0 +1,16 @@
+/*!
+ * CoreUI PRO data-grid.standalone.scss v0.1.0
+ * License (https://coreui.io/pro/license/)
+ */
+
+// The grid plus the base styles it would otherwise borrow from
+// @coreui/coreui(-pro). Load this INSTEAD of data-grid.css when the CoreUI
+// stylesheet is not on the page.
+
+// scss-docs-start import-stack
+@forward "config";
+@forward "functions";
+@forward "mixins";
+@forward "base";
+@forward "components/data-grid";
+// scss-docs-end import-stack

package/scss/functions/_defaults.scss

@@ -0,0 +1,25 @@
+// Vendored from @coreui/coreui-pro (scss/functions/_defaults.scss, v6 line).
+// Sync manually — do not diverge.
+
+@use "sass:map";
+@use "sass:meta";
+
+// Merge overrides on top of defaults, stripping null entries.
+// Null values let users remove map keys via @use ... with().
+// Accepts a list as $defaults (converted to a map with `true` values).
+@function defaults($defaults, $overrides) {
+  @if meta.type-of($defaults) == "list" {
+    $map: ();
+    @each $key in $defaults {
+      $map: map.merge($map, ($key: true));
+    }
+    $defaults: $map;
+  }
+  $merged: map.merge($defaults, $overrides);
+  @each $key, $value in $merged {
+    @if $value == null {
+      $merged: map.remove($merged, $key);
+    }
+  }
+  @return $merged;
+}

package/scss/mixins/_tokens.scss

@@ -0,0 +1,12 @@
+// Vendored from @coreui/coreui-pro (scss/mixins/_tokens.scss, v6 line).
+// Sync manually — do not diverge.
+
+// Output a token map as CSS custom properties
+
+// scss-docs-start mixin-tokens
+@mixin tokens($map) {
+  @each $prop, $value in $map {
+    #{$prop}: #{$value};
+  }
+}
+// scss-docs-end mixin-tokens

package/src/data-grid.ts

@@ -20,6 +20,7 @@ import {
 } from './util/drag'
 import { createScheduler, type Scheduler } from './engine/scheduler'
 import { createGridTable, subscribeToTableState } from './engine/table'
+import { isElementRTL, syncResizeDirection } from './util/direction'
 import { createGridVirtualizer, type GridVirtualizer } from './engine/virtualizer'
 import {
   DEFAULT_COLUMN_MENU_ICON, DEFAULT_FILTER_ICON, DEFAULT_HIDE_COLUMN_ICON, DEFAULT_MOVE_END_ICON, DEFAULT_MOVE_START_ICON,
@@ -50,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
@@ -134,6 +136,12 @@ const STATE_STORAGE_PREFIX = 'coreui-data-grid:'
 const STATE_AUTOSAVE_DEBOUNCE_MS = 250
 const HISTORY_LIMIT = 100
 
+// Under RTL the two horizontal keys point at the opposite logical neighbour.
+const INVERTED_ARROWS: Record<string, string | undefined> = {
+  ArrowLeft: 'ArrowRight',
+  ArrowRight: 'ArrowLeft'
+}
+
 const CELL_SELECTION_DIRECTIONS: Record<string, 'up' | 'down' | 'left' | 'right' | undefined> = {
   ArrowDown: 'down',
   ArrowLeft: 'left',
@@ -567,7 +575,7 @@ private _undoStack: DataGridEditCommitEntry[] = []
 
   private _createTable(): DataGridTable {
     this._unsubscribeState?.()
-    const table = createGridTable(this._config)
+    const table = createGridTable(this._config, () => this._element)
     this._unsubscribeState = subscribeToTableState(table, (previous, next) => {
       this._notifyStateChange(previous, next)
       this._scheduler.schedule()
@@ -1293,7 +1301,9 @@ private _undoStack: DataGridEditCommitEntry[] = []
     // Shift+arrow grows the range from its anchor and leaves focus put; a
     // plain arrow moves focus and collapses the range to the new cell.
     if (this._config.cellSelection && found.cell.rowIndex >= 0 && result.cell.rowIndex >= 0) {
-      const direction = CELL_SELECTION_DIRECTIONS[event.key]
+      const direction = CELL_SELECTION_DIRECTIONS[
+        isElementRTL(this._element) ? (INVERTED_ARROWS[event.key] ?? event.key) : event.key
+      ]
       if (event.shiftKey && direction) {
         this._table.extendCellSelection(direction)
         this._scheduler.schedule()
@@ -1643,19 +1653,20 @@ private _undoStack: DataGridEditCommitEntry[] = []
       pageStep: paginated ?
         this._table.store.state.pagination.pageSize :
         Math.max(1, viewportRows || rowCount),
-      paginated
+      paginated,
+      rtl: isElementRTL(this._element)
     }
   }
 
   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
@@ -1975,6 +1986,11 @@ private _undoStack: DataGridEditCommitEntry[] = []
       event.preventDefault()
     }
 
+    // The direction table-core snapshotted at construction may be stale — an
+    // app that swaps language flips dir on a live grid. A resize is the only
+    // moment it matters, and it is rare enough to re-read here.
+    syncResizeDirection(this._table, this._element)
+
     const header = this._table.getHeaderGroups()[0]?.headers.find(item => item.column.id === key)
     header?.getResizeHandler()(event)
   }

package/src/engine/active-cell.ts

@@ -23,6 +23,9 @@ export interface ActiveCellContext {
   // page size (paginated).
   pageStep: number
   paginated: boolean
+  // Writing direction of the grid. Arrow keys are physical, column order is
+  // logical, so under RTL the two horizontal keys trade places.
+  rtl?: boolean
 }
 
 export interface NavigationResult {
@@ -72,7 +75,7 @@ export const resolveNavigation = (
   current: ActiveCell,
   context: ActiveCellContext
 ): NavigationResult | null => {
-  const { columnIds, rowCount, pageStep, paginated } = context
+  const { columnIds, rowCount, pageStep, paginated, rtl } = context
   const columnIndex = columnIds.indexOf(current.columnId)
   if (columnIndex === -1 || columnIds.length === 0) {
     return null
@@ -86,11 +89,11 @@ export const resolveNavigation = (
 
   switch (key) {
     case 'ArrowLeft': {
-      return 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 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/engine/table.ts

@@ -7,6 +7,7 @@
 
 import { constructTable, type FilterFn } from '@tanstack/table-core'
 import { evaluateColumnFilter } from '../filters'
+import { isElementRTL } from '../util/direction'
 import type {
  DataGridColumn, DataGridColumnFilterValue, DataGridFeatures, DataGridItem, DataGridOptions,
  DataGridTable, DataGridTableState
@@ -27,7 +28,10 @@ const toTanStackFilterFn = (column: DataGridColumn): FilterFn<DataGridFeatures,
     evaluateColumnFilter(row.getValue(columnId), filterValue as DataGridColumnFilterValue, column.filterType)
 }
 
-export const createGridTable = (options: DataGridOptions): DataGridTable => {
+export const createGridTable = (
+  options: DataGridOptions,
+  getElement?: () => Element | null
+): DataGridTable => {
   const sortingOptions = typeof options.sorting === 'object' ? options.sorting : {}
   const sizingOptions = typeof options.columnSizing === 'object' ? options.columnSizing : {}
   const paginationOptions = typeof options.pagination === 'object' ? options.pagination : {}
@@ -112,6 +116,10 @@ export const createGridTable = (options: DataGridOptions): DataGridTable => {
       }
     }),
     columnResizeMode: sizingOptions.mode ?? 'onChange',
+    // Construction-time only — table-core copies the options object, so a
+    // getter here would never be re-read. A direction flipped later is picked
+    // up by refreshing this through setOptions when a resize starts.
+    columnResizeDirection: isElementRTL(getElement?.()) ? 'rtl' : 'ltr',
     data: serverSide ? [] : options.items,
     enableCellSelection: Boolean(options.cellSelection),
     enableColumnFilters: Boolean(options.columnFilters),

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

@@ -0,0 +1,38 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid util/direction.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+// Read from the element rather than the document: a grid can sit inside an RTL
+// subtree of an LTR page, which is why the vendored isRTL() (it checks
+// documentElement.dir) is not the helper for any of this.
+//
+// Angular prerenders in Node, where there is no getComputedStyle — and no
+// 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 !== null &&
+  element !== undefined &&
+  getComputedStyle(element).direction === 'rtl'
+
+interface ResizeDirectionTable {
+  options: { columnResizeDirection?: 'ltr' | 'rtl' }
+  setOptions: (updater: (previous: { columnResizeDirection?: 'ltr' | 'rtl' }) => never) => void
+}
+
+// table-core copies the options object at construction, so the direction it
+// captured goes stale the moment an app swaps language on a live grid. A
+// resize is the only place the value is read, and starting one is rare enough
+// to re-read the element here.
+export const syncResizeDirection = (
+  table: ResizeDirectionTable,
+  element: Element | null | undefined
+): void => {
+  const direction = isElementRTL(element) ? 'rtl' : 'ltr'
+  if (table.options.columnResizeDirection !== direction) {
+    table.setOptions(previous => ({ ...previous, columnResizeDirection: direction }) as never)
+  }
+}

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
@@ -124,6 +126,17 @@ export const createDragController = (options: DragControllerOptions): DragContro
 
   let sourceHit: DragHit | null = null
   let dragging = false
+  // +1 while the axis runs the way the coordinates do, -1 under RTL, where the
+  // logical column order runs against increasing x. Negating the axis keeps
+  // every comparison below — the zone tiling, the hysteresis band, both edge
+  // clamps, `index > fromIndex` — written once, for one direction. Only the
+  // three places that touch pixels again convert back: the indicator's side,
+  // the preview transform and the settling ghost.
+  //
+  // Read from the grid's own computed direction rather than the document's: a
+  // grid can sit in an RTL subtree of an LTR page, which is exactly the case
+  // the vendored isRTL() cannot see.
+  let axisSign = 1
   let origin = { x: 0, y: 0 }
   let pointer = { x: 0, y: 0 }
   let drop: DragDrop | null = null
@@ -147,6 +160,18 @@ export const createDragController = (options: DragControllerOptions): DragContro
   const contentStarts = new Map<string, number>()
   const contentSizes = new Map<string, number>()
 
+  // A rect's logical start: its leading edge along the axis, in the negated
+  // space when the axis is negated, so the span stays [start, start + size].
+  const logicalStart = (rect: DOMRect): number => {
+    if (!horizontal) {
+      return rect.top
+    }
+
+    return axisSign === 1 ? rect.left : -rect.right
+  }
+
+  const logicalPointer = (): number => (horizontal ? pointer.x * axisSign : pointer.y)
+
   const stopAutoScroll = () => {
     if (scrollFrame) {
       cancelAnimationFrame(scrollFrame)
@@ -212,7 +237,9 @@ export const createDragController = (options: DragControllerOptions): DragContro
     const rootRect = root.getBoundingClientRect()
     indicator.hidden = false
     if (horizontal) {
-      indicator.style.left = `${after ? rect.right : rect.left}px`
+      // `after` is logical; which pixel edge that is flips with the axis.
+      const trailing = after === (axisSign === 1)
+      indicator.style.left = `${trailing ? rect.right : rect.left}px`
       indicator.style.top = `${rootRect.top}px`
       indicator.style.height = `${rootRect.height}px`
     } else {
@@ -224,6 +251,7 @@ export const createDragController = (options: DragControllerOptions): DragContro
 
   const startDrag = () => {
     dragging = true
+    axisSign = horizontal && getComputedStyle(root).direction === 'rtl' ? -1 : 1
     // Chrome focuses a button on mousedown (a press on a header lands on the
     // sort button), and tearing a FOCUSED element out of the DOM — which the
     // drop's header re-append does — makes the browser reset the scroller it
@@ -284,7 +312,11 @@ export const createDragController = (options: DragControllerOptions): DragContro
     }
 
     const rect = scrollElement.getBoundingClientRect()
-    return horizontal ? rect.left - scrollElement.scrollLeft : rect.top - scrollElement.scrollTop
+    // scrollLeft stays a physical axis in every engine (RTL just runs it
+    // negative), so it enters the negated space through the sign.
+    return horizontal ?
+      logicalStart(rect) - (axisSign * scrollElement.scrollLeft) :
+      rect.top - scrollElement.scrollTop
   }
 
   const captureItem = (id: string, origin: number): boolean => {
@@ -296,7 +328,7 @@ export const createDragController = (options: DragControllerOptions): DragContro
     const rect = element.getBoundingClientRect()
     // Corrected by the applied delta for items first seen mid-preview (a row
     // revealed by auto-scroll); at drag start every delta is zero.
-    const start = (horizontal ? rect.left : rect.top) - (previewDeltas.get(id) ?? 0)
+    const start = logicalStart(rect) - (previewDeltas.get(id) ?? 0)
     contentStarts.set(id, start - origin)
     contentSizes.set(id, horizontal ? rect.width : rect.height)
     return true
@@ -312,7 +344,7 @@ export const createDragController = (options: DragControllerOptions): DragContro
   }
 
   const updateTarget = () => {
-    const position = horizontal ? pointer.x : pointer.y
+    const position = logicalPointer()
     const origin = contentOrigin()
 
     const zones: Array<{ id: string; start: number; size: number }> = []
@@ -477,7 +509,9 @@ export const createDragController = (options: DragControllerOptions): DragContro
       }
 
       for (const element of options.items.getElements(id)) {
-        element.style.transform = horizontal ? `translateX(${delta}px)` : `translateY(${delta}px)`
+        element.style.transform = horizontal ?
+          `translateX(${axisSign * delta}px)` :
+          `translateY(${delta}px)`
         element.classList.add(CLASS_NAME_PREVIEW)
       }
 
@@ -531,7 +565,9 @@ export const createDragController = (options: DragControllerOptions): DragContro
     }
 
     const delta = previewDeltas.get(sourceHit.id) ?? 0
-    return horizontal ? { x: rect.left - delta, y: rect.top } : { x: rect.left, y: rect.top - delta }
+    return horizontal ?
+      { x: rect.left - (axisSign * delta), y: rect.top } :
+      { x: rect.left, y: rect.top - delta }
   }
 
   const cleanup = () => {
@@ -692,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 []
     }
@@ -741,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)
@@ -754,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