@coreui/data-grid 0.1.0-rc.0

package/src/engine/data-source.ts

@@ -0,0 +1,63 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid engine/data-source.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+import type { DataGridDataRequest, DataGridDataResponse } from '../types'
+
+const FETCH_DEBOUNCE_MS = 100
+
+export interface GridDataSourceContext {
+  getRequest: () => DataGridDataRequest
+  onError: (error: unknown) => void
+  onLoad: (response: DataGridDataResponse) => void
+  onLoadingChange: (loading: boolean) => void
+  provider: (request: DataGridDataRequest) => Promise<DataGridDataResponse>
+}
+
+export interface GridDataSource {
+  load: () => void
+  dispose: () => void
+}
+
+export const createDataSource = (context: GridDataSourceContext): GridDataSource => {
+  let requestId = 0
+  let timeout: ReturnType<typeof setTimeout> | undefined
+
+  return {
+    load() {
+      clearTimeout(timeout)
+      // Invalidate at call time, not when the debounce fires - an older
+      // in-flight response must not render inside the debounce window.
+      const id = ++requestId
+      timeout = setTimeout(async () => {
+        context.onLoadingChange(true)
+
+        try {
+          const response = await context.provider(context.getRequest())
+          if (id !== requestId) {
+            return
+          }
+
+          context.onLoad(response)
+        } catch (error) {
+          if (id !== requestId) {
+            return
+          }
+
+          context.onError(error)
+        } finally {
+          if (id === requestId) {
+            context.onLoadingChange(false)
+          }
+        }
+      }, FETCH_DEBOUNCE_MS)
+    },
+    dispose() {
+      clearTimeout(timeout)
+      requestId++
+    }
+  }
+}

package/src/engine/scheduler.ts

@@ -0,0 +1,42 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid engine/scheduler.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+export interface Scheduler {
+  schedule: () => void
+  dispose: () => void
+}
+
+export const createScheduler = (flush: () => void): Scheduler => {
+  let scheduled = false
+  let disposed = false
+
+  const run = () => {
+    scheduled = false
+    if (!disposed) {
+      flush()
+    }
+  }
+
+  return {
+    schedule() {
+      if (scheduled || disposed) {
+        return
+      }
+
+      scheduled = true
+      if (typeof window.requestAnimationFrame === 'function') {
+        window.requestAnimationFrame(run)
+        return
+      }
+
+      setTimeout(run, 16)
+    },
+    dispose() {
+      disposed = true
+    }
+  }
+}

package/src/engine/table.ts

