@coreui/data-grid 0.1.0-rc.0

package/scss/data-grid.scss

@@ -0,0 +1,559 @@
+/*!
+ * CoreUI PRO data-grid.scss v0.1.0
+ * License (https://coreui.io/pro/license/)
+ */
+
+.data-grid {
+  // The column menu is positioned against the grid root (it must escape the
+  // viewport's overflow while staying inside the token scope).
+  position: relative;
+
+  // Component tokens. Everything resolves through CoreUI semantic variables,
+  // so light/dark theming via [data-coreui-theme] works with no extra rules.
+  --cui-data-grid-viewport-max-height: 30rem;
+  --cui-data-grid-header-bg: var(--cui-body-bg, #fff);
+  --cui-data-grid-header-shadow: inset 0 calc(-1 * var(--cui-border-width, 1px)) 0 var(--cui-border-color, #dee2e6);
+  --cui-data-grid-select-cell-width: 2.5rem;
+  --cui-data-grid-sorter-margin: .25rem;
+  --cui-data-grid-sorter-opacity: .3;
+  --cui-data-grid-spacing: .5rem;
+  --cui-data-grid-resizer-width: .625rem;
+  --cui-data-grid-resizer-grip-height: 60%;
+  --cui-data-grid-resizer-grip-color: var(--cui-border-color, #dee2e6);
+  --cui-data-grid-resizer-grip-color-hover: var(--cui-secondary-color, #6c757d);
+  --cui-data-grid-pinned-border-width: var(--cui-border-width);
+  --cui-data-grid-pinned-border-color: var(--cui-border-color, #dee2e6);
+  --cui-data-grid-drop-indicator: var(--cui-primary, #321fdb);
+  --cui-data-grid-menu-bg: var(--cui-body-bg, #fff);
+  --cui-data-grid-menu-border-color: var(--cui-border-color, #dee2e6);
+  --cui-data-grid-menu-shadow: var(--cui-box-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));
+  --cui-data-grid-menu-min-width: 10rem;
+  --cui-data-grid-menu-item-hover-bg: var(--cui-tertiary-bg, #f8f9fa);
+  --cui-data-grid-loading-bg: rgba(var(--cui-body-bg-rgb, 255, 255, 255), .6);
+  --cui-data-grid-pinned-bg: var(--cui-body-bg, #fff);
+  --cui-data-grid-focus-ring-width: 2px;
+  --cui-data-grid-focus-ring-color: var(--cui-primary, #321fdb);
+
+  .data-grid-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--cui-data-grid-spacing);
+    align-items: center;
+    min-height: 48px;
+    padding: var(--cui-data-grid-spacing);
+    border-bottom: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);
+  }
+
+  .data-grid-toolbar-actions {
+    display: flex;
+    gap: .25rem;
+    align-items: center;
+  }
+
+  .data-grid-toolbar-search {
+    margin-inline-start: auto;
+  }
+
+  .data-grid-viewport {
+    position: relative;
+    max-height: var(--cui-data-grid-viewport-max-height);
+    overflow-y: auto;
+    // Windowed rendering resizes the spacer rows and recycles row elements on
+    // every frame; browser scroll anchoring chases those mutations and keeps
+    // adjusting scrollTop, which turns wheel scrolling into a feedback loop.
+    overflow-anchor: none;
+  }
+
+  // Inline editing: the in-cell editor fills the cell; the popup layer hosts
+  // rich editors (date pickers, selects) anchored over the cell.
+  .data-grid-cell-editor {
+    width: 100%;
+    min-width: 4rem;
+  }
+
+  .data-grid-editor-popup {
+    position: absolute;
+    z-index: 4;
+    padding: .25rem;
+    background-color: var(--cui-data-grid-menu-bg);
+    border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);
+    border-radius: var(--cui-border-radius, .375rem);
+    box-shadow: var(--cui-data-grid-menu-shadow);
+  }
+
+  // cellNavigation: the roving-tabindex active cell. The ring is inset so the
+  // sticky header and pinned columns don't clip it.
+  [role="grid"] :is(td, th):focus-visible {
+    outline: var(--cui-data-grid-focus-ring-width) solid var(--cui-data-grid-focus-ring-color);
+    outline-offset: calc(-1 * var(--cui-data-grid-focus-ring-width));
+  }
+
+  .data-grid-viewport:focus-visible {
+    outline: 0;
+  }
+
+  .data-grid-header {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background-color: var(--cui-data-grid-header-bg);
+    box-shadow: var(--cui-data-grid-header-shadow);
+  }
+
+  // Header label row: fixed 48px with vertically centered content (height on a
+  // table cell acts as a min; min-height is ignored on table-cell).
+  .data-grid-header tr:not(.data-grid-filter-row) > th {
+    height: 48px;
+    vertical-align: middle;
+  }
+
+  .data-grid-filter-row > th {
+    padding-top: 0;
+    font-weight: normal;
+  }
+
+  .data-grid-header th[data-coreui-draggable] {
+    cursor: grab;
+  }
+
+  .data-grid-header-cell {
+    display: flex;
+    align-items: center;
+    gap: .25rem;
+  }
+
+  .data-grid-header-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // Icon-only ghost buttons: square them by matching horizontal padding to
+  // vertical (follows .btn / .btn-sm automatically) and collapsing the text
+  // line-height so height follows the icon, not a 1.5em text line.
+  .btn-ghost {
+    --cui-btn-padding-x: var(--cui-btn-padding-y);
+    --cui-btn-line-height: 1;
+  }
+
+  .data-grid-menu-button {
+    margin-inline-start: auto;
+  }
+
+  .data-grid-menu {
+    position: absolute;
+    z-index: 4;
+    min-width: var(--cui-data-grid-menu-min-width);
+    padding: .25rem 0;
+    background-color: var(--cui-data-grid-menu-bg);
+    border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);
+    border-radius: var(--cui-border-radius, .375rem);
+    box-shadow: var(--cui-data-grid-menu-shadow);
+  }
+
+  .data-grid-menu-item {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    width: 100%;
+    padding: .25rem .75rem;
+    font: inherit;
+    color: inherit;
+    text-align: start;
+    cursor: pointer;
+    background: none;
+    border: 0;
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--cui-data-grid-menu-item-hover-bg);
+    }
+
+    // Disabled items stay focusable (aria-disabled, APG menu pattern) so the
+    // roving arrow cycle can reach them.
+    &[aria-disabled="true"] {
+      color: var(--cui-secondary-color, #6c757d);
+      cursor: default;
+      background: none;
+    }
+  }
+
+  .data-grid-filter-menu {
+    position: absolute;
+    z-index: 4;
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    min-width: var(--cui-data-grid-menu-min-width);
+    max-width: 18rem;
+    padding: .75rem;
+    background-color: var(--cui-data-grid-menu-bg);
+    border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);
+    border-radius: var(--cui-border-radius, .375rem);
+    box-shadow: var(--cui-data-grid-menu-shadow);
+
+    > div {
+      display: flex;
+      flex-direction: column;
+      gap: .5rem;
+    }
+  }
+
+  .data-grid-filter-menu-condition {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+  }
+
+  .data-grid-filter-menu-join {
+    display: flex;
+    gap: 1rem;
+
+    label {
+      display: flex;
+      gap: .375rem;
+      align-items: center;
+    }
+  }
+
+  .data-grid-filter-menu-values {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    max-height: 14rem;
+    overflow-y: auto;
+  }
+
+  .data-grid-filter-menu-footer {
+    display: flex;
+    gap: .5rem;
+    justify-content: flex-end;
+  }
+
+  .data-grid-column-chooser {
+    position: absolute;
+    z-index: 4;
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    min-width: var(--cui-data-grid-menu-min-width);
+    max-width: 18rem;
+    max-height: 20rem;
+    padding: .75rem;
+    overflow-y: auto;
+    background-color: var(--cui-data-grid-menu-bg);
+    border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);
+    border-radius: var(--cui-border-radius, .375rem);
+    box-shadow: var(--cui-data-grid-menu-shadow);
+  }
+
+  .data-grid-column-chooser-option {
+    display: flex;
+    gap: .375rem;
+    align-items: center;
+    margin-bottom: 0;
+  }
+
+  .data-grid-column-chooser-footer {
+    display: flex;
+    gap: .5rem;
+    justify-content: flex-end;
+    padding-top: .25rem;
+    margin-top: .25rem;
+    border-top: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);
+  }
+
+  .data-grid-filter-button {
+    position: relative;
+    // Right-align the trailing controls as a group: the filter button takes the
+    // auto margin (menu drops its own below) so filter and menu sit together at
+    // the end, matching a menu-only header.
+    margin-inline-start: auto;
+
+    ~ .data-grid-menu-button {
+      margin-inline-start: 0;
+    }
+  }
+
+  // Active-filter indicator dot on the filter button.
+  .data-grid-filter-button-filtered::after {
+    position: absolute;
+    inset-block-start: .125rem;
+    inset-inline-end: .125rem;
+    width: .375rem;
+    height: .375rem;
+    content: "";
+    background-color: var(--cui-primary, #321fdb);
+    border-radius: 50%;
+  }
+
+  .data-grid-menu-item-icon {
+    display: inline-flex;
+    opacity: .75;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  .data-grid-menu-divider {
+    height: var(--cui-border-width, 1px);
+    margin: .25rem 0;
+    background-color: var(--cui-data-grid-menu-border-color);
+  }
+
+  .data-grid-header .data-grid-dragging {
+    opacity: .5;
+  }
+
+  .data-grid-header .data-grid-drop-target {
+    box-shadow: inset .125rem 0 0 var(--cui-data-grid-drop-indicator);
+  }
+
+  .data-grid-select-cell {
+    width: var(--cui-data-grid-select-cell-width);
+    text-align: center;
+  }
+
+  .data-grid-sort-button {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cui-data-grid-sorter-margin);
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    user-select: none;
+    background: none;
+    border: 0;
+  }
+
+  .data-grid-sort-icon {
+    display: inline-flex;
+    font-size: .875em;
+    opacity: 0;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  // The active sort direction is always visible; the neutral (unsorted) icon is
+  // hidden unless `sorterVisibility` opts it in (steadily via "always", or on
+  // header hover/focus via "hover").
+  .data-grid-sortable[aria-sort] .data-grid-sort-icon {
+    opacity: 1;
+  }
+
+  &[data-coreui-sorter-visibility="always"] .data-grid-sortable:not([aria-sort]) .data-grid-sort-icon {
+    opacity: var(--cui-data-grid-sorter-opacity);
+  }
+
+  &[data-coreui-sorter-visibility="hover"] .data-grid-sortable:not([aria-sort]):hover .data-grid-sort-icon,
+  &[data-coreui-sorter-visibility="hover"] .data-grid-sortable:not([aria-sort]):focus-within .data-grid-sort-icon {
+    opacity: var(--cui-data-grid-sorter-opacity);
+  }
+
+  .data-grid-viewport > .table {
+    margin-bottom: 0;
+    table-layout: fixed;
+  }
+
+  // Body cells render on a single line and truncate with an ellipsis instead of
+  // spilling their content across the fixed-layout column boundary onto the next
+  // column. Matches the default of AG Grid / MUI X Data Grid and TanStack's
+  // virtualized-table guidance, and keeps every row a uniform height for the
+  // fixed-height virtualizer (wrapping would desync `estimateSize`). Pinned cells
+  // are excluded so their shadow pseudo-element (painted outside the box via a
+  // translate) isn't clipped; the select cell holds only a checkbox.
+  .data-grid-viewport > .table > tbody > tr:not(.data-grid-empty) > td:not(.data-grid-select-cell):not(.data-grid-cell-pinned-left):not(.data-grid-cell-pinned-right) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // Widths applied to each header cell drive the column layout; letting the
+  // table grow to its content (min-width keeps it filling a wide viewport)
+  // turns a resize or a pin into horizontal scroll rather than squeezing
+  // neighbours. Both features share this layout mode.
+  &.data-grid-resizable,
+  &.data-grid-pinned {
+    .data-grid-viewport {
+      overflow-x: auto;
+    }
+
+    .table {
+      width: max-content;
+      min-width: 100%;
+    }
+  }
+
+  // A pinned th is already sticky (a positioned containing block for the
+  // resizer), so only non-pinned header cells need explicit relative here.
+  &.data-grid-resizable .data-grid-header th:not(.data-grid-cell-pinned-left):not(.data-grid-cell-pinned-right) {
+    position: relative;
+  }
+
+  &.data-grid-pinned .table {
+    // position: sticky is unreliable on collapsed-border tables; the grid opts
+    // into separate borders so pinned cells stay put on horizontal scroll.
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  .data-grid-cell-pinned-left,
+  .data-grid-cell-pinned-right {
+    position: sticky;
+    z-index: 1;
+    background-color: var(--cui-data-grid-pinned-bg);
+  }
+
+  .data-grid-header .data-grid-cell-pinned-left,
+  .data-grid-header .data-grid-cell-pinned-right {
+    z-index: 3;
+  }
+
+  // Edge cells cast a shadow over the scrolling content. A pseudo-element is
+  // used because the cell's own box-shadow carries the table striping accent.
+  .data-grid-cell-pinned-left-last,
+  .data-grid-cell-pinned-right-first {
+    position: sticky;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: var(--cui-data-grid-pinned-border-width);
+      pointer-events: none;
+      content: "";
+    }
+  }
+
+  .data-grid-cell-pinned-left-last::after {
+    right: 0;
+    background: var(--cui-data-grid-pinned-border-color);
+  }
+
+  .data-grid-cell-pinned-right-first::after {
+    left: 0;
+    background: var(--cui-data-grid-pinned-border-color);
+  }
+
+  .data-grid-resizer {
+    position: absolute;
+    top: 0;
+    right: calc(-.5 * var(--cui-data-grid-resizer-width));
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--cui-data-grid-resizer-width);
+    height: 100%;
+    cursor: col-resize;
+    touch-action: none;
+    user-select: none;
+
+    // Always-visible grip so the resizable edge is discoverable, not just a
+    // bare hover target.
+    &::after {
+      width: 2px;
+      height: var(--cui-data-grid-resizer-grip-height);
+      content: "";
+      background-color: var(--cui-data-grid-resizer-grip-color);
+      transition: background-color .15s ease;
+    }
+
+    &:hover::after,
+    &.data-grid-resizer-active::after {
+      background-color: var(--cui-data-grid-resizer-grip-color-hover);
+    }
+  }
+
+  .data-grid-spacer > td {
+    padding: 0;
+    border: 0;
+  }
+
+  // Spacer rows break `nth-of-type` striping, so striping inside the grid is
+  // driven by the absolute row index (.data-grid-row-odd) instead.
+  .data-grid-viewport > .table-striped > tbody > tr:nth-of-type(odd) > * {
+    --cui-table-color-type: initial;
+    --cui-table-bg-type: initial;
+  }
+
+  .data-grid-viewport > .table-striped > tbody > tr.data-grid-row-odd > * {
+    --cui-table-color-type: var(--cui-table-striped-color);
+    --cui-table-bg-type: var(--cui-table-striped-bg);
+  }
+
+  // The last row closes on the viewport edge (or the pagination border), so it
+  // doesn't need its own separator line.
+  .data-grid-viewport > .table > tbody > tr:last-child > * {
+    border-bottom-width: 0;
+  }
+
+  .data-grid-loading {
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--cui-data-grid-loading-bg);
+  }
+
+  // Shared icon-button tooltip. position: fixed (set in JS) so it escapes the
+  // viewport overflow; theme-inverted like CoreUI's own tooltip.
+  .data-grid-tooltip {
+    position: fixed;
+    z-index: 1080;
+    max-width: 12rem;
+    padding: .25rem .5rem;
+    font-size: .875rem;
+    line-height: 1.4;
+    color: var(--cui-body-bg, #fff);
+    text-align: center;
+    pointer-events: none;
+    background-color: var(--cui-emphasis-color, #000);
+    border-radius: var(--cui-border-radius, .375rem);
+  }
+
+  .data-grid-empty > td {
+    padding: 2rem 1rem;
+    color: var(--cui-secondary-color, #6c757d);
+    text-align: center;
+  }
+
+  .data-grid-pagination {
+    display: flex;
+    // Wrap the page controls, count and page-size select onto multiple rows on
+    // narrow viewports; without this the fixed row overflows and scrolls the page
+    // instead of staying inside the grid.
+    flex-wrap: wrap;
+    gap: var(--cui-data-grid-spacing);
+    align-items: center;
+    min-height: 48px;
+    padding: var(--cui-data-grid-spacing);
+    border-top: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);
+
+    &.data-grid-pagination-top {
+      border-top: 0;
+      border-bottom: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);
+    }
+
+    .pagination {
+      margin-bottom: 0;
+    }
+
+    .data-grid-pagination-info {
+      margin-inline-start: auto;
+      color: var(--cui-secondary-color, #6c757d);
+    }
+
+    .form-select {
+      width: auto;
+    }
+  }
+}

package/src/base-component.d.ts

@@ -0,0 +1,19 @@
+// Hand-written types for the vendored base-component.js (see the provenance header there)
+import Config from './util/config.js'
+
+export default class BaseComponent extends Config {
+  constructor(element: Element | string, config?: unknown)
+
+  _element: HTMLElement
+  _config: any
+
+  dispose(): void
+  _queueCallback(callback: () => void, element: Element, isAnimated?: boolean): void
+
+  static getInstance(element: Element | string | null): any
+  static getOrCreateInstance(element: Element | string, config?: unknown): any
+  static get VERSION(): string
+  static get DATA_KEY(): string
+  static get EVENT_KEY(): string
+  static eventName(name: string): string
+}

package/src/base-component.js

@@ -0,0 +1,90 @@
+// Vendored from https://github.com/coreui/coreui-pro/blob/bc4daf1cd79d527bf665d615c0a31f53ab0c3d4e/js/src/base-component.js — sync manually
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI base-component.js
+ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
+ *
+ * This component is a modified version of the Bootstrap's base-component.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import Data from './dom/data.js'
+import EventHandler from './dom/event-handler.js'
+import Config from './util/config.js'
+import { executeAfterTransition, getElement } from './util/index.js'
+
+/**
+ * Constants
+ */
+
+const VERSION = '0.1.0'
+
+/**
+ * Class definition
+ */
+
+class BaseComponent extends Config {
+  constructor(element, config) {
+    super()
+
+    element = getElement(element)
+    if (!element) {
+      return
+    }
+
+    this._element = element
+    this._config = this._getConfig(config)
+
+    Data.set(this._element, this.constructor.DATA_KEY, this)
+  }
+
+  // Public
+  dispose() {
+    Data.remove(this._element, this.constructor.DATA_KEY)
+    EventHandler.off(this._element, this.constructor.EVENT_KEY)
+
+    for (const propertyName of Object.getOwnPropertyNames(this)) {
+      this[propertyName] = null
+    }
+  }
+
+  // Private
+  _queueCallback(callback, element, isAnimated = true) {
+    executeAfterTransition(callback, element, isAnimated)
+  }
+
+  _getConfig(config) {
+    config = this._mergeConfigObj(config, this._element)
+    config = this._configAfterMerge(config)
+    this._typeCheckConfig(config)
+    return config
+  }
+
+  // Static
+  static getInstance(element) {
+    return Data.get(getElement(element), this.DATA_KEY)
+  }
+
+  static getOrCreateInstance(element, config = {}) {
+    return this.getInstance(element) || new this(element, typeof config === 'object' ? config : null)
+  }
+
+  static get VERSION() {
+    return VERSION
+  }
+
+  static get DATA_KEY() {
+    return `coreui.${this.NAME}`
+  }
+
+  static get EVENT_KEY() {
+    return `.${this.DATA_KEY}`
+  }
+
+  static eventName(name) {
+    return `${name}${this.EVENT_KEY}`
+  }
+}
+
+export default BaseComponent