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

package/src/ui/pinning.ts

@@ -5,16 +5,16 @@
  * --------------------------------------------------------------------------
  */
 
-const CLASS_LEFT = 'data-grid-cell-pinned-left'
-const CLASS_RIGHT = 'data-grid-cell-pinned-right'
-const CLASS_LEFT_LAST = 'data-grid-cell-pinned-left-last'
-const CLASS_RIGHT_FIRST = 'data-grid-cell-pinned-right-first'
+const CLASS_START = 'data-grid-cell-pinned-start'
+const CLASS_END = 'data-grid-cell-pinned-end'
+const CLASS_START_LAST = 'data-grid-cell-pinned-start-last'
+const CLASS_END_FIRST = 'data-grid-cell-pinned-end-first'
 
 export interface PinnedCellInfo {
-  side: 'left' | 'right'
+  side: 'start' | 'end'
   offset: number
   edge: boolean
-  // A left offset that has to clear the (sticky) selection cell; expressed as a
+  // A start offset that has to clear the (sticky) selection cell; expressed as a
   // CSS calc so the select-cell width stays a single source of truth in CSS.
   afterSelect: boolean
 }
@@ -25,29 +25,29 @@ export interface GridPinning {
 }
 
 export const applyPinnedCell = (cell: HTMLTableCellElement, info: PinnedCellInfo | null): void => {
-  cell.classList.remove(CLASS_LEFT, CLASS_RIGHT, CLASS_LEFT_LAST, CLASS_RIGHT_FIRST)
-  cell.style.left = ''
-  cell.style.right = ''
+  cell.classList.remove(CLASS_START, CLASS_END, CLASS_START_LAST, CLASS_END_FIRST)
+  cell.style.insetInlineStart = ''
+  cell.style.insetInlineEnd = ''
 
   if (!info) {
     return
   }
 
-  if (info.side === 'left') {
-    cell.classList.add(CLASS_LEFT)
+  if (info.side === 'start') {
+    cell.classList.add(CLASS_START)
     if (info.edge) {
-      cell.classList.add(CLASS_LEFT_LAST)
+      cell.classList.add(CLASS_START_LAST)
     }
 
-    cell.style.left = info.afterSelect ?
+    cell.style.insetInlineStart = info.afterSelect ?
       `calc(var(--cui-data-grid-select-cell-width) + ${info.offset}px)` :
       `${info.offset}px`
   } else {
-    cell.classList.add(CLASS_RIGHT)
+    cell.classList.add(CLASS_END)
     if (info.edge) {
-      cell.classList.add(CLASS_RIGHT_FIRST)
+      cell.classList.add(CLASS_END_FIRST)
     }
 
-    cell.style.right = `${info.offset}px`
+    cell.style.insetInlineEnd = `${info.offset}px`
   }
 }

package/src/ui/toolbar.ts

@@ -5,7 +5,7 @@
  * --------------------------------------------------------------------------
  */
 
-import type { CsvDownloadOptions } from '../util/csv'
+import type { CsvDownloadOptions, CsvTable } from '../util/csv'
 import type { DataGridLabels, DataGridOptions } from '../types'
 
 const CLASS_NAME_TOOLBAR = 'data-grid-toolbar'
@@ -19,10 +19,12 @@ export interface GridToolbarContext {
   // Undo/redo of edit commits - both buttons start disabled, the grid
   // toggles them as the history stacks fill.
   history: boolean
+  print: boolean
   search: boolean
   icons: {
     columns: string
     export: string
+    print: string
     redo: string
     undo: string
   }
@@ -32,11 +34,24 @@ export interface GridToolbar {
   element: HTMLDivElement
 }
 
+export type DataGridExporter = (table: CsvTable, options: DataGridExportOptions) => void
+
+export interface DataGridExportOptions extends CsvDownloadOptions {
+  // Sheet name for spreadsheet writers; the CSV writer ignores it.
+  sheetName?: string
+  // The writer the toolbar button calls, defaulting to the built-in CSV one.
+  // Pass `downloadXlsx` from `@coreui/data-grid/xlsx` for Excel. It is
+  // INJECTED, never imported by the grid: a writer only reaches the app
+  // bundle when the app asks for it.
+  exporter?: DataGridExporter
+}
+
 export interface ResolvedToolbar {
   columns: boolean
   export: boolean
-  exportOptions: CsvDownloadOptions
+  exportOptions: DataGridExportOptions
   history: boolean
+  print: boolean
   search: boolean
 }
 
@@ -53,6 +68,7 @@ export const resolveToolbar = (options: DataGridOptions): ResolvedToolbar => {
       export: true,
       exportOptions: {},
       history: options.history,
+      print: true,
       search: true
     }
   }
@@ -64,6 +80,7 @@ export const resolveToolbar = (options: DataGridOptions): ResolvedToolbar => {
       export: Boolean(exportOption),
       exportOptions: typeof exportOption === 'object' ? exportOption : {},
       history: (toolbar.history ?? false) && options.history,
+      print: toolbar.print ?? false,
       search: (toolbar.search ?? false) || Boolean(options.globalFilter)
     }
   }