@@ -0,0 +1,122 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid engine/table.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+import {
+  createTable,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type FilterFn,
+  type Table,
+  type TableState,
+  type Updater
+} from '@tanstack/table-core'
+import { evaluateColumnFilter } from '../filters'
+import type {
+ DataGridColumn, DataGridColumnFilterValue, DataGridItem, DataGridOptions
+} from '../types'
+import { isGlobalFilterEnabled } from '../ui/toolbar'
+
+const toTanStackFilterFn = (column: DataGridColumn): FilterFn<DataGridItem> => {
+  const { filterFn } = column
+  if (filterFn) {
+    return (row, columnId, filterValue) => filterFn(row.getValue(columnId), filterValue, row.original)
+  }
+
+  return (row, columnId, filterValue) =>
+    evaluateColumnFilter(row.getValue(columnId), filterValue as DataGridColumnFilterValue, column.filterType)
+}
+
+export const createGridTable = (
+  options: DataGridOptions,
+  onStateChange: (previous: TableState, next: TableState) => void
+): Table<DataGridItem> => {
+  const sortingOptions = typeof options.sorting === 'object' ? options.sorting : {}
+  const sizingOptions = typeof options.columnSizing === 'object' ? options.columnSizing : {}
+  const paginationOptions = typeof options.pagination === 'object' ? options.pagination : {}
+  const serverSide = Boolean(options.dataProvider)
+  const sizingEnabled = Boolean(options.columnSizing)
+  const pinningEnabled = Boolean(options.columnPinning)
+  // Pinning offsets come from column.getSize(); sticky positioning is only
+  // pixel-correct when the rendered widths equal those sizes, so both features
+  // seed and apply explicit widths.
+  const widthsEnabled = sizingEnabled || pinningEnabled
+  const paginated = Boolean(options.pagination) || serverSide
+
+  const initialState: Partial<TableState> = {
+    ...(paginated && {
+      pagination: { pageIndex: 0, pageSize: paginationOptions.pageSize ?? 10 }
+    }),
+    ...(typeof options.columnPinning === 'object' && { columnPinning: options.columnPinning }),
+    ...(Array.isArray(options.columnOrder) && { columnOrder: options.columnOrder }),
+    ...(typeof options.columnVisibility === 'object' && { columnVisibility: options.columnVisibility })
+  }
+
+  const table = createTable<DataGridItem>({
+    columns: options.columns.map(column => {
+      const size = column.width ?? null
+      return {
+        accessorKey: column.key,
+        enableColumnFilter: column.filterable !== false,
+        enableHiding: column.hideable !== false,
+        enableResizing: column.resizable !== false,
+        enableSorting: column.sortable !== false,
+        filterFn: toTanStackFilterFn(column),
+        id: column.key,
+        meta: { label: column.label, formatter: column.formatter },
+        ...(widthsEnabled && size !== null && { size })
+      }
+    }),
+    columnResizeMode: sizingOptions.mode ?? 'onChange',
+    data: serverSide ? [] : options.items,
+    enableColumnFilters: Boolean(options.columnFilters),
+    enableColumnPinning: pinningEnabled,
+    enableColumnResizing: sizingEnabled,
+    enableGlobalFilter: isGlobalFilterEnabled(options),
+    enableHiding: Boolean(options.columnVisibility),
+    enableMultiSort: sortingOptions.multiple !== false,
+    enableRowSelection: Boolean(options.rowSelection),
+    enableSorting: Boolean(options.sorting),
+    enableSortingRemoval: Boolean(sortingOptions.resetable),
+    getCoreRowModel: getCoreRowModel(),
+    // Faceting powers custom filter UIs (column.getFacetedUniqueValues()).
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    globalFilterFn: 'includesString',
+    ...(serverSide && {
+      manualFiltering: true,
+      manualPagination: true,
+      manualSorting: true,
+      rowCount: 0
+    }),
+    ...(paginated && { getPaginationRowModel: getPaginationRowModel() }),
+    ...(options.itemKey && { getRowId: options.itemKey }),
+    initialState,
+    onStateChange() {},
+    renderFallbackValue: null,
+    state: {}
+  })
+
+  let state = table.initialState
+  table.setOptions(previous => ({
+    ...previous,
+    state,
+    onStateChange(updater: Updater<TableState>) {
+      const previousState = state
+      state = typeof updater === 'function' ? updater(state) : updater
+      table.setOptions(current => ({ ...current, state }))
+      onStateChange(previousState, state)
+    }
+  }))
+
+  return table
+}

package/src/engine/virtualizer.ts

@@ -0,0 +1,57 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid engine/virtualizer.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+import {
+  elementScroll,
+  observeElementOffset,
+  observeElementRect,
+  Virtualizer
+} from '@tanstack/virtual-core'
+
+export type GridVirtualizerInstance = Virtualizer<HTMLDivElement, Element>
+
+export interface GridVirtualizer {
+  instance: GridVirtualizerInstance
+  setCount: (count: number) => void
+  destroy: () => void
+}
+
+export interface GridVirtualizerOptions {
+  count: number
+  getScrollElement: () => HTMLDivElement
+  onChange: () => void
+  overscan: number
+  rowHeight: number
+}
+
+export const createGridVirtualizer = (options: GridVirtualizerOptions): GridVirtualizer => {
+  const instance: GridVirtualizerInstance = new Virtualizer({
+    count: options.count,
+    estimateSize: () => options.rowHeight,
+    getScrollElement: options.getScrollElement,
+    observeElementOffset,
+    observeElementRect,
+    onChange: options.onChange,
+    overscan: options.overscan,
+    scrollToFn: elementScroll
+  })
+
+  const unmount = instance._didMount()
+  instance._willUpdate()
+
+  return {
+    instance,
+    setCount(count: number) {
+      if (count !== instance.options.count) {
+        instance.setOptions({ ...instance.options, count })
+      }
+    },
+    destroy() {
+      unmount()
+    }
+  }
+}

package/src/filters.ts

