@guiexpert/table 1.1.94 → 1.1.96

package/README.md

@@ -42,6 +42,18 @@ This is the UI-agnostic table component for your next web app. 😊
   = a multi-row header with collapsible groups) × aggregated values, total column and total row, filter before the
   aggregation, pivot again at runtime (`PivotFactory.createTableModel({ rows, rowFields, columnFields, values })`,
   `tableApi.setPivotConfig()`, engine `pivotRows()`) – since 1.1.94
+- Calculated columns (`ColumnDef.valueGetter` – sorting, filter via `tableApi.getRowValue()`, copy, Excel, totals and
+  row grouping use the computed value), „Show values as“ (`showValuesAs`: share of the column / row / grand / parent
+  total, running total, difference, rank – also per pivot value) and formulas (`formula: "[price] * [quantity] * 1.19"`,
+  own parser and interpreter without `eval`, functions like `ROUND`, `IF`, `SUM([x])`, error values `#DIV/0!`,
+  `tableApi.setColumnFormula()`) – since 1.1.95
+- Row drag: drag handle per row (`ColumnDef.rowDrag` or `rowDrag: true` in the factory), mouse, touch and pen, ghost,
+  drop marker, auto-scroll, Escape, keyboard alternative Ctrl+Alt+↑/↓, several selected rows, trees; the table moves
+  the rows (managed) or only reports the drop (`rowDragOptions: { managed: false }`, `onRowDragEnd`) – since 1.1.95
+- Fill handle and batch edit: a square at the corner of the selected range copies values or continues series (numbers,
+  dates, `Item 1` → `Item 2`; ⌥/Alt switches, Ctrl/⌘+D, Ctrl/⌘+R), batch edit collects changes (`ge-table-cell-pending`)
+  until `tableApi.commitBatchEdit()` / `cancelBatchEdit()`, `ColumnDef.validate`, one `onModelChanged` per change with
+  old and new values (`tableOptions.fillHandle`, `tableOptions.batchEdit`) – since 1.1.96
 - Custom Filtering
 - In-place Cell Editing
 - Userdefined Key and Mouse Events

package/css/main.css

@@ -1,3 +1,10 @@
+/* Calculated columns, „Show values as“, formulas (since 1.1.95) */
+
+/* a cell with a formula error (#DIV/0!, #NAME? …): the message is the tooltip */
+.ge-table-col-div.ge-table-cell-error {
+  color: var(--ge-table-cell-error-color);
+  font-variant-numeric: tabular-nums;
+}
 /* Defaults for the host element. :where() = zero specificity, so the app's own rules always win –
    e.g. ".table-div { height: 500px }" no longer depends on the order in which the stylesheets are bundled. */
 :where(.ge-table) {
@@ -446,6 +453,9 @@
   --ge-table-pivot-total-font-weight: 600;
   --ge-table-pivot-empty-text: #6b7280;
 
+  /* Formulas: error values #DIV/0!, #NAME? … (since 1.1.95) */
+  --ge-table-cell-error-color: #b91c1c;
+
   /* Overlays "Loading…" / "No rows" (since 1.1.92) */
   --ge-table-overlay-bg: rgba(255, 255, 255, 0.7);
   --ge-table-overlay-content-bg: #fff;
@@ -457,6 +467,26 @@
   /* Row numbers (since 1.1.93): like the header, muted digits (#555 on the header gray ≈ 6.9 : 1) */
   --ge-table-row-number-bg: var(--ge-table-header-west-bg);
   --ge-table-row-number-color: #555;
+
+  /* Row drag (since 1.1.95): handle ≥ 3 : 1 against white (WCAG 1.4.11), marker, ghost */
+  --ge-table-row-drag-handle-color: #6b7280;
+  --ge-table-row-drop-indicator-color: #1a73e8;
+  --ge-table-row-drop-inside-bg: rgba(26, 115, 232, 0.12);
+  --ge-table-row-drag-ghost-bg: #fff;
+  --ge-table-row-drag-ghost-text: #1f2937;
+  --ge-table-row-drag-ghost-border: #1a73e8;
+  --ge-table-row-dragging-opacity: 0.4;
+
+  /* Fill handle and batch edit (since 1.1.96): handle and preview like the selection, pending = yellow, invalid = red */
+  --ge-table-fill-handle-color: #0a6ebd;
+  --ge-table-fill-handle-border: #fff;
+  --ge-table-fill-preview-border: #0a6ebd;
+  --ge-table-cell-pending-bg: #fff3c4;
+  --ge-table-cell-pending-text: #3d2e00;
+  --ge-table-cell-pending-marker: #c27c00;
+  --ge-table-cell-invalid-bg: #fde2e1;
+  --ge-table-cell-invalid-text: #8a1c14;
+  --ge-table-cell-invalid-border: #d93025;
 }
 
 