@@ -73,6 +90,7 @@ export const resolveToolbar = (options: DataGridOptions): ResolvedToolbar => {
     export: false,
     exportOptions: {},
     history: false,
+    print: false,
     search: Boolean(options.globalFilter)
   }
 }
@@ -98,7 +116,7 @@ export const createToolbar = (context: GridToolbarContext): GridToolbar => {
   const element = document.createElement('div')
   element.classList.add(CLASS_NAME_TOOLBAR)
 
-  if (context.columns || context.export || context.history) {
+  if (context.columns || context.export || context.print || context.history) {
     const actions = document.createElement('div')
     actions.classList.add(CLASS_NAME_ACTIONS)
 
@@ -114,6 +132,12 @@ export const createToolbar = (context: GridToolbarContext): GridToolbar => {
       )
     }
 
+    if (context.print) {
+      actions.append(
+        createActionButton(context.icons.print, context.labels.toolbarPrint, 'data-coreui-toolbar-print')
+      )
+    }
+
     if (context.history) {
       const undoButton = createActionButton(context.icons.undo, context.labels.toolbarUndo, 'data-coreui-toolbar-undo')
       const redoButton = createActionButton(context.icons.redo, context.labels.toolbarRedo, 'data-coreui-toolbar-redo')

package/src/util/clipboard.ts

@@ -0,0 +1,112 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid util/clipboard.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+import type { DataGridItem } from '../types'
+
+// table-core resolves the selection to index rectangles and leaves the text to
+// userland, "since the delimiter, the null representation, and any quoting
+// rules are application decisions". This is that decision, made once for all
+// four editions: TSV, because that is what spreadsheets paste as columns.
+
+const DELIMITER = '\t'
+const ROW_SEPARATOR = '\n'
+// Disjoint regions are separated the way a spreadsheet shows a gap.
+const REGION_SEPARATOR = '\n\n'
+
+export interface ClipboardBounds {
+  maxColumnIndex: number
+  maxRowIndex: number
+  minColumnIndex: number
+  minRowIndex: number
+}
+
+export interface ClipboardRow {
+  getValue: (columnId: string) => unknown
+  original: DataGridItem
+}
+
+export interface ClipboardTable {
+  getCellSelectionBounds: () => ClipboardBounds[]
+  getRowModel: () => { rows: ClipboardRow[] }
+}
+
+// The grid's own visible columns, in display order — the same order the
+// selection's column indexes address.
+export interface ClipboardColumn {
+  id: string
+  formatter?: (value: unknown, item: DataGridItem) => string
+}
+
+// A tab or a newline inside a value would break the grid the paste target
+// rebuilds, so a value carrying either is quoted the way TSV consumers expect.
+const escape = (text: string): string =>
+  (/[\t\n"]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text)
+
+export const serializeCellSelection = (table: ClipboardTable, columns: ClipboardColumn[]): string => {
+  const { rows } = table.getRowModel()
+
+  return table
+    .getCellSelectionBounds()
+    .map(bounds => {
+      const lines: string[] = []
+      for (let rowIndex = bounds.minRowIndex; rowIndex <= bounds.maxRowIndex; rowIndex++) {
+        const row = rows[rowIndex]
+        if (!row) {
+          continue
+        }
+
+        const cells: string[] = []
+        for (let columnIndex = bounds.minColumnIndex; columnIndex <= bounds.maxColumnIndex; columnIndex++) {
+          const column = columns[columnIndex]
+          if (!column) {
+            continue
+          }
+
+          const value = row.getValue(column.id)
+          // The formatter is what the cell displays; a copied date should
+          // paste as the date the user is looking at, not its raw value.
+          cells.push(escape(column.formatter ? column.formatter(value, row.original) : String(value ?? '')))
+        }
+
+        lines.push(cells.join(DELIMITER))
+      }
+
+      return lines.join(ROW_SEPARATOR)
+    })
+    .filter(region => region !== '')
+    .join(REGION_SEPARATOR)
+}
+
+export const copyCellSelection = async (table: ClipboardTable, columns: ClipboardColumn[]): Promise<string> => {
+  const text = serializeCellSelection(table, columns)
+  if (text === '') {
+    return text
+  }
+
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch {
+    // Denied permission, an insecure context, or a browser without the async
+    // clipboard: fall back to the selection-and-execCommand route, which only
+    // works inside the user gesture that asked for the copy — which is exactly
+    // where this runs.
+    const textarea = document.createElement('textarea')
+    textarea.value = text
+    textarea.setAttribute('aria-hidden', 'true')
+    textarea.style.position = 'fixed'
+    textarea.style.opacity = '0'
+    document.body.append(textarea)
+    textarea.select()
+    try {
+      document.execCommand('copy')
+    } finally {
+      textarea.remove()
+    }
+  }
+
+  return text
+}

package/src/util/{config.js → config.ts}

@@ -1,10 +1,10 @@
-// Vendored from https://github.com/coreui/coreui-pro/blob/bc4daf1cd79d527bf665d615c0a31f53ab0c3d4e/js/src/util/config.js — sync manually
+// Vendored from https://github.com/coreui/coreui-pro/blob/e9355580e/js/src/util/config.ts — sync manually
 /**
  * --------------------------------------------------------------------------
- * CoreUI util/config.js
+ * CoreUI util/config.ts
  * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
  *
- * This is a modified version of the Bootstrap's util/config.js
+ * This is a modified version of the Bootstrap's util/config.ts
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -12,47 +12,60 @@
 import Manipulator from '../dom/manipulator.js'
 import { isElement, toType } from './index.js'
 
+/**
+ * Types
+ */
+
+// Deliberately loose: the config object is assembled from data attributes and
+// user input, and each component narrows it with its own exported config type.
+type ComponentConfig = Record<string, any>
+
 /**
  * Class definition
  */
 
 class Config {
+  // Type `this.constructor` so the static members (Default, DefaultType, NAME)
+  // are reachable from instance methods without a cast. Declaration-only, so it
+  // emits no runtime code.
+  declare ['constructor']: typeof Config
+
   // Getters
-  static get Default() {
+  static get Default(): ComponentConfig {
     return {}
   }
 
-  static get DefaultType() {
+  static get DefaultType(): ComponentConfig {
     return {}
   }
 
-  static get NAME() {
+  static get NAME(): string {
     throw new Error('You have to implement the static method "NAME", for each component!')
   }
 
-  _getConfig(config) {
+  _getConfig(config?: ComponentConfig | null): ComponentConfig {
     config = this._mergeConfigObj(config)
     config = this._configAfterMerge(config)
     this._typeCheckConfig(config)
     return config
   }
 
-  _configAfterMerge(config) {
+  _configAfterMerge(config: ComponentConfig): ComponentConfig {
     return config
   }
 
-  _mergeConfigObj(config, element) {
+  _mergeConfigObj(config?: ComponentConfig | null, element?: Element): ComponentConfig {
     const jsonConfig = isElement(element) ? Manipulator.getDataAttribute(element, 'config') : {} // try to parse
 
     return {
       ...this.constructor.Default,
       ...(typeof jsonConfig === 'object' ? jsonConfig : {}),
-      ...(isElement(element) ? Manipulator.getDataAttributes(element) : {}),
+      ...(isElement(element) ? Manipulator.getDataAttributes(element as HTMLElement) : {}),
       ...(typeof config === 'object' ? config : {})
     }
   }
 
-  _typeCheckConfig(config, configTypes = this.constructor.DefaultType) {
+  _typeCheckConfig(config: ComponentConfig, configTypes: ComponentConfig = this.constructor.DefaultType): void {
     for (const [property, expectedTypes] of Object.entries(configTypes)) {
       const value = config[property]
       const valueType = isElement(value) ? 'element' : toType(value)
@@ -67,3 +80,4 @@ class Config {
 }
 
 export default Config
+export type { ComponentConfig }

package/src/util/csv.ts

@@ -5,11 +5,12 @@
  * --------------------------------------------------------------------------
  */
 
-import type { Table } from '@tanstack/table-core'
-import type { DataGridItem } from '../types'
+import {
+ columnsFor, formatterFor, headerFor, rowsFor, type ExportScope, type ExportTable
+} from './export-table'
 
 export interface CsvOptions {
-  scope?: 'filtered' | 'all' | 'selected'
+  scope?: ExportScope
   delimiter?: string
   bom?: boolean
   sanitize?: boolean
@@ -19,10 +20,7 @@ export interface CsvDownloadOptions extends CsvOptions {
   filename?: string
 }
 
-interface CsvColumnMeta {
-  label?: string
-  formatter?: (value: unknown, item: DataGridItem) => string
-}
+export type CsvTable = ExportTable
 
 const escapeField = (value: string, delimiter: string): string =>
   /["\r\n]/.test(value) || value.includes(delimiter) ? `"${value.replace(/"/g, '""')}"` : value
@@ -32,37 +30,20 @@ const escapeField = (value: string, delimiter: string): string =>
 const sanitizeField = (value: string): string =>
   /^[=+\-@\t\r]/.test(value) ? `'${value}` : value
 
-const rowsFor = (table: Table<DataGridItem>, scope: CsvOptions['scope']) => {
-  if (scope === 'all') {
-    return table.getCoreRowModel().rows
-  }
-
-  if (scope === 'selected') {
-    return table.getSelectedRowModel().rows
-  }
-
-  return table.getSortedRowModel().rows
-}
-
-export const exportCsv = (table: Table<DataGridItem>, options: CsvOptions = {}): string => {
+export const exportCsv = (table: CsvTable, options: CsvOptions = {}): string => {
   const delimiter = options.delimiter ?? ','
-  // Export follows the rendered layout: pinning, column order and visibility.
-  const columns = [
-    ...table.getLeftVisibleLeafColumns(),
-    ...table.getCenterVisibleLeafColumns(),
-    ...table.getRightVisibleLeafColumns()
-  ]
+  const columns = columnsFor(table)
 
   const process = (field: string) => escapeField(options.sanitize ? sanitizeField(field) : field, delimiter)
   const line = (fields: string[]) => fields.map(process).join(delimiter)
 
-  const header = line(columns.map(column => String((column.columnDef.meta as CsvColumnMeta)?.label ?? column.id)))
+  const header = line(columns.map(column => headerFor(column)))
   const body = rowsFor(table, options.scope).map(row =>
     line(columns.map(column => {
       const value = row.getValue(column.id)
-      const meta = column.columnDef.meta as CsvColumnMeta
+      const formatter = formatterFor(column)
       // Coerce: a formatter may return a number/null in plain-JS usage.
-      return meta?.formatter ? String(meta.formatter(value, row.original) ?? '') : String(value ?? '')
+      return formatter ? String(formatter(value, row.original) ?? '') : String(value ?? '')
     }))
   )
 
@@ -70,7 +51,7 @@ export const exportCsv = (table: Table<DataGridItem>, options: CsvOptions = {}):
   return options.bom ? `\uFEFF${csv}` : csv
 }
 
-export const downloadCsv = (table: Table<DataGridItem>, options: CsvDownloadOptions = {}): void => {
+export const downloadCsv = (table: CsvTable, options: CsvDownloadOptions = {}): void => {
   const blob = new Blob([exportCsv(table, options)], { type: 'text/csv;charset=utf-8;' })
   const url = URL.createObjectURL(blob)
   const anchor = document.createElement('a')

package/src/util/direction.ts

@@ -0,0 +1,37 @@
+/**
+ * --------------------------------------------------------------------------
+ * 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 ?
+    getComputedStyle(element).direction === 'rtl' :
+    false
+
+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)
+  }
+}