@@ -0,0 +1,176 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid filters.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ * Pure filter-operator logic, built as the dependency-free
+ * `@coreui/data-grid/filters` subpath so the framework bindings share one
+ * implementation without pulling in the vanilla component runtime.
+ */
+
+import type {
+  DataGridColumnFilterValue,
+  DataGridFilterCondition,
+  DataGridFilterOperator,
+  DataGridFilterType
+} from './types'
+
+export const FILTER_OPERATORS: Record<Exclude<DataGridFilterType, 'select'>, DataGridFilterOperator[]> = {
+  text: ['contains', 'notContains', 'equals', 'notEquals', 'startsWith', 'endsWith', 'blank', 'notBlank'],
+  number: [
+    'equals',
+    'notEquals',
+    'greaterThan',
+    'greaterThanOrEqual',
+    'lessThan',
+    'lessThanOrEqual',
+    'between',
+    'blank',
+    'notBlank'
+  ],
+  date: [
+    'equals',
+    'notEquals',
+    'greaterThan',
+    'greaterThanOrEqual',
+    'lessThan',
+    'lessThanOrEqual',
+    'between',
+    'blank',
+    'notBlank'
+  ]
+}
+
+export const VALUELESS_OPERATORS: ReadonlySet<DataGridFilterOperator> = new Set(['blank', 'notBlank'])
+
+const isBlank = (value: unknown): boolean =>
+  value === null || value === undefined || String(value).trim() === ''
+
+const toComparable = (value: unknown, filterType: DataGridFilterType): number | null => {
+  if (filterType === 'date') {
+    const time = value instanceof Date ? value.getTime() : new Date(String(value)).getTime()
+    return Number.isNaN(time) ? null : time
+  }
+
+  const numeric = typeof value === 'number' ? value : Number(value)
+  return Number.isFinite(numeric) ? numeric : null
+}
+
+const evaluateCondition = (
+  cellValue: unknown,
+  condition: DataGridFilterCondition,
+  filterType: DataGridFilterType
+): boolean => {
+  const { operator } = condition
+
+  if (operator === 'blank') {
+    return isBlank(cellValue)
+  }
+
+  if (operator === 'notBlank') {
+    return !isBlank(cellValue)
+  }
+
+  // A condition without a value filters nothing (the menu treats it as
+  // incomplete rather than matching nothing).
+  if (isBlank(condition.value)) {
+    return true
+  }
+
+  if (filterType === 'number' || filterType === 'date') {
+    const cell = toComparable(cellValue, filterType)
+    const bound = toComparable(condition.value, filterType)
+    if (cell === null || bound === null) {
+      return false
+    }
+
+    switch (operator) {
+      case 'equals': {
+        return cell === bound
+      }
+
+      case 'notEquals': {
+        return cell !== bound
+      }
+
+      case 'greaterThan': {
+        return cell > bound
+      }
+
+      case 'greaterThanOrEqual': {
+        return cell >= bound
+      }
+
+      case 'lessThan': {
+        return cell < bound
+      }
+
+      case 'lessThanOrEqual': {
+        return cell <= bound
+      }
+
+      case 'between': {
+        const upper = toComparable(condition.value2, filterType)
+        return upper === null ? cell >= bound : cell >= bound && cell <= upper
+      }
+
+      default: {
+        return false
+      }
+    }
+  }
+
+  const cell = String(cellValue ?? '').toLowerCase()
+  const needle = String(condition.value).toLowerCase()
+
+  switch (operator) {
+    case 'contains': {
+      return cell.includes(needle)
+    }
+
+    case 'notContains': {
+      return !cell.includes(needle)
+    }
+
+    case 'equals': {
+      return cell === needle
+    }
+
+    case 'notEquals': {
+      return cell !== needle
+    }
+
+    case 'startsWith': {
+      return cell.startsWith(needle)
+    }
+
+    case 'endsWith': {
+      return cell.endsWith(needle)
+    }
+
+    default: {
+      return false
+    }
+  }
+}
+
+export const evaluateColumnFilter = (
+  cellValue: unknown,
+  filterValue: DataGridColumnFilterValue,
+  filterType: DataGridFilterType = 'text'
+): boolean => {
+  if (typeof filterValue === 'string') {
+    return String(cellValue ?? '')
+      .toLowerCase()
+      .includes(filterValue.toLowerCase())
+  }
+
+  if ('conditions' in filterValue) {
+    const results = filterValue.conditions.map(condition =>
+      evaluateCondition(cellValue, condition, filterType)
+    )
+    return filterValue.join === 'or' ? results.some(Boolean) : results.every(Boolean)
+  }
+
+  return filterValue.value.some(candidate => String(candidate) === String(cellValue))
+}