@@ -544,6 +574,9 @@ html[data-theme="dark"] {
   --ge-table-pivot-total-font-weight: 600;
   --ge-table-pivot-empty-text: #9ca3af;
 
+  /* Formulas: error values #DIV/0!, #NAME? … (since 1.1.95) */
+  --ge-table-cell-error-color: #f87171;
+
   /* Overlays "Loading…" / "No rows" (since 1.1.92) */
   --ge-table-overlay-bg: rgba(17, 24, 39, 0.7); /* --ge-table-bg of the dark theme */
   --ge-table-overlay-content-bg: #1f2937;
@@ -555,6 +588,84 @@ html[data-theme="dark"] {
   /* Row numbers (since 1.1.93) */
   --ge-table-row-number-bg: var(--ge-table-header-west-bg);
   --ge-table-row-number-color: #aaa;
+
+  /* Row drag (since 1.1.95) */
+  --ge-table-row-drag-handle-color: #9ca3af;
+  --ge-table-row-drop-indicator-color: #8ab4f8;
+  --ge-table-row-drop-inside-bg: rgba(138, 180, 248, 0.16);
+  --ge-table-row-drag-ghost-bg: #1f2937;
+  --ge-table-row-drag-ghost-text: #f3f4f6;
+  --ge-table-row-drag-ghost-border: #8ab4f8;
+  --ge-table-row-dragging-opacity: 0.4;
+
+  /* Fill handle and batch edit (since 1.1.96) */
+  --ge-table-fill-handle-color: #8ab4f8;
+  --ge-table-fill-handle-border: #1e1e1e;
+  --ge-table-fill-preview-border: #8ab4f8;
+  --ge-table-cell-pending-bg: #4a3b0b;
+  --ge-table-cell-pending-text: #fde68a;
+  --ge-table-cell-pending-marker: #f5b82e;
+  --ge-table-cell-invalid-bg: #5c1d1a;
+  --ge-table-cell-invalid-text: #fecaca;
+  --ge-table-cell-invalid-border: #f28b82;
+}
+/* Fill handle and batch edit (since 1.1.96) – colors in table-color-vars.css (--ge-table-fill-*, --ge-table-cell-*) */
+
+/* the square at the bottom right corner of the selected range; its center sits on the corner */
+.ge-table-fill-handle {
+  position: absolute;
+  z-index: 9000; /* above the cells, below the overlay (10000) */
+  width: 7px;
+  height: 7px;
+  margin: -4px 0 0 -4px;
+  box-sizing: border-box;
+  background: var(--ge-table-fill-handle-color);
+  border: 1px solid var(--ge-table-fill-handle-border);
+  cursor: crosshair;
+  touch-action: none; /* touch drags the handle instead of scrolling */
+}
+
+/* a bigger target for touch and pen (the visible square stays small) */
+.ge-table-fill-handle::after {
+  content: "";
+  position: absolute;
+  inset: -8px;
+}
+
+/* the cells a fill will cover */
+.ge-table-fill-preview {
+  position: absolute;
+  z-index: 8999;
+  box-sizing: border-box;
+  border: 2px dashed var(--ge-table-fill-preview-border);
+  pointer-events: none;
+}
+
+.ge-table-fill-active,
+.ge-table-fill-active * {
+  cursor: crosshair !important;
+  user-select: none;
+}
+
+/* batch edit: a value that is not saved yet – a colored cell and a small corner mark (not color only, WCAG 1.4.1) */
+.ge-table-col-div.ge-table-cell-pending {
+  background-image: linear-gradient(225deg, var(--ge-table-cell-pending-marker) 6px, transparent 6px);
+}
+
+/* the color only while the cell is not selected – a selected cell keeps the selection color (and the corner mark) */
+.ge-table-col-div.ge-table-cell-pending:not([class*="-selected-range"]) {
+  background-color: var(--ge-table-cell-pending-bg);
+  color: var(--ge-table-cell-pending-text);
+}
+
+/* an invalid value (ColumnDef.validate): the message is the tooltip */
+.ge-table-col-div.ge-table-cell-invalid:not([class*="-selected-range"]) {
+  background-color: var(--ge-table-cell-invalid-bg);
+  color: var(--ge-table-cell-invalid-text);
+}
+
+.ge-table-col-div.ge-table-cell-invalid {
+  box-shadow: inset 0 0 0 2px var(--ge-table-cell-invalid-border);
 }
 /* Pivot tables (PivotFactory / AreaModelPivot, since 1.1.94) */
 
@@ -598,6 +709,87 @@ html[data-theme="dark"] {
 .ge-table-pivot-header.ge-table-pivot-header-column {
   text-align: end;
 }
+/* Row drag (since 1.1.95): handle, ghost, drop marker – colors in table-color-vars.css (--ge-table-row-drag-*) */
+
+/* the cell with the handle: room for the grip at the start (a tree cell has its indent already) */
+.ge-table-row-drag-cell:not(.ge-table-col-tree) {
+  box-sizing: border-box;
+  padding-inline-start: 16px;
+}
+
+/* the grip: 2 × 3 dots, drawn with CSS (no text, no image); touch-action: none = touch drags instead of scrolling */
+.ge-table-row-drag-handle {
+  position: absolute;
+  inset-inline-start: 2px;
+  top: 50%;
+  width: 12px;
+  height: 18px;
+  margin-top: -9px;
+  cursor: grab;
+  touch-action: none;
+  border-radius: 3px;
+  background-image: radial-gradient(circle, var(--ge-table-row-drag-handle-color) 1.5px, transparent 1.6px);
+  background-size: 6px 6px;
+  background-position: 0 0;
+}
+
+.ge-table-row-drag-handle:hover {
+  background-color: rgba(128, 128, 128, 0.15);
+}
+
+/* managed drag while the table is sorted or filtered */
+.ge-table-row-drag-handle.ge-table-row-drag-handle-disabled {
+  cursor: not-allowed;
+  opacity: 0.35;
+}
+
+/* the dragged rows while the drag runs */
+.ge-table-row-dragging {
+  opacity: var(--ge-table-row-dragging-opacity);
+}
+
+.ge-table-row-drag-active,
+.ge-table-row-drag-active * {
+  cursor: grabbing !important;
+}
+
+.ge-table-row-drag-active.ge-table-row-drag-invalid,
+.ge-table-row-drag-active.ge-table-row-drag-invalid * {
+  cursor: no-drop !important;
+}
+
+.ge-table-row-drag-ghost {
+  position: absolute;
+  z-index: 10001; /* above the overlay (10000) */
+  pointer-events: none;
+  max-width: 280px;
+  padding: 4px 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 0.9em;
+  line-height: 1.5;
+  color: var(--ge-table-row-drag-ghost-text);
+  background: var(--ge-table-row-drag-ghost-bg);
+  border: 1px solid var(--ge-table-row-drag-ghost-border);
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.ge-table-row-drop-indicator {
+  position: absolute;
+  display: none;
+  z-index: 10000;
+  pointer-events: none;
+  background: var(--ge-table-row-drop-indicator-color);
+}
+
+/* tree: drop into the row (becomes its child) */
+.ge-table-row-drop-indicator.ge-table-row-drop-indicator-inside {
+  box-sizing: border-box;
+  background: var(--ge-table-row-drop-inside-bg);
+  border: 2px solid var(--ge-table-row-drop-indicator-color);
+}
 /* Row grouping (RowGroupFactory / AreaModelRowGroups, since 1.1.94) */
 
 /* every cell of a group row */

package/css/table-calc.css

@@ -0,0 +1,7 @@
+/* Calculated columns, „Show values as“, formulas (since 1.1.95) */
+
+/* a cell with a formula error (#DIV/0!, #NAME? …): the message is the tooltip */
+.ge-table-col-div.ge-table-cell-error {
+  color: var(--ge-table-cell-error-color);
+  font-variant-numeric: tabular-nums;
+}

package/css/table-color-vars.css

@@ -96,6 +96,9 @@ html, html[data-theme="light"] {
   --ge-table-pivot-total-font-weight: 600;
   --ge-table-pivot-empty-text: #6b7280;
 
+  /* Formulas: error values #DIV/0!, #NAME? … (since 1.1.95) */
+  --ge-table-cell-error-color: #b91c1c;
+
   /* Overlays "Loading…" / "No rows" (since 1.1.92) */
   --ge-table-overlay-bg: rgba(255, 255, 255, 0.7);
   --ge-table-overlay-content-bg: #fff;
@@ -107,6 +110,26 @@ html, html[data-theme="light"] {
   /* Row numbers (since 1.1.93): like the header, muted digits (#555 on the header gray ≈ 6.9 : 1) */
   --ge-table-row-number-bg: var(--ge-table-header-west-bg);
   --ge-table-row-number-color: #555;
+
+  /* Row drag (since 1.1.95): handle ≥ 3 : 1 against white (WCAG 1.4.11), marker, ghost */
+  --ge-table-row-drag-handle-color: #6b7280;
+  --ge-table-row-drop-indicator-color: #1a73e8;
+  --ge-table-row-drop-inside-bg: rgba(26, 115, 232, 0.12);
+  --ge-table-row-drag-ghost-bg: #fff;
+  --ge-table-row-drag-ghost-text: #1f2937;
+  --ge-table-row-drag-ghost-border: #1a73e8;
+  --ge-table-row-dragging-opacity: 0.4;
+
+  /* Fill handle and batch edit (since 1.1.96): handle and preview like the selection, pending = yellow, invalid = red */
+  --ge-table-fill-handle-color: #0a6ebd;
+  --ge-table-fill-handle-border: #fff;
+  --ge-table-fill-preview-border: #0a6ebd;
+  --ge-table-cell-pending-bg: #fff3c4;
+  --ge-table-cell-pending-text: #3d2e00;
+  --ge-table-cell-pending-marker: #c27c00;
+  --ge-table-cell-invalid-bg: #fde2e1;
+  --ge-table-cell-invalid-text: #8a1c14;
+  --ge-table-cell-invalid-border: #d93025;
 }
 
 
@@ -194,6 +217,9 @@ html[data-theme="dark"] {
   --ge-table-pivot-total-font-weight: 600;
   --ge-table-pivot-empty-text: #9ca3af;
 
+  /* Formulas: error values #DIV/0!, #NAME? … (since 1.1.95) */
+  --ge-table-cell-error-color: #f87171;
+
   /* Overlays "Loading…" / "No rows" (since 1.1.92) */
   --ge-table-overlay-bg: rgba(17, 24, 39, 0.7); /* --ge-table-bg of the dark theme */
   --ge-table-overlay-content-bg: #1f2937;
@@ -205,4 +231,24 @@ html[data-theme="dark"] {
   /* Row numbers (since 1.1.93) */
   --ge-table-row-number-bg: var(--ge-table-header-west-bg);
   --ge-table-row-number-color: #aaa;
+
+  /* Row drag (since 1.1.95) */
+  --ge-table-row-drag-handle-color: #9ca3af;
+  --ge-table-row-drop-indicator-color: #8ab4f8;
+  --ge-table-row-drop-inside-bg: rgba(138, 180, 248, 0.16);
+  --ge-table-row-drag-ghost-bg: #1f2937;
+  --ge-table-row-drag-ghost-text: #f3f4f6;
+  --ge-table-row-drag-ghost-border: #8ab4f8;
+  --ge-table-row-dragging-opacity: 0.4;
+
+  /* Fill handle and batch edit (since 1.1.96) */
+  --ge-table-fill-handle-color: #8ab4f8;
+  --ge-table-fill-handle-border: #1e1e1e;
+  --ge-table-fill-preview-border: #8ab4f8;
+  --ge-table-cell-pending-bg: #4a3b0b;
+  --ge-table-cell-pending-text: #fde68a;
+  --ge-table-cell-pending-marker: #f5b82e;
+  --ge-table-cell-invalid-bg: #5c1d1a;
+  --ge-table-cell-invalid-text: #fecaca;
+  --ge-table-cell-invalid-border: #f28b82;
 }

package/css/table-fill-batch.css

@@ -0,0 +1,58 @@
+/* Fill handle and batch edit (since 1.1.96) – colors in table-color-vars.css (--ge-table-fill-*, --ge-table-cell-*) */
+
+/* the square at the bottom right corner of the selected range; its center sits on the corner */
+.ge-table-fill-handle {
+  position: absolute;
+  z-index: 9000; /* above the cells, below the overlay (10000) */
+  width: 7px;
+  height: 7px;
+  margin: -4px 0 0 -4px;
+  box-sizing: border-box;
+  background: var(--ge-table-fill-handle-color);
+  border: 1px solid var(--ge-table-fill-handle-border);
+  cursor: crosshair;
+  touch-action: none; /* touch drags the handle instead of scrolling */
+}
+
+/* a bigger target for touch and pen (the visible square stays small) */
+.ge-table-fill-handle::after {
+  content: "";
+  position: absolute;
+  inset: -8px;
+}
+
+/* the cells a fill will cover */
+.ge-table-fill-preview {
+  position: absolute;
+  z-index: 8999;
+  box-sizing: border-box;
+  border: 2px dashed var(--ge-table-fill-preview-border);
+  pointer-events: none;
+}
+
+.ge-table-fill-active,
+.ge-table-fill-active * {
+  cursor: crosshair !important;
+  user-select: none;
+}
+
+/* batch edit: a value that is not saved yet – a colored cell and a small corner mark (not color only, WCAG 1.4.1) */
+.ge-table-col-div.ge-table-cell-pending {
+  background-image: linear-gradient(225deg, var(--ge-table-cell-pending-marker) 6px, transparent 6px);
+}
+
+/* the color only while the cell is not selected – a selected cell keeps the selection color (and the corner mark) */
+.ge-table-col-div.ge-table-cell-pending:not([class*="-selected-range"]) {
+  background-color: var(--ge-table-cell-pending-bg);
+  color: var(--ge-table-cell-pending-text);
+}
+
+/* an invalid value (ColumnDef.validate): the message is the tooltip */
+.ge-table-col-div.ge-table-cell-invalid:not([class*="-selected-range"]) {
+  background-color: var(--ge-table-cell-invalid-bg);
+  color: var(--ge-table-cell-invalid-text);
+}
+
+.ge-table-col-div.ge-table-cell-invalid {
+  box-shadow: inset 0 0 0 2px var(--ge-table-cell-invalid-border);
+}

package/css/table-row-drag.css

@@ -0,0 +1,81 @@
+/* Row drag (since 1.1.95): handle, ghost, drop marker – colors in table-color-vars.css (--ge-table-row-drag-*) */
+
+/* the cell with the handle: room for the grip at the start (a tree cell has its indent already) */
+.ge-table-row-drag-cell:not(.ge-table-col-tree) {
+  box-sizing: border-box;
+  padding-inline-start: 16px;
+}
+
+/* the grip: 2 × 3 dots, drawn with CSS (no text, no image); touch-action: none = touch drags instead of scrolling */
+.ge-table-row-drag-handle {
+  position: absolute;
+  inset-inline-start: 2px;
+  top: 50%;
+  width: 12px;
+  height: 18px;
+  margin-top: -9px;
+  cursor: grab;
+  touch-action: none;
+  border-radius: 3px;
+  background-image: radial-gradient(circle, var(--ge-table-row-drag-handle-color) 1.5px, transparent 1.6px);
+  background-size: 6px 6px;
+  background-position: 0 0;
+}
+
+.ge-table-row-drag-handle:hover {
+  background-color: rgba(128, 128, 128, 0.15);
+}
+
+/* managed drag while the table is sorted or filtered */
+.ge-table-row-drag-handle.ge-table-row-drag-handle-disabled {
+  cursor: not-allowed;
+  opacity: 0.35;
+}
+
+/* the dragged rows while the drag runs */
+.ge-table-row-dragging {
+  opacity: var(--ge-table-row-dragging-opacity);
+}
+
+.ge-table-row-drag-active,
+.ge-table-row-drag-active * {
+  cursor: grabbing !important;
+}
+
+.ge-table-row-drag-active.ge-table-row-drag-invalid,
+.ge-table-row-drag-active.ge-table-row-drag-invalid * {
+  cursor: no-drop !important;
+}
+
+.ge-table-row-drag-ghost {
+  position: absolute;
+  z-index: 10001; /* above the overlay (10000) */
+  pointer-events: none;
+  max-width: 280px;
+  padding: 4px 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 0.9em;
+  line-height: 1.5;
+  color: var(--ge-table-row-drag-ghost-text);
+  background: var(--ge-table-row-drag-ghost-bg);
+  border: 1px solid var(--ge-table-row-drag-ghost-border);
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.ge-table-row-drop-indicator {
+  position: absolute;
+  display: none;
+  z-index: 10000;
+  pointer-events: none;
+  background: var(--ge-table-row-drop-indicator-color);
+}
+
+/* tree: drop into the row (becomes its child) */
+.ge-table-row-drop-indicator.ge-table-row-drop-indicator-inside {
+  box-sizing: border-box;
+  background: var(--ge-table-row-drop-inside-bg);
+  border: 2px solid var(--ge-table-row-drop-indicator-color);
+}