package/src/icons.ts

@@ -0,0 +1,60 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid icons.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+// Default icon set. Every icon is an SVG string drawn with `currentColor`, so it
+// inherits the button's text color; each is overridable through the matching
+// `*Icon` option. Sanitized via the SVGAllowlist before insertion.
+
+export const DEFAULT_COLUMN_MENU_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path fill="currentColor" d="M204 148a52 52 0 1 0 104 0 52 52 0 1 0-104 0m78 0a26 26 0 1 1-26-26 26.03 26.03 0 0 1 26 26M204 264a52 52 0 1 0 104 0 52 52 0 1 0-104 0m78 0a26 26 0 1 1-26-26 26.03 26.03 0 0 1 26 26M204 380a52 52 0 1 0 104 0 52 52 0 1 0-104 0m78 0a26 26 0 1 1-26-26 26.03 26.03 0 0 1 26 26"/></svg>'
+
+export const DEFAULT_FILTER_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path fill="currentColor" d="M96 197.333h320v32H96zm72 101.334h176v32H168zM216 400h80v32h-80zM48 96h416v32H48z"/></svg>'
+
+export const DEFAULT_TOOLBAR_COLUMNS_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path fill="currentColor" d="M16 64v384h480V64Zm304 32v320H192V96ZM48 96h112v320H48Zm416 320H352V96h112Z"/></svg>'
+
+export const DEFAULT_TOOLBAR_EXPORT_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path fill="currentColor" d="M16 464h480v32H16zm379.313-164.687-22.626-22.626L280 369.373V16h-32v353.373l-92.687-92.686-22.626 22.626L264 430.627z"/></svg>'
+
+export const DEFAULT_TOOLBAR_UNDO_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path fill="currentColor" d="M495.473 197.262c0-73.061-43.651-136.118-106.242-164.462q-2-.9-4.021-1.762-4.046-1.715-8.19-3.235-2.071-.761-4.167-1.47-4.19-1.422-8.468-2.64a180.95 180.95 0 0 0-98.675 0q-4.278 1.218-8.469 2.64-2.094.71-4.166 1.47-4.143 1.519-8.19 3.235-2.023.857-4.021 1.762c-62.592 28.344-106.242 91.4-106.242 164.462v237.483L38.627 338.75 16 361.377 150.623 496l134.623-134.623-22.627-22.627-96 96V197.263c0-72.891 52.814-133.678 122.186-146.1a149.4 149.4 0 0 1 52.479 0c69.371 12.426 122.186 73.213 122.186 146.1h32Z"/></svg>'
+
+export const DEFAULT_TOOLBAR_REDO_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path fill="currentColor" d="M361.376 495.163 226.753 360.54l22.627-22.627 111.996 111.996 111.997-111.996L496 360.54z"/><path fill="currentColor" d="M377.377 472.52h-32V196.426C345.377 114.584 278.794 48 196.952 48c-83.229 0-148.426 63.106-148.426 143.667h-32c0-48.024 18.85-92.569 53.079-125.429C103.35 33.842 148.576 16 196.952 16c99.487 0 180.425 80.938 180.425 180.426Z"/></svg>'
+
+export const DEFAULT_SORT_ASCENDING_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path fill="currentColor" d="M390.624 150.625 256 16 121.376 150.625l22.628 22.627 95.997-95.998v417.982h32V77.257l95.995 95.995z"/></svg>'
+
+export const DEFAULT_SORT_DESCENDING_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path fill="currentColor" d="m367.997 338.75-95.998 95.997V17.503h-32v417.242l-95.996-95.995-22.627 22.627L256 496l134.624-134.623z"/></svg>'
+
+export const DEFAULT_SORT_NEUTRAL_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path fill="currentColor" d="M384 433.373V160h-32v274.51l-69.823-69.823-22.627 22.626 107.882 107.883 107.881-107.883-22.626-22.626zM159.432 17.372 51.55 125.255l22.627 22.627L144 78.059V352h32V79.195l68.687 68.687 22.626-22.627z"/></svg>'
+
+// Column-menu item icons. Sort actions in the menu reuse the sort header icons.
+
+// Pin (pushpin): the needle points to the lower-left, so the unmirrored glyph is
+// "pin left"; a horizontal mirror (scale(-1 1) about the 512 viewBox) is "pin right".
+const PIN_PATH =
+  'm477.8 140.2-106-106a62.132 62.132 0 0 0-93.617 81.24l-4.913 5.533-97.654 42.9-42.611-23.026a24.04 24.04 0 0 0-28.86 4.638L62.6 189.487a23.88 23.88 0 0 0 .479 33.449l101.68 101.679L16 473.373V496h22.627l148.758-148.758L288.6 448.457a23.93 23.93 0 0 0 33.275.642l44.425-41.128a23.98 23.98 0 0 0 4.773-29.092l-23.344-42.858 42.131-90.515 8.6-10.318A62.134 62.134 0 0 0 477.8 140.2m-22.628 65.231a30.125 30.125 0 0 1-42.6 0l-16.885-16.886-33.08 39.678-50.7 108.933 28.087 51.566-34.209 31.669L91.2 205.806l32-33.89 50.969 27.543 118.386-52.008 29.177-32.863-15.158-15.161a30.126 30.126 0 0 1 42.6-42.6l106 106a30.126 30.126 0 0 1 0 42.6Z'
+
+const SVG_512 =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" aria-hidden="true" focusable="false">'
+
+export const DEFAULT_PIN_LEFT_ICON =
+  `${SVG_512}<path fill="currentColor" d="${PIN_PATH}"/></svg>`
+export const DEFAULT_PIN_RIGHT_ICON =
+  `${SVG_512}<g transform="translate(512 0) scale(-1 1)"><path fill="currentColor" d="${PIN_PATH}"/></g></svg>`
+export const DEFAULT_UNPIN_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path fill="currentColor" d="m427.314 107.313-22.628-22.626L256 233.373 107.314 84.687l-22.628 22.626L233.373 256 84.686 404.687l22.628 22.626L256 278.627l148.686 148.686 22.628-22.626L278.627 256z"/></svg>'
+export const DEFAULT_MOVE_LEFT_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path fill="currentColor" d="M254.625 56h-38.632L16 256.2 216 456h38.623V336h144V176h-144Zm112 152v96h-144v113.384l-161.37-161.21 161.37-161.535V208Zm96-152h32v400h-32z"/></svg>'
+export const DEFAULT_MOVE_RIGHT_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path fill="currentColor" d="M296.007 56h-38.632v120h-144v160h144v120H296l200-199.8Zm-6.632 361.384V304h-144v-96h144V94.639l161.37 161.535ZM17.375 56h32v400h-32z"/></svg>'
+export const DEFAULT_HIDE_COLUMN_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path fill="currentColor" d="m397.222 131.1-.218-.223c-63.173-63.17-158.534-75.015-233.776-35.531l23.938 23.939c61.571-27.691 136.573-16.327 187.105 34.115L464 246.683v3.107l-71.744 74.585 22.63 22.63L496 262.683V233.79Z"/><path fill="currentColor" d="M352.8 284.33a103.307 103.307 0 0 0-132.893-132.892L246.1 177.63a71.228 71.228 0 0 1 80.507 80.508Zm17.1 62.938-33.831-33.831c.088-.108.179-.212.266-.32l-22.805-22.806q-.126.168-.253.334l-99.681-99.681.334-.253-22.81-22.805c-.108.087-.213.179-.321.266L38.627 16H16v22.627l95.689 95.689L16 233.79v28.893l98.778 102.689.218.222A199.73 199.73 0 0 0 367.372 390l106 106H496v-22.627L392.537 369.911Zm-177.157-131.9 96.128 96.132a71.28 71.28 0 0 1-96.133-96.133Zm-55.014 127.705L48 249.79v-3.107l86.319-89.737 35.065 35.064a103.248 103.248 0 0 0 142.842 142.843l32.007 32.007c-64.51 40.015-150.522 32.095-206.504-23.787"/></svg>'

package/src/index.ts

@@ -0,0 +1,56 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid index.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+export { default as DataGrid } from './data-grid'
+export { DEFAULT_LABELS, interpolate } from './labels'
+export { evaluateColumnFilter, FILTER_OPERATORS, VALUELESS_OPERATORS } from './filters'
+export { downloadCsv, exportCsv } from './util/csv'
+export type { CsvDownloadOptions, CsvOptions } from './util/csv'
+export type {
+  Column,
+  ColumnFiltersState,
+  ColumnOrderState,
+  ColumnPinningState,
+  ColumnSizingState,
+  DataGridColumn,
+  DataGridColumnFilterContext,
+  DataGridColumnFilterFactory,
+  DataGridColumnFilterValue,
+  DataGridColumnMenuBuilder,
+  DataGridColumnMenuContext,
+  DataGridColumnSizingOptions,
+  DataGridDataRequest,
+  DataGridDataResponse,
+  DataGridEditableOptions,
+  DataGridEditCommitEvent,
+  DataGridEditor,
+  DataGridEditorContext,
+  DataGridEditorFactory,
+  DataGridEditorType,
+  DataGridFilterCondition,
+  DataGridFilterOperator,
+  DataGridFilterType,
+  DataGridItem,
+  DataGridLabels,
+  DataGridMenuAction,
+  DataGridOptions,
+  DataGridPaginationInfoState,
+  DataGridPaginationOptions,
+  DataGridRowSelectionOptions,
+  DataGridSlot,
+  DataGridSlotContext,
+  DataGridSlotFactory,
+  DataGridSlots,
+  DataGridSortingOptions,
+  DataGridState,
+  DataGridToolbarOptions,
+  PaginationState,
+  RowSelectionState,
+  SortingState,
+  Table,
+  VisibilityState
+} from './types'

package/src/labels.ts

@@ -0,0 +1,70 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid labels.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+import type { DataGridLabels } from './types'
+
+export const DEFAULT_LABELS: DataGridLabels = {
+  addCondition: 'Add condition',
+  applyFilter: 'Apply',
+  clearFilter: 'Clear filter',
+  clearSort: 'Unsort',
+  columnMenu: 'Column options for {column}',
+  filterAction: 'Filter…',
+  filterColumn: 'Filter {column}',
+  firstPage: 'First page',
+  globalFilterLabel: 'Search',
+  globalFilterPlaceholder: 'Search',
+  hideColumn: 'Hide column',
+  itemsInfo: '{first}–{last} of {total}',
+  joinAnd: 'AND',
+  joinOr: 'OR',
+  lastPage: 'Last page',
+  loadError: 'Failed to load data',
+  loading: 'Loading…',
+  moveLeft: 'Move left',
+  moveRight: 'Move right',
+  nextPage: 'Next page',
+  operatorBetween: 'Between',
+  operatorBlank: 'Blank',
+  operatorContains: 'Contains',
+  operatorEndsWith: 'Ends with',
+  operatorEquals: 'Equals',
+  operatorGreaterThan: 'Greater than',
+  operatorGreaterThanOrEqual: 'Greater than or equal',
+  operatorLessThan: 'Less than',
+  operatorLessThanOrEqual: 'Less than or equal',
+  operatorNotBlank: 'Not blank',
+  operatorNotContains: 'Does not contain',
+  operatorNotEquals: 'Not equals',
+  operatorStartsWith: 'Starts with',
+  pageSizeLabel: 'Rows per page',
+  paginationLabel: 'Pagination',
+  pinLeft: 'Pin left',
+  pinRight: 'Pin right',
+  previousPage: 'Previous page',
+  redoneAnnouncement: 'Change redone',
+  resetColumns: 'Reset',
+  resultsAnnouncement: '{count} results',
+  searchValues: 'Search values',
+  selectAllRows: 'Select all rows',
+  selectAllValues: 'Select all',
+  selectRow: 'Select row',
+  showAllColumns: 'Show all',
+  sortAscending: 'Sort ascending',
+  sortDescending: 'Sort descending',
+  toolbarColumns: 'Columns',
+  toolbarExport: 'Export',
+  toolbarRedo: 'Redo',
+  toolbarUndo: 'Undo',
+  undoneAnnouncement: 'Change undone',
+  unpin: 'Unpin'
+}
+
+export const interpolate = (template: string, tokens: Record<string, string | number>): string =>
+  template.replace(/\{(\w+)\}/g, (match: string, token: string) =>
+    token in tokens ? String(tokens[token]) : match
+  )